Qwen Qwen3.8 Flash – Non Profit Charity

via Alibaba · Generated

  • AIMAC Debt 0.00
  • Cost $0.02
  • Total Violations 0
  • HTML Size 91 KB
  • Em Dashes 1

Screenshot

View Qwen Qwen3.8 Flash Non Profit Charity page View Live Page

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Northlight Community Trust | Where Generosity Becomes Lasting Neighborhood Strength</title>
  <meta name="description" content="Northlight Community Trust is a nonprofit organization strengthening housing stability, food security, youth opportunity, and workforce readiness through community outreach, capacity building, and accountable stewardship." />
  <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=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap" rel="stylesheet" />
  <style>
    :root {
      --teal-950: #052722;
      --teal-900: #07362f;
      --teal-800: #0b4a40;
      --teal-700: #116b5c;
      --teal-50: #eaf6f2;
      --gold: #f2b33d;
      --gold-soft: #ffe1a1;
      --rose: #b5425c;
      --ink: #121d1b;
      --muted: #586664;
      --paper: #f8f5ef;
      --white: #fffdf9;
      --line: #d9e2de;
      --shadow-sm: 0 10px 24px rgba(7, 54, 47, 0.08);
      --shadow-md: 0 18px 42px rgba(7, 54, 47, 0.12);
      --shadow-lg: 0 30px 70px rgba(7, 54, 47, 0.16);
      --radius-sm: 14px;
      --radius-md: 22px;
      --radius-lg: 32px;
      --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-head: "Poppins", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    *, *::before, *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 110px;
    }

    body {
      margin: 0;
      font-family: var(--font-body);
      color: var(--ink);
      background: var(--paper);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    img {
      display: block;
      max-width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    h1, h2, h3, h4 {
      font-family: var(--font-head);
      color: var(--teal-950);
      line-height: 1.08;
      margin: 0;
    }

    h1 {
      font-size: clamp(2.6rem, 5.5vw, 4.55rem);
      font-weight: 800;
      letter-spacing: -0.045em;
    }

    h2 {
      font-size: clamp(2rem, 4vw, 3.15rem);
      font-weight: 800;
      letter-spacing: -0.035em;
    }

    h3 {
      font-size: clamp(1.3rem, 2.2vw, 1.75rem);
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    p {
      margin: 0 0 1rem;
      color: var(--muted);
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .skip-link {
      position: absolute;
      left: -9999px;
      top: 1rem;
      z-index: 1000;
      background: var(--teal-800);
      color: #fff;
      padding: 0.9rem 1.25rem;
      border-radius: 999px;
      font-weight: 700;
    }

    .skip-link:focus {
      left: 1rem;
    }

    .container {
      width: min(1200px, calc(100% - 2.5rem));
      margin-inline: auto;
    }

    .section {
      padding: 5.5rem 0;
    }

    .section.alt {
      background: linear-gradient(180deg, #f7fcfa, var(--teal-50));
    }

    .section.warm {
      background: linear-gradient(180deg, #fffdf8, #faf4e8);
    }

    .section-head {
      max-width: 860px;
      margin: 0 auto 2.75rem;
      text-align: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.95rem;
      padding: 0.42rem 0.9rem;
      border-radius: 999px;
      background: rgba(17, 107, 92, 0.08);
      color: var(--teal-800);
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .lead {
      font-size: 1.08rem;
      max-width: 720px;
      margin-inline: auto;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      min-height: 52px;
      padding: 0.95rem 1.4rem;
      border: 2px solid transparent;
      border-radius: 999px;
      font-family: var(--font-head);
      font-size: 0.95rem;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn-primary {
      background: var(--gold);
      color: #291a03;
      box-shadow: 0 14px 28px rgba(242, 179, 61, 0.26);
    }

    .btn-primary:hover {
      background: #ffd274;
    }

    .btn-secondary {
      background: var(--white);
      color: var(--teal-800);
      border-color: rgba(11, 74, 64, 0.3);
    }

    .btn-secondary:hover {
      background: var(--teal-50);
    }

    .btn-light {
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(10px);
    }

    .btn-light:hover {
      background: rgba(255, 255, 255, 0.18);
    }

    .btn-dark {
      background: var(--teal-800);
      color: #fff;
    }

    .btn-dark:hover {
      background: var(--teal-900);
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-weight: 800;
      color: var(--teal-800);
    }

    .text-link:hover {
      color: var(--rose);
    }

    /* Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(248, 245, 239, 0.86);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid transparent;
      transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .site-header.scrolled {
      border-bottom-color: var(--line);
      box-shadow: 0 12px 32px rgba(7, 54, 47, 0.08);
      background: rgba(255, 253, 249, 0.92);
    }

    .header-inner {
      position: relative;
      min-height: 92px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      color: var(--teal-950);
    }

    .brand img {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      box-shadow: var(--shadow-sm);
    }

    .brand-text {
      display: block;
    }

    .brand-name {
      display: block;
      font-family: var(--font-head);
      font-size: 1.06rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .brand-tagline {
      display: block;
      max-width: 260px;
      margin-top: 0.2rem;
      font-size: 0.76rem;
      font-weight: 600;
      color: var(--teal-700);
    }

    .site-nav {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    .site-nav ul {
      display: flex;
      align-items: center;
      gap: 0.15rem;
    }

    .site-nav a {
      display: inline-flex;
      align-items: center;
      padding: 0.85rem 0.9rem;
      border-radius: 999px;
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--ink);
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .site-nav ul a:hover {
      background: var(--teal-50);
      color: var(--teal-800);
    }

    .donate-nav {
      background: var(--teal-800);
      color: #fff !important;
      margin-left: 0.35rem;
      box-shadow: var(--shadow-sm);
    }

    .donate-nav:hover {
      background: var(--teal-900) !important;
      color: #fff !important;
    }

    .nav-toggle {
      display: none;
      width: 48px;
      height: 48px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--white);
      cursor: pointer;
      place-items: center;
    }

    .nav-toggle span {
      position: relative;
      display: block;
      width: 20px;
      height: 2px;
      border-radius: 2px;
      background: var(--teal-950);
      transition: background-color 0.2s ease;
    }

    .nav-toggle span::before,
    .nav-toggle span::after {
      content: "";
      position: absolute;
      left: 0;
      width: 20px;
      height: 2px;
      border-radius: 2px;
      background: var(--teal-950);
      transition: transform 0.25s ease, top 0.25s ease;
    }

    .nav-toggle span::before {
      top: -7px;
    }

    .nav-toggle span::after {
      top: 7px;
    }

    .nav-toggle[aria-expanded="true"] span {
      background: transparent;
    }

    .nav-toggle[aria-expanded="true"] span::before {
      top: 0;
      transform: rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] span::after {
      top: 0;
      transform: rotate(-45deg);
    }

    /* Hero */
    .hero {
      position: relative;
      color: #fff;
      background:
        radial-gradient(circle at 78% 16%, rgba(242, 179, 61, 0.16), transparent 27%),
        radial-gradient(circle at 15% 85%, rgba(17, 107, 92, 0.36), transparent 32%),
        linear-gradient(135deg, #06322d 0%, #0b4a40 52%, #137363 100%);
      padding: 5rem 0 6rem;
      overflow: hidden;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
      background-size: 24px 24px;
      opacity: 0.12;
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 3rem;
      align-items: center;
    }

    .hero h1 {
      color: #fff;
      max-width: 720px;
    }

    .hero .lead {
      color: rgba(255, 255, 255, 0.84);
      max-width: 670px;
      margin-bottom: 1.5rem;
    }

    .hero-copy p {
      color: rgba(255, 255, 255, 0.78);
      max-width: 670px;
      font-size: 1.04rem;
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 1.75rem;
    }

    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
      margin-top: 1.8rem;
    }

    .trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.6rem 0.85rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.14);
      color: rgba(255, 255, 255, 0.86);
      font-size: 0.85rem;
      font-weight: 700;
    }

    .trust-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--gold);
    }

    .hero-media {
      position: relative;
      min-height: 560px;
      border-radius: 34px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      border: 1px solid rgba(255, 255, 255, 0.16);
    }

    .hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.02);
      transition: transform 0.8s ease;
    }

    .hero-media:hover img {
      transform: scale(1.05);
    }

    .hero-card {
      position: absolute;
      left: 24px;
      bottom: 24px;
      max-width: 310px;
      padding: 1.1rem 1.15rem;
      border-radius: 24px;
      background: rgba(255, 253, 249, 0.94);
      color: var(--teal-950);
      box-shadow: var(--shadow-md);
      border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .hero-card strong {
      display: block;
      font-family: var(--font-head);
      font-size: 1.15rem;
      margin-bottom: 0.25rem;
    }

    .hero-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.93rem;
    }

    /* Stats */
    .stats {
      background: linear-gradient(135deg, var(--teal-900), var(--teal-950));
      color: #fff;
    }

    .stats-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      padding: 2.5rem 0;
      text-align: center;
    }

    .stat {
      padding: 1rem;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .stat-value {
      display: block;
      font-family: var(--font-head);
      font-size: clamp(2rem, 4vw, 3.3rem);
      line-height: 1;
      color: var(--gold-soft);
      font-weight: 800;
      letter-spacing: -0.04em;
    }

    .stat-label {
      display: block;
      margin-top: 0.75rem;
      color: rgba(255, 255, 255, 0.75);
      font-size: 0.92rem;
      font-weight: 600;
    }

    /* Mission */
    .split {
      display: grid;
      grid-template-columns: 0.92fr 1.08fr;
      gap: 3rem;
      align-items: center;
    }

    .media-stack {
      position: relative;
    }

    .media-stack img {
      width: 100%;
      border-radius: 34px;
      box-shadow: var(--shadow-md);
      object-fit: cover;
      min-height: 520px;
    }

    .mission-note {
      position: absolute;
      right: -22px;
      bottom: 34px;
      width: min(280px, 72%);
      padding: 1.2rem;
      border-radius: 22px;
      background: #fff;
      box-shadow: var(--shadow-md);
      border: 1px solid var(--line);
    }

    .mission-note strong {
      display: block;
      margin-bottom: 0.45rem;
      color: var(--teal-900);
      font-family: var(--font-head);
    }

    .mission-note p {
      margin: 0;
      font-size: 0.95rem;
    }

    .section-copy h2 {
      margin-bottom: 1rem;
    }

    .section-copy p {
      font-size: 1.02rem;
    }

    .pull-quote {
      margin: 1.6rem 0;
      padding: 1.25rem 1.45rem;
      border-left: 7px solid var(--gold);
      border-radius: 20px;
      background: rgba(17, 107, 92, 0.08);
      color: var(--teal-900);
      font-family: var(--font-head);
      font-weight: 600;
      line-height: 1.55;
    }

    .action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.85rem;
      margin-top: 1.8rem;
    }

    /* Cards and grids */
    .program-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }

    .program-card,
    .event-card,
    .news-card,
    .quote-card,
    .sidebar-card,
    .contact-info-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }

    .program-card {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .program-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-md);
      border-color: rgba(17, 107, 92, 0.25);
    }

    .program-media {
      height: 195px;
      overflow: hidden;
    }

    .program-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .program-body {
      padding: 1.3rem;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      flex: 1;
    }

    .program-body p {
      margin: 0;
      font-size: 0.96rem;
    }

    .metric {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      color: var(--teal-700);
      font-size: 0.85rem;
      font-weight: 800;
    }

    /* Impact calculator */
    .impact-grid {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 2.75rem;
      align-items: start;
    }

    .impact-copy ul {
      margin-top: 1.4rem;
      display: grid;
      gap: 0.9rem;
    }

    .impact-copy li {
      position: relative;
      padding-left: 2.2rem;
      color: var(--teal-900);
      font-weight: 650;
    }

    .impact-copy li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      width: 1.55rem;
      height: 1.55rem;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--gold);
      color: #2a1b03;
      font-size: 0.8rem;
      font-weight: 900;
    }

    .calc-panel {
      padding: 1.8rem;
      border-radius: 34px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
    }

    .calc-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .calc-panel-head p {
      margin: 0.35rem 0 0;
      font-size: 0.95rem;
    }

    .control {
      margin-bottom: 1.5rem;
    }

    .control label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.6rem;
      font-weight: 800;
      color: var(--teal-950);
      font-family: var(--font-head);
    }

    .control label span {
      color: var(--teal-700);
      font-size: 0.88rem;
    }

    .amount-inputs {
      display: grid;
      grid-template-columns: 1fr 150px;
      gap: 0.85rem;
      align-items: center;
    }

    input[type="range"] {
      width: 100%;
      height: 12px;
      appearance: none;
      -webkit-appearance: none;
      border-radius: 999px;
      background: rgba(17, 107, 92, 0.14);
      outline: none;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 26px;
      height: 26px;
      border: 5px solid #fff;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 8px 18px rgba(242, 179, 61, 0.35);
      cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border: 5px solid #fff;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 8px 18px rgba(242, 179, 61, 0.35);
      cursor: pointer;
    }

    .calc-panel input[type="number"],
    .calc-panel select {
      width: 100%;
      min-height: 52px;
      padding: 0.95rem 1rem;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      font: inherit;
      color: var(--ink);
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .calc-panel input[type="number"]:focus,
    .calc-panel select:focus {
      border-color: var(--teal-700);
      box-shadow: 0 0 0 4px rgba(17, 107, 92, 0.1);
    }

    .outcome-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      margin: 1.6rem 0;
    }

    .outcome {
      padding: 1.05rem;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(17, 107, 92, 0.07), rgba(242, 179, 61, 0.05));
      border: 1px solid rgba(17, 107, 92, 0.1);
    }

    .outcome strong {
      display: block;
      font-family: var(--font-head);
      font-size: 1.65rem;
      color: var(--teal-900);
      letter-spacing: -0.04em;
      line-height: 1;
      margin-bottom: 0.4rem;
    }

    .outcome span {
      color: var(--muted);
      font-size: 0.88rem;
      font-weight: 700;
    }

    .calc-summary {
      margin-top: 1rem;
      padding: 1rem 1.1rem;
      border-radius: 18px;
      background: var(--teal-50);
      color: var(--teal-900);
      font-weight: 600;
      font-size: 0.96rem;
      border: 1px solid rgba(17, 107, 92, 0.12);
    }

    .calc-note {
      margin-top: 1rem;
      font-size: 0.86rem;
      color: var(--muted);
    }

    /* Stories + sidebar */
    .layout-grid {
      display: grid;
      grid-template-columns: 1.55fr 0.45fr;
      gap: 2rem;
      align-items: start;
    }

    .featured-story {
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      gap: 1.75rem;
      align-items: center;
      padding: 1.2rem;
      border-radius: 34px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
      margin-bottom: 1.5rem;
    }

    .featured-story img {
      width: 100%;
      min-height: 360px;
      border-radius: 24px;
      object-fit: cover;
    }

    .featured-story h3 {
      margin-bottom: 0.8rem;
    }

    .featured-story p:last-of-type {
      margin-bottom: 1.3rem;
    }

    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .quote-card {
      padding: 1.45rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .quote-card blockquote {
      margin: 0 0 1.25rem;
      font-style: italic;
      color: var(--teal-950);
      font-size: 1rem;
      line-height: 1.68;
    }

    .quote-footer {
      display: flex;
      align-items: center;
      gap: 0.9rem;
    }

    .quote-footer img {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--teal-50);
    }

    .quote-footer strong {
      display: block;
      color: var(--teal-900);
      font-family: var(--font-head);
      font-size: 0.98rem;
    }

    .quote-footer span {
      color: var(--muted);
      font-size: 0.83rem;
    }

    .sidebar {
      position: sticky;
      top: 112px;
      display: grid;
      gap: 1.15rem;
    }

    .sidebar-card {
      padding: 1.35rem;
    }

    .sidebar-card h3 {
      margin-bottom: 0.85rem;
      font-size: 1.25rem;
    }

    .sidebar-card ul {
      display: grid;
      gap: 0.8rem;
    }

    .sidebar-card li {
      color: var(--muted);
      line-height: 1.55;
    }

    .report-row {
      display: flex;
      justify-content: space-between;
      gap: 0.8rem;
      padding: 0.75rem 0;
      border-bottom: 1px solid rgba(17, 107, 92, 0.08);
      color: var(--teal-950);
      font-weight: 700;
    }

    .report-row:last-child {
      border-bottom: 0;
    }

    .donate-quick {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.65rem;
      margin: 1rem 0;
    }

    .donate-quick a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      border-radius: 14px;
      background: var(--teal-50);
      color: var(--teal-900);
      font-weight: 800;
      border: 1px solid rgba(17, 107, 92, 0.1);
    }

    .donate-quick a:hover {
      background: var(--gold);
      color: #2a1b03;
    }

    /* Events */
    .event-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }

    .event-card {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .event-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .event-media {
      position: relative;
      height: 220px;
    }

    .event-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .event-date-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      min-width: 92px;
      padding: 0.55rem 0.75rem;
      border-radius: 16px;
      background: rgba(255, 253, 249, 0.94);
      box-shadow: var(--shadow-sm);
      text-align: center;
    }

    .event-date-badge strong {
      display: block;
      font-size: 1.3rem;
      color: var(--teal-900);
      line-height: 1;
    }

    .event-date-badge span {
      display: block;
      margin-top: 0.2rem;
      font-size: 0.76rem;
      font-weight: 800;
      color: var(--rose);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .event-body {
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      flex: 1;
    }

    .event-body p {
      margin: 0;
      font-size: 0.96rem;
    }

    .event-location {
      font-size: 0.86rem;
      color: var(--teal-700);
      font-weight: 800;
    }

    .event-body .btn {
      margin-top: auto;
    }

    /* News */
    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.75rem;
    }

    .news-card {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .news-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .news-media {
      height: 185px;
      overflow: hidden;
    }

    .news-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .news-body {
      padding: 1.35rem;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      flex: 1;
    }

    .news-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.6rem;
    }

    .tag {
      display: inline-flex;
      padding: 0.32rem 0.72rem;
      border-radius: 999px;
      background: var(--gold);
      color: #2a1b03;
      font-size: 0.72rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .date {
      font-size: 0.84rem;
      color: var(--muted);
      font-weight: 700;
    }

    .news-body p {
      margin: 0;
      font-size: 0.96rem;
    }

    .news-body .text-link {
      margin-top: auto;
    }

    /* Partners */
    .partner-strip {
      margin-top: 3.5rem;
      padding: 1.75rem;
      border: 1px dashed rgba(17, 107, 92, 0.2);
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.72);
      text-align: center;
    }

    .partner-strip p {
      margin-bottom: 1rem;
      color: var(--teal-900);
      font-weight: 700;
    }

    .partner-logos {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }

    .partner-logos img {
      height: 52px;
      width: auto;
      border-radius: 12px;
      background: #fff;
    }

    /* Get involved */
    .cta-band {
      position: relative;
      overflow: hidden;
      color: #fff;
      padding: 3.25rem;
      border-radius: 38px;
      background:
        radial-gradient(circle at 88% 18%, rgba(242, 179, 61, 0.24), transparent 24%),
        linear-gradient(135deg, var(--teal-900), #12796c);
      box-shadow: var(--shadow-lg);
    }

    .cta-band h2 {
      color: #fff;
    }

    .cta-band p {
      color: rgba(255, 255, 255, 0.82);
      max-width: 780px;
      font-size: 1.05rem;
    }

    .action-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 2.25rem;
    }

    .action-card {
      padding: 1.65rem;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.11);
      border: 1px solid rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(10px);
    }

    .action-card h3 {
      color: #fff;
      margin-bottom: 0.8rem;
      font-size: 1.45rem;
    }

    .action-card p {
      color: rgba(255, 255, 255, 0.8);
      margin: 0;
    }

    .action-card .btn {
      margin-top: 1.4rem;
    }

    /* FAQ */
    .faq-list {
      max-width: 920px;
      margin: 0 auto;
      display: grid;
      gap: 0.9rem;
    }

    .faq-item {
      overflow: hidden;
      border-radius: 20px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 10px 26px rgba(7, 54, 47, 0.05);
    }

    .faq-button {
      width: 100%;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.15rem 1.35rem;
      border: 0;
      background: transparent;
      font: inherit;
      font-family: var(--font-head);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--teal-950);
      cursor: pointer;
      text-align: left;
    }

    .faq-icon {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--teal-50);
      color: var(--teal-800);
      font-size: 1.1rem;
      font-weight: 900;
      transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    }

    .faq-item.active .faq-icon {
      transform: rotate(45deg);
      background: var(--gold);
      color: #2a1b03;
    }

    .faq-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }

    .faq-item.active .faq-panel {
      max-height: 420px;
    }

    .faq-panel-inner {
      padding: 0 1.35rem 1.35rem;
      color: var(--muted);
    }

    /* Contact */
    .contact-grid {
      display: grid;
      grid-template-columns: 0.92fr 1.08fr;
      gap: 2.25rem;
      align-items: start;
    }

    .contact-info-card {
      padding: 1.5rem;
    }

    .info-row {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.2rem;
    }

    .info-icon {
      width: 46px;
      height: 46px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: var(--teal-50);
      color: var(--teal-800);
      font-weight: 900;
      font-family: var(--font-head);
    }

    .info-row p {
      margin: 0;
      color: var(--teal-900);
      font-weight: 700;
    }

    .info-row span {
      color: var(--muted);
      font-size: 0.94rem;
    }

    .contact-map {
      margin-top: 1.4rem;
      border-radius: 22px;
      overflow: hidden;
    }

    .contact-form {
      padding: 1.75rem;
      border-radius: 34px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
    }

    .form-grid {
      display: grid;
      gap: 1rem;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .contact-form label {
      display: block;
      margin-bottom: 0.45rem;
      font-weight: 800;
      color: var(--teal-950);
      font-size: 0.92rem;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
      width: 100%;
      min-height: 54px;
      padding: 0.95rem 1rem;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fbfaf7;
      font: inherit;
      color: var(--ink);
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .contact-form textarea {
      min-height: 150px;
      resize: vertical;
    }

    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
      border-color: var(--teal-700);
      box-shadow: 0 0 0 4px rgba(17, 107, 92, 0.1);
      background: #fff;
    }

    .form-message {
      display: none;
      margin-top: 1rem;
      padding: 1rem 1.1rem;
      border-radius: 16px;
      background: var(--teal-50);
      border: 1px solid rgba(17, 107, 92, 0.12);
      color: var(--teal-900);
      font-weight: 700;
    }

    .form-message.visible {
      display: block;
    }

    .privacy-note {
      margin-top: 1rem;
      font-size: 0.85rem;
      color: var(--muted);
    }

    /* Footer */
    .site-footer {
      color: #e4f7ef;
      background:
        radial-gradient(circle at 85% 15%, rgba(242, 179, 61, 0.18), transparent 25%),
        linear-gradient(135deg, var(--teal-950), #0a3d37);
      padding: 4.5rem 0 2rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 0.75fr 0.85fr 1.4fr;
      gap: 2.5rem;
      padding-bottom: 3rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      margin-bottom: 1rem;
    }

    .footer-brand img {
      width: 54px;
      height: 54px;
      border-radius: 16px;
    }

    .footer-brand strong {
      display: block;
      font-family: var(--font-head);
      font-size: 1.08rem;
      color: #fff;
    }

    .footer-brand span {
      color: rgba(228, 247, 239, 0.72);
      font-size: 0.85rem;
    }

    .site-footer p {
      color: rgba(228, 247, 239, 0.78);
    }

    .footer-title {
      color: #fff;
      font-family: var(--font-head);
      font-size: 1.02rem;
      margin-bottom: 1.1rem;
    }

    .footer-nav {
      display: grid;
      gap: 0.65rem;
    }

    .footer-nav a {
      color: rgba(228, 247, 239, 0.76);
      font-weight: 650;
      width: fit-content;
    }

    .footer-nav a:hover {
      color: var(--gold);
    }

    .social-row {
      display: flex;
      gap: 0.6rem;
      margin-top: 1.1rem;
    }

    .social {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      font-family: var(--font-head);
      font-weight: 900;
      color: #fff;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .social:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
    }

    .newsletter {
      display: flex;
      flex-wrap: wrap;
      gap: 0.7rem;
      margin-top: 1rem;
    }

    .newsletter input {
      flex: 1 1 220px;
      min-height: 50px;
      padding: 0.95rem 1rem;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      outline: none;
      font: inherit;
    }

    .newsletter input::placeholder {
      color: rgba(255, 255, 255, 0.58);
    }

    .newsletter input:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 4px rgba(242, 179, 61, 0.14);
    }

    .newsletter-success {
      display: none;
      margin-top: 0.7rem;
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--gold);
    }

    .newsletter-success.visible {
      display: block;
    }

    .tiny {
      font-size: 0.82rem;
      color: rgba(255, 255, 255, 0.62);
      margin-top: 0.8rem;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      padding-top: 1.6rem;
      color: rgba(255, 255, 255, 0.56);
      font-size: 0.85rem;
    }

    /* Reveal */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: none;
    }

    .delay-1 { transition-delay: 0.08s; }
    .delay-2 { transition-delay: 0.16s; }
    .delay-3 { transition-delay: 0.24s; }
    .delay-4 { transition-delay: 0.32s; }

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

      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    @media (max-width: 1180px) {
      .program-grid,
      .event-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .layout-grid {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: static;
      }

      .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 1000px) {
      .nav-toggle {
        display: grid;
      }

      .site-nav {
        position: absolute;
        top: 92px;
        right: 0;
        left: 0;
        display: none;
        padding: 1rem 1.25rem 1.4rem;
        border-bottom: 1px solid var(--line);
        background: var(--white);
        box-shadow: var(--shadow-md);
        border-radius: 0 0 26px 26px;
      }

      .site-nav.open {
        display: block;
      }

      .site-nav ul,
      .site-nav.open {
        flex-direction: column;
      }

      .site-nav ul {
        display: grid;
        gap: 0.35rem;
      }

      .site-nav a {
        width: 100%;
        justify-content: space-between;
      }

      .donate-nav {
        margin-top: 0.8rem;
      }

      .hero-grid,
      .split,
      .impact-grid,
      .contact-grid,
      .featured-story {
        grid-template-columns: 1fr;
      }

      .hero {
        padding: 4rem 0 4.5rem;
      }

      .hero-media {
        min-height: 420px;
      }

      .mission-note {
        right: 16px;
        bottom: 16px;
        width: min(320px, calc(100% - 32px));
      }

      .news-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 780px) {
      .section {
        padding: 4rem 0;
      }

      .stats-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }

      .cta-band,
      .calc-panel,
      .contact-form,
      .featured-story {
        padding: 1.4rem;
      }

      .program-grid,
      .event-grid,
      .testimonial-grid,
      .news-grid,
      .action-grid {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .brand-tagline {
        display: none;
      }

      .outcome-grid {
        grid-template-columns: 1fr;
      }

      .form-row {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <a class="skip-link" href="#main">Skip to main content</a>

  <header class="site-header" id="top">
    <div class="container header-inner">
      <a class="brand" href="#top" aria-label="Northlight Community Trust home">
        <img src="https://placehold.co/56x56/0b4a40/ffffff?text=NL&font=poppins" alt="Northlight Community Trust logo" />
        <span class="brand-text">
          <span class="brand-name">Northlight Community Trust</span>
          <span class="brand-tagline">Where generosity becomes lasting neighborhood strength.</span>
        </span>
      </a>

      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="primary-nav" aria-label="Open navigation menu">
        <span aria-hidden="true"></span>
      </button>

      <nav class="site-nav" id="primary-nav" aria-label="Primary navigation">
        <ul>
          <li><a href="#mission">Our Mission</a></li>
          <li><a href="#programs">Programs</a></li>
          <li><a href="#impact">Impact</a></li>
          <li><a href="#stories">Stories</a></li>
          <li><a href="#events">Events</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#get-involved">Get Involved</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <a class="btn btn-primary donate-nav" href="#impact">Donate</a>
      </nav>
    </div>
  </header>

  <main id="main">
    <!-- HERO -->
    <section class="hero" aria-labelledby="hero-heading">
      <div class="container hero-grid">
        <div class="hero-copy reveal">
          <div class="eyebrow" style="background: rgba(255,255,255,.12); color: #fff;">
            <span class="trust-dot" aria-hidden="true"></span>
            Community-led nonprofit serving the Northlight Valley
          </div>
          <h1 id="hero-heading">Turning compassion into durable community power.</h1>
          <p class="lead">
            Northlight Community Trust works alongside residents, neighborhood organizations, employers, and public partners to expand housing stability, deepen food security, and create practical pathways to opportunity for families across our region.
          </p>
          <p>
            We were founded on a simple belief: generosity should do more than respond to a crisis. It should strengthen the relationships, institutions, and local leadership that allow entire neighborhoods to thrive. That is why every program we design is built with community members, reviewed through transparent stewardship, and measured by outcomes that matter in real life.
          </p>

          <div class="cta-row">
            <a class="btn btn-primary" href="#impact">Calculate your impact</a>
            <a class="btn btn-light" href="#get-involved">Take action</a>
            <a class="btn btn-light" href="#contact">Partner with us</a>
          </div>

          <div class="hero-trust" aria-label="Trust and accountability highlights">
            <span class="trust-badge"><span class="trust-dot" aria-hidden="true"></span> 94% program efficiency</span>
            <span class="trust-badge"><span class="trust-dot" aria-hidden="true"></span> Resident advisory board</span>
            <span class="trust-badge"><span class="trust-dot" aria-hidden="true"></span> Annual audited reporting</span>
          </div>
        </div>

        <div class="hero-media reveal delay-2">
          <img src="https://picsum.photos/seed/northlight-community-strengthening/1200/900" alt="Community members gathered around tables at a neighborhood resource event" loading="eager" />
          <div class="hero-card">
            <strong>Live this month</strong>
            <p>1,248 households received pantry support, 86 rental bridges prevented eviction, and 212 volunteer shifts were matched through our neighborhood hub.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- STATS -->
    <section class="stats reveal" aria-label="Impact statistics">
      <div class="container stats-inner">
        <div class="stat">
          <span class="stat-value counter" data-target="18400" data-suffix="+">0</span>
          <span class="stat-label">Families connected to basic needs last year</span>
        </div>
        <div class="stat">
          <span class="stat-value counter" data-target="3200">0</span>
          <span class="stat-label">Youth mentor hours coordinated</span>
        </div>
        <div class="stat">
          <span class="stat-value counter" data-target="2.8" data-prefix="$" data-suffix="M" data-decimals="1">0</span>
          <span class="stat-label">Local economic return through partnership leverage</span>
        </div>
        <div class="stat">
          <span class="stat-value counter" data-target="94" data-suffix="%">0</span>
          <span class="stat-label">Of restricted donations go directly to programs</span>
        </div>
      </div>
    </section>

    <!-- MISSION -->
    <section id="mission" class="section alt" aria-labelledby="mission-heading">
      <div class="container split">
        <div class="media-stack reveal">
          <img src="https://picsum.photos/seed/northlight-community-meeting/900/1100" alt="Community members meeting around a table during a neighborhood planning session" loading="lazy" />
          <div class="mission-note">
            <strong>What stewardship means here</strong>
            <p>It means listening first, spending transparently, and investing in the local institutions that already know how to care for their neighbors.</p>
          </div>
        </div>

        <div class="section-copy reveal delay-2">
          <div class="eyebrow">Our Mission</div>
          <h2 id="mission-heading">We strengthen the everyday systems that keep neighborhoods safe and full of possibility.</h2>
          <p>
            Northlight Community Trust exists to build a regional network of care that is both responsive and resilient. Our work began after a series of floods, economic shifts, and service disruptions revealed a difficult truth: temporary charity can ease immediate pain, but it does not automatically repair broken systems or replace the local relationships that hold communities together.
          </p>
          <p>
            Today, our approach combines direct assistance with community outreach, policy advocacy, and capacity building for smaller neighborhood organizations. We fund caseworkers, mobile pantry routes, youth transit support, legal advocacy, and small-grant programs that help local leaders deliver care closer to home. In each of those efforts, we prioritize dignity, access, and long-term neighborhood ownership.
          </p>
          <p>
            Accountability shapes everything we do. From our budgeting process to our program design, we ask difficult questions about who benefits, who decides, and who remains excluded. That discipline helps us practice stewardship not merely as sound financial management, but as a public commitment to residents who depend on our work every day.
          </p>

          <blockquote class="pull-quote">
            “Sustainable generosity begins when people see themselves as owners of the solution, not recipients of a program.”
          </blockquote>

          <div class="action-row">
            <a class="btn btn-dark" href="#stories">Read beneficiary stories</a>
            <a class="btn btn-secondary" href="#programs">Explore our programs</a>
          </div>
        </div>
      </div>
    </section>

    <!-- PROGRAMS -->
    <section id="programs" class="section" aria-labelledby="programs-heading">
      <div class="container">
        <div class="section-head reveal">
          <div class="eyebrow">What We Fund</div>
          <h2 id="programs-heading">Four connected priorities for lasting neighborhood well-being</h2>
          <p class="lead">
            Our portfolio is designed around the barriers that families most often face: unstable housing, food scarcity, disconnected youth services, and uneven access to career pathways. By investing in these priorities together, we reduce duplication and strengthen the local infrastructure that makes daily life more stable.
          </p>
        </div>

        <div class="program-grid">
          <article class="program-card reveal">
            <div class="program-media">
              <img src="https://picsum.photos/seed/northlight-housing-support/700/500" alt="Housing assistance office with community notices and counseling materials" loading="lazy" />
            </div>
            <div class="program-body">
              <h3>Housing Stability</h3>
              <p>
                We provide emergency rental assistance, move-in cost support, tenant rights counseling, and case management for households at immediate risk of displacement. Our housing work is paired with landlord engagement and policy advocacy to prevent repeat crises over time.
              </p>
              <span class="metric">1,870 eviction-prevention plans supported in 2025</span>
              <a class="text-link" href="#impact">See how your gift strengthens housing work →</a>
            </div>
          </article>

          <article class="program-card reveal delay-1">
            <div class="program-media">
              <img src="https://picsum.photos/seed/northlight-food-security/700/500" alt="Fresh produce and grocery bags prepared for a neighborhood pantry distribution" loading="lazy" />
            </div>
            <div class="program-body">
              <h3>Food Security</h3>
              <p>
                Our mobile pantry routes, partner food hubs, and produce prescription program help families access nourishing meals with greater choice and fewer barriers. We also fund pantry capacity building, cold storage, and nutrition education so emergency relief becomes long-term food access.
              </p>
              <span class="metric">18 mobile pantry routes across 6 underserved neighborhoods</span>
              <a class="text-link" href="#events">Join a distribution day →</a>
            </div>
          </article>

          <article class="program-card reveal delay-2">
            <div class="program-media">
              <img src="https://picsum.photos/seed/northlight-youth-mentorship/700/500" alt="Youth mentor and teenager collaborating at a community learning center" loading="lazy" />
            </div>
            <div class="program-body">
              <h3>Youth &amp; Education Opportunity</h3>
              <p>
                We connect young people to mentors, safe transportation, academic coaching, and college navigation support. These services are designed with schools, families, and community centers so youth receive consistent guidance instead of fragmented interventions.
              </p>
              <span class="metric">293 youth matched with mentors this school year</span>
              <a class="text-link" href="#get-involved">Become a mentor →</a>
            </div>
          </article>

          <article class="program-card reveal delay-3">
            <div class="program-media">
              <img src="https://picsum.photos/seed/northlight-workforce-training/700/500" alt="Adult workforce training participants learning skills at a community career center" loading="lazy" />
            </div>
            <div class="program-body">
              <h3>Workforce Readiness</h3>
              <p>
                Our adult programs support credential attainment, job placement, digital skills, transportation, and childcare subsidies so economic advancement does not depend on one lucky break. Employer partnerships help match local talent with living-wage opportunities close to home.
              </p>
              <span class="metric">71% of program participants placed in work or additional training</span>
              <a class="text-link" href="#contact">Invite employer partners →</a>
            </div>
          </article>
        </div>
      </div>
    </section>

    <!-- IMPACT CALCULATOR -->
    <section id="impact" class="section alt" aria-labelledby="impact-heading">
      <div class="container impact-grid">
        <div class="reveal">
          <div class="eyebrow">Interactive Giving Tool</div>
          <h2 id="impact-heading">See how generosity compounds into real community change</h2>
          <p>
            Giving is often described in one-time moments, but many of our strongest outcomes come from sustained support. A monthly gift allows us to staff case managers reliably, reserve pantry space, fund rent bridges when families need them most, and invest in the smaller organizations that keep community care close to home.
          </p>
          <p>
            Use the calculator to explore how a monthly contribution could translate across our programs over time. These estimates are illustrative, but they are grounded in our current program costs, matching funds, volunteer leverage, and measurable outputs from recent reporting.
          </p>

          <ul>
            <li>Stable funding allows us to plan ahead instead of reacting to gaps</li>
            <li>Program partners multiply every dollar through co-investment and shared infrastructure</li>
            <li>Longer giving horizons help us support families through full recovery, not just first contact</li>
          </ul>

          <div class="action-row">
            <a class="btn btn-dark" href="#get-involved">Start a monthly gift</a>
            <a class="btn btn-secondary" href="#stories">Read beneficiary stories</a>
          </div>
        </div>

        <div class="calc-panel reveal delay-2" role="region" aria-labelledby="calc-title">
          <div class="calc-panel-head">
            <div>
              <h3 id="calc-title">Northlight Impact Calculator</h3>
              <p>Adjust the controls to see projected program reach.</p>
            </div>
          </div>

          <div class="control">
            <label for="gift-amount">
              Monthly gift
              <span id="gift-amount-display">$25</span>
            </label>
            <div class="amount-inputs">
              <input id="gift-amount" type="range" min="10" max="500" step="5" value="25" aria-label="Monthly gift slider" />
              <input id="gift-amount-number" type="number" min="10" max="500" step="5" value="25" aria-label="Monthly gift amount in dollars" />
            </div>
          </div>

          <div class="control">
            <label for="years">
              Giving horizon
              <span id="years-value">2 years</span>
            </label>
            <input id="years" type="range" min="1" max="5" step="1" value="2" aria-label="Giving horizon slider" />
          </div>

          <div class="control">
            <label for="focus-area">Program focus</label>
            <select id="focus-area" aria-label="Program focus area">
              <option value="food">Food Security &amp; Pantry Access</option>
              <option value="housing">Housing Stability</option>
              <option value="youth">Youth &amp; Education Opportunity</option>
              <option value="workforce">Workforce Readiness</option>
            </select>
          </div>

          <div class="outcome-grid">
            <div class="outcome">
              <strong id="meals-out">0</strong>
              <span>Warm meals or pantry shares supported</span>
            </div>
            <div class="outcome">
              <strong id="families-out">0</strong>
              <span>Households stabilized with direct services</span>
            </div>
            <div class="outcome">
              <strong id="youth-out">0</strong>
              <span>Youth engaged in mentorship and support programs</span>
            </div>
            <div class="outcome">
              <strong id="econ-out">$0</strong>
              <span>Estimated local economic return and leverage</span>
            </div>
          </div>

          <div id="calculator-summary" class="calc-summary" aria-live="polite">
            A monthly gift of $25 over 2 years to Food Security & Pantry Access could support approximately 1,610 pantry shares and strengthen long-term access for local food partners.
          </div>

          <p class="calc-note">
            Estimates reflect program leverage, partner contributions, and average unit costs from recent operating data. Actual outcomes may vary.
          </p>
        </div>
      </div>
    </section>

    <!-- STORIES -->
    <section id="stories" class="section" aria-labelledby="stories-heading">
      <div class="container">
        <div class="section-head reveal">
          <div class="eyebrow">Stories from the Work</div>
          <h2 id="stories-heading">Beneficiaries, volunteers, and partners on what accountability looks like in practice</h2>
          <p class="lead">
            Numbers matter, but people explain why the work matters. These voices show how housing assistance, food access, mentorship, and partnership stewardship can combine to turn short-term relief into longer-term stability.
          </p>
        </div>

        <div class="layout-grid">
          <div>
            <article class="featured-story reveal">
              <img src="https://picsum.photos/seed/northlight-maya-family-story/800/650" alt="Mother and child at home in a bright, stable family living room" loading="lazy" />
              <div>
                <div class="eyebrow">Beneficiary Story</div>
                <h3>Maya used a rent bridge and case management to rebuild family stability</h3>
                <p>
                  After an unexpected reduction in hours and a late rent notice, Maya was one missed payment away from displacement. Northlight provided emergency assistance, connected her to tenant advocacy support, and helped her apply for a utility stabilization fund. Because the assistance was paired with coaching and follow-up, her family regained housing stability within eight weeks.
                </p>
                <p>
                  What made the difference was not just the grant, but the continuity of the response. Her case worker stayed connected to the family after the crisis passed, helped them enroll in a neighborhood food route, and supported Maya as she moved from temporary relief to steady housing.
                </p>
                <a class="text-link" href="#impact">See how gifts support families like Maya’s →</a>
              </div>
            </article>

            <div class="testimonial-grid">
              <article class="quote-card reveal">
                <blockquote>
                  “I used to think volunteering meant showing up occasionally. Here I learned it means listening, following through, and staying long enough to build trust.”
                </blockquote>
                <div class="quote-footer">
                  <img src="https://i.pravatar.cc/120?u=david-volunteer" alt="Portrait of David, a volunteer mentor and pantry coordinator" loading="lazy" />
                  <div>
                    <strong>David R.</strong>
                    <span>Volunteer mentor &amp; pantry coordinator</span>
                  </div>
                </div>
              </article>

              <article class="quote-card reveal delay-1">
                <blockquote>
                  “Northlight didn’t just fund us; they helped us strengthen our intake system, track outcomes, and coordinate more effectively with partner agencies.”
                </blockquote>
                <div class="quote-footer">
                  <img src="https://i.pravatar.cc/120?u=rosa-partner" alt="Portrait of Rosa, executive director of a local partner nonprofit" loading="lazy" />
                  <div>
                    <strong>Rosa M.</strong>
                    <span>Executive director, Valley Family Center</span>
                  </div>
                </div>
              </article>

              <article class="quote-card reveal delay-2">
                <blockquote>
                  “The mentorship program helped me see a realistic path forward. I had support with transportation, school paperwork, and someone who checked in consistently.”
                </blockquote>
                <div class="quote-footer">
                  <img src="https://i.pravatar.cc/120?u=jordan-youth" alt="Portrait of Jordan, a youth program participant" loading="lazy" />
                  <div>
                    <strong>Jordan T.</strong>
                    <span>Youth program participant</span>
                  </div>
                </div>
              </article>
            </div>
          </div>

          <aside class="sidebar" aria-label="Reports and quick actions">
            <div class="sidebar-card reveal">
              <h3>Accountability Snapshot</h3>
              <div class="report-row">
                <span>Program services</span>
                <strong>87%</strong>
              </div>
              <div class="report-row">
                <span>Capacity building</span>
                <strong>8%</strong>
              </div>
              <div class="report-row">
                <span>Fundraising &amp; operations</span>
                <strong>5%</strong>
              </div>
              <p style="margin-top: 1rem;">
                These allocations are reviewed annually by our finance committee and independently audited. Full financial statements and outcome reporting are available upon request.
              </p>
              <a class="btn btn-secondary" href="#contact">Request the annual report</a>
            </div>

            <div class="sidebar-card reveal delay-1">
              <h3>Quick Actions</h3>
              <div class="donate-quick">
                <a href="#impact">$25</a>
                <a href="#impact">$50</a>
                <a href="#impact">$100</a>
              </div>
              <p>
                A monthly gift provides more reliable funding than one-time donations. Try the calculator to explore what sustained support could achieve over time.
              </p>
              <a class="btn btn-primary" href="#impact">Start giving monthly</a>
            </div>

            <div class="sidebar-card reveal delay-2">
              <h3>Upcoming Volunteer Orientation</h3>
              <p>
                <strong>June 27, 2026 • 10:00 a.m.</strong><br />
                Northlight Community Hub and virtual option available. Orientation covers trauma-informed support, pantry logistics, mentoring expectations, and capacity-building opportunities for partner agencies.
              </p>
              <a class="btn btn-dark" href="#events">Register</a>
            </div>

            <div class="sidebar-card reveal delay-3">
              <h3>Partner Spotlights</h3>
              <p>
                We work with local employers, school districts, faith organizations, and civic foundations to strengthen coordination and expand practical support.
              </p>
              <a class="text-link" href="#contact">Explore partnership options →</a>
            </div>
          </aside>
        </div>
      </div>
    </section>

    <!-- EVENTS -->
    <section id="events" class="section alt" aria-labelledby="events-heading">
      <div class="container">
        <div class="section-head reveal">
          <div class="eyebrow">Fundraising Events &amp; Volunteer Days</div>
          <h2 id="events-heading">Ways to show up, connect, and multiply impact</h2>
          <p class="lead">
            Our events bring residents, donors, partner agencies, and local leaders together in ways that strengthen relationships as much as they raise resources. Whether you want to volunteer, sponsor, or simply learn more, there is a meaningful role for you.
          </p>
        </div>

        <div class="event-grid">
          <article class="event-card reveal">
            <div class="event-media">
              <img src="https://picsum.photos/seed/northlight-mobile-pantry-volunteer/800/560" alt="Volunteers loading fresh food into a mobile pantry vehicle" loading="lazy" />
              <div class="event-date-badge">
                <strong>27</strong>
                <span>Jun</span>
              </div>
            </div>
            <div class="event-body">
              <h3>Mobile Pantry Volunteer Day</h3>
              <span class="event-location">Northlight Hub • In-person and hybrid briefing</span>
              <p>
                Help sort donations, guide families through the pop-up market layout, and support nutrition information stations. Ideal for first-time volunteers who want hands-on service with clear training.
              </p>
              <a class="btn btn-primary" href="#get-involved">Register</a>
            </div>
          </article>

          <article class="event-card reveal delay-1">
            <div class="event-media">
              <img src="https://picsum.photos/seed/northlight-back-to-school-supplies/800/560" alt="Community volunteers organizing school supplies for students" loading="lazy" />
              <div class="event-date-badge">
                <strong>15</strong>
                <span>Aug</span>
              </div>
            </div>
            <div class="event-body">
              <h3>Back-to-School Supply Drive Kickoff</h3>
              <span class="event-location">Riverside Learning Center • Family welcome</span>
              <p>
                This kickoff launches our regional supply drive for youth mentors, school counselors, and partner pantries. Businesses and individuals can sponsor kits, donate supplies, or host collection points.
              </p>
              <a class="btn btn-secondary" href="#contact">Become a sponsor</a>
            </div>
          </article>

          <article class="event-card reveal delay-2">
            <div class="event-media">
              <img src="https://picsum.photos/seed/northlight-nonprofit-capacity-workshop/800/560" alt="Nonprofit professionals collaborating in a capacity-building workshop" loading="lazy" />
              <div class="event-date-badge">
                <strong>10</strong>
                <span>Jul</span>
              </div>
            </div>
            <div class="event-body">
              <h3>Capacity-Building Workshop for Local Nonprofits</h3>
              <span class="event-location">Community Innovation Loft</span>
              <p>
                A practical training on data collection, donor stewardship, fiscal accountability, and cross-agency coordination. Designed for staff and board members of small partner organizations.
              </p>
              <a class="btn btn-primary" href="#contact">Reserve seats</a>
            </div>
          </article>

          <article class="event-card reveal delay-3">
            <div class="event-media">
              <img src="https://picsum.photos/seed/northlight-lantern-benefit-dinner/800/560" alt="Evening community benefit dinner decorated with lanterns" loading="lazy" />
              <div class="event-date-badge">
                <strong>10</strong>
                <span>Oct</span>
              </div>
            </div>
            <div class="event-body">
              <h3>Lantern Benefit Dinner</h3>
              <span class="event-location">Valley Cultural Hall</span>
              <p>
                Our signature annual fundraising evening features impact stories, partner recognition, and live music. Tickets, tables, and underwriting opportunities support unrestricted operating funds.
              </p>
              <a class="btn btn-dark" href="#contact">Get tickets</a>
            </div>
          </article>
        </div>
      </div>
    </section>

    <!-- NEWS -->
    <section id="news" class="section" aria-labelledby="news-heading">
      <div class="container">
        <div class="section-head reveal">
          <div class="eyebrow">Newsroom</div>
          <h2 id="news-heading">Updates, outcomes, and announcements from our team</h2>
          <p class="lead">
            We publish regular updates so supporters, partners, and residents can see what is changing, where investments are working, and how we respond to emerging needs across the region.
          </p>
        </div>

        <div class="news-grid">
          <article class="news-card reveal">
            <div class="news-media">
              <img src="https://picsum.photos/seed/northlight-news-mobile-pantry/700/500" alt="News story about a mobile pantry route serving families" loading="lazy" />
            </div>
            <div class="news-body">
              <div class="news-meta">
                <span class="tag">Program Update</span>
                <span class="date">June 12, 2026</span>
              </div>
              <h3>New Route 7 mobile pantry serves 480 households monthly</h3>
              <p>
                The expanded route adds fresh produce, baby supplies, and on-site benefits enrollment support in response to neighborhood demand mapping conducted with community advisory partners.
              </p>
              <a class="text-link" href="#programs">Explore food access work →</a>
            </div>
          </article>

          <article class="news-card reveal delay-1">
            <div class="news-media">
              <img src="https://picsum.photos/seed/northlight-news-audit-report/700/500" alt="Report documents and charts about nonprofit financial accountability" loading="lazy" />
            </div>
            <div class="news-body">
              <div class="news-meta">
                <span class="tag">Transparency</span>
                <span class="date">May 30, 2026</span>
              </div>
              <h3>2025 audit and outcome report now available</h3>
              <p>
                Our latest report includes program-level metrics, reserve fund details, capacity-building grant outcomes, and resident feedback summaries from the past fiscal year.
              </p>
              <a class="text-link" href="#contact">Request the report →</a>
            </div>
          </article>

          <article class="news-card reveal delay-2">
            <div class="news-media">
              <img src="https://picsum.photos/seed/northlight-news-workforce-partnership/700/500" alt="Partners signing a workforce apprenticeship agreement" loading="lazy" />
            </div>
            <div class="news-body">
              <div class="news-meta">
                <span class="tag">Partnership</span>
                <span class="date">May 18, 2026</span>
              </div>
              <h3>Workforce apprenticeship partnership expands with Valley Technical College</h3>
              <p>
                The agreement creates 75 new apprenticeship placements in logistics, healthcare support, and manufacturing, with wraparound childcare and transportation supports included for participants.
              </p>
              <a class="text-link" href="#get-involved">Get involved →</a>
            </div>
          </article>
        </div>

        <div class="partner-strip reveal">
          <p>With thanks to our regional funders, civic partners, and community allies</p>
          <div class="partner-logos" aria-label="Partner organizations">
            <img src="https://placehold.co/180x64/ffffff/0b4a40?text=Valley%20Bank%20Foundation&font=poppins" alt="Valley Bank Foundation partner logo placeholder" loading="lazy" />
            <img src="https://placehold.co/180x64/ffffff/116b5c?text=Northlight%20Health%20Alliance&font=poppins" alt="Northlight Health Alliance partner logo placeholder" loading="lazy" />
            <img src="https://placehold.co/180x64/ffffff/b5425c?text=Riverside%20Schools&font=poppins" alt="Riverside Schools partner logo placeholder" loading="lazy" />
            <img src="https://placehold.co/180x64/ffffff/0b4a40?text=Civic%20Future%20Fund&font=poppins" alt="Civic Future Fund partner logo placeholder" loading="lazy" />
            <img src="https://placehold.co/180x64/ffffff/116b5c?text=Community%20Builders%20Coalition&font=poppins" alt="Community Builders Coalition partner logo placeholder" loading="lazy" />
          </div>
        </div>
      </div>
    </section>

    <!-- GET INVOLVED -->
    <section id="get-involved" class="section" aria-labelledby="involved-heading">
      <div class="container">
        <div class="cta-band reveal">
          <div class="eyebrow" style="background: rgba(255,255,255,.12); color:#fff;">Get Involved</div>
          <h2 id="involved-heading">Take action in the way that fits your capacity</h2>
          <p>
            Whether you have time, skills, relationships, or resources to contribute, Northlight offers practical entry points for meaningful participation. We believe generosity should be flexible, credible, and grounded in community partnership.
          </p>

          <div class="action-grid">
            <article class="action-card">
              <h3>Give Monthly</h3>
              <p>
                Monthly donors help us fund case management, pantry operations, youth transportation, and emergency rental support with more predictability. Sustained giving lets us build the systems behind the service.
              </p>
              <a class="btn btn-primary" href="#impact">Start a monthly gift</a>
            </article>

            <article class="action-card">
              <h3>Volunteer</h3>
              <p>
                Join pantry days, mentor a young person, support event logistics, or bring professional skills to capacity-building projects. Orientation and ongoing support ensure volunteers serve safely and effectively.
              </p>
              <a class="btn btn-light" href="#contact">Apply to volunteer</a>
            </article>

            <article class="action-card">
              <h3>Partner With Us</h3>
              <p>
                Businesses, foundations, institutions, and community groups can co-host programs, sponsor supply drives, underwrite grants, or collaborate on workforce pipelines that strengthen long-term resilience.
              </p>
              <a class="btn btn-light" href="#contact">Explore partnerships</a>
            </article>
          </div>
        </div>
      </div>
    </section>

    <!-- FAQ -->
    <section class="section alt" aria-labelledby="faq-heading">
      <div class="container">
        <div class="section-head reveal">
          <div class="eyebrow">Common Questions</div>
          <h2 id="faq-heading">Frequently asked questions about our work</h2>
          <p class="lead">
            Transparency matters. Below are some of the questions we hear most often from supporters, residents, and prospective partners.
          </p>
        </div>

        <div class="faq-list" id="faq-list">
          <article class="faq-item reveal">
            <button class="faq-button" type="button" aria-expanded="false" aria-controls="faq-1">
              <span>How are donations allocated?</span>
              <span class="faq-icon" aria-hidden="true">+</span>
            </button>
            <div class="faq-panel" id="faq-1" role="region">
              <div class="faq-panel-inner">
                <p>
                  In the most recent fiscal year, 87% of expenses supported direct program services, 8% funded capacity building and partner infrastructure, and 5% supported fundraising and administration. Restricted gifts are tracked separately and reported through our annual outcome and financial statements.
                </p>
              </div>
            </div>
          </article>

          <article class="faq-item reveal delay-1">
            <button class="faq-button" type="button" aria-expanded="false" aria-controls="faq-2">
              <span>What does capacity building mean in practical terms?</span>
              <span class="faq-icon" aria-hidden="true">+</span>
            </button>
            <div class="faq-panel" id="faq-2" role="region">
              <div class="faq-panel-inner">
                <p>
                  Capacity building includes grants and technical support that help smaller local organizations improve intake systems, data tracking, financial controls, volunteer management, and coordination. We invest in partner strength because durable service depends on capable, credible local institutions.
                </p>
              </div>
            </div>
          </article>

          <article class="faq-item reveal delay-2">
            <button class="faq-button" type="button" aria-expanded="false" aria-controls="faq-3">
              <span>Can I volunteer remotely?</span>
              <span class="faq-icon" aria-hidden="true">+</span>
            </button>
            <div class="faq-panel" id="faq-3" role="region">
              <div class="faq-panel-inner">
                <p>
                  Yes. We offer remote volunteer opportunities in research, phone-based program support, donor cultivation, grant editing, and virtual mentorship. Some roles require orientation, background checks, and a minimum commitment for quality and accountability.
                </p>
              </div>
            </div>
          </article>

          <article class="faq-item reveal delay-3">
            <button class="faq-button" type="button" aria-expanded="false" aria-controls="faq-4">
              <span>Do you accept employer matching gifts?</span>
              <span class="faq-icon" aria-hidden="true">+</span>
            </button>
            <div class="faq-panel" id="faq-4" role="region">
              <div class="faq-panel-inner">
                <p>
                  Many employers match charitable contributions. If your company participates in a matching gift program, your support can have significantly greater impact. Contact our development team for EIN details, mailing address, and submission guidance.
                </p>
              </div>
            </div>
          </article>

          <article class="faq-item reveal delay-4">
            <button class="faq-button" type="button" aria-expanded="false" aria-controls="faq-5">
              <span>How can I request assistance for my household?</span>
              <span class="faq-icon" aria-hidden="true">+</span>
            </button>
            <div class="faq-panel" id="faq-5" role="region">
              <div class="faq-panel-inner">
                <p>
                  Residents can begin an assistance request through our intake page or by calling our resource line. Intake staff will review needs, connect families with available supports, and coordinate referrals to partner agencies for housing, food, youth services, and employment help.
                </p>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>

    <!-- CONTACT -->
    <section id="contact" class="section" aria-labelledby="contact-heading">
      <div class="container">
        <div class="section-head reveal">
          <div class="eyebrow">Contact</div>
          <h2 id="contact-heading">Connect with our team</h2>
          <p class="lead">
            Have questions about giving, volunteering, partnerships, or requesting assistance? Our team is here to help you find the right next step.
          </p>
        </div>

        <div class="contact-grid">
          <div class="reveal">
            <div class="contact-info-card">
              <div class="info-row">
                <div class="info-icon" aria-hidden="true">Add</div>
                <div>
                  <p>Northlight Community Hub</p>
                  <span>1420 Foundry Lane, Suite 200<br />Northlight Valley, OR 97012</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-icon" aria-hidden="true">Tel</div>
                <div>
                  <p>Phone &amp; Resource Line</p>
                  <span>(503) 555-0142</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-icon" aria-hidden="true">E-mail</div>
                <div>
                  <p>General Inquiries</p>
                  <span>hello@northlighttrust.org</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-icon" aria-hidden="true">Hours</div>
                <div>
                  <p>Office Hours</p>
                  <span>Monday–Friday: 9:00 a.m.–5:30 p.m.<br />Saturday pantry days: occasional</span>
                </div>
              </div>
            </div>

            <div class="contact-map">
              <img src="https://placehold.co/800x460/e9f5f1/0b4a40?text=Map%20placeholder%20-%20Northlight%20Community%20Hub&font=poppins" alt="Map placeholder showing the Northlight Community Hub office location" loading="lazy" />
            </div>
          </div>

          <form class="contact-form reveal delay-2" id="contact-form" novalidate>
            <h3>Send us a message</h3>
            <p>
              Use this form for partnership inquiries, volunteering, planned giving, or general questions. If you need urgent assistance, please call our resource line during office hours.
            </p>

            <div class="form-row">
              <div>
                <label for="name">Full name</label>
                <input id="name" name="name" type="text" autocomplete="name" placeholder="Your name" required />
              </div>
              <div>
                <label for="email">Email address</label>
                <input id="email" name="email" type="email" autocomplete="email" placeholder="you@example.org" required />
              </div>
            </div>

            <div class="form-row">
              <div>
                <label for="phone">Phone number</label>
                <input id="phone" name="phone" type="tel" autocomplete="tel" placeholder="Optional" />
              </div>
              <div>
                <label for="topic">I’m interested in</label>
                <select id="topic" name="topic" required>
                  <option value="Donations">Donations &amp; stewardship</option>
                  <option value="Volunteering">Volunteering</option>
                  <option value="Partnership">Partnership or corporate giving</option>
                  <option value="Assistance">Requesting assistance</option>
                  <option value="Events">Events</option>
                  <option value="Media">Media &amp; reporting</option>
                </select>
              </div>
            </div>

            <div>
              <label for="message">Message</label>
              <textarea id="message" name="message" placeholder="How can we help?" required></textarea>
            </div>

            <button class="btn btn-primary" type="submit">Send message</button>

            <div id="contact-success" class="form-message" aria-live="polite"></div>
            <p class="privacy-note">
              We respect your privacy. Information submitted through this form is used only to respond to your inquiry and is not sold or shared with outside marketing entities.
            </p>
          </form>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer" aria-label="Site footer">
    <div class="container">
      <div class="footer-grid">
        <div>
          <div class="footer-brand">
            <img src="https://placehold.co/54x54/ffffff/0b4a40?text=NL&font=poppins" alt="Northlight Community Trust logo" />
            <div>
              <strong>Northlight Community Trust</strong>
              <span>Where generosity becomes lasting neighborhood strength.</span>
            </div>
          </div>
          <p>
            We combine direct service, capacity building, and accountable stewardship to strengthen housing stability, food security, youth opportunity, and workforce readiness across the Northlight Valley.
          </p>
          <div class="social-row" aria-label="Social media links">
            <a class="social" href="#" aria-label="Facebook"><span aria-hidden="true">f</span></a>
            <a class="social" href="#" aria-label="Instagram"><span aria-hidden="true">ig</span></a>
            <a class="social" href="#" aria-label="LinkedIn"><span aria-hidden="true">in</span></a>
            <a class="social" href="#contact" aria-label="Email"><span aria-hidden="true">@</span></a>
          </div>
        </div>

        <div>
          <h3 class="footer-title">Explore</h3>
          <div class="footer-nav">
            <a href="#mission">Our Mission</a>
            <a href="#programs">Programs</a>
            <a href="#impact">Impact Calculator</a>
            <a href="#stories">Stories</a>
            <a href="#events">Events</a>
            <a href="#news">News</a>
          </div>
        </div>

        <div>
          <h3 class="footer-title">Action</h3>
          <div class="footer-nav">
            <a href="#get-involved">Donate Monthly</a>
            <a href="#get-involved">Volunteer</a>
            <a href="#contact">Request Assistance</a>
            <a href="#contact">Partner With Us</a>
            <a href="#contact">Contact</a>
          </div>
        </div>

        <div>
          <h3 class="footer-title">Stay Connected</h3>
          <p>
            Receive quarterly updates on community outcomes, upcoming events, partnership opportunities, and ways to support families across the region.
          </p>

          <form class="newsletter" id="newsletter-form">
            <label class="sr-only" for="newsletter-email">Email address</label>
            <input id="newsletter-email" type="email" name="newsletter-email" placeholder="Enter your email address" required />
            <button class="btn btn-primary" type="submit">Subscribe</button>
          </form>
          <div id="newsletter-success" class="newsletter-success" aria-live="polite">Thanks — you’re subscribed.</div>

          <p class="tiny">
            Northlight Community Trust is a nonprofit organization. Donations may be tax-deductible where allowed by law. EIN: 84-1029375
          </p>
        </div>
      </div>

      <div class="footer-bottom">
        <span>© 2026 Northlight Community Trust. All rights reserved.</span>
        <span>
          <a href="#mission">Privacy practices</a> •
          <a href="#contact">Financial transparency</a> •
          <a href="#faq">Accessibility</a>
        </span>
      </div>
    </div>
  </footer>

  <script>
    (function () {
      const header = document.querySelector(".site-header");
      const navToggle = document.querySelector(".nav-toggle");
      const nav = document.querySelector("#primary-nav");
      const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

      function setHeaderScrollState() {
        header.classList.toggle("scrolled", window.scrollY > 18);
      }
      setHeaderScrollState();
      window.addEventListener("scroll", setHeaderScrollState, { passive: true });

      navToggle.addEventListener("click", function () {
        const expanded = navToggle.getAttribute("aria-expanded") === "true";
        navToggle.setAttribute("aria-expanded", String(!expanded));
        nav.classList.toggle("open", !expanded);
      });

      nav.querySelectorAll("a").forEach((link) => {
        link.addEventListener("click", () => {
          nav.classList.remove("open");
          navToggle.setAttribute("aria-expanded", "false");
        });
      });

      document.addEventListener("click", (event) => {
        if (!nav.contains(event.target) && !navToggle.contains(event.target)) {
          nav.classList.remove("open");
          navToggle.setAttribute("aria-expanded", "false");
        }
      });

      const revealObserver = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.classList.add("visible");
              revealObserver.unobserve(entry.target);
            }
          });
        },
        { threshold: 0.14 }
      );

      document.querySelectorAll(".reveal").forEach((el) => {
        if (reduceMotion) {
          el.classList.add("visible");
        } else {
          revealObserver.observe(el);
        }
      });

      const counters = document.querySelectorAll(".counter");
      function formatCounter(el, target, progress) {
        const prefix = el.dataset.prefix || "";
        const suffix = el.dataset.suffix || "";
        const decimals = Number(el.dataset.decimals || 0);
        const value = target * progress;
        el.textContent =
          prefix +
          value.toLocaleString("en-US", {
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals,
          }) +
          suffix;
      }

      function animateCounter(el) {
        const target = parseFloat(el.dataset.target || "0");
        const duration = 1800;
        const start = performance.now();

        function tick(now) {
          const progress = Math.min((now - start) / duration, 1);
          const eased = 1 - Math.pow(1 - progress, 3);
          formatCounter(el, target, eased);
          if (progress < 1) requestAnimationFrame(tick);
        }

        requestAnimationFrame(tick);
      }

      const counterObserver = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const el = entry.target;
              if (reduceMotion) {
                formatCounter(el, parseFloat(el.dataset.target || "0"), 1);
              } else {
                animateCounter(el);
              }
              counterObserver.unobserve(el);
            }
          });
        },
        { threshold: 0.5 }
      );

      counters.forEach((counter) => {
        if (reduceMotion) {
          formatCounter(counter, parseFloat(counter.dataset.target || "0"), 1);
        } else {
          counterObserver.observe(counter);
        }
      });

      const amountSlider = document.getElementById("gift-amount");
      const amountNumber = document.getElementById("gift-amount-number");
      const amountDisplay = document.getElementById("gift-amount-display");
      const yearsSlider = document.getElementById("years");
      const yearsValue = document.getElementById("years-value");
      const focusSelect = document.getElementById("focus-area");
      const mealsOut = document.getElementById("meals-out");
      const familiesOut = document.getElementById("families-out");
      const youthOut = document.getElementById("youth-out");
      const econOut = document.getElementById("econ-out");
      const summary = document.getElementById("calculator-summary");

      const money = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        maximumFractionDigits: 0,
      });

      const plainNumber = new Intl.NumberFormat("en-US");

      const multipliers = {
        food: { meals: 1.55, families: 0.82, youth: 0.75, econ: 1.18 },
        housing: { meals: 0.78, families: 1.75, youth: 0.68, econ: 1.28 },
        youth: { meals: 0.85, families: 0.72, youth: 1.8, econ: 1.42 },
        workforce: { meals: 0.82, families: 0.94, youth: 1.12, econ: 1.75 },
      };

      function styleRange(el) {
        const min = Number(el.min || 0);
        const max = Number(el.max || 100);
        const val = Number(el.value);
        const pct = ((val - min) / (max - min)) * 100;
        el.style.background = `linear-gradient(to right, rgba(17,107,92,.78) 0%, rgba(17,107,92,.78) ${pct}%, rgba(17,107,92,.14) ${pct}%, rgba(17,107,92,.14) 100%)`;
      }

      function updateCalculator() {
        const monthly = Math.max(10, Math.min(500, parseInt(amountNumber.value || amountSlider.value, 10) || 10));
        const years = Math.max(1, Math.min(5, parseInt(yearsSlider.value, 10) || 1));
        const focus = focusSelect.value;
        const focusLabel = focusSelect.options[focusSelect.selectedIndex].text;

        amountSlider.value = monthly;
        amountNumber.value = monthly;
        amountDisplay.textContent = money.format(monthly);

        yearsSlider.value = years;
        yearsValue.textContent = `${years} ${years === 1 ? "year" : "years"}`;

        const annual = monthly * 12 * years;
        const m = multipliers[focus] || multipliers.food;

        const meals = annual * 2.3 * m.meals;
        const families = (annual / 82) * m.families;
        const youth = (annual / 210) * m.youth;
        const econ = annual * 4.1 * m.econ;

        mealsOut.textContent = plainNumber.format(Math.round(meals));
        familiesOut.textContent = plainNumber.format(Math.round(families));
        youthOut.textContent = plainNumber.format(Math.round(youth));
        econOut.textContent = money.format(Math.round(econ));

        summary.textContent = `A monthly gift of ${money.format(monthly)} over ${years} ${years === 1 ? "year" : "years"} to ${focusLabel} could help support approximately ${plainNumber.format(Math.round(meals))} pantry shares or meals, ${plainNumber.format(Math.round(families))} households with stabilization services, and ${plainNumber.format(Math.round(youth))} youth with mentorship or program touchpoints.`;

        styleRange(amountSlider);
        styleRange(yearsSlider);
      }

      [amountSlider, amountNumber, yearsSlider, focusSelect].forEach((input) => {
        input.addEventListener("input", updateCalculator);
        input.addEventListener("change", updateCalculator);
      });

      updateCalculator();

      const faqButtons = document.querySelectorAll(".faq-button");
      faqButtons.forEach((button) => {
        button.addEventListener("click", () => {
          const item = button.closest(".faq-item");
          const isOpen = item.classList.contains("active");

          document.querySelectorAll(".faq-item.active").forEach((openItem) => {
            openItem.classList.remove("active");
            const openBtn = openItem.querySelector(".faq-button");
            if (openBtn) openBtn.setAttribute("aria-expanded", "false");
          });

          if (!isOpen) {
            item.classList.add("active");
            button.setAttribute("aria-expanded", "true");
          }
        });
      });

      const contactForm = document.getElementById("contact-form");
      const contactSuccess = document.getElementById("contact-success");

      contactForm.addEventListener("submit", (event) => {
        event.preventDefault();

        if (!contactForm.checkValidity()) {
          contactForm.reportValidity();
          return;
        }

        const name = (document.getElementById("name").value || "friend").trim();
        const topic = (document.getElementById("topic").value || "your request").trim();

        contactSuccess.textContent = `Thanks, ${name}. We received your message about ${topic} and our team will respond soon.`;
        contactSuccess.classList.add("visible");
        contactForm.reset();

        setTimeout(() => {
          contactSuccess.classList.remove("visible");
        }, 8000);
      });

      const newsletterForm = document.getElementById("newsletter-form");
      const newsletterSuccess = document.getElementById("newsletter-success");

      newsletterForm.addEventListener("submit", (event) => {
        event.preventDefault();

        if (!newsletterForm.checkValidity()) {
          newsletterForm.reportValidity();
          return;
        }

        newsletterSuccess.classList.add("visible");
        newsletterForm.reset();

        setTimeout(() => {
          newsletterSuccess.classList.remove("visible");
        }, 7000);
      });
    })();
  </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:59:46.007Z",
  "url": "https://benchmark.aimac.invalid/e7d14f2d1632e80cf14d159c026284277a2f0d73db160e66f65016800e8ab7e2.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Northlight Community Trust home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Northlight Community Trust home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"calc-panel reveal delay-2\" role=\"region\" aria-labelledby=\"calc-title\">",
          "target": [
            ".calc-panel"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span aria-hidden=\"true\"></span>",
          "target": [
            ".nav-toggle > span[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Northlight Community Trust home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"calc-panel reveal delay-2\" role=\"region\" aria-labelledby=\"calc-title\">",
          "target": [
            ".calc-panel"
          ]
        }
      ]
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"calc-panel reveal delay-2\" role=\"region\" aria-labelledby=\"calc-title\">",
          "target": [
            ".calc-panel"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Northlight Community Trust home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Northlight Community Trust home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "autocomplete-valid",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "the autocomplete attribute is correctly formatted"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<input id=\"name\" name=\"name\" type=\"text\" autocomplete=\"name\" placeholder=\"Your name\" required=\"\">",
          "target": [
            "#name"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div class=\"eyebrow\" style=\"background: rgba(255,255,255,.12); color: #fff;\">\n            <span class=\"trust-dot\" aria-hidden=\"true\"></span>\n            Community-led nonprofit serving the Northlight Valley\n          </div>",
          "target": [
            ".hero-copy > .eyebrow"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"faq-button\" type=\"button\" aria-expanded=\"false\" aria-controls=\"faq-1\">\n              <span>How are donations allocated?</span>\n              <span class=\"faq-icon\" aria-hidden=\"true\">+</span>\n            </button>",
          "target": [
            "button[aria-controls=\"faq-1\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 id=\"hero-heading\">Turning compassion into durable community power.</h1>",
                  "target": [
                    "#hero-heading"
                  ]
                },
                {
                  "html": "<h2 id=\"mission-heading\">We strengthen the everyday systems that keep neighborhoods safe and full of possibility.</h2>",
                  "target": [
                    "#mission-heading"
                  ]
                },
                {
                  "html": "<h2 id=\"programs-heading\">Four connected priorities for lasting neighborhood well-being</h2>",
                  "target": [
                    "#programs-heading"
                  ]
                },
                {
                  "html": "<h3>Housing Stability</h3>",
                  "target": [
                    ".program-card:nth-child(1) > .program-body > h3"
                  ]
                },
                {
                  "html": "<h3>Food Security</h3>",
                  "target": [
                    ".program-card.delay-1 > .program-body > h3"
                  ]
                },
                {
                  "html": "<h3>Youth &amp; Education Opportunity</h3>",
                  "target": [
                    ".program-card.delay-2 > .program-body > h3"
                  ]
                },
                {
                  "html": "<h3>Workforce Readiness</h3>",
                  "target": [
                    ".program-card.delay-3 > .program-body > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"impact-heading\">See how generosity compounds into real community change</h2>",
                  "target": [
                    "#impact-heading"
                  ]
                },
                {
                  "html": "<h3 id=\"calc-title\">Northlight Impact Calculator</h3>",
                  "target": [
                    "#calc-title"
                  ]
                },
                {
                  "html": "<h2 id=\"stories-heading\">Beneficiaries, volunteers, and partners on what accountability looks like in practice</h2>",
                  "target": [
                    "#stories-heading"
                  ]
                },
                {
                  "html": "<h3>Maya used a rent bridge and case management to rebuild family stability</h3>",
                  "target": [
                    ".featured-story > div > h3"
                  ]
                },
                {
                  "html": "<h3>Accountability Snapshot</h3>",
                  "target": [
                    ".sidebar-card.reveal:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Quick Actions</h3>",
                  "target": [
                    ".sidebar-card.delay-1.reveal > h3"
                  ]
                },
                {
                  "html": "<h3>Upcoming Volunteer Orientation</h3>",
                  "target": [
                    ".sidebar-card.delay-2.reveal > h3"
                  ]
                },
                {
                  "html": "<h3>Partner Spotlights</h3>",
                  "target": [
                    ".sidebar-card.delay-3.reveal > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"events-heading\">Ways to show up, connect, and multiply impact</h2>",
                  "target": [
                    "#events-heading"
                  ]
                },
                {
                  "html": "<h3>Mobile Pantry Volunteer Day</h3>",
                  "target": [
                    ".event-card:nth-child(1) > .event-body > h3"
                  ]
                },
                {
                  "html": "<h3>Back-to-School Supply Drive Kickoff</h3>",
                  "target": [
                    ".event-card.delay-1 > .event-body > h3"
                  ]
                },
                {
                  "html": "<h3>Capacity-Building Workshop for Local Nonprofits</h3>",
                  "target": [
                    ".event-card.delay-2 > .event-body > h3"
                  ]
                },
                {
                  "html": "<h3>Lantern Benefit Dinner</h3>",
                  "target": [
                    ".event-card.delay-3 > .event-body > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"news-heading\">Updates, outcomes, and announcements from our team</h2>",
                  "target": [
                    "#news-heading"
                  ]
                },
                {
                  "html": "<h3>New Route 7 mobile pantry serves 480 households monthly</h3>",
                  "target": [
                    ".news-card:nth-child(1) > .news-body > h3"
                  ]
                },
                {
                  "html": "<h3>2025 audit and outcome report now available</h3>",
                  "target": [
                    ".news-card.delay-1 > .news-body > h3"
                  ]
                },
                {
                  "html": "<h3>Workforce apprenticeship partnership expands with Valley Technical College</h3>",
                  "target": [
                    ".news-card.delay-2 > .news-body > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"involved-heading\">Take action in the way that fits your capacity</h2>",
                  "target": [
                    "#involved-heading"
                  ]
                },
                {
                  "html": "<h3>Give Monthly</h3>",
                  "target": [
                    ".action-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Volunteer</h3>",
                  "target": [
                    ".action-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Partner With Us</h3>",
                  "target": [
                    ".action-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"faq-heading\">Frequently asked questions about our work</h2>",
                  "target": [
                    "#faq-heading"
                  ]
                },
                {
                  "html": "<h2 id=\"contact-heading\">Connect with our team</h2>",
                  "target": [
                    "#contact-heading"
                  ]
                },
                {
                  "html": "<h3>Send us a message</h3>",
                  "target": [
                    "#contact-form > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"footer-title\">Explore</h3>",
                  "target": [
                    "div:nth-child(2) > .footer-title"
                  ]
                },
                {
                  "html": "<h3 class=\"footer-title\">Action</h3>",
                  "target": [
                    "div:nth-child(3) > .footer-title"
                  ]
                },
                {
                  "html": "<h3 class=\"footer-title\">Stay Connected</h3>",
                  "target": [
                    "div:nth-child(4) > .footer-title"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"main\">",
                  "target": [
                    "#main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#052722",
                "bgColor": "#f8f5ef",
                "contrastRatio": 14.62,
                "fontSize": "12.7pt (16.96px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 14.62"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span class=\"brand-name\">Northlight Community Trust</span>",
          "target": [
            ".brand-name"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "primary-nav",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"site-nav\" id=\"primary-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"gift-amount\">\n              Monthly gift\n              <span id=\"gift-amount-display\">$25</span>\n            </label>",
                  "target": [
                    "label[for=\"gift-amount\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"gift-amount\" type=\"range\" min=\"10\" max=\"500\" step=\"5\" value=\"25\" aria-label=\"Monthly gift slider\" style=\"background: linear-gradient(to right, rgba(17, 107, 92, 0.78) 0%, rgba(17, 107, 92, 0.78) 3.06122%, rgba(17, 107, 92, 0.14) 3.06122%, rgba(17, 107, 92, 0.14) 100%);\">",
          "target": [
            "#gift-amount"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/56x56/0b4a40/ffffff?text=NL&amp;font=poppins\" alt=\"Northlight Community Trust logo\">",
          "target": [
            ".brand > img"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"gift-amount\">\n              Monthly gift\n              <span id=\"gift-amount-display\">$25</span>\n            </label>",
                  "target": [
                    "label[for=\"gift-amount\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input id=\"gift-amount\" type=\"range\" min=\"10\" max=\"500\" step=\"5\" value=\"25\" aria-label=\"Monthly gift slider\" style=\"background: linear-gradient(to right, rgba(17, 107, 92, 0.78) 0%, rgba(17, 107, 92, 0.78) 3.06122%, rgba(17, 107, 92, 0.14) 3.06122%, rgba(17, 107, 92, 0.14) 100%);\">",
          "target": [
            "#gift-amount"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#main\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul>",
          "target": [
            "#primary-nav > ul"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#mission\">Our Mission</a></li>",
          "target": [
            "#primary-nav > ul > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/56x56/0b4a40/ffffff?text=NL&amp;font=poppins\" alt=\"Northlight Community Trust logo\">",
          "target": [
            ".brand > img"
          ]
        }
      ]
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"focus-area\">Program focus</label>",
                  "target": [
                    "label[for=\"focus-area\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select id=\"focus-area\" aria-label=\"Program focus area\">",
          "target": [
            "#focus-area"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 199.5,
                "height": 55.2
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (199.5px by 55.2px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#main\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"hero-trust\" aria-label=\"Trust and accountability highlights\">",
          "target": [
            ".hero-trust"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fontSize": "9.1pt (12.16px)",
                "fontWeight": "bold",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "4.5:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" aria-labelledby=\"hero-heading\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"eyebrow\" style=\"background: rgba(255,255,255,.12); color: #fff;\">\n            <span class=\"trust-dot\" aria-hidden=\"true\"></span>\n            Community-led nonprofit serving the Northlight Valley\n          </div>",
          "target": [
            ".hero-copy > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo element"
        }
      ]
    }
  ],
  "violations": [],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 12883
      },
      {
        "y": 576,
        "height": 12883
      },
      {
        "y": 1152,
        "height": 12883
      },
      {
        "y": 1728,
        "height": 12883
      },
      {
        "y": 2304,
        "height": 12883
      },
      {
        "y": 2880,
        "height": 12883
      },
      {
        "y": 3456,
        "height": 12883
      },
      {
        "y": 4032,
        "height": 12883
      },
      {
        "y": 4608,
        "height": 12883
      },
      {
        "y": 5184,
        "height": 12883
      },
      {
        "y": 5760,
        "height": 12883
      },
      {
        "y": 6336,
        "height": 12883
      },
      {
        "y": 6912,
        "height": 12883
      },
      {
        "y": 7488,
        "height": 12883
      },
      {
        "y": 8064,
        "height": 12883
      },
      {
        "y": 8640,
        "height": 12919
      },
      {
        "y": 9216,
        "height": 12919
      },
      {
        "y": 9792,
        "height": 12919
      },
      {
        "y": 10368,
        "height": 12919
      },
      {
        "y": 10944,
        "height": 12919
      },
      {
        "y": 11520,
        "height": 12919
      },
      {
        "y": 12096,
        "height": 12919
      },
      {
        "y": 12199,
        "height": 12919
      }
    ],
    "scans": 24,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Non-Profit/Charity" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Non-Profit/Charity"
- Description: Charitable organizations, non-profit initiatives, volunteering, and fundraising resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Non-Profit/Charity" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Contact", "Our Mission", "News".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Non-Profit/Charity" category. Consider themes similar to: "Impact Stories", "Fundraising Events", "Beneficiary Stories".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "capacity building", "community outreach", "stewardship".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Take Action", "Register", "Get Involved".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Non-Profit/Charity" sector. Ideas similar but not limited to: "impact calculator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "partner highlights", "impact reports", "success stories".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.