Z.ai GLM 5.3 – Non Profit Charity

via Z.AI · Generated

  • AIMAC Debt 4.19
  • Cost $0.28
  • Total Violations 10
  • HTML Size 84 KB
  • Em Dashes 0

Screenshot

View Z.ai GLM 5.3 Non Profit Charity page View Live Page

Accessibility Issues Found

10 Serious

  • color-contrast serious 10 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="badge-match">Gifts matched 2×</span>

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>Brightwater Alliance | Turning Compassion Into Lasting Change</title>
<meta name="description" content="Brightwater Alliance is a community-powered 501(c)(3) nonprofit advancing food security, stable housing, youth mentorship, and health equity across the Portland metro area. Give, volunteer, or partner with us.">
<meta property="og:title" content="Brightwater Alliance">
<meta property="og:description" content="Small acts of kindness. Steady rivers of change. Join 1,250 volunteers and 2,800+ donors powering food security, housing stability, and youth opportunity in Portland.">
<link rel="icon" href="https://placehold.co/64x64/146067/FAF6EF?text=BW&font=montserrat">
<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=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  /* ============ Design tokens ============ */
  :root{
    --teal-900:#0B3B43;
    --teal-800:#0E4A52;
    --teal-700:#12555F;
    --teal-600:#146067;
    --teal-100:#E1EFEA;
    --amber:#E8912D;
    --amber-600:#D07C15;
    --amber-700:#A85F0B;
    --amber-100:#FCEFD9;
    --amber-soft:#F4B45E;
    --ink:#22323B;
    --ink-soft:#43555F;
    --muted:#5F707A;
    --paper:#FAF6EF;
    --line:#E8E1D3;
    --white:#FFFFFF;
    --radius:16px;
    --shadow-sm:0 2px 10px rgba(16,42,48,.07);
    --shadow-md:0 12px 32px rgba(16,42,48,.13);
    --shadow-lg:0 24px 60px rgba(10,42,48,.28);
    --font-head:'Fraunces',Georgia,'Times New Roman',serif;
    --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }

  /* ============ Base ============ */
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img{max-width:100%;display:block}
  a{color:inherit}
  button{font-family:inherit}
  [id]{scroll-margin-top:96px}
  ::selection{background:var(--amber);color:#3A2405}
  :focus-visible{outline:3px solid rgba(232,145,45,.55);outline-offset:2px;border-radius:4px}

  .container{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}
  .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:-999px;top:0;background:var(--teal-900);color:#fff;padding:.7rem 1.2rem;z-index:200;border-radius:0 0 10px 0;text-decoration:none;font-weight:600}
  .skip-link:focus{left:0}

  /* Icons */
  .icon{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .icon-fill{width:18px;height:18px;fill:currentColor;flex:none}
  .rot{transform:rotate(90deg)}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.7rem;border-radius:999px;font-weight:600;font-size:.95rem;line-height:1;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s}
  .btn:active{transform:translateY(1px)}
  .btn:disabled{opacity:.75;cursor:default}
  .btn .icon{width:1.05em;height:1.05em}
  .btn-accent{background:var(--amber);color:#3A2405}
  .btn-accent:hover{background:var(--amber-600);color:#2E1B04}
  .btn-teal{background:var(--teal-700);color:#fff}
  .btn-teal:hover{background:var(--teal-800)}
  .btn-ghost-light{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
  .btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
  .btn-outline{border-color:var(--teal-700);color:var(--teal-700);background:transparent}
  .btn-outline:hover{background:var(--teal-700);color:#fff}
  .btn-sm{padding:.6rem 1.15rem;font-size:.85rem}
  .btn-lg{padding:1rem 2rem;font-size:1rem}
  .btn-block{width:100%}

  .text-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.95rem;color:var(--teal-700);text-decoration:none}
  .text-link .icon{width:1em;height:1em;transition:transform .25s}
  .text-link:hover{color:var(--amber-700);text-decoration:underline;text-underline-offset:4px}
  .text-link:hover .icon{transform:translateX(4px)}

  /* Sections */
  .section{padding:clamp(4rem,8vw,6rem) 0}
  .section--paper{background:var(--paper)}
  .section--white{background:var(--white)}
  .section--tint{background:#FBF1DE}
  .section--dark{background:radial-gradient(1100px 500px at 85% -10%,rgba(232,145,45,.12),transparent 60%),linear-gradient(160deg,#0B3B43 0%,#0E4A52 75%);color:#DCEAE7}

  .eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-700)}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--amber)}
  .section-title{font-family:var(--font-head);font-weight:600;font-size:clamp(1.9rem,3.2vw,2.55rem);line-height:1.15;color:var(--teal-900);letter-spacing:-.01em;margin:.55rem 0 1rem}
  .section-intro{font-size:1.06rem;color:var(--ink-soft);max-width:46rem}
  .section--dark .section-title{color:#fff}
  .section--dark .eyebrow{color:var(--amber-soft)}
  .section--dark .section-intro{color:rgba(255,255,255,.82)}
  .section-head{max-width:740px;margin-bottom:2.8rem}
  .section-head--center{margin-left:auto;margin-right:auto;text-align:center}

  /* Reveal animation */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
    .progress-fill,.alloc-fill{transition:none!important}
  }

  /* ============ Announcement bar ============ */
  .announce{background:var(--teal-900);color:#DCEDF0;font-size:.83rem;text-align:center;padding:.6rem 1rem;line-height:1.5}
  .announce a{color:var(--amber-soft);font-weight:600;text-decoration:underline;text-underline-offset:3px}
  .announce a:hover{color:#fff}
  .announce strong{color:#fff;font-weight:600}

  /* ============ Header ============ */
  .site-header{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
  .site-header.scrolled{box-shadow:0 6px 24px rgba(10,42,48,.09)}
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.55rem 0;position:relative}
  .brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
  .brand img{width:46px;height:46px;border-radius:12px}
  .brand-name{font-family:var(--font-head);font-size:1.18rem;font-weight:600;color:var(--teal-900);line-height:1.15;display:block}
  .brand-tag{font-size:.72rem;color:var(--muted);display:block;letter-spacing:.02em}
  .site-nav{display:flex;align-items:center;gap:1.6rem}
  .nav-list{display:flex;gap:1.5rem;list-style:none;align-items:center}
  .nav-list a{font-size:.92rem;font-weight:500;color:var(--ink-soft);text-decoration:none;padding:.3rem 0;position:relative}
  .nav-list a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--amber);transition:right .3s}
  .nav-list a:hover{color:var(--teal-800)}
  .nav-list a:hover::after{right:0}
  .nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.5rem}
  .nav-toggle span{width:24px;height:2.5px;background:var(--teal-900);border-radius:2px;transition:.3s}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  @media (max-width:1020px){
    .nav-toggle{display:flex}
    .site-nav{position:absolute;top:100%;left:0;right:0;background:#fff;display:none;flex-direction:column;align-items:flex-start;padding:1.25rem clamp(20px,4vw,32px) 1.75rem;border-bottom:1px solid var(--line);box-shadow:0 24px 40px rgba(10,42,48,.14)}
    body.nav-open .site-nav{display:flex}
    .nav-list{flex-direction:column;align-items:flex-start;gap:1rem;width:100%}
    .nav-list a{font-size:1.05rem}
  }

  /* ============ Hero ============ */
  .hero{position:relative;color:#fff;padding:clamp(4rem,7vw,6.5rem) 0 clamp(7rem,10vw,9rem);background:linear-gradient(112deg,rgba(7,38,44,.96) 0%,rgba(9,52,59,.88) 45%,rgba(13,74,82,.62) 100%),url('https://picsum.photos/seed/bwrivercity/1600/1000') center center/cover no-repeat}
  .hero-wave{position:absolute;bottom:-1px;left:0;width:100%;height:64px;display:block}
  .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
  .hero-kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--amber-soft)}
  .hero-kicker::before{content:"";width:28px;height:2px;background:var(--amber)}
  .hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(2.5rem,5vw,3.75rem);line-height:1.07;letter-spacing:-.015em;margin:1rem 0 1.2rem}
  .hero h1 em{font-style:italic;color:var(--amber-soft)}
  .hero-lead{font-size:1.15rem;color:rgba(255,255,255,.88);max-width:34rem;margin-bottom:2rem}
  .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.8rem}
  .hero-badges{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
  .hero-badges li{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:.42rem .85rem;border-radius:999px}
  .hero-badges .icon{width:15px;height:15px;color:var(--amber-soft)}
  .hero-badges a{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-weight:600;color:#fff}
  .hero-badges a:hover{background:rgba(255,255,255,.16)}

  /* Donation card */
  .donate-card{background:#fff;color:var(--ink);border-radius:20px;padding:1.7rem 1.6rem;box-shadow:var(--shadow-lg);border-top:5px solid var(--amber)}
  .donate-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;margin-bottom:1.1rem}
  .donate-kicker{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-700)}
  .donate-title{font-family:var(--font-head);font-size:1.3rem;font-weight:600;color:var(--teal-900);line-height:1.25;margin-top:.15rem}
  .badge-match{flex:none;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-700);background:var(--amber-100);border:1px solid var(--amber);padding:.35rem .6rem;border-radius:999px}
  .donate-progress{margin-bottom:1.3rem}
  .donate-progress__nums{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-size:.85rem;color:var(--muted);margin-bottom:.45rem}
  .donate-progress__nums strong{font-family:var(--font-head);font-size:1.25rem;color:var(--teal-900);font-weight:600}
  .progress-track{height:12px;background:#EFE8DA;border-radius:999px;overflow:hidden}
  .progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--amber-600));border-radius:999px;transition:width .9s cubic-bezier(.25,.8,.3,1)}
  .progress-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:.4rem}
  .progress-meta span:first-child{color:var(--amber-700);font-weight:700}
  .donate-label{font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-900);margin-bottom:.55rem}
  .amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
  .amount-btn{padding:.65rem .3rem;border:1.5px solid var(--line);border-radius:10px;font-weight:600;font-size:.95rem;background:#fff;color:var(--ink);cursor:pointer;transition:.2s}
  .amount-btn:hover{border-color:var(--teal-600)}
  .amount-btn.selected{background:var(--teal-700);border-color:var(--teal-700);color:#fff}
  .amount-custom{display:flex;align-items:center;gap:.4rem;border:1.5px solid var(--line);border-radius:10px;padding:.55rem .85rem;margin-top:.5rem;transition:border-color .2s}
  .amount-custom:focus-within{border-color:var(--teal-700)}
  .amount-custom span{color:var(--muted);font-weight:600}
  .amount-custom input{border:none;outline:none;width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:transparent}
  .amount-custom input::-webkit-outer-spin-button,.amount-custom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .impact-line{display:flex;align-items:flex-start;gap:.55rem;font-size:.9rem;color:var(--ink-soft);margin:1rem 0 .9rem;min-height:2.8em}
  .impact-line .icon{color:var(--amber);margin-top:.2em}
  .donate-fine{font-size:.74rem;color:var(--muted);text-align:center;margin-top:.75rem}

  @media (max-width:1020px){.hero-grid{grid-template-columns:1fr;gap:3rem}}
  @media (max-width:430px){
    .amount-grid{grid-template-columns:repeat(2,1fr)}
    .donate-card{padding:1.4rem 1.2rem}
  }

  /* ============ Mission ============ */
  .mission-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
  .mission-media{position:relative}
  .mission-media img{border-radius:22px;border:1px solid var(--line);width:100%;height:auto}
  .media-badge{position:absolute;left:1.25rem;bottom:1.25rem;display:flex;align-items:center;gap:.7rem;background:#fff;border-radius:14px;padding:.8rem 1.1rem;box-shadow:var(--shadow-md);max-width:calc(100% - 2.5rem)}
  .media-badge .icon{width:22px;height:22px;color:var(--amber)}
  .media-badge strong{display:block;font-family:var(--font-head);font-size:1rem;color:var(--teal-900);line-height:1.2}
  .media-badge span{font-size:.78rem;color:var(--muted)}
  .mission-copy p{color:var(--ink-soft);margin-bottom:1.1rem}
  .values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:3.5rem}
  .value-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.5rem;transition:transform .3s,box-shadow .3s}
  .value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
  .value-card .icon-wrap{width:46px;height:46px;border-radius:12px;background:var(--teal-100);color:var(--teal-700);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
  .value-card .icon-wrap .icon{width:23px;height:23px}
  .value-card h3{font-family:var(--font-head);font-size:1.05rem;font-weight:600;color:var(--teal-900);margin-bottom:.4rem}
  .value-card p{font-size:.92rem;color:var(--muted)}

  @media (max-width:1020px){
    .mission-grid{grid-template-columns:1fr}
    .values-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:520px){.values-grid{grid-template-columns:1fr}}

  /* ============ Programs ============ */
  .programs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;align-items:stretch}
  .program-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .3s,box-shadow .3s}
  .program-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
  .program-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
  .program-body{padding:1.35rem;display:flex;flex-direction:column;gap:.65rem;flex:1}
  .tag-pill{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-800);background:var(--teal-100);padding:.3rem .7rem;border-radius:999px}
  .program-card h3{font-family:var(--font-head);font-size:1.22rem;font-weight:600;color:var(--teal-900);line-height:1.25}
  .program-card p{font-size:.93rem;color:var(--ink-soft);flex:1}
  @media (max-width:1100px){.programs-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.programs-grid{grid-template-columns:1fr}}

  /* ============ Impact ============ */
  .impact-grid{display:grid;grid-template-columns:1.55fr .9fr;gap:clamp(2.5rem,4vw,3.5rem);align-items:start}
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin:2.4rem 0 2.6rem}
  .stat{border-left:3px solid var(--amber);padding-left:1rem}
  .stat-num{display:block;font-family:var(--font-head);font-size:clamp(1.8rem,2.6vw,2.5rem);font-weight:600;color:#fff;line-height:1.1}
  .stat-label{font-size:.85rem;color:rgba(255,255,255,.75)}
  .alloc-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:1.6rem}
  .alloc-panel h3{font-family:var(--font-head);font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:1.2rem}
  .alloc-row{margin-bottom:1.05rem}
  .alloc-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.9rem;margin-bottom:.35rem}
  .alloc-head span{color:rgba(255,255,255,.85)}
  .alloc-head strong{color:#fff;font-weight:600;white-space:nowrap}
  .alloc-track{height:10px;background:rgba(255,255,255,.14);border-radius:999px;overflow:hidden}
  .alloc-fill{height:100%;width:0;border-radius:999px;transition:width 1.2s cubic-bezier(.25,.8,.3,1)}
  .alloc-fill--accent{background:var(--amber)}
  .alloc-fill--soft{background:#8FBFC1}
  .report-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
  .impact-sidebar{display:flex;flex-direction:column;gap:1.25rem}
  .side-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:1.5rem}
  .side-kicker{display:block;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-soft);margin-bottom:.35rem}
  .side-card h3{font-family:var(--font-head);font-size:1.18rem;font-weight:600;color:#fff;margin-bottom:.5rem}
  .side-card p{font-size:.92rem;color:rgba(255,255,255,.78)}
  .donor-list{list-style:none;margin:.8rem 0 .2rem}
  .donor-list li{font-size:.9rem;color:rgba(255,255,255,.85);padding:.45rem 0;border-bottom:1px dashed rgba(255,255,255,.18)}
  .donor-list li:last-child{border-bottom:none}
  .side-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;color:var(--amber-soft);text-decoration:none;margin-top:.7rem}
  .side-link:hover{text-decoration:underline;text-underline-offset:4px}
  .side-link .icon{width:.95em;height:.95em}
  .partner-logo{background:#fff;border-radius:10px;padding:.45rem .9rem;height:48px;width:auto;margin:.85rem 0 .2rem}
  @media (max-width:1020px){.impact-grid{grid-template-columns:1fr}}
  @media (max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.4rem}}

  /* ============ Events ============ */
  .events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
  .event-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .3s,box-shadow .3s}
  .event-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
  .event-card img{width:100%;height:158px;object-fit:cover}
  .event-body{padding:1.35rem;display:flex;flex-direction:column;gap:.75rem;flex:1}
  .event-title-row{display:flex;align-items:center;gap:.9rem}
  .event-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:58px;border-radius:14px;background:var(--teal-700);color:#fff;flex:none}
  .event-date .ed-month{font-size:.62rem;font-weight:700;letter-spacing:.1em}
  .event-date .ed-day{font-family:var(--font-head);font-size:1.3rem;font-weight:600;line-height:1.05}
  .event-date .ed-day--range{font-size:.92rem}
  .event-card h3{font-family:var(--font-head);font-size:1.18rem;font-weight:600;color:var(--teal-900);line-height:1.25}
  .event-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.82rem;color:var(--muted)}
  .event-meta span{display:inline-flex;align-items:center;gap:.4rem}
  .event-meta .icon{width:14px;height:14px;color:var(--amber-700)}
  .event-card p{font-size:.92rem;color:var(--ink-soft);flex:1}
  .event-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.2rem}
  @media (max-width:980px){.events-grid{grid-template-columns:1fr}}

  /* ============ Testimonials ============ */
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
  .testi-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.8rem;display:flex;flex-direction:column}
  .testi-card .icon-quote{width:32px;height:32px;color:var(--amber);margin-bottom:1rem}
  .testi-card blockquote{font-size:.97rem;line-height:1.7;color:var(--ink-soft);flex:1}
  .testi-footer{display:flex;align-items:center;gap:.9rem;margin-top:1.5rem}
  .testi-footer img{width:52px;height:52px;border-radius:50%;border:2px solid #fff;box-shadow:var(--shadow-sm)}
  .testi-footer strong{display:block;font-size:.95rem;color:var(--teal-900)}
  .testi-footer span{font-size:.8rem;color:var(--muted)}
  @media (max-width:980px){.testi-grid{grid-template-columns:1fr}}

  /* ============ News ============ */
  .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
  .news-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .3s,box-shadow .3s}
  .news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
  .news-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
  .news-body{padding:1.35rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
  .news-meta{display:flex;align-items:center;gap:.7rem}
  .news-cat{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-700);background:var(--amber-100);padding:.28rem .65rem;border-radius:999px}
  .news-date{font-size:.8rem;color:var(--muted)}
  .news-card h3{font-family:var(--font-head);font-size:1.14rem;font-weight:600;color:var(--teal-900);line-height:1.3}
  .news-card p{font-size:.92rem;color:var(--ink-soft);flex:1}
  @media (max-width:980px){.news-grid{grid-template-columns:1fr}}

  /* ============ Volunteer ============ */
  .volunteer-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,4vw,4rem);align-items:start}
  .volunteer-copy p{color:var(--ink-soft);margin-bottom:1.1rem}
  .roles-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.75rem}
  .role-card{display:flex;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.15rem 1.25rem;align-items:flex-start;transition:transform .3s,box-shadow .3s}
  .role-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  .role-icon{width:46px;height:46px;border-radius:12px;background:var(--teal-100);color:var(--teal-700);display:flex;align-items:center;justify-content:center;flex:none}
  .role-icon .icon{width:23px;height:23px}
  .role-card h4{font-size:1rem;font-weight:600;color:var(--teal-900);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
  .role-time{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-700);background:var(--amber-100);padding:.22rem .6rem;border-radius:999px}
  .role-card p{font-size:.9rem;color:var(--muted);margin-top:.35rem}
  .form-card{background:#fff;border-radius:20px;padding:2rem;box-shadow:var(--shadow-md);border:1px solid var(--line)}
  .form-card h3{font-family:var(--font-head);font-size:1.4rem;font-weight:600;color:var(--teal-900)}
  .form-card .form-sub{font-size:.9rem;color:var(--muted);margin:.35rem 0 1.4rem}
  .field{margin-bottom:1.05rem}
  .field label{display:block;font-size:.85rem;font-weight:600;color:var(--teal-900);margin-bottom:.4rem}
  .field input,.field select{width:100%;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
  .field input:focus,.field select:focus{outline:none;border-color:var(--teal-700);box-shadow:0 0 0 4px rgba(20,96,103,.12)}
  .form-note{font-size:.78rem;color:var(--muted);margin-top:.85rem;text-align:center}
  .form-success{text-align:center;padding:1.5rem .5rem}
  .success-icon{width:58px;height:58px;border-radius:50%;background:var(--amber-100);color:var(--amber-700);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
  .success-icon .icon{width:26px;height:26px}
  .form-success h3{font-family:var(--font-head);font-size:1.3rem;font-weight:600;color:var(--teal-900);margin-bottom:.5rem}
  .form-success p{font-size:.92rem;color:var(--ink-soft)}
  @media (max-width:1020px){.volunteer-grid{grid-template-columns:1fr}}

  /* ============ FAQ ============ */
  .faq-list{max-width:800px;margin:0 auto}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-item:first-child{border-top:1px solid var(--line)}
  .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:none;border:none;cursor:pointer;padding:1.25rem .2rem;text-align:left;font:inherit;font-size:1.04rem;font-weight:600;color:var(--teal-900)}
  .faq-q:hover{color:var(--amber-700)}
  .faq-q .icon{color:var(--amber);width:22px;height:22px;transition:transform .3s}
  .faq-item.open .faq-q .icon{transform:rotate(45deg)}
  .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
  .faq-item.open .faq-a{grid-template-rows:1fr}
  .faq-a-inner{overflow:hidden}
  .faq-a-inner p{padding:0 .2rem 1.4rem;color:var(--ink-soft);max-width:95%}

  /* ============ Partners ============ */
  .partner-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem;margin-bottom:2.6rem}
  .partner-tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.9rem 1.3rem;transition:border-color .3s,transform .3s}
  .partner-tile:hover{border-color:var(--amber);transform:translateY(-3px)}
  .partner-tile img{height:42px;width:auto}
  .partners-cta{text-align:center;max-width:640px;margin:0 auto}
  .partners-cta p{color:var(--ink-soft);margin-bottom:1.4rem}

  /* ============ Newsletter band ============ */
  .nl-band{background:radial-gradient(800px 400px at 50% 130%,rgba(232,145,45,.18),transparent 60%),#0B3B43;color:#DCEAE7;text-align:center;padding:clamp(3.5rem,7vw,5rem) 0}
  .nl-band .eyebrow{color:var(--amber-soft);justify-content:center}
  .nl-band h2{font-family:var(--font-head);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:600;color:#fff;margin:.5rem 0 .8rem}
  .nl-band p{max-width:520px;margin:0 auto 1.8rem;color:rgba(255,255,255,.8)}
  .nl-form{display:flex;justify-content:center;gap:.6rem;max-width:480px;margin:0 auto}
  .nl-form input{flex:1;min-width:0;padding:.9rem 1.3rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.95rem}
  .nl-form input::placeholder{color:rgba(255,255,255,.5)}
  .nl-form input:focus{outline:none;border-color:var(--amber-soft);box-shadow:0 0 0 4px rgba(232,145,45,.2)}
  .nl-note{font-size:.78rem;color:rgba(255,255,255,.6);margin-top:1rem!important}
  .nl-success{display:flex;align-items:center;justify-content:center;gap:.6rem;color:#fff;font-weight:600;background:rgba(255,255,255,.1);padding:1rem 1.4rem;border-radius:999px}
  .nl-success .icon{color:var(--amber-soft)}
  @media (max-width:520px){.nl-form{flex-direction:column}}

  /* ============ Footer ============ */
  .site-footer{background:#082228;color:#AFC6C3;padding:4rem 0 0}
  .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
  .footer-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
  .footer-brand img{width:44px;height:44px;border-radius:12px}
  .footer-brand strong{font-family:var(--font-head);font-size:1.15rem;font-weight:600;color:#fff}
  .footer-mission{font-size:.92rem;line-height:1.7;max-width:32rem}
  .social-list{list-style:none;display:flex;gap:.7rem;margin-top:1.3rem}
  .social-list a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#CFE0DD;transition:.25s}
  .social-list a:hover{background:var(--amber);border-color:var(--amber);color:#2E1B04}
  .footer-col h4{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:1.1rem}
  .footer-col ul{list-style:none}
  .footer-col ul li{padding:.32rem 0}
  .footer-col a{color:#AFC6C3;text-decoration:none;font-size:.92rem;transition:color .2s}
  .footer-col a:hover{color:var(--amber-soft)}
  .contact-list{list-style:none;display:flex;flex-direction:column;gap:.85rem}
  .contact-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;line-height:1.55}
  .contact-list .icon{width:17px;height:17px;color:var(--amber);margin-top:.2rem}
  .contact-list a{color:#CFE0DD;text-decoration:none}
  .contact-list a:hover{color:var(--amber-soft)}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:3rem;padding:1.4rem 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;font-size:.8rem;color:#8FA8A5}
  .footer-bottom a{color:#8FA8A5;text-decoration:none;margin-left:1.1rem}
  .footer-bottom a:hover{color:var(--amber-soft)}
  .footer-bottom nav{display:flex;flex-wrap:wrap}
  @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

  /* ============ Toast ============ */
  .toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:200;display:flex;gap:.9rem;align-items:flex-start;background:#fff;border-radius:16px;padding:1rem 1.25rem;box-shadow:var(--shadow-lg);max-width:380px;border:1px solid var(--line);transform:translateY(150%);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.15),opacity .3s;pointer-events:none}
  .toast.show{transform:none;opacity:1}
  .toast-icon{width:40px;height:40px;border-radius:50%;background:var(--amber);color:#3A2405;display:flex;align-items:center;justify-content:center;flex:none}
  .toast-icon .icon{width:20px;height:20px}
  .toast strong{display:block;color:var(--teal-900);font-size:.95rem}
  .toast .toast-msg{font-size:.85rem;color:var(--muted);line-height:1.5}
  @media (max-width:480px){.toast{left:1rem;right:1rem;max-width:none}}
</style>
</head>
<body>

<!-- ============ SVG icon sprite ============ -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
  <defs>
    <symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20.5C12 20.5 3.5 15.2 3.5 9.6 3.5 6.8 5.7 4.8 8.1 4.8c1.6 0 3 .86 3.9 2.2.9-1.34 2.3-2.2 3.9-2.2 2.4 0 4.6 2 4.6 4.8 0 5.6-8.5 10.9-8.5 10.9Z"/></symbol>
    <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 5 5.8v5.4c0 4.4 2.9 8.2 7 9.8 4.1-1.6 7-5.4 7-9.8V5.8L12 3Z"/><path d="m9 11.6 2.1 2.1 4-4.2"/></symbol>
    <symbol id="i-megaphone" viewBox="0 0 24 24"><path d="M4 9.5v5h3l5 4v-13l-5 4H4Z"/><path d="M15.5 9.5a3.6 3.6 0 0 1 0 5M18 7a7 7 0 0 1 0 10"/></symbol>
    <symbol id="i-gift" viewBox="0 0 24 24"><rect x="3.5" y="8" width="17" height="4" rx="1"/><path d="M5 12v7.5h14V12M12 8v11.5"/><path d="M12 8c-1.5 0-4-.6-4-2.6C8 3.6 10.9 3.4 12 8Zm0 0c1.5 0 4-.6 4-2.6C16 3.6 13.1 3.4 12 8Z"/></symbol>
    <symbol id="i-sprout" viewBox="0 0 24 24"><path d="M12 21.5v-8"/><path d="M12 13.5C12 10 9.6 7.5 6 7.5c0 3.5 2.4 6 6 6Z"/><path d="M12 11.5c0-3 2-5 5.2-5 0 3-2 5-5.2 5Z"/></symbol>
    <symbol id="i-cap" viewBox="0 0 24 24"><path d="M2.5 9.3 12 4.8l9.5 4.5L12 13.8 2.5 9.3Z"/><path d="M6.3 11.4v4.3c0 1.4 2.6 2.8 5.7 2.8s5.7-1.4 5.7-2.8v-4.3"/><path d="M21.5 9.3v5.2"/></symbol>
    <symbol id="i-home" viewBox="0 0 24 24"><path d="M4 10.8 12 4l8 6.8"/><path d="M6 9.5V20h12V9.5"/><path d="M10 20v-5.5h4V20"/></symbol>
    <symbol id="i-health" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.6"/><path d="M12 8.2v7.6M8.2 12h7.6"/></symbol>
    <symbol id="i-calendar" viewBox="0 0 24 24"><rect x="3.5" y="5.5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10.2h17M8 3v4M16 3v4"/></symbol>
    <symbol id="i-star" viewBox="0 0 24 24"><path d="M12 3.5l2.4 5.1 5.6.7-4.1 3.9 1 5.5-4.9-2.7-4.9 2.7 1-5.5L4 9.3l5.6-.7L12 3.5Z"/></symbol>
    <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M4.5 12h15m-5.5-5.5L19.5 12 14 17.5"/></symbol>
    <symbol id="i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m3.5 7.5 8.5 6 8.5-6"/></symbol>
    <symbol id="i-phone" viewBox="0 0 24 24"><path d="M5.1 3h3.1l1.9 4.7-2.4 1.5a12.4 12.4 0 0 0 6.1 6.1l1.5-2.4L20 14.8v3.1a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 3.1 5.2 2 2 0 0 1 5.1 3Z"/></symbol>
    <symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 21.5S5 15 5 9.8a7 7 0 0 1 14 0c0 5.2-7 11.7-7 11.7Z"/><circle cx="12" cy="9.8" r="2.7"/></symbol>
    <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.6"/><path d="M12 7.2V12l3.4 2"/></symbol>
    <symbol id="i-check" viewBox="0 0 24 24"><path d="m4.5 12.5 5 5 10-11"/></symbol>
    <symbol id="i-quote" viewBox="0 0 24 24"><path d="M10.3 5.5C6.9 7 5 9.8 5 13.6V19h6.2v-6.1H8.4c.1-2.6 1.3-4.5 3.5-5.8l-1.6-1.6Z"/><path d="M19.3 5.5C15.9 7 14 9.8 14 13.6V19h6.2v-6.1h-2.8c.1-2.6 1.3-4.5 3.5-5.8l-1.6-1.6Z"/></symbol>
    <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
    <symbol id="i-book" viewBox="0 0 24 24"><path d="M4 5.7A2.7 2.7 0 0 1 6.7 3H20v15.5H6.7A2.7 2.7 0 0 0 4 21.2V5.7Z"/><path d="M4 21.2a2.7 2.7 0 0 1 2.7-2.7H20"/></symbol>
    <symbol id="s-facebook" viewBox="0 0 24 24"><path d="M13.4 21v-7.1h2.4l.36-2.8h-2.76V9.3c0-.81.22-1.36 1.39-1.36h1.48V5.45c-.26-.03-1.14-.11-2.16-.11-2.14 0-3.6 1.3-3.6 3.7v2.06H8v2.8h2.4V21h3Z"/></symbol>
    <symbol id="s-instagram" viewBox="0 0 24 24"><rect x="3.5" y="3.5" width="17" height="17" rx="4.5"/><circle cx="12" cy="12" r="3.8"/><circle cx="16.9" cy="7.1" r="1.1" fill="currentColor" stroke="none"/></symbol>
    <symbol id="s-x" viewBox="0 0 24 24"><path d="M17.9 3H21l-6.78 7.74L22.2 21h-6.24l-4.89-6.4L5.47 21H2.34l7.25-8.28L2 3h6.4l4.42 5.85L17.9 3Zm-1.1 16.13h1.73L7.7 4.77H5.85L16.8 19.13Z"/></symbol>
    <symbol id="s-linkedin" viewBox="0 0 24 24"><path d="M6.94 8.5H4.06V21h2.88V8.5ZM5.5 3.4a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5ZM21 21h-2.88v-6.53c0-1.52-.54-2.56-1.9-2.56-1.04 0-1.66.7-1.93 1.37-.1.24-.12.58-.12.92V21H12.3s.04-10.5 0-11.57h2.87v1.64c.38-.59 1.06-1.43 2.59-1.43 1.89 0 3.24 1.23 3.24 3.88V21Z"/></symbol>
    <symbol id="s-youtube" viewBox="0 0 24 24"><path d="M22.5 7.2a2.8 2.8 0 0 0-2-2C18.9 4.8 12 4.8 12 4.8s-6.9 0-8.5.44a2.8 2.8 0 0 0-2 2A29 29 0 0 0 1 12a29 29 0 0 0 .5 4.8 2.8 2.8 0 0 0 2 2c1.6.44 8.5.44 8.5.44s6.9 0 8.5-.44a2.8 2.8 0 0 0 2-2A29 29 0 0 0 23 12a29 29 0 0 0-.5-4.8ZM9.8 15.1V8.9L15.4 12l-5.6 3.1Z"/></symbol>
  </defs>
</svg>

<a class="skip-link" href="#main">Skip to main content</a>

<!-- ============ Announcement bar ============ -->
<div class="announce">
  <strong>Giving Season Match:</strong> every gift made before December 31 will be matched dollar-for-dollar by our Board of Directors. <a href="#donate">Give now</a>
</div>

<!-- ============ Header ============ -->
<header class="site-header" id="top">
  <div class="container header-inner">
    <a class="brand" href="#top" aria-label="Brightwater Alliance home">
      <img src="https://placehold.co/96x96/0D4A52/FAF6EF?text=BW&font=montserrat" alt="Brightwater Alliance logo" width="46" height="46">
      <span>
        <span class="brand-name">Brightwater Alliance</span>
        <span class="brand-tag">Turning compassion into lasting change</span>
      </span>
    </a>
    <nav class="site-nav" id="siteNav" aria-label="Primary navigation">
      <ul class="nav-list">
        <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="#events">Events</a></li>
        <li><a href="#volunteer">Volunteer</a></li>
        <li><a href="#partners">Partners</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
      <a class="btn btn-teal btn-sm nav-cta" href="#donate"><svg class="icon"><use href="#i-heart"/></svg>Give Now</a>
    </nav>
    <button class="nav-toggle" aria-expanded="false" aria-controls="siteNav" aria-label="Toggle navigation menu">
      <span></span><span></span><span></span>
    </button>
  </div>
</header>

<main id="main">

  <!-- ============ Hero ============ -->
  <section class="hero" aria-label="Introduction">
    <div class="container hero-grid">
      <div class="hero-copy">
        <p class="hero-kicker">A community-powered 501(c)(3) &middot; Portland, Oregon</p>
        <h1>Small acts of kindness. <em>Steady rivers of change.</em></h1>
        <p class="hero-lead">For fifteen years, Brightwater Alliance has turned neighborly generosity into food security, stable housing, and brighter futures for families across the Portland metro area. Every dollar, every shift, every voice moves the water forward &mdash; and we&rsquo;re just getting started.</p>
        <div class="hero-cta">
          <a href="#donate" class="btn btn-accent btn-lg"><svg class="icon"><use href="#i-heart"/></svg>Give Now</a>
          <a href="#volunteer" class="btn btn-ghost-light btn-lg">Volunteer Today</a>
        </div>
        <ul class="hero-badges">
          <li><svg class="icon"><use href="#i-shield"/></svg>Charity Navigator 4-Star Charity</li>
          <li><svg class="icon"><use href="#i-shield"/></svg>GuideStar Platinum Transparency</li>
          <li><a href="#impact"><svg class="icon rot"><use href="#i-arrow"/></svg>See our 2024 impact</a></li>
        </ul>
      </div>

      <!-- Interactive donation tracker -->
      <aside class="donate-card" id="donate" aria-label="Donation widget">
        <div class="donate-head">
          <div>
            <p class="donate-kicker">Rising Together Capital Campaign</p>
            <p class="donate-title">Help us close out our boldest year yet</p>
          </div>
          <span class="badge-match">Gifts matched 2&times;</span>
        </div>
        <div class="donate-progress">
          <div class="donate-progress__nums">
            <strong id="raisedAmount">$482,650</strong>
            <span>raised of $600,000</span>
          </div>
          <div class="progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" aria-label="Campaign progress">
            <div class="progress-fill" id="progressFill" style="width:80.4%"></div>
          </div>
          <div class="progress-meta">
            <span id="progressPct">80.4% of goal</span>
            <span id="donorCount">2,847 supporters</span>
          </div>
        </div>
        <p class="donate-label">Choose your gift amount</p>
        <div class="amount-grid" role="group" aria-label="Preset donation amounts">
          <button type="button" class="amount-btn" data-amount="25">$25</button>
          <button type="button" class="amount-btn selected" data-amount="50">$50</button>
          <button type="button" class="amount-btn" data-amount="100">$100</button>
          <button type="button" class="amount-btn" data-amount="250">$250</button>
        </div>
        <div class="amount-custom">
          <span>$</span>
          <input type="number" id="customAmount" min="1" step="1" inputmode="numeric" placeholder="Other amount" aria-label="Custom donation amount">
        </div>
        <p class="impact-line"><svg class="icon"><use href="#i-star"/></svg><span id="impactText">funds school-readiness kits and tutoring for two local children</span></p>
        <button type="button" class="btn btn-accent btn-block" id="giveBtn">Give $50 Now</button>
        <p class="donate-fine">Secure donation &middot; Tax-deductible &middot; EIN 26-4819557</p>
      </aside>
    </div>
    <svg class="hero-wave" viewBox="0 0 1440 64" preserveAspectRatio="none" aria-hidden="true"><path d="M0 64V40C224 6 480 2 720 20s500 36 720 12v32Z" fill="#FAF6EF"/></svg>
  </section>

  <!-- ============ Mission ============ -->
  <section class="section section--paper" id="mission">
    <div class="container">
      <div class="mission-grid">
        <figure class="mission-media reveal">
          <img src="https://picsum.photos/seed/bwmissionteam/720/860" alt="Brightwater Alliance volunteers sorting fresh produce together at the Riverbend Market" width="720" height="860" loading="lazy">
          <figcaption class="media-badge">
            <svg class="icon"><use href="#i-star"/></svg>
            <div><strong>Est. 2009</strong><span>15 years of neighbor-powered change</span></div>
          </figcaption>
        </figure>
        <div class="mission-copy">
          <p class="eyebrow">Our Mission</p>
          <h2 class="section-title">Rooted in community. Driven by dignity.</h2>
          <p>Brightwater Alliance began in 2009 with a folding table, a borrowed van, and forty bags of groceries in the basement of Riverside Community Church. Today we are a 501(c)(3) nonprofit with four program sites, 34 staff members, and more than 1,250 trained volunteers &mdash; but our founding conviction hasn&rsquo;t changed: the people closest to the problem are closest to the solution.</p>
          <p>We pair direct services with advocacy. While our Riverbend Market feeds hundreds of families every week, our policy team works alongside residents at city hall to address the root causes of hunger and housing instability. We believe charity alone cannot solve systemic challenges &mdash; but organized, well-resourced communities can.</p>
          <p>As stewards of your generosity, we hold ourselves to the highest standard of transparency. Ninety-four cents of every dollar goes directly to programs and community outreach, our books are independently audited each year, and our endowment &mdash; anchored by the Halloran Family Trust &mdash; ensures your impact outlives us all.</p>
        </div>
      </div>

      <div class="values-grid">
        <div class="value-card reveal">
          <div class="icon-wrap"><svg class="icon"><use href="#i-heart"/></svg></div>
          <h3>Dignity First</h3>
          <p>We meet people where they are, without judgment or paperwork walls. Choice &mdash; in food, in housing, in care &mdash; is a human right.</p>
        </div>
        <div class="value-card reveal d1">
          <div class="icon-wrap"><svg class="icon"><use href="#i-shield"/></svg></div>
          <h3>Radical Transparency</h3>
          <p>Audited annually by an independent firm. Our Form 990, outcomes dashboards, and annual reports are public, always.</p>
        </div>
        <div class="value-card reveal d2">
          <div class="icon-wrap"><svg class="icon"><use href="#i-megaphone"/></svg></div>
          <h3>Community Voice</h3>
          <p>Our community advisory board shapes every program we run. Nothing about our neighbors without our neighbors.</p>
        </div>
        <div class="value-card reveal d3">
          <div class="icon-wrap"><svg class="icon"><use href="#i-gift"/></svg></div>
          <h3>Faithful Stewardship</h3>
          <p>We stretch every dollar through bulk purchasing, volunteer power, and an endowment that keeps overhead lean for the long haul.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ Programs ============ -->
  <section class="section section--white" id="programs">
    <div class="container">
      <div class="section-head section-head--center reveal">
        <p class="eyebrow">What We Do</p>
        <h2 class="section-title">Four pillars. One community.</h2>
        <p class="section-intro">Every program begins with the same question &mdash; what do our neighbors actually need? &mdash; and is measured against the same promise: meaningful, measurable change in the lives of real people.</p>
      </div>
      <div class="programs-grid">
        <article class="program-card reveal">
          <img src="https://picsum.photos/seed/bwfood1/640/400" alt="Fresh produce arranged on shelves at the Riverbend choice-based market" width="640" height="400" loading="lazy">
          <div class="program-body">
            <span class="tag-pill">Food Security</span>
            <h3>Riverbend Food Security Initiative</h3>
            <p>Our choice-based market and mobile pantry distribution put 386,000 meals on the table last year. Neighbors shop with dignity, selecting the foods their families actually eat, while our nutrition educators share skills that stretch every grocery budget further.</p>
            <a class="text-link" href="#impact">Learn More <svg class="icon"><use href="#i-arrow"/></svg></a>
          </div>
        </article>
        <article class="program-card reveal d1">
          <img src="https://picsum.photos/seed/bwyouth2/640/400" alt="A mentor and student working on homework together after school" width="640" height="400" loading="lazy">
          <div class="program-body">
            <span class="tag-pill">Youth Opportunity</span>
            <h3>Harborlight Youth Mentorship</h3>
            <p>We match students in grades 3&ndash;12 with trained, background-checked mentors for a full school year of weekly meetups, homework help, and steady encouragement. Ninety-two percent of mentees report stronger grades, better attendance, or both.</p>
            <a class="text-link" href="#impact">Learn More <svg class="icon"><use href="#i-arrow"/></svg></a>
          </div>
        </article>
        <article class="program-card reveal d2">
          <img src="https://picsum.photos/seed/bwhousing3/640/400" alt="A tidy apartment building exterior in a Portland neighborhood" width="640" height="400" loading="lazy">
          <div class="program-body">
            <span class="tag-pill">Housing</span>
            <h3>Keystone Housing Stability Fund</h3>
            <p>One missed paycheck shouldn&rsquo;t cost a family their home. Our emergency rental assistance and eviction-prevention advocacy kept 214 households safely housed last year &mdash; at one-tenth the public cost of shelter placement.</p>
            <a class="text-link" href="#impact">Learn More <svg class="icon"><use href="#i-arrow"/></svg></a>
          </div>
        </article>
        <article class="program-card reveal d3">
          <img src="https://picsum.photos/seed/bwhealth4/640/400" alt="A community health worker welcoming a visitor at a screening event" width="640" height="400" loading="lazy">
          <div class="program-body">
            <span class="tag-pill">Health Equity</span>
            <h3>WellSpring Community Health Outreach</h3>
            <p>Free screenings, benefit-enrollment navigation, and community health workers who speak eleven languages bring care to the neighborhoods that need it most &mdash; at churches, libraries, and our Westside Community Hub.</p>
            <a class="text-link" href="#impact">Learn More <svg class="icon"><use href="#i-arrow"/></svg></a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ============ Impact & Annual Report (with sidebar) ============ -->
  <section class="section section--dark" id="impact">
    <div class="container">
      <div class="impact-grid">
        <div class="impact-main">
          <p class="eyebrow">Impact &amp; Annual Reports</p>
          <h2 class="section-title">Proof, not promises.</h2>
          <p class="section-intro">Our 2024 Annual Report tells a story of scale and stewardship: $4.06 million deployed across the metro area, a 94% program ratio, and more neighbors served than in any year of our history. Every figure below is drawn from our independently audited financials.</p>
          <p class="section-intro">We measure what matters &mdash; meals delivered, families housed, students on track to graduate &mdash; and we publish the numbers whether they flatter us or not. That&rsquo;s what it means to be accountable to this community.</p>

          <div class="stat-grid">
            <div class="stat reveal"><span class="stat-num" data-count="12400" data-suffix="+">12,400+</span><span class="stat-label">neighbors served last year</span></div>
            <div class="stat reveal d1"><span class="stat-num" data-count="386000" data-suffix="+">386,000+</span><span class="stat-label">meals &amp; groceries distributed</span></div>
            <div class="stat reveal d2"><span class="stat-num" data-count="1250">1,250</span><span class="stat-label">active trained volunteers</span></div>
            <div class="stat reveal d3"><span class="stat-num" data-count="94" data-suffix="%">94%</span><span class="stat-label">of every $1 funds programs</span></div>
          </div>

          <div class="alloc-panel reveal">
            <h3>Where every dollar went in FY2024</h3>
            <div class="alloc-row">
              <div class="alloc-head"><span>Direct programs</span><strong>$3.41M &middot; 84%</strong></div>
              <div class="alloc-track"><div class="alloc-fill alloc-fill--accent" data-value="84" style="width:84%"></div></div>
            </div>
            <div class="alloc-row">
              <div class="alloc-head"><span>Community outreach &amp; advocacy</span><strong>$365K &middot; 9%</strong></div>
              <div class="alloc-track"><div class="alloc-fill alloc-fill--soft" data-value="9" style="width:9%"></div></div>
            </div>
            <div class="alloc-row">
              <div class="alloc-head"><span>Administration</span><strong>$162K &middot; 4%</strong></div>
              <div class="alloc-track"><div class="alloc-fill alloc-fill--soft" data-value="4" style="width:4%"></div></div>
            </div>
            <div class="alloc-row">
              <div class="alloc-head"><span>Fundraising</span><strong>$122K &middot; 3%</strong></div>
              <div class="alloc-track"><div class="alloc-fill alloc-fill--soft" data-value="3" style="width:3%"></div></div>
            </div>
          </div>

          <div class="report-cta">
            <a class="btn btn-accent" href="#news"><svg class="icon"><use href="#i-book"/></svg>Read the 2024 Annual Report</a>
            <a class="btn btn-ghost-light" href="#faq"><svg class="icon"><use href="#i-arrow"/></svg>Download Form 990 (PDF)</a>
          </div>
        </div>

        <!-- Sidebar -->
        <aside class="impact-sidebar" aria-label="Recognition and partnership highlights">
          <div class="side-card reveal">
            <span class="side-kicker">Donor Recognition</span>
            <h3>The Luminous Circle</h3>
            <p>Our leadership giving society honors the households, foundations, and partners whose cumulative generosity has passed $10,000.</p>
            <ul class="donor-list">
              <li>The Halloran Family Trust</li>
              <li>Dr. Amelia &amp; Ken Osei</li>
              <li>Northgate Foods</li>
              <li>The Whitfield Collective</li>
              <li>Margaret Liu</li>
              <li>Cascade Credit Union</li>
            </ul>
            <a class="side-link" href="#impact">View the full honor roll <svg class="icon"><use href="#i-arrow"/></svg></a>
          </div>
          <div class="side-card reveal d1">
            <span class="side-kicker">Partner Highlight</span>
            <h3>Lumen Health</h3>
            <img class="partner-logo" src="https://placehold.co/180x56/FFFFFF/5B6B72?text=Lumen+Health&font=montserrat" alt="Lumen Health partner logo" width="180" height="56" loading="lazy">
            <p>A three-year, $450,000 commitment powers every health screening at our Westside hub &mdash; and Lumen&rsquo;s nurses volunteer on-site twice a month. That&rsquo;s partnership in practice.</p>
            <a class="side-link" href="#partners">Meet all our partners <svg class="icon"><use href="#i-arrow"/></svg></a>
          </div>
          <div class="side-card reveal d2">
            <span class="side-kicker">Planned Giving &amp; Endowment</span>
            <h3>The Halloran Endowment</h3>
            <p>Now standing at $8.2 million, the endowment generates $310,000 in reliable annual support &mdash; keeping overhead lean and our promise sturdy, whatever the economy does. Legacy Society members ensure this work outlives us all.</p>
            <a class="side-link" href="#contact">Explore planned giving <svg class="icon"><use href="#i-arrow"/></svg></a>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <!-- ============ Events ============ -->
  <section class="section section--paper" id="events">
    <div class="container">
      <div class="section-head reveal">
        <p class="eyebrow">Fundraising Events</p>
        <h2 class="section-title">Gather with us.</h2>
        <p class="section-intro">Every gala ticket, race bib, and donated coat turns goodwill into programs &mdash; and our events are where this community shows its heart. Join us at one, or join us at all of them.</p>
      </div>
      <div class="events-grid">
        <article class="event-card reveal">
          <img src="https://picsum.photos/seed/bwevent5k/600/340" alt="Runners crossing the start line of a riverside 5K race" width="600" height="340" loading="lazy">
          <div class="event-body">
            <div class="event-title-row">
              <div class="event-date" aria-hidden="true"><span class="ed-month">SEP</span><span class="ed-day">28</span></div>
              <h3>Hope &amp; Harmony 5K &amp; Fun Run</h3>
            </div>
            <div class="event-meta">
              <span><svg class="icon"><use href="#i-clock"/></svg>8:00 AM &middot; chip-timed</span>
              <span><svg class="icon"><use href="#i-pin"/></svg>Riverside Park</span>
            </div>
            <p>Walk, jog, or sprint the riverfront loop alongside 1,200 neighbors. Every registration funds weekend meals for local kids &mdash; and every finisher medal is crafted from reclaimed wood by students in our mentorship program. Our goal: $45,000 for the weekend meals fund.</p>
            <div class="event-actions">
              <a class="btn btn-teal btn-sm" href="#volunteer">Register &mdash; $35</a>
              <a class="text-link" href="#partners">Become a race sponsor <svg class="icon"><use href="#i-arrow"/></svg></a>
            </div>
          </div>
        </article>
        <article class="event-card reveal d1">
          <img src="https://picsum.photos/seed/bwgala6/600/340" alt="Elegantly set banquet tables ready for a charity gala" width="600" height="340" loading="lazy">
          <div class="event-body">
            <div class="event-title-row">
              <div class="event-date" aria-hidden="true"><span class="ed-month">NOV</span><span class="ed-day">15</span></div>
              <h3>Harvest Gala: A Night on the River</h3>
            </div>
            <div class="event-meta">
              <span><svg class="icon"><use href="#i-clock"/></svg>6:00 PM &middot; black-tie optional</span>
              <span><svg class="icon"><use href="#i-pin"/></svg>Grand Meridian Ballroom</span>
            </div>
            <p>Our largest fundraiser of the year: a seasonal tasting menu, live auction, and the stories &mdash; told by the neighbors themselves &mdash; of what your generosity made possible last year. Tables from $2,500; individual seats $185. Last year&rsquo;s gala raised $214,000.</p>
            <div class="event-actions">
              <a class="btn btn-teal btn-sm" href="#contact">Reserve a Table</a>
              <a class="text-link" href="#contact">View the auction catalog <svg class="icon"><use href="#i-arrow"/></svg></a>
            </div>
          </div>
        </article>
        <article class="event-card reveal d2">
          <img src="https://picsum.photos/seed/bwdrive7/600/340" alt="Folded winter coats and blankets stacked for a donation drive" width="600" height="340" loading="lazy">
          <div class="event-body">
            <div class="event-title-row">
              <div class="event-date" aria-hidden="true"><span class="ed-month">DEC</span><span class="ed-day ed-day--range">6&ndash;20</span></div>
              <h3>Winter Warmth Coat &amp; Blanket Drive</h3>
            </div>
            <div class="event-meta">
              <span><svg class="icon"><use href="#i-clock"/></svg>Daily, 9 AM&ndash;5 PM</span>
              <span><svg class="icon"><use href="#i-pin"/></svg>All four program sites</span>
            </div>
            <p>Drop off new or gently-used coats, blankets, and warm socks at any of our sites &mdash; or sign up to sort and distribute alongside our volunteer crew. Last winter, this drive kept 3,100 neighbors warm. This year, with your help, we&rsquo;re aiming for 4,000.</p>
            <div class="event-actions">
              <a class="btn btn-teal btn-sm" href="#volunteer">Sign Up to Sort</a>
              <a class="text-link" href="#contact">See the wishlist <svg class="icon"><use href="#i-arrow"/></svg></a>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ============ Testimonials ============ -->
  <section class="section section--white" id="stories" aria-label="Testimonials">
    <div class="container">
      <div class="section-head section-head--center reveal">
        <p class="eyebrow">Voices of Brightwater</p>
        <h2 class="section-title">The people make the place.</h2>
        <p class="section-intro">Donors, volunteers, and the neighbors we serve are all telling the same story &mdash; from different chapters of the same book.</p>
      </div>
      <div class="testi-grid">
        <article class="testi-card reveal">
          <svg class="icon-quote"><use href="#i-quote"/></svg>
          <blockquote>&ldquo;The market lets me shop for my family with real choice &mdash; my kids&rsquo; favorite foods, not just whatever is left over. For two years, Brightwater was the steady ground under us while I finished my nursing degree. Now I volunteer every Saturday.&rdquo;</blockquote>
          <div class="testi-footer">
            <img src="https://i.pravatar.cc/104?u=maria-d" alt="Portrait of Maria Delgado" width="52" height="52" loading="lazy">
            <div><strong>Maria Delgado</strong><span>Riverbend Market shopper, mom of three</span></div>
          </div>
        </article>
        <article class="testi-card reveal d1">
          <svg class="icon-quote"><use href="#i-quote"/></svg>
          <blockquote>&ldquo;Eight years of Thursday evenings at Harborlight, and I&rsquo;ve watched shy third-graders become first-generation college students. I came to give back. I stayed because this community gave me more purpose than any job ever has.&rdquo;</blockquote>
          <div class="testi-footer">
            <img src="https://i.pravatar.cc/104?u=james-w" alt="Portrait of James Whitfield" width="52" height="52" loading="lazy">
            <div><strong>James Whitfield</strong><span>Volunteer since 2016 &middot; Mentor of the Year</span></div>
          </div>
        </article>
        <article class="testi-card reveal d2">
          <svg class="icon-quote"><use href="#i-quote"/></svg>
          <blockquote>&ldquo;I give $40 a month because I&rsquo;ve read the annual reports and seen the audits. Ninety-four cents on the dollar, and they&rsquo;ll show you exactly which family it fed. That&rsquo;s why Brightwater is in my will &mdash; and why I brag about them to everyone I know.&rdquo;</blockquote>
          <div class="testi-footer">
            <img src="https://i.pravatar.cc/104?u=priya-n" alt="Portrait of Priya Nair" width="52" height="52" loading="lazy">
            <div><strong>Priya Nair</strong><span>Monthly donor &middot; Legacy Society member</span></div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ============ News ============ -->
  <section class="section section--paper" id="news">
    <div class="container">
      <div class="section-head reveal">
        <p class="eyebrow">Newsroom</p>
        <h2 class="section-title">News from the alliance.</h2>
        <p class="section-intro">Endowment milestones, annual reports, and the everyday headlines from an organization that believes good news should be documented, not just promised.</p>
      </div>
      <div class="news-grid">
        <article class="news-card reveal">
          <img src="https://picsum.photos/seed/bwnews1/640/400" alt="Hands shaking over a signed endowment agreement" width="640" height="400" loading="lazy">
          <div class="news-body">
            <div class="news-meta"><span class="news-cat">Press Release</span><span class="news-date">May 14, 2025</span></div>
            <h3>Brightwater Alliance receives $1.2 million endowment gift from the Halloran Family Trust</h3>
            <p>The largest single gift in our fifteen-year history will permanently endow our housing stability work, generating an estimated $48,000 in annual support and bringing the Halloran Family Endowment to $8.2 million.</p>
            <a class="text-link" href="#news">Read the story <svg class="icon"><use href="#i-arrow"/></svg></a>
          </div>
        </article>
        <article class="news-card reveal d1">
          <img src="https://picsum.photos/seed/bwnews2/640/400" alt="Volunteers packing boxes of groceries at a community outreach event" width="640" height="400" loading="lazy">
          <div class="news-body">
            <div class="news-meta"><span class="news-cat">Annual Reports</span><span class="news-date">April 2, 2025</span></div>
            <h3>2024 Annual Report: a record year for community outreach</h3>
            <p>More neighbors served, more meals distributed, more families housed than ever before &mdash; plus our first full year at the Westside Community Hub. Read the stories and see the independently audited numbers behind them.</p>
            <a class="text-link" href="#news">Read the story <svg class="icon"><use href="#i-arrow"/></svg></a>
          </div>
        </article>
        <article class="news-card reveal d2">
          <img src="https://picsum.photos/seed/bwnews3/640/400" alt="Crowd of community members celebrating at a building ribbon-cutting" width="640" height="400" loading="lazy">
          <div class="news-body">
            <div class="news-meta"><span class="news-cat">Organization News</span><span class="news-date">March 18, 2025</span></div>
            <h3>Our new Westside Community Hub opens its doors in Beaverton</h3>
            <p>A former credit-union branch is now a full-service resource center: a choice-based market, health screenings, benefits navigation, and a safe after-school space &mdash; all under one roof, five days a week.</p>
            <a class="text-link" href="#news">Read the story <svg class="icon"><use href="#i-arrow"/></svg></a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ============ Volunteer ============ -->
  <section class="section section--tint" id="volunteer">
    <div class="container">
      <div class="volunteer-grid">
        <div class="volunteer-copy">
          <p class="eyebrow">Volunteer With Us</p>
          <h2 class="section-title">Lend a hand. Change a life &mdash; maybe your own.</h2>
          <p>Our 1,250 volunteers are the engine of everything we do: sorting groceries, mentoring students, keeping families housed. Most shifts require no experience, and every role starts with a warm orientation and a seasoned buddy at your side.</p>
          <p>Whether you can give three hours a week or one Saturday a season, there is a place for you on the crew. Sign up below and our volunteer team will match you with an orientation that fits your calendar &mdash; usually within two business days.</p>
          <div class="roles-list">
            <div class="role-card reveal">
              <div class="role-icon"><svg class="icon"><use href="#i-sprout"/></svg></div>
              <div>
                <h4>Market Crew <span class="role-time">Weekly 3-hour shifts</span></h4>
                <p>Restock, greet, and shop alongside neighbors at the Riverbend Market. Honestly, the most joyful logistics work in Portland.</p>
              </div>
            </div>
            <div class="role-card reveal d1">
              <div class="role-icon"><svg class="icon"><use href="#i-cap"/></svg></div>
              <div>
                <h4>Youth Mentor <span class="role-time">12-month commitment</span></h4>
                <p>Meet a student weekly for homework, games, and showing up. Training, ongoing support, and the best return on investment of your life.</p>
              </div>
            </div>
            <div class="role-card reveal d2">
              <div class="role-icon"><svg class="icon"><use href="#i-calendar"/></svg></div>
              <div>
                <h4>Event Crew <span class="role-time">Seasonal</span></h4>
                <p>Gala setup, 5K water stations, coat-drive sorting &mdash; high-energy bursts that make our fundraising events fly.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="form-card reveal d1">
          <h3>Volunteer Today</h3>
          <p class="form-sub">Three minutes now, a lifetime of Thursdays later.</p>
          <form id="volunteerForm" novalidate>
            <div class="field">
              <label for="volName">Full name</label>
              <input type="text" id="volName" name="name" placeholder="Jordan Rivera" required>
            </div>
            <div class="field">
              <label for="volEmail">Email address</label>
              <input type="email" id="volEmail" name="email" placeholder="you@email.com" required>
            </div>
            <div class="field">
              <label for="volInterest">Where would you like to serve?</label>
              <select id="volInterest" name="interest" required>
                <option value="" disabled selected>Select an area of interest</option>
                <option value="Market Crew">Market Crew &mdash; food security</option>
                <option value="Youth Mentorship">Youth Mentorship</option>
                <option value="Event Crew">Event Crew &mdash; galas, 5Ks, drives</option>
                <option value="wherever I'm needed most">Wherever I&rsquo;m needed most</option>
              </select>
            </div>
            <button type="submit" class="btn btn-teal btn-block"><svg class="icon"><use href="#i-heart"/></svg>Volunteer Today</button>
            <p class="form-note">We&rsquo;ll reach out within two business days with orientation dates. No spam, ever.</p>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ FAQ ============ -->
  <section class="section section--white" id="faq">
    <div class="container">
      <div class="section-head section-head--center reveal">
        <p class="eyebrow">Common Questions</p>
        <h2 class="section-title">Questions, answered.</h2>
        <p class="section-intro">Donors ask us the same smart questions all the time. Here are the honest answers &mdash; and if yours isn&rsquo;t listed, our team is one email away.</p>
      </div>
      <div class="faq-list reveal">
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>Is my donation tax-deductible?</span>
            <svg class="icon"><use href="#i-plus"/></svg>
          </button>
          <div class="faq-a"><div class="faq-a-inner"><p>Yes. Brightwater Alliance is a registered 501(c)(3) nonprofit organization (EIN 26-4819557), so gifts from U.S. taxpayers are tax-deductible to the fullest extent allowed by law. You&rsquo;ll receive an emailed receipt within minutes of giving, plus a consolidated year-end statement every January.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>How much of my gift actually reaches the community?</span>
            <svg class="icon"><use href="#i-plus"/></svg>
          </button>
          <div class="faq-a"><div class="faq-a-inner"><p>Ninety-four cents of every dollar goes directly to programs and community outreach &mdash; well above the industry benchmark of 75%. Our administrative costs stay lean thanks to 1,250 volunteers, bulk purchasing power, and endowment income that covers a meaningful share of overhead. Every figure comes from our independently audited financials.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>Can I direct my gift to a specific program?</span>
            <svg class="icon"><use href="#i-plus"/></svg>
          </button>
          <div class="faq-a"><div class="faq-a-inner"><p>Absolutely. When you give online or by check, you can designate your gift to food security, youth mentorship, housing stability, or health outreach. That said, unrestricted gifts to our &ldquo;greatest need&rdquo; fund give us the flexibility to respond when an emergency &mdash; an eviction notice, a lapsed benefit, a cold snap &mdash; can&rsquo;t wait for a restricted dollar.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>How do you measure and report your impact?</span>
            <svg class="icon"><use href="#i-plus"/></svg>
          </button>
          <div class="faq-a"><div class="faq-a-inner"><p>We track programmatic outcomes monthly &mdash; meals distributed, households stabilized, mentee attendance and grades &mdash; and review them with our community advisory board each quarter. The results, audited financials, and the stories behind the numbers are published every spring in our Annual Report, and our Form 990 is always available on request.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>Do you accept in-kind donations?</span>
            <svg class="icon"><use href="#i-plus"/></svg>
          </button>
          <div class="faq-a"><div class="faq-a-inner"><p>We do, especially during our seasonal drives for coats, blankets, school supplies, and holiday toys. Because of food-safety guidelines, our market sites can only accept shelf-stable, unopened items &mdash; check our current wishlist online before dropping off. For larger in-kind gifts such as vehicles or equipment, contact our development team directly.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>How can my company partner with Brightwater?</span>
            <svg class="icon"><use href="#i-plus"/></svg>
          </button>
          <div class="faq-a"><div class="faq-a-inner"><p>Start a conversation with our partnerships team. We offer sponsorship tiers beginning at $2,500, workplace volunteering days, matching-gift promotion, and cause-marketing campaigns &mdash; and we&rsquo;ll co-build a partnership that fits your culture and community goals. More than sixty local employers already do.</p></div></div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ Partners ============ -->
  <section class="section section--paper" id="partners">
    <div class="container">
      <div class="section-head section-head--center reveal">
        <p class="eyebrow">Partners</p>
        <h2 class="section-title">Powered by partnership.</h2>
        <p class="section-intro">More than sixty local businesses, foundations, and faith communities amplify every donor dollar. When we say &ldquo;collective,&rdquo; this is who we mean.</p>
      </div>
      <div class="partner-wall reveal">
        <div class="partner-tile"><img src="https://placehold.co/230x70/FFFFFF/5B6B72?text=Northgate+Foods&font=montserrat" alt="Northgate Foods logo" loading="lazy"></div>
        <div class="partner-tile"><img src="https://placehold.co/230x70/FFFFFF/5B6B72?text=Halloran+Trust&font=montserrat" alt="Halloran Trust logo" loading="lazy"></div>
        <div class="partner-tile"><img src="https://placehold.co/230x70/FFFFFF/5B6B72?text=Cascade+Credit+Union&font=montserrat" alt="Cascade Credit Union logo" loading="lazy"></div>
        <div class="partner-tile"><img src="https://placehold.co/230x70/FFFFFF/5B6B72?text=Lumen+Health&font=montserrat" alt="Lumen Health logo" loading="lazy"></div>
        <div class="partner-tile"><img src="https://placehold.co/230x70/FFFFFF/5B6B72?text=Cedar+%26+Sage+Co.&font=montserrat" alt="Cedar and Sage Co. logo" loading="lazy"></div>
        <div class="partner-tile"><img src="https://placehold.co/230x70/FFFFFF/5B6B72?text=Meridian+Logistics&font=montserrat" alt="Meridian Logistics logo" loading="lazy"></div>
      </div>
      <div class="partners-cta reveal d1">
        <p>Interested in corporate partnership? Sponsorships start at $2,500 and include workplace volunteering days, matching-gift promotion, and year-round recognition across our events and reports.</p>
        <a class="btn btn-outline" href="#contact"><svg class="icon"><use href="#i-arrow"/></svg>Explore Partnership</a>
      </div>
    </div>
  </section>

  <!-- ============ Newsletter ============ -->
  <section class="nl-band" id="newsletter" aria-label="Newsletter signup">
    <div class="container">
      <p class="eyebrow">Stay Close to the Work</p>
      <h2>One email a month. Zero noise.</h2>
      <p>Real stories, honest numbers, and upcoming events from the Rising Letter &mdash; read by 9,300 neighbors who like their good news documented.</p>
      <form class="nl-form" id="newsletterForm">
        <label class="sr-only" for="nlEmail">Email address</label>
        <input type="email" id="nlEmail" name="email" placeholder="you@email.com" required>
        <button type="submit" class="btn btn-accent">Subscribe</button>
      </form>
      <p class="nl-note">We&rsquo;ll never share your address. Unsubscribe anytime.</p>
    </div>
  </section>

</main>

<!-- ============ Footer ============ -->
<footer class="site-footer" id="contact">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-col">
        <div class="footer-brand">
          <img src="https://placehold.co/64x64/FAF6EF/0D4A52?text=BW&font=montserrat" alt="Brightwater Alliance logo" width="44" height="44">
          <strong>Brightwater Alliance</strong>
        </div>
        <p class="footer-mission">A community-powered 501(c)(3) nonprofit advancing food security, stable housing, youth opportunity, and health equity across the Portland metro area since 2009.</p>
        <ul class="social-list">
          <li><a href="#" aria-label="Brightwater Alliance on Facebook"><svg class="icon-fill"><use href="#s-facebook"/></svg></a></li>
          <li><a href="#" aria-label="Brightwater Alliance on Instagram"><svg class="icon-fill"><use href="#s-instagram"/></svg></a></li>
          <li><a href="#" aria-label="Brightwater Alliance on X"><svg class="icon-fill"><use href="#s-x"/></svg></a></li>
          <li><a href="#" aria-label="Brightwater Alliance on LinkedIn"><svg class="icon-fill"><use href="#s-linkedin"/></svg></a></li>
          <li><a href="#" aria-label="Brightwater Alliance on YouTube"><svg class="icon-fill"><use href="#s-youtube"/></svg></a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Visit or Write</h4>
        <ul class="contact-list">
          <li><svg class="icon"><use href="#i-pin"/></svg><span>418 Riverbend Lane, Suite 200<br>Portland, OR 97214</span></li>
          <li><svg class="icon"><use href="#i-phone"/></svg><a href="tel:+15035550184">(503) 555-0184</a></li>
          <li><svg class="icon"><use href="#i-mail"/></svg><a href="mailto:hello@brightwateralliance.org">hello@brightwateralliance.org</a></li>
          <li><svg class="icon"><use href="#i-clock"/></svg><span>Mon&ndash;Fri &middot; 9 AM&ndash;5 PM PT</span></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Explore</h4>
        <ul>
          <li><a href="#mission">Our Mission</a></li>
          <li><a href="#programs">Programs</a></li>
          <li><a href="#impact">Impact &amp; Reports</a></li>
          <li><a href="#events">Events</a></li>
          <li><a href="#news">Newsroom</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Get Involved</h4>
        <ul>
          <li><a href="#donate">Give Now</a></li>
          <li><a href="#volunteer">Volunteer Today</a></li>
          <li><a href="#partners">Become a Partner</a></li>
          <li><a href="#impact">Planned Giving</a></li>
          <li><a href="#newsletter">Newsletter</a></li>
          <li><a href="#impact">Annual Report</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <p>&copy; <span id="year">2025</span> Brightwater Alliance. All rights reserved. &middot; A registered 501(c)(3) nonprofit &middot; EIN 26-4819557</p>
      <nav aria-label="Legal links">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Service</a>
        <a href="#">Accessibility</a>
        <a href="#">Financials</a>
      </nav>
    </div>
  </div>
</footer>

<!-- ============ Toast ============ -->
<div class="toast" id="toast" role="status" aria-live="polite">
  <span class="toast-icon"><svg class="icon"><use href="#i-check"/></svg></span>
  <div>
    <strong id="toastTitle">Thank you!</strong>
    <span class="toast-msg" id="toastMsg">Your gift is on its way.</span>
  </div>
</div>

<script>
(function () {
  'use strict';
  var $ = function (s, c) { return (c || document).querySelector(s); };
  var $$ = function (s, c) { return Array.prototype.slice.call((c || document).querySelectorAll(s)); };

  /* ---------- Footer year ---------- */
  $('#year').textContent = new Date().getFullYear();

  /* ---------- Sticky header shadow ---------- */
  var header = $('.site-header');
  function onScroll() { header.classList.toggle('scrolled', window.scrollY > 10); }
  onScroll();
  window.addEventListener('scroll', onScroll, { passive: true });

  /* ---------- Mobile navigation ---------- */
  var toggle = $('.nav-toggle');
  toggle.addEventListener('click', function () {
    var open = document.body.classList.toggle('nav-open');
    toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
  });
  $$('.site-nav a').forEach(function (a) {
    a.addEventListener('click', function () {
      document.body.classList.remove('nav-open');
      toggle.setAttribute('aria-expanded', 'false');
    });
  });

  /* ---------- Scroll reveal ---------- */
  var revealIO = new IntersectionObserver(function (entries) {
    entries.forEach(function (e) {
      if (e.isIntersecting) { e.target.classList.add('in'); revealIO.unobserve(e.target); }
    });
  }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
  $$('.reveal').forEach(function (el) { revealIO.observe(el); });

  /* ---------- Animated counters ---------- */
  function easeOut(t) { return 1 - Math.pow(1 - t, 3); }
  function animateCount(el) {
    var target = parseFloat(el.getAttribute('data-count'));
    var suffix = el.getAttribute('data-suffix') || '';
    var dur = 1900;
    var start = performance.now();
    (function tick(now) {
      var p = Math.min((now - start) / dur, 1);
      el.textContent = Math.round(target * easeOut(p)).toLocaleString('en-US') + suffix;
      if (p < 1) requestAnimationFrame(tick);
    })(start);
  }
  var countIO = new IntersectionObserver(function (entries) {
    entries.forEach(function (e) {
      if (e.isIntersecting) { animateCount(e.target); countIO.unobserve(e.target); }
    });
  }, { threshold: 0.6 });
  $$('[data-count]').forEach(function (el) { countIO.observe(el); });

  /* ---------- Allocation bars ---------- */
  var barIO = new IntersectionObserver(function (entries) {
    entries.forEach(function (e) {
      if (e.isIntersecting) {
        e.target.style.width = e.target.getAttribute('data-value') + '%';
        barIO.unobserve(e.target);
      }
    });
  }, { threshold: 0.4 });
  $$('.alloc-fill').forEach(function (el) { el.style.width = '0%'; barIO.observe(el); });

  /* ---------- Toast ---------- */
  var toast = $('#toast'), toastTimer;
  function showToast(title, msg) {
    $('#toastTitle').textContent = title;
    $('#toastMsg').textContent = msg;
    toast.classList.add('show');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () { toast.classList.remove('show'); }, 5200);
  }

  /* ---------- Donation tracker widget ---------- */
  var GOAL = 600000;
  var raised = 482650;
  var donors = 2847;
  var selectedAmount = 50;

  var raisedEl = $('#raisedAmount'), fillEl = $('#progressFill'),
      pctEl = $('#progressPct'), donorEl = $('#donorCount'),
      impactEl = $('#impactText'), giveBtn = $('#giveBtn'),
      customInput = $('#customAmount');
  var amountBtns = $$('.amount-btn');

  function fmtUSD(v) { return '$' + Math.round(v).toLocaleString('en-US'); }

  var impactMap = {
    25: 'provides a week of fresh groceries for a neighbor in need',
    50: 'funds school-readiness kits and tutoring for two local children',
    100: 'keeps a family\u2019s lights and heat on through a hard month',
    250: 'sponsors a full week of after-school mentoring for five students'
  };

  function renderProgress() {
    var pct = Math.min((raised / GOAL) * 100, 100);
    fillEl.style.width = pct.toFixed(1) + '%';
    raisedEl.textContent = fmtUSD(raised);
    pctEl.textContent = pct.toFixed(1) + '% of goal';
    donorEl.textContent = donors.toLocaleString('en-US') + ' supporters';
    fillEl.parentElement.setAttribute('aria-valuenow', Math.round(pct));
  }

  function setSelected(amount, fromCustom) {
    selectedAmount = amount;
    amountBtns.forEach(function (b) {
      b.classList.toggle('selected', !fromCustom && Number(b.getAttribute('data-amount')) === amount);
    });
    impactEl.textContent = fromCustom
      ? 'fuels community outreach wherever it\u2019s needed most'
      : impactMap[amount];
    giveBtn.textContent = 'Give ' + fmtUSD(amount) + ' Now';
  }

  amountBtns.forEach(function (b) {
    b.addEventListener('click', function () {
      customInput.value = '';
      setSelected(Number(b.getAttribute('data-amount')), false);
    });
  });

  customInput.addEventListener('input', function () {
    var v = Math.floor(Number(customInput.value));
    if (v > 0) {
      setSelected(v, true);
    } else {
      selectedAmount = 0;
      amountBtns.forEach(function (b) { b.classList.remove('selected'); });
      impactEl.textContent = 'Choose an amount to see your impact';
      giveBtn.textContent = 'Give Now';
    }
  });

  giveBtn.addEventListener('click', function () {
    if (!selectedAmount || selectedAmount < 1) { customInput.focus(); return; }
    raised += selectedAmount;
    donors += 1;
    renderProgress();
    var reached = raised >= GOAL;
    if (reached) {
      showToast('We did it \u2014 goal reached!',
        'Your gift of ' + fmtUSD(selectedAmount) + ' pushed us past our $600,000 campaign goal. Extraordinary. Thank you!');
    } else {
      showToast('Thank you for giving!',
        'Your ' + fmtUSD(selectedAmount) + ' gift will be matched dollar-for-dollar \u2014 that\u2019s ' +
        fmtUSD(selectedAmount * 2) + ' of impact for our neighbors.');
    }
    var original = giveBtn.textContent;
    giveBtn.textContent = 'Gift added \u2014 thank you!';
    giveBtn.disabled = true;
    setTimeout(function () {
      giveBtn.textContent = original;
      giveBtn.disabled = false;
    }, 2200);
  });

  renderProgress();
  setSelected(50, false);

  /* ---------- FAQ accordion ---------- */
  $$('.faq-item').forEach(function (item) {
    var btn = $('.faq-q', item);
    btn.addEventListener('click', function () {
      var isOpen = item.classList.contains('open');
      $$('.faq-item.open').forEach(function (o) {
        o.classList.remove('open');
        $('.faq-q', o).setAttribute('aria-expanded', 'false');
      });
      if (!isOpen) {
        item.classList.add('open');
        btn.setAttribute('aria-expanded', 'true');
      }
    });
  });

  /* ---------- Forms ---------- */
  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, function (m) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[m];
    });
  }

  $('#volunteerForm').addEventListener('submit', function (e) {
    e.preventDefault();
    var name = $('#volName').value.trim();
    var interest = $('#volInterest').value;
    if (!name || !interest) return;
    this.innerHTML =
      '<div class="form-success">' +
        '<span class="success-icon"><svg class="icon"><use href="#i-check"/></svg></span>' +
        '<h3>Welcome aboard, ' + escapeHtml(name.split(' ')[0]) + '!</h3>' +
        '<p>Thanks for raising your hand for <strong>' + escapeHtml(interest) + '</strong>. ' +
        'Our volunteer team will reach out within two business days with orientation dates and next steps.</p>' +
      '</div>';
    showToast('Volunteer application received', 'Check your inbox \u2014 orientation dates are on the way.');
  });

  $('#newsletterForm').addEventListener('submit', function (e) {
    e.preventDefault();
    this.innerHTML =
      '<p class="nl-success"><svg class="icon"><use href="#i-check"/></svg>' +
      'Thanks \u2014 you\u2019re on the list. Watch for the next Rising Letter.</p>';
  });
})();
</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:51:00.229Z",
  "url": "https://benchmark.aimac.invalid/c3b48dccfdac7ca8c79625c8ea95d35f0fcfc050c9011b582b355b594a05e7df.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-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": "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": []
    },
    {
      "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": "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=\"Brightwater Alliance 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=\"Brightwater Alliance 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=\"progress-track\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"80\" aria-label=\"Campaign progress\">\n            <div class=\"progress-fill\" id=\"progressFill\" style=\"width:80.4%\"></div>\n          </div>",
          "target": [
            ".progress-track"
          ]
        }
      ]
    },
    {
      "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": "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\" aria-hidden=\"true\">",
          "target": [
            "body > svg[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"progress-track\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"80\" aria-label=\"Campaign progress\">\n            <div class=\"progress-fill\" id=\"progressFill\" style=\"width:80.4%\"></div>\n          </div>",
          "target": [
            ".progress-track"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "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=\"Brightwater Alliance 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=\"progress-track\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"80\" aria-label=\"Campaign progress\">\n            <div class=\"progress-fill\" id=\"progressFill\" style=\"width:80.4%\"></div>\n          </div>",
          "target": [
            ".progress-track"
          ]
        }
      ]
    },
    {
      "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=\"progress-track\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"80\" aria-label=\"Campaign progress\">\n            <div class=\"progress-fill\" id=\"progressFill\" style=\"width:80.4%\"></div>\n          </div>",
          "target": [
            ".progress-track"
          ]
        }
      ]
    },
    {
      "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=\"Brightwater Alliance 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=\"Brightwater Alliance home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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=\"progress-fill\" id=\"progressFill\" style=\"width:80.4%\"></div>",
          "target": [
            "#progressFill"
          ]
        }
      ]
    },
    {
      "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 type=\"button\" class=\"amount-btn\" data-amount=\"25\">$25</button>",
          "target": [
            "button[data-amount=\"25\"]"
          ]
        }
      ]
    },
    {
      "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>Small acts of kindness. <em>Steady rivers of change.</em></h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Rooted in community. Driven by dignity.</h2>",
                  "target": [
                    ".mission-copy > .section-title"
                  ]
                },
                {
                  "html": "<h3>Dignity First</h3>",
                  "target": [
                    ".value-card.reveal:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Radical Transparency</h3>",
                  "target": [
                    ".value-card.d1.reveal > h3"
                  ]
                },
                {
                  "html": "<h3>Community Voice</h3>",
                  "target": [
                    ".value-card.d2.reveal > h3"
                  ]
                },
                {
                  "html": "<h3>Faithful Stewardship</h3>",
                  "target": [
                    ".d3.value-card.reveal > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Four pillars. One community.</h2>",
                  "target": [
                    "#programs > .container > .section-head--center.section-head.reveal > .section-title"
                  ]
                },
                {
                  "html": "<h3>Riverbend Food Security Initiative</h3>",
                  "target": [
                    ".program-card:nth-child(1) > .program-body > h3"
                  ]
                },
                {
                  "html": "<h3>Harborlight Youth Mentorship</h3>",
                  "target": [
                    ".program-card.d1 > .program-body > h3"
                  ]
                },
                {
                  "html": "<h3>Keystone Housing Stability Fund</h3>",
                  "target": [
                    ".program-card.d2 > .program-body > h3"
                  ]
                },
                {
                  "html": "<h3>WellSpring Community Health Outreach</h3>",
                  "target": [
                    ".d3.program-card > .program-body > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Proof, not promises.</h2>",
                  "target": [
                    ".impact-main > .section-title"
                  ]
                },
                {
                  "html": "<h3>Where every dollar went in FY2024</h3>",
                  "target": [
                    ".alloc-panel > h3"
                  ]
                },
                {
                  "html": "<h3>The Luminous Circle</h3>",
                  "target": [
                    ".side-card.reveal:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Lumen Health</h3>",
                  "target": [
                    ".side-card.d1.reveal > h3"
                  ]
                },
                {
                  "html": "<h3>The Halloran Endowment</h3>",
                  "target": [
                    ".side-card.d2.reveal > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Gather with us.</h2>",
                  "target": [
                    "#events > .container > .section-head.reveal > .section-title"
                  ]
                },
                {
                  "html": "<h3>Hope &amp; Harmony 5K &amp; Fun Run</h3>",
                  "target": [
                    ".event-card:nth-child(1) > .event-body > .event-title-row > h3"
                  ]
                },
                {
                  "html": "<h3>Harvest Gala: A Night on the River</h3>",
                  "target": [
                    ".event-card.d1 > .event-body > .event-title-row > h3"
                  ]
                },
                {
                  "html": "<h3>Winter Warmth Coat &amp; Blanket Drive</h3>",
                  "target": [
                    ".event-card.d2 > .event-body > .event-title-row > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">The people make the place.</h2>",
                  "target": [
                    "#stories > .container > .section-head--center.section-head.reveal > .section-title"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">News from the alliance.</h2>",
                  "target": [
                    "#news > .container > .section-head.reveal > .section-title"
                  ]
                },
                {
                  "html": "<h3>Brightwater Alliance receives $1.2 million endowment gift from the Halloran Family Trust</h3>",
                  "target": [
                    ".news-card:nth-child(1) > .news-body > h3"
                  ]
                },
                {
                  "html": "<h3>2024 Annual Report: a record year for community outreach</h3>",
                  "target": [
                    ".news-card.d1 > .news-body > h3"
                  ]
                },
                {
                  "html": "<h3>Our new Westside Community Hub opens its doors in Beaverton</h3>",
                  "target": [
                    ".news-card.d2 > .news-body > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Lend a hand. Change a life \u2014 maybe your own.</h2>",
                  "target": [
                    ".volunteer-copy > .section-title"
                  ]
                },
                {
                  "html": "<h4>Market Crew <span class=\"role-time\">Weekly 3-hour shifts</span></h4>",
                  "target": [
                    ".role-card.reveal:nth-child(1) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Youth Mentor <span class=\"role-time\">12-month commitment</span></h4>",
                  "target": [
                    ".role-card.d1.reveal > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Event Crew <span class=\"role-time\">Seasonal</span></h4>",
                  "target": [
                    ".role-card.d2.reveal > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h3>Volunteer Today</h3>",
                  "target": [
                    ".form-card > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Questions, answered.</h2>",
                  "target": [
                    "#faq > .container > .section-head--center.section-head.reveal > .section-title"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Powered by partnership.</h2>",
                  "target": [
                    "#partners > .container > .section-head--center.section-head.reveal > .section-title"
                  ]
                },
                {
                  "html": "<h2>One email a month. Zero noise.</h2>",
                  "target": [
                    ".container > h2"
                  ]
                },
                {
                  "html": "<h4>Visit or Write</h4>",
                  "target": [
                    ".footer-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Explore</h4>",
                  "target": [
                    ".footer-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Get Involved</h4>",
                  "target": [
                    ".footer-col:nth-child(4) > h4"
                  ]
                }
              ],
              "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": "#dcedf0",
                "bgColor": "#0b3b43",
                "contrastRatio": 10.11,
                "fontSize": "10.0pt (13.28px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 10.11"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"announce\">\n  <strong>Giving Season Match:</strong> every gift made before December 31 will be matched dollar-for-dollar by our Board of Directors. <a href=\"#donate\">Give now</a>\n</div>",
          "target": [
            ".announce"
          ]
        }
      ]
    },
    {
      "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": "siteNav",
              "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=\"siteNav\" aria-label=\"Primary navigation\">",
          "target": [
            "#siteNav"
          ]
        }
      ]
    },
    {
      "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": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"number\" id=\"customAmount\" min=\"1\" step=\"1\" inputmode=\"numeric\" placeholder=\"Other amount\" aria-label=\"Custom donation amount\">",
          "target": [
            "#customAmount"
          ]
        }
      ]
    },
    {
      "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/96x96/0D4A52/FAF6EF?text=BW&amp;font=montserrat\" alt=\"Brightwater Alliance logo\" width=\"46\" height=\"46\">",
          "target": [
            "img[width=\"46\"]"
          ]
        }
      ]
    },
    {
      "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": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"number\" id=\"customAmount\" min=\"1\" step=\"1\" inputmode=\"numeric\" placeholder=\"Other amount\" aria-label=\"Custom donation amount\">",
          "target": [
            "#customAmount"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"announce\">\n  <strong>Giving Season Match:</strong> every gift made before December 31 will be matched dollar-for-dollar by our Board of Directors. <a href=\"#donate\">Give now</a>\n</div>",
                  "target": [
                    ".announce"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#donate\">Give now</a>",
          "target": [
            ".announce > a[href$=\"#donate\"]"
          ]
        }
      ]
    },
    {
      "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 class=\"nav-list\">",
          "target": [
            ".nav-list"
          ]
        }
      ]
    },
    {
      "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": [
            ".nav-list > 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/96x96/0D4A52/FAF6EF?text=BW&amp;font=montserrat\" alt=\"Brightwater Alliance logo\" width=\"46\" height=\"46\">",
          "target": [
            "img[width=\"46\"]"
          ]
        }
      ]
    },
    {
      "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=\"volInterest\">Where would you like to serve?</label>",
                  "target": [
                    "label[for=\"volInterest\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select id=\"volInterest\" name=\"interest\" required=\"\">",
          "target": [
            "#volInterest"
          ]
        }
      ]
    },
    {
      "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": 196.2,
                "height": 48.8
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (196.2px by 48.8px, 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": "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": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" aria-label=\"Introduction\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"hero-kicker\">A community-powered 501(c)(3) \u00b7 Portland, Oregon</p>",
          "target": [
            ".hero-kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    }
  ],
  "violations": [
    {
      "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": "#a85f0b",
                "bgColor": "#fcefd9",
                "contrastRatio": 4.29,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"badge-match\">Gifts matched 2\u00d7</span>",
                  "target": [
                    ".badge-match"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"badge-match\">Gifts matched 2\u00d7</span>",
          "target": [
            ".badge-match"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a85f0b",
                "bgColor": "#fcefd9",
                "contrastRatio": 4.29,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"news-cat\">Press Release</span>",
                  "target": [
                    ".news-card:nth-child(1) > .news-body > .news-meta > .news-cat"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"news-cat\">Press Release</span>",
          "target": [
            ".news-card:nth-child(1) > .news-body > .news-meta > .news-cat"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a85f0b",
                "bgColor": "#fcefd9",
                "contrastRatio": 4.29,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"news-cat\">Annual Reports</span>",
                  "target": [
                    ".news-card.d1 > .news-body > .news-meta > .news-cat"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"news-cat\">Annual Reports</span>",
          "target": [
            ".news-card.d1 > .news-body > .news-meta > .news-cat"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a85f0b",
                "bgColor": "#fcefd9",
                "contrastRatio": 4.29,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"news-cat\">Organization News</span>",
                  "target": [
                    ".news-card.d2 > .news-body > .news-meta > .news-cat"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"news-cat\">Organization News</span>",
          "target": [
            ".news-card.d2 > .news-body > .news-meta > .news-cat"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a85f0b",
                "bgColor": "#fcefd9",
                "contrastRatio": 4.29,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"role-time\">Weekly 3-hour shifts</span>",
                  "target": [
                    ".role-card.in.reveal:nth-child(1) > div:nth-child(2) > h4 > .role-time"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"role-time\">Weekly 3-hour shifts</span>",
          "target": [
            ".role-card.in.reveal:nth-child(1) > div:nth-child(2) > h4 > .role-time"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a85f0b",
                "bgColor": "#fcefd9",
                "contrastRatio": 4.29,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"role-time\">12-month commitment</span>",
                  "target": [
                    ".role-card.d1.in > div:nth-child(2) > h4 > .role-time"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"role-time\">12-month commitment</span>",
          "target": [
            ".role-card.d1.in > div:nth-child(2) > h4 > .role-time"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a85f0b",
                "bgColor": "#fcefd9",
                "contrastRatio": 4.29,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"role-time\">Seasonal</span>",
                  "target": [
                    ".role-card.d2.in > div:nth-child(2) > h4 > .role-time"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"role-time\">Seasonal</span>",
          "target": [
            ".role-card.d2.in > div:nth-child(2) > h4 > .role-time"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a85f0b",
                "bgColor": "#fcefd9",
                "contrastRatio": 4.29,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"role-time\">Weekly 3-hour shifts</span>",
                  "target": [
                    ".role-card.reveal.in:nth-child(1) > div:nth-child(2) > h4 > .role-time"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"role-time\">Weekly 3-hour shifts</span>",
          "target": [
            ".role-card.reveal.in:nth-child(1) > div:nth-child(2) > h4 > .role-time"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a85f0b",
                "bgColor": "#fcefd9",
                "contrastRatio": 4.29,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"role-time\">12-month commitment</span>",
                  "target": [
                    ".role-card.d1.reveal > div:nth-child(2) > h4 > .role-time"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"role-time\">12-month commitment</span>",
          "target": [
            ".role-card.d1.reveal > div:nth-child(2) > h4 > .role-time"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a85f0b",
                "bgColor": "#fcefd9",
                "contrastRatio": 4.29,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"role-time\">Seasonal</span>",
                  "target": [
                    ".role-card.d2.reveal > div:nth-child(2) > h4 > .role-time"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"role-time\">Seasonal</span>",
          "target": [
            ".role-card.d2.reveal > div:nth-child(2) > h4 > .role-time"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #a85f0b, background color: #fcefd9, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 10922
      },
      {
        "y": 576,
        "height": 10922
      },
      {
        "y": 1152,
        "height": 10922
      },
      {
        "y": 1728,
        "height": 10922
      },
      {
        "y": 2304,
        "height": 10922
      },
      {
        "y": 2880,
        "height": 10922
      },
      {
        "y": 3456,
        "height": 10922
      },
      {
        "y": 4032,
        "height": 10922
      },
      {
        "y": 4608,
        "height": 10922
      },
      {
        "y": 5184,
        "height": 10922
      },
      {
        "y": 5760,
        "height": 10922
      },
      {
        "y": 6336,
        "height": 11012
      },
      {
        "y": 6912,
        "height": 11012
      },
      {
        "y": 7488,
        "height": 11012
      },
      {
        "y": 8064,
        "height": 11012
      },
      {
        "y": 8640,
        "height": 11012
      },
      {
        "y": 9216,
        "height": 11012
      },
      {
        "y": 9792,
        "height": 11012
      },
      {
        "y": 10292,
        "height": 11012
      }
    ],
    "scans": 20,
    "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", "Volunteer", "Partners".
-   **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: "Fundraising Events", "Annual Reports", "Organization News".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "advocacy", "community outreach", "endowment".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Give Now", "Volunteer Today", "Learn More".
-   **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: "donation tracker".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "partner highlights", "impact reports", "donor recognition".
-   **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.