Mistral Mistral Large 4 – Non Profit Charity

via Mistral · Generated

  • AIMAC Debt 9.80
  • Cost $0.43
  • Total Violations 58
  • HTML Size 100 KB
  • Em Dashes 35

Screenshot

View Mistral Mistral Large 4 Non Profit Charity page View Live Page

Accessibility Issues Found

58 Serious

  • color-contrast serious 54 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <i>Foundation</i>
  • target-size serious 4 instances

    All touch targets must be 24px large, or leave sufficient space

    Example HTML <button class="dot" type="button" aria-label="Show story 1"></button>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BrightSpan Foundation — Bridging gaps. Building futures.</title>
<meta name="description" content="BrightSpan Foundation is a community foundation serving 14 counties with education, food security, and community health programs. A registered 501(c)(3) nonprofit.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%231B5136'/%3E%3Ctext x='32' y='43' font-family='Georgia,serif' font-size='30' font-weight='bold' fill='%23F6F1E5' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
<script>document.documentElement.classList.add('js')</script>
<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,400..700;1,9..144,400..700&family=Work+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
<style>
/* ============ Tokens & reset ============ */
:root{
  --pine-950:#0A1D12; --pine-900:#0F2A1B; --pine-800:#153A26; --pine:#1B5136;
  --pine-100:#DFEADD; --pine-050:#EDF3EC;
  --cream:#F6F1E5; --sand:#ECE2CC; --paper:#FDFBF4;
  --ink:#1D2B21; --muted:#5F6E61; --line:#E2D8C0; --line-soft:#EAE2CE;
  --terra:#D96C35; --terra-deep:#B5511E; --terra-soft:#F6E2D2;
  --amber:#E9A63C;
  --shadow-sm:0 2px 10px rgba(29,43,33,.07);
  --shadow-md:0 14px 40px -14px rgba(29,43,33,.22);
  --shadow-lg:0 24px 60px -20px rgba(15,42,27,.35);
  --font-d:'Fraunces',Georgia,serif;
  --font-b:'Work Sans','Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html,body{overflow-x:clip}
body{font-family:var(--font-b);background:var(--cream);color:var(--ink);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E")}
img{display:block;max-width:100%;height:auto}
ul{list-style:none}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--terra);color:#fff}
:focus-visible{outline:3px solid rgba(217,108,53,.55);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--font-d);font-weight:600;color:var(--ink);letter-spacing:-.015em}
h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12}
.container{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4vw,32px)}
.sec{padding:clamp(76px,9vw,120px) 0}
.ph{filter:saturate(.9) contrast(1.02) sepia(.05)}
.ic{width:18px;height:18px;display:inline-block;flex:none}

/* ============ Reveal animation ============ */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ============ Buttons, eyebrows, shared ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1 var(--font-b);padding:16px 28px;border-radius:999px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:.25s;white-space:nowrap}
.btn .ic{width:17px;height:17px}
.btn-primary{background:var(--terra);color:#FFF6EC}
.btn-primary:hover{background:var(--terra-deep);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(181,81,30,.55)}
.btn-ghost{border-color:var(--pine);color:var(--pine);background:transparent}
.btn-ghost:hover{background:var(--pine);color:var(--cream);transform:translateY(-2px)}
.btn-light{background:var(--cream);color:var(--pine-900)}
.btn-light:hover{background:#fff;transform:translateY(-2px)}
.btn-sm{padding:11px 22px;font-size:14px}
.btn-block{width:100%}
.btn.loading{pointer-events:none;opacity:.85}
.btn.loading::after{content:"";width:15px;height:15px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:700 12.5px/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--terra)}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--terra)}
.on-dark{background:var(--pine-900);color:var(--cream)}
.on-dark .eyebrow{color:var(--amber)}
.on-dark .eyebrow::before{background:var(--amber)}
.on-dark h2{color:var(--cream)}
.sec-head{display:grid;grid-template-columns:1.05fr .95fr;gap:24px 60px;align-items:end;margin-bottom:clamp(44px,6vw,68px)}
.sec-head h2{margin-top:18px}
.sh-p{color:var(--muted);font-size:16.5px;line-height:1.7;max-width:52ch;justify-self:end}
.skip{position:absolute;left:-9999px;top:0;background:var(--pine-900);color:var(--cream);padding:12px 20px;z-index:2000;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ============ Header ============ */
.topbar{background:var(--pine-950);color:rgba(246,241,229,.72);font:500 12.5px/1 var(--font-b)}
.topbar-in{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:16px;flex-wrap:wrap;padding-block:6px}
.tb-left,.tb-right{display:inline-flex;align-items:center;gap:8px}
.tb-right{gap:24px}
.tb-right a{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;transition:color .2s}
.tb-right a:hover{color:var(--cream)}
.topbar .ic{width:14px;height:14px;color:var(--amber)}
.mainbar{position:sticky;top:0;z-index:900;background:rgba(246,241,229,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.mainbar.scrolled{box-shadow:0 10px 30px -18px rgba(15,42,27,.4)}
.mainbar-in{display:flex;align-items:center;gap:28px;height:80px;transition:height .3s}
.mainbar.scrolled .mainbar-in{height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pine-100)}
.brand-text b{display:block;font:600 21px/1.05 var(--font-d);color:var(--ink);letter-spacing:-.01em}
.brand-text i{display:block;font:700 9.5px/1 var(--font-b);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--terra);margin-top:4px}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{position:relative;font:500 14.5px/1 var(--font-b);color:var(--ink);text-decoration:none;padding:8px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:100%;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .28s}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:var(--terra-deep)}
.mainbar-actions{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;width:44px;height:44px;border:1.5px solid var(--line);border-radius:12px;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:2.5px 0;transition:.3s;border-radius:2px}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-panel{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:8px 24px 26px}
.mobile-panel.open{display:block;animation:fadeDown .3s ease}
.mobile-panel a:not(.btn){display:block;padding:14px 2px;border-bottom:1px solid var(--line-soft);font:500 15px/1 var(--font-b);color:var(--ink);text-decoration:none}
.mobile-panel .btn{width:100%;margin-top:18px}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}}

/* ============ Hero ============ */
.hero{padding:clamp(56px,8vw,100px) 0 clamp(96px,10vw,136px)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(44px,6vw,84px);align-items:center}
.hero h1{font-size:clamp(38px,5.3vw,64px);line-height:1.06;margin:22px 0 24px;letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--terra);position:relative;display:inline-block}
.scribble{position:absolute;left:1%;bottom:-9px;width:98%;height:10px;color:var(--terra);opacity:.8}
.scribble path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round}
.lede{font-size:clamp(16px,1.4vw,18.5px);line-height:1.7;color:var(--muted);max-width:54ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.trust{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:38px}
.trust li{display:flex;align-items:center;gap:8px;font:500 13.5px/1.4 var(--font-b);color:var(--muted)}
.trust .ic{width:15px;height:15px;color:var(--terra)}
.stars{display:inline-flex;gap:2px}
.trust .stars .ic{width:13px;height:13px;color:var(--amber)}
.hero-visual{position:relative}
.hero-visual::before{content:"";position:absolute;top:7%;right:-3%;bottom:-5%;left:16%;background:var(--sand);border-radius:999px 999px 34px 34px}
.hero-main{position:relative;z-index:1;width:min(86%,440px);margin-left:auto;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 30px 30px;box-shadow:var(--shadow-lg)}
.hero-small{position:absolute;left:0;bottom:-44px;z-index:2;width:46%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;border:8px solid var(--cream);box-shadow:var(--shadow-md);transform:rotate(-4deg)}
.hero-card{position:absolute;top:9%;left:-2%;z-index:3;display:flex;align-items:center;gap:13px;background:var(--paper);border-radius:18px;padding:15px 20px;box-shadow:var(--shadow-lg);animation:floaty 6s ease-in-out infinite}
.hc-ic{width:40px;height:40px;border-radius:12px;background:var(--terra-soft);color:var(--terra-deep);display:grid;place-items:center}
.hero-card b{display:block;font:600 24px/1 var(--font-d);color:var(--pine-900)}
.hero-card span{font:500 12px/1.3 var(--font-b);color:var(--muted)}
.hero-chip{position:absolute;right:4%;bottom:26px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(253,251,244,.94);border-radius:999px;padding:9px 15px;font:600 12px/1 var(--font-b);color:var(--pine-900);box-shadow:var(--shadow-sm)}
.hero-chip .ic{width:13px;height:13px;color:var(--terra)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ============ Partners ============ */
.partners{border-block:1px solid var(--line);padding:26px 0;background:var(--cream)}
.partners-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px 44px}
.partners-label{font:700 11.5px/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.plogo{color:#77816F;opacity:.85;font-size:19px;white-space:nowrap}
.pl-serif{font:600 20px var(--font-d)}
.pl-caps{font:700 15px var(--font-b);letter-spacing:.14em;text-transform:uppercase}
.pl-italic{font:italic 500 20px var(--font-d)}
.pl-bold{font:700 20px var(--font-d)}
.pl-caps2{font:600 14px var(--font-b);letter-spacing:.2em;text-transform:uppercase}
.pl-serif2{font:500 20px var(--font-d);letter-spacing:.02em}

/* ============ About ============ */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,88px);align-items:center}
.about-visual{position:relative}
.about-main{width:100%;aspect-ratio:10/8.6;object-fit:cover;border-radius:999px 999px 28px 28px;box-shadow:var(--shadow-md)}
.about-small{position:absolute;right:-16px;bottom:-44px;width:46%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;border:8px solid var(--paper);box-shadow:var(--shadow-lg);transform:rotate(3deg)}
.rot-badge{position:absolute;top:-32px;left:-26px;width:118px;height:118px;filter:drop-shadow(0 10px 20px rgba(15,42,27,.25))}
.rot-svg{width:100%;height:100%}
.rot-bg{fill:var(--terra)}
.rot-spin{transform-origin:60px 60px;animation:spin 24s linear infinite}
.rot-text{font:600 10px var(--font-b);letter-spacing:1.8px;fill:var(--cream)}
.rot-heart{position:absolute;inset:0;margin:auto;width:28px;height:28px;color:var(--cream)}
.about-body h2{margin:18px 0 20px}
.about-body>p{color:var(--muted);font-size:16px;line-height:1.75;margin-bottom:16px}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin:24px 0 6px}
.about-facts>div{padding:14px 0;border-top:1px solid var(--line)}
.about-facts b{display:block;font:600 25px/1.1 var(--font-d);color:var(--pine)}
.about-facts span{font:400 12.5px/1.4 var(--font-b);color:var(--muted)}
.about-quote{margin-top:26px;border-left:3px solid var(--terra);padding-left:20px}
.about-quote p{font:italic 500 18.5px/1.55 var(--font-d);color:var(--ink)}
.about-quote footer{margin-top:10px;font:400 13px/1.5 var(--font-b);color:var(--muted)}
.about-quote b{display:block;font:600 14px var(--font-b);color:var(--pine-900)}

/* ============ Programs ============ */
.programs-list{border-bottom:1px solid var(--line)}
.program{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5.5vw,84px);align-items:center;padding:clamp(44px,5.5vw,64px) 0;border-top:1px solid var(--line)}
.program.flip .p-media{order:2}
.p-media{position:relative}
.p-media img{width:100%;aspect-ratio:4/3.1;object-fit:cover;border-radius:230px 230px 26px 26px;box-shadow:var(--shadow-md)}
.p-num{position:absolute;top:-30px;left:-12px;z-index:2;font:600 clamp(76px,9vw,118px)/1 var(--font-d);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px rgba(27,81,54,.3);pointer-events:none;user-select:none}
@supports not (-webkit-text-stroke:1px black){.p-num{color:rgba(27,81,54,.12)}}
.p-chip{position:absolute;bottom:18px;left:18px;display:inline-flex;align-items:center;gap:8px;background:rgba(253,251,244,.95);border-radius:999px;padding:9px 16px;font:600 13px/1 var(--font-b);color:var(--pine-900);box-shadow:var(--shadow-sm)}
.p-chip .ic{width:15px;height:15px;color:var(--terra)}
.p-body h3{font-size:clamp(24px,2.4vw,31px);margin-bottom:14px}
.p-body>p{color:var(--muted);font-size:16px;line-height:1.75}
.p-metrics{display:flex;flex-wrap:wrap;margin:22px 0 4px}
.pm{padding-right:26px;margin-right:26px;border-right:1px solid var(--line)}
.pm:last-child{border:0;margin:0;padding:0}
.pm b{display:block;font:600 26px/1.1 var(--font-d);color:var(--pine)}
.pm span{font:400 12.5px/1.4 var(--font-b);color:var(--muted)}
.p-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.p-more>div{overflow:hidden}
.p-more p{margin:16px 0 4px;padding-left:16px;border-left:3px solid var(--terra-soft);color:var(--muted);font-size:15px;line-height:1.7}
.program.open .p-more{grid-template-rows:1fr}
.p-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:0;border:0;background:none;font:600 15px var(--font-b);color:var(--terra-deep);cursor:pointer;transition:color .2s}
.p-toggle:hover{color:var(--pine)}
.p-toggle .ic{width:16px;height:16px;transition:transform .3s}
.program.open .p-toggle .ic{transform:rotate(45deg)}

/* ============ Impact band ============ */
.impact{position:relative;overflow:hidden}
.impact .container{position:relative;z-index:1}
.impact-arch{position:absolute;right:-70px;bottom:-50px;width:min(440px,60vw);height:auto;pointer-events:none}
.impact-arch path{fill:none;stroke:rgba(246,241,229,.08);stroke-width:1.5}
.impact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;margin-bottom:clamp(48px,6vw,72px)}
.impact-grid p{margin-top:20px;color:rgba(246,241,229,.75);font-size:16.5px;line-height:1.75;max-width:52ch}
.report-card{background:rgba(246,241,229,.05);border:1px solid rgba(246,241,229,.18);border-radius:24px;padding:clamp(24px,3vw,34px)}
.rc-label{font:700 11px/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.report-card h3{font-size:26px;color:var(--cream);margin:12px 0 12px}
.report-card p{font-size:14.5px;line-height:1.65;color:rgba(246,241,229,.7);margin-bottom:22px}
.rc-meta{display:block;margin-top:14px;font:400 12.5px var(--font-b);color:rgba(246,241,229,.55)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid rgba(246,241,229,.16)}
.stat{padding:clamp(26px,3vw,38px) clamp(18px,2.4vw,32px)}
.stat+.stat{border-left:1px solid rgba(246,241,229,.16)}
.stat b{display:block;font:600 clamp(34px,3.8vw,54px)/1 var(--font-d);color:var(--cream);margin-bottom:10px;font-variant-numeric:tabular-nums}
.stat>span{font:400 13.5px/1.5 var(--font-b);color:rgba(246,241,229,.62)}

/* ============ Stories ============ */
.stories{background:var(--paper)}
.carousel{background:var(--cream);border:1px solid var(--line);border-radius:30px;padding:clamp(30px,4.5vw,58px)}
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;transform:translateX(26px);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.slide.active{opacity:1;transform:none;pointer-events:auto}
.q-mark{display:block;height:44px;font:600 92px/.4 var(--font-d);color:var(--terra)}
.slide blockquote{font:italic 500 clamp(19px,2.2vw,26px)/1.5 var(--font-d);color:var(--ink);max-width:62ch;margin:18px 0 30px}
.slide figcaption{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.slide figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--sand)}
.who b{display:block;font:600 15.5px/1.3 var(--font-b);color:var(--ink)}
.who span{font:400 13px/1.3 var(--font-b);color:var(--muted)}
.story-tag{margin-left:auto;background:var(--sand);color:var(--pine-900);font:600 11.5px/1 var(--font-b);letter-spacing:.08em;text-transform:uppercase;padding:9px 15px;border-radius:999px}
.car-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.dots{display:flex;gap:8px}
.dot{width:9px;height:9px;border-radius:999px;border:0;background:var(--line);cursor:pointer;padding:0;transition:.3s}
.dot.active{width:28px;background:var(--terra)}
.car-arrows{display:flex;gap:10px}
.car-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:none;color:var(--pine);display:grid;place-items:center;cursor:pointer;transition:.25s}
.car-btn:hover{background:var(--pine);border-color:var(--pine);color:var(--cream)}

/* ============ Get help ============ */
.help-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(44px,6vw,84px);align-items:start}
.help-body>p{color:var(--muted);font-size:16.5px;line-height:1.75;margin:18px 0 10px;max-width:54ch}
.step{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.step:last-of-type{border-bottom:1px solid var(--line)}
.s-num{flex:none;width:44px;height:44px;border-radius:50%;background:var(--pine);color:var(--cream);display:grid;place-items:center;font:600 18px var(--font-d)}
.step h4{font:600 16.5px/1.3 var(--font-b);color:var(--ink);margin-bottom:6px}
.step p{font:400 14.5px/1.65 var(--font-b);color:var(--muted)}
.help-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}
.helpline{display:flex;align-items:center;gap:13px}
.hl-ic{width:46px;height:46px;border-radius:50%;background:var(--terra-soft);color:var(--terra-deep);display:grid;place-items:center;flex:none}
.helpline b{display:block;font:600 16px/1.3 var(--font-b);color:var(--pine-900)}
.helpline span{font:400 12.5px/1.4 var(--font-b);color:var(--muted)}
.faq-card{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:12px clamp(20px,3vw,32px) 20px;box-shadow:var(--shadow-sm)}
.faq-card h3{font-size:22px;padding:18px 0 8px}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item:last-child{border-bottom:0}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:19px 0;background:none;border:0;text-align:left;font:600 15.5px/1.4 var(--font-b);color:var(--ink);cursor:pointer}
.faq-ic{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);color:var(--pine);display:grid;place-items:center;transition:.3s}
.faq-ic .ic{width:14px;height:14px}
.faq-item.open .faq-ic{background:var(--pine);border-color:var(--pine);color:var(--cream);transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.faq-a>div{overflow:hidden}
.faq-a p{padding-bottom:20px;color:var(--muted);font-size:14.5px;line-height:1.7}
.faq-item.open .faq-a{grid-template-rows:1fr}

/* ============ Volunteer ============ */
.volunteer{background:var(--paper)}
.vol-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,72px);align-items:start}
.opp{display:grid;grid-template-columns:62px 1fr auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.opps .opp:first-child{border-top:1px solid var(--line)}
.opp-date{background:var(--sand);border-radius:16px;text-align:center;padding:10px 6px}
.opp-date b{display:block;font:600 22px/1 var(--font-d);color:var(--pine-900)}
.opp-date span{font:700 10.5px/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-deep)}
.opp-info h4{font:600 16.5px/1.3 var(--font-b);color:var(--ink);margin-bottom:7px}
.opp-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 13px/1.4 var(--font-b);color:var(--muted)}
.opp-meta span{display:inline-flex;align-items:center;gap:6px}
.opp-meta .ic{width:14px;height:14px;color:var(--terra)}
.join-btn.joined{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.opps-note{margin-top:24px;font:400 14.5px/1.7 var(--font-b);color:var(--muted)}
.opps-note a{color:var(--terra-deep);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--terra-soft)}
.opps-note a:hover{border-color:var(--terra-deep)}
.logger{position:sticky;top:104px;background:var(--pine-900);color:var(--cream);border-radius:26px;padding:clamp(26px,3vw,36px);box-shadow:var(--shadow-lg)}
.logger-head{display:flex;gap:14px}
.logger-ic{flex:none;width:46px;height:46px;border-radius:14px;background:rgba(233,166,60,.16);color:var(--amber);display:grid;place-items:center}
.logger-ic .ic{width:22px;height:22px}
.logger-head h3{font-size:21px;color:var(--cream);margin-bottom:6px}
.logger-head p{font:400 13px/1.6 var(--font-b);color:rgba(246,241,229,.65)}
.log-form{margin-top:22px}
.log-row{display:grid;grid-template-columns:1fr 1.3fr;gap:12px}
.logger .f-label{color:rgba(246,241,229,.72)}
.logger .field input,.logger .field select{background:rgba(246,241,229,.07);border-color:rgba(246,241,229,.22);color:var(--cream)}
.logger .field input:focus,.logger .field select:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(233,166,60,.18)}
.logger select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F6F1E5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.logger select option{color:var(--ink);background:var(--paper)}
.logger input[type="date"]{color-scheme:dark}
.logger .btn{margin-top:16px}
.log-list{margin-top:20px;max-height:236px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(246,241,229,.3) transparent}
.log-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(246,241,229,.12)}
.li-info b{display:block;font:600 13.5px/1.3 var(--font-b);color:var(--cream)}
.li-info span{font:400 12px/1.3 var(--font-b);color:rgba(246,241,229,.55)}
.li-side{display:flex;align-items:center;gap:8px}
.li-hrs{font:600 12.5px/1 var(--font-b);color:var(--amber);background:rgba(233,166,60,.14);padding:5px 10px;border-radius:999px}
.li-del{width:30px;height:30px;border:0;border-radius:9px;background:none;color:rgba(246,241,229,.55);display:grid;place-items:center;cursor:pointer;transition:.2s}
.li-del:hover{color:#FF9A6B;background:rgba(217,108,53,.16)}
.li-del .ic{width:15px;height:15px}
.log-empty{display:block;text-align:center;font:400 13.5px/1.6 var(--font-b);color:rgba(246,241,229,.55);padding:22px 10px;border-bottom:1px solid rgba(246,241,229,.12)}
.log-total{margin-top:18px;padding-top:18px;border-top:1px solid rgba(246,241,229,.16)}
.lt-row{display:flex;align-items:baseline;gap:10px}
.lt-num{font:600 38px/1 var(--font-d);color:var(--amber)}
.lt-unit{font:600 11.5px/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:rgba(246,241,229,.6)}
.log-total p{margin-top:9px;font:400 13px/1.6 var(--font-b);color:rgba(246,241,229,.72)}
.log-total strong{color:var(--amber);font-weight:600}

/* ============ Donate ============ */
.donate{background:var(--pine-800)}
.donate-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,84px);align-items:center}
.donate-body>p{margin:18px 0 28px;color:rgba(246,241,229,.75);font-size:16.5px;line-height:1.75;max-width:52ch}
.donate-fine{margin-top:20px;font:400 12.5px/1.7 var(--font-b);color:rgba(246,241,229,.55)}
.split-card{background:rgba(246,241,229,.05);border:1px solid rgba(246,241,229,.18);border-radius:20px;padding:clamp(20px,2.5vw,28px)}
.split-card h4{font:600 19px var(--font-d);color:var(--cream);margin-bottom:16px}
.split-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;gap:2px}
.split-bar i{display:block;transform-origin:left}
.split-card.in .split-bar i{animation:grow 1s cubic-bezier(.2,.7,.3,1) both}
.split-card.in .split-bar i:nth-child(2){animation-delay:.15s}
.split-card.in .split-bar i:nth-child(3){animation-delay:.3s}
@keyframes grow{from{transform:scaleX(0)}}
.split-legend{margin-top:16px;display:grid;gap:9px}
.split-legend li{display:flex;align-items:center;gap:10px;font:400 13.5px/1.4 var(--font-b);color:rgba(246,241,229,.75)}
.split-legend i{width:12px;height:12px;border-radius:50%;flex:none}
.split-legend b{font-weight:600;color:var(--cream);flex:1}
.split-legend span{color:rgba(246,241,229,.6)}
.split-card>p{margin-top:16px;font:400 13px/1.6 var(--font-b);color:rgba(246,241,229,.6)}
.split-card a{color:var(--amber);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.split-card a .ic{width:14px;height:14px}
.donate-widget{background:var(--paper);color:var(--ink);border-radius:26px;padding:clamp(26px,3.4vw,38px);box-shadow:var(--shadow-lg)}
.dw-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.dw-title{font:700 12px/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dw-secure{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--font-b);color:var(--muted)}
.dw-secure .ic{width:13px;height:13px;color:var(--pine)}
.freq{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--sand);border-radius:999px;padding:4px;margin:20px 0 18px}
.freq-thumb{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);background:var(--pine);border-radius:999px;transition:transform .32s cubic-bezier(.3,.8,.3,1)}
.freq.month .freq-thumb{transform:translateX(100%)}
.freq button{position:relative;z-index:1;border:0;background:none;padding:11px 8px;border-radius:999px;font:600 14px/1 var(--font-b);color:var(--muted);cursor:pointer;transition:color .25s}
.freq button.active{color:var(--cream)}
.amts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.amt{padding:13px 6px;text-align:center;border:1.5px solid var(--line);border-radius:13px;background:#fff;font:600 15.5px/1 var(--font-b);color:var(--ink);cursor:pointer;transition:.2s}
.amt:hover{border-color:var(--pine)}
.amt.active{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.field{display:block;margin-bottom:16px}
.f-label{display:block;font:600 13px/1 var(--font-b);color:var(--ink);margin-bottom:8px}
.field input,.field select{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:400 15px/1.4 var(--font-b);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus{border-color:var(--pine);box-shadow:0 0 0 3px rgba(27,81,54,.14)}
.field input.bad{border-color:var(--terra-deep);box-shadow:0 0 0 3px rgba(217,108,53,.15)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F6E61' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.amt-wrap{position:relative;display:block}
.amt-wrap i{position:absolute;left:15px;top:50%;transform:translateY(-50%);font:600 15px var(--font-b);font-style:normal;color:var(--muted)}
.amt-wrap input{padding-left:31px}
.impact-line{display:flex;gap:11px;align-items:flex-start;background:var(--pine-050);border:1px solid var(--pine-100);border-radius:14px;padding:14px 16px;margin:18px 0}
.impact-line .ic{width:18px;height:18px;color:var(--terra);margin-top:2px}
.impact-line p{font:500 14.5px/1.55 var(--font-b);color:var(--pine-900)}
.impact-line.flash{animation:flashIn .45s ease}
@keyframes flashIn{from{opacity:.25;transform:translateY(5px)}}
.dw-fine{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;font:400 12.5px/1.4 var(--font-b);color:var(--muted);text-align:center}
.dw-fine .ic{width:13px;height:13px;color:var(--pine)}
.donate-success{text-align:center;padding:14px 4px 6px}
.big-check{width:76px;height:76px;margin:4px auto 18px;display:block}
.bc-c{fill:none;stroke:var(--pine);stroke-width:3;stroke-dasharray:183;stroke-dashoffset:183;animation:draw .8s ease forwards}
.bc-p{fill:none;stroke:var(--terra);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .55s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.donate-success h3{font-size:27px;margin-bottom:12px}
.donate-success>p{font:400 15px/1.65 var(--font-b);color:var(--muted);max-width:40ch;margin:0 auto 24px}
.ds-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* ============ Newsletter ============ */
.newsletter{padding:clamp(70px,8vw,100px) 0;text-align:center}
.newsletter h2{font-size:clamp(26px,3vw,36px);margin-top:18px}
.newsletter .container>p{color:var(--muted);margin:14px auto 30px;max-width:48ch}
.news-form{display:flex;gap:12px;max-width:520px;margin:0 auto}
.news-form input{flex:1;min-width:0;padding:15px 22px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:400 15px var(--font-b);color:var(--ink);outline:none;transition:.2s}
.news-form input:focus{border-color:var(--pine);box-shadow:0 0 0 3px rgba(27,81,54,.14)}
.news-form input.bad{border-color:var(--terra-deep)}
.news-msg{min-height:22px;margin-top:12px;font:500 13.5px/1.4 var(--font-b);color:var(--terra-deep)}
.news-done{display:inline-flex;align-items:center;gap:9px;font:600 15.5px/1 var(--font-b);color:var(--pine);background:var(--pine-050);border:1px solid var(--pine-100);padding:15px 26px;border-radius:999px}
.news-done .ic{color:var(--pine)}

/* ============ Footer ============ */
footer{background:var(--pine-950);color:rgba(246,241,229,.78)}
.foot-top{display:grid;grid-template-columns:1.35fr .8fr .9fr 1.15fr;gap:clamp(30px,4vw,56px);padding:clamp(60px,7vw,88px) 0 54px}
.foot-brand .brand-text b{color:var(--cream)}
.foot-brand .brand-text i{color:var(--amber)}
.foot-brand>p{font:400 14.5px/1.7 var(--font-b);color:rgba(246,241,229,.6);margin:18px 0 22px;max-width:34ch}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(246,241,229,.25);display:grid;place-items:center;color:rgba(246,241,229,.75);transition:.25s}
.socials a:hover{background:var(--terra);border-color:var(--terra);color:#fff;transform:translateY(-3px)}
.socials .ic{width:17px;height:17px}
.foot-col h4{font:700 12px/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:rgba(246,241,229,.45);margin-bottom:18px}
.foot-col a{display:block;font:400 14.5px/1.5 var(--font-b);color:rgba(246,241,229,.78);text-decoration:none;padding:5px 0;transition:.2s}
.foot-col a:hover{color:var(--amber);transform:translateX(3px)}
.contact-li{display:flex;gap:11px;font:400 14.5px/1.55 var(--font-b);color:rgba(246,241,229,.78);padding:6px 0}
.contact-li .ic{width:16px;height:16px;color:var(--amber);margin-top:3px}
.contact-li a{color:inherit;text-decoration:none}
.contact-li a:hover{color:var(--amber)}
.foot-bottom{border-top:1px solid rgba(246,241,229,.13);padding:22px 0}
.foot-bottom .container{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.foot-bottom p{font:400 13px/1.6 var(--font-b);color:rgba(246,241,229,.5)}
.foot-legal{display:flex;gap:22px;flex-wrap:wrap}
.foot-legal a{font:400 13px/1.6 var(--font-b);color:rgba(246,241,229,.65);text-decoration:none}
.foot-legal a:hover{color:var(--cream)}

/* ============ Toast & modal ============ */
.toast-region{position:fixed;right:22px;bottom:22px;z-index:1200;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:11px;max-width:370px;background:var(--pine-900);color:var(--cream);border:1px solid rgba(246,241,229,.15);padding:14px 18px;border-radius:14px;box-shadow:var(--shadow-lg);font:500 14px/1.5 var(--font-b);animation:toastIn .4s cubic-bezier(.2,.9,.3,1.2)}
.toast .ic{width:18px;height:18px;color:var(--amber)}
.toast.out{animation:toastOut .3s forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}
.modal{position:fixed;inset:0;z-index:1100;display:none}
.modal.open{display:grid;place-items:center;padding:20px}
.modal-overlay{position:absolute;inset:0;background:rgba(10,29,18,.6);backdrop-filter:blur(3px);animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.modal-card{position:relative;width:min(480px,100%);max-height:90vh;overflow:auto;background:var(--paper);border-radius:24px;padding:clamp(26px,4vw,40px);box-shadow:var(--shadow-lg);animation:pop .35s cubic-bezier(.2,.9,.3,1.15)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}}
.modal-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.2s}
.modal-x:hover{color:var(--ink);border-color:var(--ink)}
.modal-x .ic{width:16px;height:16px}
.modal-card h3{font-size:26px;margin:8px 0 10px}
.modal-card .m-sub{font:400 14.5px/1.65 var(--font-b);color:var(--muted);margin-bottom:22px}
.form-err{min-height:20px;margin:2px 0 10px;font:500 13.5px/1.4 var(--font-b);color:var(--terra-deep)}
.form-fine{margin-top:14px;text-align:center;font:400 12.5px/1.4 var(--font-b);color:var(--muted)}
.modal-success{text-align:center;padding:10px 4px 4px}
.modal-success h3{margin-bottom:10px}
.modal-success p{font:400 14.5px/1.65 var(--font-b);color:var(--muted);margin-bottom:22px}
.modal-success strong{color:var(--pine);font-weight:600}

/* ============ Responsive ============ */
@media (max-width:1020px){
  .nav{display:none}
  .nav-toggle{display:flex}
  .hero-grid,.about-grid,.impact-grid,.help-grid,.vol-grid,.donate-grid{grid-template-columns:1fr}
  .sec-head{grid-template-columns:1fr;align-items:start}
  .sh-p{justify-self:start}
  .hero-visual{width:100%;max-width:540px;margin:14px auto 0}
  .about-visual{order:2;width:100%;max-width:560px;margin:0 auto}
  .about-body{order:1}
  .stats{grid-template-columns:1fr 1fr}
  .stat+.stat{border-left:0}
  .stat{border-top:1px solid rgba(246,241,229,.16)}
  .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(even){border-left:1px solid rgba(246,241,229,.16)}
  .program{grid-template-columns:1fr;gap:36px}
  .program.flip .p-media{order:0}
  .p-num{left:4px;top:-24px}
  .logger{position:static}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .topbar{display:none}
  .hero{padding-top:44px}
  .hero-card{left:0}
  .hero-small{left:-6px}
}
@media (max-width:640px){
  .opp{grid-template-columns:54px 1fr}
  .opp .join-btn{grid-column:1/-1;justify-self:start}
  .log-row{grid-template-columns:1fr}
  .news-form{flex-direction:column}
  .foot-top{grid-template-columns:1fr}
  .car-controls{flex-direction:column;align-items:flex-start}
  .story-tag{margin-left:0}
  .help-cta{align-items:flex-start}
  .hero-cta .btn{flex:1}
  .about-small{right:-6px}
  .rot-badge{left:-12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>

<!-- SVG icon sprite -->
<svg width="0" height="0" style="position:absolute;overflow:hidden" aria-hidden="true">
  <defs>
    <symbol id="i-heart" viewBox="0 0 24 24"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
    <symbol id="i-book" viewBox="0 0 24 24"><path d="M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2zM22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
    <symbol id="i-bowl" viewBox="0 0 24 24"><path d="M3 11h18a9 9 0 0 1-18 0z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M9 7c0-1.2.9-1.4.9-2.6M13.5 7c0-1.2.9-1.4.9-2.6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
    <symbol id="i-health" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 8v8M8 12h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
    <symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 4.5 13.5H11L10 22l8.5-11.5H12z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
    <symbol id="i-pin" viewBox="0 0 24 24"><path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0z" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
    <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 7v5l3 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
    <symbol id="i-phone" viewBox="0 0 24 24"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L8 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
    <symbol id="i-mail" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="m2 7 10 6L22 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
    <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M4 12h16m-6-6 6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
    <symbol id="i-check" viewBox="0 0 24 24"><path d="m4 12.5 5 5L20 6.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></symbol>
    <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
    <symbol id="i-chev-l" viewBox="0 0 24 24"><path d="m15 5-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
    <symbol id="i-chev-r" viewBox="0 0 24 24"><path d="m9 5 7 7-7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
    <symbol id="i-star" viewBox="0 0 24 24"><path d="m12 2 3 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.9 21l1.2-6.9-5-4.9 6.9-1z" fill="currentColor"/></symbol>
    <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 2 4 5.5V11c0 5.2 3.4 8.9 8 11 4.6-2.1 8-5.8 8-11V5.5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="m8.5 11.5 2.5 2.5 4.5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
    <symbol id="i-lock" viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
    <symbol id="i-download" viewBox="0 0 24 24"><path d="M12 3v12m-5-5 5 5 5-5M4 21h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
    <symbol id="i-users" viewBox="0 0 24 24"><circle cx="9" cy="8" r="3.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M16 4.6a3.5 3.5 0 0 1 0 6.8M17.5 14.4a6.5 6.5 0 0 1 4 5.6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
    <symbol id="i-trash" viewBox="0 0 24 24"><path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2m3 0-1 13a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L6 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
    <symbol id="i-link" viewBox="0 0 24 24"><path d="M10 14a5 5 0 0 0 7.1 0l2.4-2.4a5 5 0 0 0-7.1-7.1L11 5.9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M14 10a5 5 0 0 0-7.1 0l-2.4 2.4a5 5 0 0 0 7.1 7.1l1.4-1.4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
    <symbol id="i-trend" viewBox="0 0 24 24"><path d="M3 17l6-6 4 4 8-8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 7h6v6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
    <symbol id="i-x-close" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
    <symbol id="i-fb" viewBox="0 0 24 24"><path d="M13.4 21v-7.1h2.4l.4-2.8h-2.8V9.3c0-.8.2-1.4 1.4-1.4h1.5V5.4c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2H8v2.8h2.4V21z" fill="currentColor"/></symbol>
    <symbol id="i-ig" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="17.3" cy="6.7" r="1.3" fill="currentColor"/></symbol>
    <symbol id="i-x" viewBox="0 0 24 24"><path d="M17.8 3H21l-7 8 8.2 10h-6.4l-5-6.1L4.9 21H1.7l7.5-8.6L1.5 3H8l4.5 5.5z" fill="currentColor"/></symbol>
    <symbol id="i-yt" viewBox="0 0 24 24"><path d="M22.5 7.2a2.8 2.8 0 0 0-2-2C18.7 4.7 12 4.7 12 4.7s-6.7 0-8.5.5a2.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.8.5 8.5.5 8.5.5s6.7 0 8.5-.5a2.8 2.8 0 0 0 2-2A29 29 0 0 0 23 12a29 29 0 0 0-.5-4.8z" fill="currentColor"/><path d="M9.8 15.1V8.9L15.4 12z" fill="#0A1D12"/></symbol>
    <symbol id="i-in" viewBox="0 0 24 24"><path d="M5 3.6a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8zM3 9.5h4V21H3zM9.5 9.5h3.8v1.6c.5-1 1.8-2 3.7-2 4 0 4.7 2.6 4.7 6V21h-4v-5.2c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9V21h-4z" fill="currentColor"/></symbol>
  </defs>
</svg>

<!-- Top utility bar -->
<div class="topbar">
  <div class="container topbar-in">
    <span class="tb-left"><svg class="ic" aria-hidden="true"><use href="#i-shield"/></svg>A registered 501(c)(3) nonprofit · EIN 27-3141592</span>
    <span class="tb-right">
      <a href="tel:+15550147723"><svg class="ic" aria-hidden="true"><use href="#i-phone"/></svg>(555) 014-7723</a>
      <a href="#impact"><svg class="ic" aria-hidden="true"><use href="#i-download"/></svg>2024 Annual Report</a>
    </span>
  </div>
</div>

<!-- Header -->
<header class="mainbar" id="mainbar">
  <div class="container mainbar-in">
    <a class="brand" href="#top" aria-label="BrightSpan Foundation — home">
      <img src="https://placehold.co/96x96/1B5136/F6F1E5?text=BS&font=playfair+display" alt="BrightSpan Foundation logo" width="46" height="46">
      <span class="brand-text"><b>BrightSpan</b><i>Foundation</i></span>
    </a>
    <nav class="nav" aria-label="Primary">
      <a href="#top" class="active">Home</a>
      <a href="#programs">Programs</a>
      <a href="#impact">Impact</a>
      <a href="#stories">Stories</a>
      <a href="#help">Get Help</a>
      <a href="#volunteer">Volunteer</a>
      <a href="#contact">Contact</a>
    </nav>
    <div class="mainbar-actions">
      <a href="#donate" class="btn btn-primary btn-sm">Donate</a>
      <button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="mobilePanel" aria-label="Toggle menu"><span></span><span></span><span></span></button>
    </div>
  </div>
  <div class="mobile-panel" id="mobilePanel">
    <a href="#top">Home</a>
    <a href="#programs">Programs</a>
    <a href="#impact">Impact</a>
    <a href="#stories">Stories</a>
    <a href="#help">Get Help</a>
    <a href="#volunteer">Volunteer</a>
    <a href="#contact">Contact</a>
    <a href="#donate" class="btn btn-primary">Give now</a>
  </div>
</header>

<main id="main">

  <!-- ============ Hero ============ -->
  <section class="hero" id="top">
    <div class="container hero-grid">
      <div class="hero-copy">
        <span class="eyebrow reveal">BrightSpan Foundation · A community foundation since 2009</span>
        <h1 class="reveal" style="--d:.06s">Bridging gaps.<br><em>Building futures.<svg class="scribble" viewBox="0 0 220 12" preserveAspectRatio="none" aria-hidden="true"><path d="M3 9C40 3 78 3 110 6.5S185 10.5 217 4.5"/></svg></em></h1>
        <p class="lede reveal" style="--d:.12s">We are a community foundation serving 14 counties with education, food security, and community health programs — because every neighbor deserves a fair shot, and every dollar deserves an accounting.</p>
        <div class="hero-cta reveal" style="--d:.18s">
          <a href="#donate" class="btn btn-primary">Give now<svg class="ic" aria-hidden="true"><use href="#i-heart"/></svg></a>
          <a href="#volunteer" class="btn btn-ghost">Volunteer today</a>
        </div>
        <ul class="trust reveal" style="--d:.24s">
          <li><span class="stars"><svg class="ic" aria-hidden="true"><use href="#i-star"/></svg><svg class="ic" aria-hidden="true"><use href="#i-star"/></svg><svg class="ic" aria-hidden="true"><use href="#i-star"/></svg><svg class="ic" aria-hidden="true"><use href="#i-star"/></svg></span>Four-Star · Charity Navigator</li>
          <li><svg class="ic" aria-hidden="true"><use href="#i-shield"/></svg>Platinum Seal of Transparency</li>
          <li><svg class="ic" aria-hidden="true"><use href="#i-heart"/></svg>86¢ of every $1 funds programs</li>
        </ul>
      </div>
      <div class="hero-visual reveal" style="--d:.15s">
        <img class="ph hero-main" src="https://picsum.photos/seed/brightspan-hero/840/1050" alt="Volunteers sorting fresh produce at a BrightSpan community kitchen" width="840" height="1050">
        <img class="ph hero-small" src="https://picsum.photos/seed/brightspan-tutor/640/460" alt="A BrightStart tutor reading with a student" loading="lazy" width="640" height="460">
        <div class="hero-card">
          <span class="hc-ic"><svg class="ic" aria-hidden="true"><use href="#i-trend"/></svg></span>
          <div><b>412K</b><span>neighbors served since 2009</span></div>
        </div>
        <span class="hero-chip"><svg class="ic" aria-hidden="true"><use href="#i-pin"/></svg>Five Points Community Kitchen · Denver</span>
      </div>
    </div>
  </section>

  <!-- ============ Partners ============ -->
  <section class="partners">
    <div class="container partners-row reveal">
      <span class="partners-label">Powered by partners like</span>
      <span class="plogo pl-serif">Harborlight Bank</span>
      <span class="plogo pl-caps">Cedar Foods</span>
      <span class="plogo pl-italic">Meridian Health</span>
      <span class="plogo pl-bold">Alder&nbsp;&amp;&nbsp;Co.</span>
      <span class="plogo pl-caps2">Bluebird Tech</span>
      <span class="plogo pl-serif2">Summit Ridge</span>
    </div>
  </section>

  <!-- ============ About ============ -->
  <section class="sec about" id="about">
    <div class="container about-grid">
      <div class="about-visual reveal">
        <img class="ph about-main" src="https://picsum.photos/seed/brightspan-neighbors/880/760" alt="Neighbors sharing a meal at a BrightSpan community dinner" loading="lazy" width="880" height="760">
        <img class="ph about-small" src="https://picsum.photos/seed/brightspan-pantry/560/420" alt="Fresh produce on the shelves of a BrightSpan food pantry" loading="lazy" width="560" height="420">
        <div class="rot-badge" aria-hidden="true">
          <svg class="rot-svg" viewBox="0 0 120 120">
            <defs><path id="rotPath" d="M60 60 m -45 0 a 45 45 0 1 1 90 0 a 45 45 0 1 1 -90 0"/></defs>
            <circle class="rot-bg" cx="60" cy="60" r="60"/>
            <g class="rot-spin"><text class="rot-text"><textPath href="#rotPath">BRIGHTSPAN FOUNDATION • SINCE 2009 • </textPath></text></g>
          </svg>
          <svg class="ic rot-heart"><use href="#i-heart"/></svg>
        </div>
      </div>
      <div class="about-body">
        <span class="eyebrow reveal">Who we are</span>
        <h2 class="reveal" style="--d:.06s">Built by neighbors,<br>for neighbors.</h2>
        <p class="reveal" style="--d:.1s">BrightSpan began in 2009 in the basement of a Five Points church, when twelve volunteers started packing weekend meal bags for kids who went home to empty cupboards on Fridays. The need never left — it just grew more visible. Fifteen years later, we've directed more than $48 million into four programs, but the method hasn't changed: listen first, fund what the neighborhood says it needs, and report back in plain language.</p>
        <p class="reveal" style="--d:.12s">Today we pair a permanent endowment with rapid-response funds, publish every program's numbers whether they flatter us or not, and hold a Four-Star Charity Navigator rating. But our favorite metric is simpler than any dashboard: the number of neighbors who tell us they're better off than they were last year.</p>
        <div class="about-facts reveal" style="--d:.16s">
          <div><b>2009</b><span>Founded in a church basement</span></div>
          <div><b>14</b><span>Counties served</span></div>
          <div><b>9,600</b><span>Active volunteers</span></div>
          <div><b>86¢</b><span>Of each dollar to programs</span></div>
        </div>
        <blockquote class="about-quote reveal" style="--d:.2s">
          <p>"We don't give to the community. We give to our neighbors — and they build the future."</p>
          <footer><b>Amara Okafor</b>Executive Director, BrightSpan Foundation</footer>
        </blockquote>
      </div>
    </div>
  </section>

  <!-- ============ Programs ============ -->
  <section class="sec programs" id="programs">
    <div class="container">
      <div class="sec-head">
        <div>
          <span class="eyebrow reveal">What we do</span>
          <h2 class="reveal" style="--d:.06s">Four programs.<br>One promise.</h2>
        </div>
        <p class="sh-p reveal" style="--d:.1s">Every program is designed with — not just for — the neighbors who use it, and each one publishes its results. Expand a program below to see the fine print.</p>
      </div>
      <div class="programs-list">

        <article class="program reveal">
          <div class="p-media">
            <span class="p-num" aria-hidden="true">01</span>
            <img class="ph" src="https://picsum.photos/seed/brightspan-classroom/880/680" alt="Students working one-on-one with a tutor at a BrightStart after-school session" loading="lazy" width="880" height="680">
            <span class="p-chip"><svg class="ic" aria-hidden="true"><use href="#i-book"/></svg>Education</span>
          </div>
          <div class="p-body">
            <h3>BrightStart Education</h3>
            <p>BrightStart pairs students who are falling behind with the same volunteer tutor for a full school year — plus mentors, meals, and school supplies. Last year we served 4,200 students across 34 schools, and 94% of them improved at least one letter grade.</p>
            <div class="p-metrics">
              <div class="pm"><b>4,200</b><span>students tutored last year</span></div>
              <div class="pm"><b>94%</b><span>improved a full letter grade</span></div>
              <div class="pm"><b>312</b><span>college scholarships awarded</span></div>
            </div>
            <div class="p-more"><div><p>The same tutor, the same kid, every week for a year — consistency, not intensity, is what changes a trajectory. BrightStart also runs a summer learning institute for rising ninth-graders, because the summer before high school is where the gap widens fastest.</p></div></div>
            <button class="p-toggle" type="button" aria-expanded="false" data-label="More about BrightStart"><span class="pt-label">More about BrightStart</span><svg class="ic" aria-hidden="true"><use href="#i-plus"/></svg></button>
          </div>
        </article>

        <article class="program flip reveal">
          <div class="p-media">
            <span class="p-num" aria-hidden="true">02</span>
            <img class="ph" src="https://picsum.photos/seed/brightspan-kitchen/880/680" alt="Volunteers serving meals at a BrightSpan community kitchen" loading="lazy" width="880" height="680">
            <span class="p-chip"><svg class="ic" aria-hidden="true"><use href="#i-bowl"/></svg>Food security</span>
          </div>
          <div class="p-body">
            <h3>The Open Table</h3>
            <p>The Open Table runs 62 no-appointment pantries, 38 mobile markets, and community kitchens where anyone can eat with dignity — no forms, no questions, no cost. Last year our kitchens served 1.8 million meals, and 71% of them went to children and seniors.</p>
            <div class="p-metrics">
              <div class="pm"><b>1.8M</b><span>meals served last year</span></div>
              <div class="pm"><b>62</b><span>neighborhood pantries</span></div>
              <div class="pm"><b>38</b><span>mobile market routes</span></div>
            </div>
            <div class="p-more"><div><p>Our pantries never require paperwork, and our mobile markets accept SNAP benefits at full value. Seventy-one percent of every meal we serve goes to a child or a senior — the two neighbors most likely to skip dinner otherwise.</p></div></div>
            <button class="p-toggle" type="button" aria-expanded="false" data-label="More about The Open Table"><span class="pt-label">More about The Open Table</span><svg class="ic" aria-hidden="true"><use href="#i-plus"/></svg></button>
          </div>
        </article>

        <article class="program reveal">
          <div class="p-media">
            <span class="p-num" aria-hidden="true">03</span>
            <img class="ph" src="https://picsum.photos/seed/brightspan-clinic/880/680" alt="A nurse greeting a patient at a BrightSpan mobile health clinic" loading="lazy" width="880" height="680">
            <span class="p-chip"><svg class="ic" aria-hidden="true"><use href="#i-health"/></svg>Health access</span>
          </div>
          <div class="p-body">
            <h3>Community Health Access</h3>
            <p>Three mobile clinics, free preventive screenings, and mental-health first-aid training — brought to neighborhoods where the nearest doctor is a bus ride away. Last year we completed 15,400 screenings and trained 2,100 residents, including teachers, barbers, and bus drivers.</p>
            <div class="p-metrics">
              <div class="pm"><b>15,400</b><span>free screenings completed</span></div>
              <div class="pm"><b>2,100</b><span>mental-health first-aid graduates</span></div>
              <div class="pm"><b>26</b><span>mobile clinic stops monthly</span></div>
            </div>
            <div class="p-more"><div><p>Every screening is free, always. Our health workers follow up for a full month after a first visit — because a blood-pressure cuff is only useful if someone helps you do something with the number.</p></div></div>
            <button class="p-toggle" type="button" aria-expanded="false" data-label="More about Community Health Access"><span class="pt-label">More about Community Health Access</span><svg class="ic" aria-hidden="true"><use href="#i-plus"/></svg></button>
          </div>
        </article>

        <article class="program flip reveal">
          <div class="p-media">
            <span class="p-num" aria-hidden="true">04</span>
            <img class="ph" src="https://picsum.photos/seed/brightspan-relief/880/680" alt="Relief supplies being distributed after a disaster" loading="lazy" width="880" height="680">
            <span class="p-chip"><svg class="ic" aria-hidden="true"><use href="#i-bolt"/></svg>Emergency relief</span>
          </div>
          <div class="p-body">
            <h3>Rapid Response Fund</h3>
            <p>When wildfire, flood, or displacement strikes, the Rapid Response Fund moves in hours, not months: unrestricted cash assistance for rent, deposits, and belongings, with zero overhead taken on emergency gifts. Since 2020 we've deployed $2.3 million across 27 disaster responses.</p>
            <div class="p-metrics">
              <div class="pm"><b>$2.3M</b><span>deployed since 2020</span></div>
              <div class="pm"><b>27</b><span>disaster responses</span></div>
              <div class="pm"><b>72h</b><span>from call to cash in hand</span></div>
            </div>
            <div class="p-more"><div><p>When the Marshall Fire swept through Boulder County, we issued 1,900 emergency grants in eleven days. Unrestricted dollars are the only kind that can move that fast — that's the entire reason the fund exists.</p></div></div>
            <button class="p-toggle" type="button" aria-expanded="false" data-label="More about the Rapid Response Fund"><span class="pt-label">More about the Rapid Response Fund</span><svg class="ic" aria-hidden="true"><use href="#i-plus"/></svg></button>
          </div>
        </article>

      </div>
    </div>
  </section>

  <!-- ============ Impact ============ -->
  <section class="sec impact on-dark" id="impact">
    <svg class="impact-arch" viewBox="0 0 420 520" aria-hidden="true">
      <path d="M20 520V230a190 190 0 0 1 380 0v290"/>
      <path d="M65 520V240a145 145 0 0 1 290 0v280"/>
      <path d="M110 520V250a100 100 0 0 1 200 0v270"/>
    </svg>
    <div class="container">
      <div class="impact-grid">
        <div>
          <span class="eyebrow reveal">Our impact</span>
          <h2 class="reveal" style="--d:.06s">Compassion,<br>measured.</h2>
          <p class="reveal" style="--d:.1s">We hold ourselves to the standard we ask of others: publish the numbers, name the misses, and fix what underperforms. Every program reports against a public impact framework, independently audited each year — so you can see precisely what your generosity built.</p>
        </div>
        <div class="report-card reveal" style="--d:.15s">
          <span class="rc-label">Transparency</span>
          <h3>2024 Annual Report</h3>
          <p>Eighty-two pages of plain-language results: what we spent, what worked, what we're changing, and the targets we missed.</p>
          <button class="btn btn-light" id="reportBtn" type="button"><svg class="ic" aria-hidden="true"><use href="#i-download"/></svg>Download the report</button>
          <span class="rc-meta">PDF · 4.2 MB · Updated March 2025</span>
        </div>
      </div>
      <div class="stats">
        <div class="stat reveal"><b><span data-count="412000">412,000</span></b><span>neighbors served since 2009</span></div>
        <div class="stat reveal" style="--d:.07s"><b><span data-count="1.8" data-decimals="1" data-suffix="M">1.8M</span></b><span>meals served from our community kitchens</span></div>
        <div class="stat reveal" style="--d:.14s"><b><span data-count="9600">9,600</span></b><span>volunteers mobilized last year</span></div>
        <div class="stat reveal" style="--d:.21s"><b><span data-count="48" data-prefix="$" data-suffix="M">$48M</span></b><span>deployed to programs to date</span></div>
      </div>
    </div>
  </section>

  <!-- ============ Stories ============ -->
  <section class="sec stories" id="stories">
    <div class="container">
      <div class="sec-head">
        <div>
          <span class="eyebrow reveal">Beneficiary stories</span>
          <h2 class="reveal" style="--d:.06s">Real people.<br>Real turning points.</h2>
        </div>
        <p class="sh-p reveal" style="--d:.1s">Behind every statistic is a name and a story. Meet three neighbors whose paths crossed with ours — told here in their own words.</p>
      </div>
      <div class="carousel reveal" id="carousel" style="--d:.12s">
        <div class="slides">
          <figure class="slide active">
            <span class="q-mark" aria-hidden="true">&ldquo;</span>
            <blockquote>My daughter was reading below grade level in the third grade, and I work nights — I couldn't be in two places at once. Then Ms. Reyes from BrightStart showed up: same tutor, twice a week, all year. Last month Rosa tested into the district's gifted program. I don't have words for what that year changed — for her, and for me.</blockquote>
            <figcaption>
              <img src="https://i.pravatar.cc/112?u=maria-g" alt="Portrait of Maria G." loading="lazy" width="56" height="56">
              <div class="who"><b>Maria G.</b><span>BrightStart parent · Denver, CO</span></div>
              <span class="story-tag">Education</span>
            </figcaption>
          </figure>
          <figure class="slide">
            <span class="q-mark" aria-hidden="true">&ldquo;</span>
            <blockquote>I first walked into a BrightSpan kitchen looking for a free meal. They fed me, then asked if I'd help pack boxes the next Saturday. Two years later, I run the Saturday shift. The pantry carried my family through a layoff, and now I get to carry someone else's. That's the whole circle, right there.</blockquote>
            <figcaption>
              <img src="https://i.pravatar.cc/112?u=james-t" alt="Portrait of James T." loading="lazy" width="56" height="56">
              <div class="who"><b>James T.</b><span>Open Table neighbor &amp; volunteer · Aurora, CO</span></div>
              <span class="story-tag">Food security</span>
            </figcaption>
          </figure>
          <figure class="slide">
            <span class="q-mark" aria-hidden="true">&ldquo;</span>
            <blockquote>I hadn't seen a doctor in six years — no insurance, no car, no good options. Then the mobile clinic parked outside my apartment building, and a nurse checked my blood pressure on the spot. They got me medication, signed me up for coverage, and a health worker followed up for a month. I cried in that parking lot. Happy tears.</blockquote>
            <figcaption>
              <img src="https://i.pravatar.cc/112?u=aisha-k" alt="Portrait of Aisha K." loading="lazy" width="56" height="56">
              <div class="who"><b>Aisha K.</b><span>Community Health patient · Lakewood, CO</span></div>
              <span class="story-tag">Health access</span>
            </figcaption>
          </figure>
        </div>
        <div class="car-controls">
          <div class="dots">
            <button class="dot active" type="button" aria-label="Show story 1"></button>
            <button class="dot" type="button" aria-label="Show story 2"></button>
            <button class="dot" type="button" aria-label="Show story 3"></button>
          </div>
          <div class="car-arrows">
            <button class="car-btn" id="storyPrev" type="button" aria-label="Previous story"><svg class="ic" aria-hidden="true"><use href="#i-chev-l"/></svg></button>
            <button class="car-btn" id="storyNext" type="button" aria-label="Next story"><svg class="ic" aria-hidden="true"><use href="#i-chev-r"/></svg></button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ Get Help ============ -->
  <section class="sec help" id="help">
    <div class="container help-grid">
      <div class="help-body">
        <span class="eyebrow reveal">Get help</span>
        <h2 class="reveal" style="--d:.06s">Support starts with a conversation.</h2>
        <p class="reveal" style="--d:.1s">If you or someone you love is struggling, we want to hear from you. Every BrightSpan service is free, every request is confidential, and every conversation starts with dignity — never paperwork.</p>
        <div class="steps">
          <div class="step reveal" style="--d:.12s">
            <span class="s-num">1</span>
            <div>
              <h4>Check eligibility</h4>
              <p>Most programs serve residents of our 14 counties; a few, like the Rapid Response Fund, have no geographic limits at all. Answer three quick questions and we'll show you exactly which programs fit your situation.</p>
            </div>
          </div>
          <div class="step reveal" style="--d:.16s">
            <span class="s-num">2</span>
            <div>
              <h4>Apply your way</h4>
              <p>Online in about ten minutes, over the phone with our helpline, or in person at any partner site — a library, clinic, or community center — where a staff member will sit down with you and help.</p>
            </div>
          </div>
          <div class="step reveal" style="--d:.2s">
            <span class="s-num">3</span>
            <div>
              <h4>Meet your case manager</h4>
              <p>Within three business days, a case manager reaches out to connect you with services, answer questions, and check in as things change. You'll never navigate this alone.</p>
            </div>
          </div>
        </div>
        <div class="help-cta reveal" style="--d:.24s">
          <button class="btn btn-primary" type="button" data-apply>Apply for support<svg class="ic" aria-hidden="true"><use href="#i-arrow"/></svg></button>
          <div class="helpline">
            <span class="hl-ic"><svg class="ic" aria-hidden="true"><use href="#i-phone"/></svg></span>
            <div><b>(555) 014-7723</b><span>Mon–Fri · 8 AM – 6 PM MT · Se habla español</span></div>
          </div>
        </div>
      </div>
      <div class="faq-card reveal" style="--d:.15s">
        <h3>Common questions</h3>
        <div class="faq-item">
          <button class="faq-q" type="button" aria-expanded="false">Who qualifies for BrightSpan programs?<span class="faq-ic"><svg class="ic" aria-hidden="true"><use href="#i-plus"/></svg></span></button>
          <div class="faq-a"><div><p>Most of our programs serve residents of the 14 counties we cover, and a few — like the Rapid Response Fund — have no geographic limits at all. There's no minimum income to talk to us, and no paperwork is needed to start. If you're unsure whether you qualify, apply anyway: a case manager will help you find the right fit, including referrals to vetted partner organizations.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" type="button" aria-expanded="false">Is there any cost?<span class="faq-ic"><svg class="ic" aria-hidden="true"><use href="#i-plus"/></svg></span></button>
          <div class="faq-a"><div><p>No. Every BrightSpan program — meals, tutoring, health screenings, emergency grants — is completely free. We're funded by donors, grants, and our endowment, so there is never a fee, a required purchase, or a catch.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" type="button" aria-expanded="false">How long does it take to receive help?<span class="faq-ic"><svg class="ic" aria-hidden="true"><use href="#i-plus"/></svg></span></button>
          <div class="faq-a"><div><p>Food and emergency assistance can be same-day. Education and health program enrollments typically take three to five business days, since we match each family with the right staff member. Your case manager will give you a clear timeline at your very first conversation.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" type="button" aria-expanded="false">Do you only help people in your service area?<span class="faq-ic"><svg class="ic" aria-hidden="true"><use href="#i-plus"/></svg></span></button>
          <div class="faq-a"><div><p>Our programs are place-based, but our compassion isn't. If you live outside our 14 counties, call us anyway — we'll connect you with a vetted partner in your area, and our Rapid Response Fund responds to disasters wherever they happen.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" type="button" aria-expanded="false">How is my personal information protected?<span class="faq-ic"><svg class="ic" aria-hidden="true"><use href="#i-plus"/></svg></span></button>
          <div class="faq-a"><div><p>We collect only what a program requires, store it in encrypted systems, and never sell or share it. Case notes are visible only to your case manager and our program director. You can request a copy or deletion of your data at any time by writing to privacy@brightspan.org.</p></div></div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ Volunteer ============ -->
  <section class="sec volunteer" id="volunteer">
    <div class="container">
      <div class="sec-head">
        <div>
          <span class="eyebrow reveal">Volunteer</span>
          <h2 class="reveal" style="--d:.06s">Give time.<br>It counts twice.</h2>
        </div>
        <p class="sh-p reveal" style="--d:.1s">Last year, 9,600 volunteers gave more than 214,000 hours — the equivalent of 103 full-time staff. Students, retirees, corporate teams, families with kids eight and up: there's a shift with your name on it.</p>
      </div>
      <div class="vol-grid">
        <div class="opps">
          <div class="opp reveal">
            <div class="opp-date"><b>14</b><span>Mar</span></div>
            <div class="opp-info">
              <h4>Community Kitchen Meal Packing</h4>
              <p class="opp-meta"><span><svg class="ic" aria-hidden="true"><use href="#i-pin"/></svg>Five Points Community Center, Denver</span><span><svg class="ic" aria-hidden="true"><use href="#i-clock"/></svg>9:00 AM – 1:00 PM</span><span><svg class="ic" aria-hidden="true"><use href="#i-users"/></svg>18 spots left</span></p>
            </div>
            <button class="btn btn-ghost btn-sm join-btn" type="button" data-event="Community Kitchen Meal Packing">Join event</button>
          </div>
          <div class="opp reveal" style="--d:.06s">
            <div class="opp-date"><b>21</b><span>Mar</span></div>
            <div class="opp-info">
              <h4>BrightStart Tutor Orientation</h4>
              <p class="opp-meta"><span><svg class="ic" aria-hidden="true"><use href="#i-pin"/></svg>Denver Hub + online</span><span><svg class="ic" aria-hidden="true"><use href="#i-clock"/></svg>10:00 AM – 12:30 PM</span><span><svg class="ic" aria-hidden="true"><use href="#i-users"/></svg>25 spots left</span></p>
            </div>
            <button class="btn btn-ghost btn-sm join-btn" type="button" data-event="BrightStart Tutor Orientation">Join event</button>
          </div>
          <div class="opp reveal" style="--d:.12s">
            <div class="opp-date"><b>04</b><span>Apr</span></div>
            <div class="opp-info">
              <h4>Spring Watershed Cleanup</h4>
              <p class="opp-meta"><span><svg class="ic" aria-hidden="true"><use href="#i-pin"/></svg>Cherry Creek, Aurora</span><span><svg class="ic" aria-hidden="true"><use href="#i-clock"/></svg>8:30 AM – 12:00 PM</span><span><svg class="ic" aria-hidden="true"><use href="#i-users"/></svg>40 spots left</span></p>
            </div>
            <button class="btn btn-ghost btn-sm join-btn" type="button" data-event="Spring Watershed Cleanup">Join event</button>
          </div>
          <div class="opp reveal" style="--d:.18s">
            <div class="opp-date"><b>18</b><span>Apr</span></div>
            <div class="opp-info">
              <h4>Mobile Health Fair Support</h4>
              <p class="opp-meta"><span><svg class="ic" aria-hidden="true"><use href="#i-pin"/></svg>Lakewood Community Center</span><span><svg class="ic" aria-hidden="true"><use href="#i-clock"/></svg>7:30 AM – 2:00 PM</span><span><svg class="ic" aria-hidden="true"><use href="#i-users"/></svg>12 spots left</span></p>
            </div>
            <button class="btn btn-ghost btn-sm join-btn" type="button" data-event="Mobile Health Fair Support">Join event</button>
          </div>
          <p class="opps-note reveal" style="--d:.22s">Prefer to lend a skill? Writers, designers, translators, accountants, and licensed drivers are always in demand — write to <a href="mailto:volunteer@brightspan.org">volunteer@brightspan.org</a>.</p>
        </div>

        <aside class="logger reveal" style="--d:.15s" aria-label="Volunteer hour logger">
          <div class="logger-head">
            <span class="logger-ic"><svg class="ic" aria-hidden="true"><use href="#i-clock"/></svg></span>
            <div>
              <h3>Log your hours</h3>
              <p>Already volunteered with us? Record it here — your hours power our grant reports and unlock volunteer awards.</p>
            </div>
          </div>
          <form class="log-form" id="logForm" novalidate>
            <label class="field">
              <span class="f-label">Activity</span>
              <select id="logActivity">
                <option value="kitchen">Meal packing &amp; community kitchens</option>
                <option value="tutoring">Tutoring &amp; mentoring (BrightStart)</option>
                <option value="clinic">Mobile clinic support</option>
                <option value="events">Event &amp; fundraiser support</option>
                <option value="skills">Skills-based / remote</option>
              </select>
            </label>
            <div class="log-row">
              <label class="field"><span class="f-label">Hours</span><input type="number" id="logHours" min="0.5" step="0.5" inputmode="decimal" placeholder="2.5"></label>
              <label class="field"><span class="f-label">Date</span><input type="date" id="logDate"></label>
            </div>
            <button class="btn btn-primary btn-block" type="submit">Add entry</button>
          </form>
          <ul class="log-list" id="logList"></ul>
          <div class="log-total">
            <div class="lt-row"><span class="lt-num" id="logTotal">0</span><span class="lt-unit">hours logged</span></div>
            <p id="logImpact">Every hour you log ripples outward — meals served, kids tutored, neighbors helped.</p>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <!-- ============ Donate ============ -->
  <section class="sec donate on-dark" id="donate">
    <div class="container donate-grid">
      <div class="donate-body">
        <span class="eyebrow reveal">Give now</span>
        <h2 class="reveal" style="--d:.06s">Your gift becomes someone's turning point.</h2>
        <p class="reveal" style="--d:.1s">Eighty-six cents of every dollar goes straight to programs. The rest keeps our books independently audited and our team trained. Monthly giving is the most powerful way to help — steady funds let us plan in years instead of weeks.</p>
        <div class="split-card reveal" style="--d:.16s">
          <h4>Where your dollar goes</h4>
          <div class="split-bar" role="img" aria-label="Of every dollar: 86 cents to programs, 9 cents to administration, 5 cents to fundraising">
            <i style="width:86%;background:var(--terra)"></i>
            <i style="width:9%;background:var(--amber)"></i>
            <i style="width:5%;background:rgba(246,241,229,.35)"></i>
          </div>
          <ul class="split-legend">
            <li><i style="background:var(--terra)"></i><b>Programs</b><span>86¢</span></li>
            <li><i style="background:var(--amber)"></i><b>Administration</b><span>9¢</span></li>
            <li><i style="background:rgba(246,241,229,.35)"></i><b>Fundraising</b><span>5¢</span></li>
          </ul>
          <p>Audited annually by an independent firm. <a href="#impact">See the numbers<svg class="ic" aria-hidden="true"><use href="#i-arrow"/></svg></a></p>
        </div>
        <p class="donate-fine reveal" style="--d:.2s">BrightSpan Foundation is a 501(c)(3) organization (EIN 27-3141592). All gifts are tax-deductible to the fullest extent of the law, and monthly gifts can be paused or canceled anytime.</p>
      </div>
      <div class="donate-widget reveal" style="--d:.12s">
        <div id="donateFormWrap">
          <div class="dw-head">
            <span class="dw-title">Choose your gift</span>
            <span class="dw-secure"><svg class="ic" aria-hidden="true"><use href="#i-lock"/></svg>Secure checkout</span>
          </div>
          <div class="freq" id="freqToggle">
            <span class="freq-thumb" aria-hidden="true"></span>
            <button type="button" data-freq="once" class="active">One-time</button>
            <button type="button" data-freq="month">Monthly</button>
          </div>
          <div class="amts">
            <button type="button" class="amt" data-amt="10">$10</button>
            <button type="button" class="amt" data-amt="25">$25</button>
            <button type="button" class="amt" data-amt="50">$50</button>
            <button type="button" class="amt" data-amt="100">$100</button>
            <button type="button" class="amt" data-amt="250">$250</button>
            <button type="button" class="amt amt-other" id="amtOther">Other</button>
          </div>
          <label class="field">
            <span class="f-label">Or write your own amount</span>
            <span class="amt-wrap"><i>$</i><input type="number" id="amtCustom" min="1" step="1" inputmode="numeric" placeholder="180"></span>
          </label>
          <div class="impact-line" id="impactLine" aria-live="polite">
            <svg class="ic" aria-hidden="true"><use href="#i-heart"/></svg>
            <p id="impactText">Choose an amount to see exactly what your gift makes possible.</p>
          </div>
          <button class="btn btn-primary btn-block" id="donateSubmit" type="button"><span id="donateLabel">Choose an amount</span></button>
          <p class="dw-fine"><svg class="ic" aria-hidden="true"><use href="#i-lock"/></svg>256-bit encrypted · Receipt by email · Tax-deductible</p>
        </div>
        <div class="donate-success" id="donateSuccess" hidden>
          <svg class="big-check" viewBox="0 0 64 64" aria-hidden="true"><circle class="bc-c" cx="32" cy="32" r="29"/><path class="bc-p" d="M20 33.5 28.5 42 44 24"/></svg>
          <h3>Thank you, neighbor.</h3>
          <p id="donateSuccessText"></p>
          <div class="ds-actions">
            <button class="btn btn-ghost" id="giveAgain" type="button">Give again</button>
            <button class="btn btn-ghost" id="shareCopy" type="button"><svg class="ic" aria-hidden="true"><use href="#i-link"/></svg>Copy share link</button>
          </div>
          <p class="dw-fine">A tax-deductible receipt is on its way to your inbox.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ Newsletter ============ -->
  <section class="newsletter">
    <div class="container">
      <span class="eyebrow reveal">Stay in the loop</span>
      <h2 class="reveal" style="--d:.06s">One hopeful email, once a month.</h2>
      <p class="reveal" style="--d:.1s">The BrightSpan Brief: stories from the field, honest numbers, and the occasional good pun. No spam, ever — unsubscribe anytime.</p>
      <div id="newsFormWrap" class="reveal" style="--d:.14s">
        <form class="news-form" id="newsForm" novalidate>
          <input type="email" id="newsEmail" placeholder="you@example.com" aria-label="Email address" autocomplete="email">
          <button class="btn btn-primary" type="submit">Subscribe</button>
        </form>
        <p class="news-msg" id="newsMsg" aria-live="polite"></p>
      </div>
    </div>
  </section>
</main>

<!-- ============ Footer ============ -->
<footer id="contact">
  <div class="container foot-top">
    <div class="foot-brand">
      <a class="brand" href="#top" aria-label="BrightSpan Foundation — back to top">
        <img src="https://placehold.co/96x96/1B5136/F6F1E5?text=BS&font=playfair+display" alt="BrightSpan Foundation logo" width="46" height="46">
        <span class="brand-text"><b>BrightSpan</b><i>Foundation</i></span>
      </a>
      <p>A community foundation bridging gaps and building futures across 14 counties — powered by 9,600 volunteers and donors who believe in radical transparency.</p>
      <div class="socials">
        <a href="https://facebook.com/brightspanfoundation" target="_blank" rel="noopener" aria-label="Facebook"><svg class="ic" aria-hidden="true"><use href="#i-fb"/></svg></a>
        <a href="https://instagram.com/brightspanfdn" target="_blank" rel="noopener" aria-label="Instagram"><svg class="ic" aria-hidden="true"><use href="#i-ig"/></svg></a>
        <a href="https://x.com/brightspanfdn" target="_blank" rel="noopener" aria-label="X (Twitter)"><svg class="ic" aria-hidden="true"><use href="#i-x"/></svg></a>
        <a href="https://youtube.com/@brightspanfoundation" target="_blank" rel="noopener" aria-label="YouTube"><svg class="ic" aria-hidden="true"><use href="#i-yt"/></svg></a>
        <a href="https://linkedin.com/company/brightspan-foundation" target="_blank" rel="noopener" aria-label="LinkedIn"><svg class="ic" aria-hidden="true"><use href="#i-in"/></svg></a>
      </div>
    </div>
    <div class="foot-col">
      <h4>Explore</h4>
      <a href="#about">About us</a>
      <a href="#programs">Our programs</a>
      <a href="#impact">Impact &amp; financials</a>
      <a href="#stories">Beneficiary stories</a>
      <a href="#help">Get help</a>
    </div>
    <div class="foot-col">
      <h4>Get involved</h4>
      <a href="#donate">Donate</a>
      <a href="#volunteer">Volunteer</a>
      <a href="#volunteer">Join an event</a>
      <a href="#contact">Partner with us</a>
      <a href="#contact">Host a fundraiser</a>
    </div>
    <div class="foot-col">
      <h4>Contact</h4>
      <p class="contact-li"><svg class="ic" aria-hidden="true"><use href="#i-pin"/></svg><span>1420 Alder Street, Suite 300<br>Denver, CO 80202</span></p>
      <p class="contact-li"><svg class="ic" aria-hidden="true"><use href="#i-phone"/></svg><a href="tel:+15550147723">(555) 014-7723</a></p>
      <p class="contact-li"><svg class="ic" aria-hidden="true"><use href="#i-mail"/></svg><a href="mailto:hello@brightspan.org">hello@brightspan.org</a></p>
      <p class="contact-li"><svg class="ic" aria-hidden="true"><use href="#i-clock"/></svg><span>Mon–Fri · 8:00 AM – 6:00 PM MT</span></p>
    </div>
  </div>
  <div class="foot-bottom">
    <div class="container">
      <p>© <span id="year">2025</span> BrightSpan Foundation. All rights reserved. A registered 501(c)(3) nonprofit · EIN 27-3141592.</p>
      <div class="foot-legal">
        <a href="#" class="legal-link" data-msg="Our privacy promise: we never sell or share your data. The full policy lives at brightspan.org/privacy.">Privacy Policy</a>
        <a href="#" class="legal-link" data-msg="Our terms of use are available at brightspan.org/terms.">Terms of Use</a>
        <a href="#" class="legal-link" data-msg="Audited financial statements are published every March at brightspan.org/financials.">Financial Statements</a>
        <a href="#" class="legal-link" data-msg="We use exactly two cookies: one for your session, one for this banner. That's it.">Cookie Preferences</a>
      </div>
    </div>
  </div>
</footer>

<!-- ============ Apply modal ============ -->
<div class="modal" id="applyModal" aria-hidden="true">
  <div class="modal-overlay" data-close></div>
  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="applyTitle">
    <button class="modal-x" type="button" data-close aria-label="Close"><svg class="ic" aria-hidden="true"><use href="#i-x-close"/></svg></button>
    <div id="applyFormWrap">
      <span class="eyebrow">Get help</span>
      <h3 id="applyTitle">Apply for support</h3>
      <p class="m-sub">Tell us a little about your situation. A case manager will reach out within three business days. Everything you share is confidential.</p>
      <form id="applyForm" novalidate>
        <label class="field"><span class="f-label">Full name</span><input type="text" id="afName" placeholder="Jordan Rivera" autocomplete="name"></label>
        <label class="field"><span class="f-label">Phone or email</span><input type="text" id="afContact" placeholder="you@example.com" autocomplete="email"></label>
        <label class="field"><span class="f-label">What do you need help with?</span>
          <select id="afNeed">
            <option>Food assistance</option>
            <option>Education &amp; tutoring</option>
            <option>Health services</option>
            <option>Emergency relief</option>
            <option>Something else</option>
          </select>
        </label>
        <p class="form-err" id="afErr" aria-live="polite"></p>
        <button class="btn btn-primary btn-block" type="submit">Submit application</button>
        <p class="form-fine">No fee. No obligation. Se habla español.</p>
      </form>
    </div>
    <div class="modal-success" id="applySuccess" hidden>
      <svg class="big-check" viewBox="0 0 64 64" aria-hidden="true"><circle class="bc-c" cx="32" cy="32" r="29"/><path class="bc-p" d="M20 33.5 28.5 42 44 24"/></svg>
      <h3>Application received</h3>
      <p>Thank you for reaching out. A BrightSpan case manager will contact you within three business days. Your reference number is <strong id="afRef">BS-00000</strong>.</p>
      <button class="btn btn-ghost" type="button" data-close>Close</button>
    </div>
  </div>
</div>

<div class="toast-region" id="toastRegion" aria-live="polite"></div>

<script>
(function () {
  'use strict';
  const $ = (s, c) => (c || document).querySelector(s);
  const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;

  /* ---------- Toasts ---------- */
  const toastRegion = $('#toastRegion');
  function toast(msg) {
    const t = document.createElement('div');
    t.className = 'toast';
    t.innerHTML = '<svg class="ic" aria-hidden="true"><use href="#i-check"/></svg><span></span>';
    t.querySelector('span').textContent = msg;
    toastRegion.appendChild(t);
    setTimeout(() => { t.classList.add('out'); setTimeout(() => t.remove(), 320); }, 3800);
  }

  /* ---------- Header ---------- */
  const mainbar = $('#mainbar');
  const onScroll = () => mainbar.classList.toggle('scrolled', window.scrollY > 10);
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();

  /* ---------- Mobile nav ---------- */
  const navToggle = $('#navToggle'), mobilePanel = $('#mobilePanel');
  navToggle.addEventListener('click', () => {
    const open = mobilePanel.classList.toggle('open');
    navToggle.classList.toggle('open', open);
    navToggle.setAttribute('aria-expanded', open);
  });
  $$('#mobilePanel a').forEach(a => a.addEventListener('click', () => {
    mobilePanel.classList.remove('open');
    navToggle.classList.remove('open');
    navToggle.setAttribute('aria-expanded', 'false');
  }));

  /* ---------- Scrollspy ---------- */
  const navLinks = $$('.nav a');
  const spy = new IntersectionObserver(entries => {
    entries.forEach(en => {
      if (!en.isIntersecting) return;
      navLinks.forEach(a => a.classList.toggle('active', a.getAttribute('href') === '#' + en.target.id));
    });
  }, { rootMargin: '-38% 0px -55% 0px' });
  ['top', 'programs', 'impact', 'stories', 'help', 'volunteer', 'donate', 'contact'].forEach(id => {
    const el = document.getElementById(id);
    if (el) spy.observe(el);
  });

  /* ---------- Reveal on scroll ---------- */
  const ro = new IntersectionObserver(entries => {
    entries.forEach(en => {
      if (en.isIntersecting) { en.target.classList.add('in'); ro.unobserve(en.target); }
    });
  }, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
  $$('.reveal').forEach(el => ro.observe(el));

  /* ---------- Count-up stats ---------- */
  function countUp(el) {
    const target = parseFloat(el.dataset.count), dec = +(el.dataset.decimals || 0);
    const pre = el.dataset.prefix || '', suf = el.dataset.suffix || '';
    const fmt = n => pre + n.toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec }) + suf;
    if (reduced) { el.textContent = fmt(target); return; }
    const dur = 1700, t0 = performance.now();
    (function tick(t) {
      const p = Math.min((t - t0) / dur, 1), e = 1 - Math.pow(1 - p, 3);
      el.textContent = fmt(target * e);
      if (p < 1) requestAnimationFrame(tick);
    })(t0);
  }
  const co = new IntersectionObserver(entries => {
    entries.forEach(en => { if (en.isIntersecting) { co.unobserve(en.target); countUp(en.target); } });
  }, { threshold: 0.5 });
  $$('[data-count]').forEach(el => co.observe(el));

  /* ---------- Story carousel ---------- */
  const slides = $$('.slide'), dots = $$('.dot');
  let cur = 0, timer = null;
  function go(i) {
    slides[cur].classList.remove('active'); dots[cur].classList.remove('active');
    cur = (i + slides.length) % slides.length;
    slides[cur].classList.add('active'); dots[cur].classList.add('active');
  }
  const next = () => go(cur + 1), prev = () => go(cur - 1);
  function stop() { if (timer) { clearInterval(timer); timer = null; } }
  function play() { stop(); if (!reduced) timer = setInterval(next, 7000); }
  $('#storyNext').addEventListener('click', () => { next(); play(); });
  $('#storyPrev').addEventListener('click', () => { prev(); play(); });
  dots.forEach((d, i) => d.addEventListener('click', () => { go(i); play(); }));
  const carousel = $('#carousel');
  carousel.addEventListener('mouseenter', stop);
  carousel.addEventListener('mouseleave', play);
  play();

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

  /* ---------- Program expanders ---------- */
  $$('.p-toggle').forEach(btn => btn.addEventListener('click', () => {
    const prog = btn.closest('.program'), open = prog.classList.toggle('open');
    btn.setAttribute('aria-expanded', open);
    $('.pt-label', btn).textContent = open ? 'Hide program details' : btn.dataset.label;
  }));

  /* ---------- Join event buttons ---------- */
  $$('.join-btn').forEach(btn => btn.addEventListener('click', () => {
    const joined = btn.classList.toggle('joined');
    btn.innerHTML = joined
      ? '<svg class="ic" aria-hidden="true"><use href="#i-check"/></svg>Spot saved'
      : 'Join event';
    toast(joined
      ? 'You\u2019re signed up for \u201C' + btn.dataset.event + '\u201D \u2014 details are on their way to your inbox.'
      : 'Your signup for \u201C' + btn.dataset.event + '\u201D was canceled.');
  }));

  /* ---------- Volunteer hour logger ---------- */
  const ACT = {
    kitchen: 'Meal packing & kitchens', tutoring: 'Tutoring & mentoring',
    clinic: 'Mobile clinic support', events: 'Event & fundraiser support', skills: 'Skills-based / remote'
  };
  let entries = [];
  try { entries = JSON.parse(localStorage.getItem('bs-hours') || '[]') || []; } catch (e) { entries = []; }
  const logList = $('#logList'), logTotal = $('#logTotal'), logImpact = $('#logImpact');
  const fmtDate = d => {
    const dt = new Date(d + 'T12:00:00');
    return isNaN(dt) ? d : dt.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
  };
  const trimNum = n => (Math.round(n * 10) / 10).toString().replace(/\.0$/, '');
  function saveLog() { try { localStorage.setItem('bs-hours', JSON.stringify(entries)); } catch (e) {} }
  function renderLog() {
    if (!entries.length) {
      logList.innerHTML = '<li class="log-empty">No entries yet \u2014 your first shift is one click away.</li>';
    } else {
      logList.innerHTML = entries.map(e =>
        '<li><div class="li-info"><b>' + ACT[e.act] + '</b><span>' + fmtDate(e.date) + '</span></div>' +
        '<div class="li-side"><span class="li-hrs">+' + trimNum(e.hours) + ' h</span>' +
        '<button class="li-del" type="button" data-id="' + e.id + '" aria-label="Remove entry"><svg class="ic" aria-hidden="true"><use href="#i-trash"/></svg></button></div></li>'
      ).join('');
    }
    const total = entries.reduce((s, e) => s + e.hours, 0);
    logTotal.textContent = trimNum(total);
    logImpact.innerHTML = total > 0
      ? 'That\u2019s roughly <strong>' + trimNum(total * 4) + ' acts of service</strong> \u2014 meals served, kids tutored, neighbors helped. Thank you.'
      : 'Every hour you log ripples outward \u2014 meals served, kids tutored, neighbors helped.';
    saveLog();
  }
  $('#logForm').addEventListener('submit', ev => {
    ev.preventDefault();
    const act = $('#logActivity').value, hours = parseFloat($('#logHours').value);
    if (!(hours > 0)) { toast('Please enter the number of hours you volunteered.'); return; }
    entries.unshift({ id: Date.now(), act: act, hours: hours, date: $('#logDate').value || new Date().toISOString().slice(0, 10) });
    $('#logHours').value = '';
    renderLog();
    toast(trimNum(hours) + ' hour' + (hours === 1 ? '' : 's') + ' logged \u2014 thank you, neighbor!');
  });
  logList.addEventListener('click', ev => {
    const del = ev.target.closest('.li-del');
    if (!del) return;
    entries = entries.filter(e => e.id !== Number(del.dataset.id));
    renderLog();
  });
  $('#logDate').value = new Date().toISOString().slice(0, 10);
  renderLog();

  /* ---------- Donation widget ---------- */
  const dState = { freq: 'once', amount: 0 };
  const IMPACT = [
    { min: 250, text: 'a week of summer learning for a rising ninth-grader' },
    { min: 100, text: 'a full preventive health screening at a mobile clinic' },
    { min: 50,  text: 'a week of groceries for a family of four' },
    { min: 25,  text: 'a month of tutoring materials for one student' },
    { min: 10,  text: 'four warm meals at a community kitchen' }
  ];
  const impactFor = a => { for (const m of IMPACT) if (a >= m.min) return m.text; return 'immediate relief wherever the need is greatest'; };
  const fmtMoney = n => '$' + Math.round(n).toLocaleString('en-US');
  const amtBtns = $$('.amt[data-amt]'), amtOther = $('#amtOther'), amtCustom = $('#amtCustom');
  const freqWrap = $('#freqToggle'), impactLine = $('#impactLine'), impactText = $('#impactText');
  const donateLabel = $('#donateLabel'), donateSubmit = $('#donateSubmit');
  function renderDonate() {
    freqWrap.classList.toggle('month', dState.freq === 'month');
    $$('#freqToggle [data-freq]').forEach(b => b.classList.toggle('active', b.dataset.freq === dState.freq));
    amtBtns.forEach(b => b.classList.toggle('active', dState.amount > 0 && Number(b.dataset.amt) === dState.amount && !amtCustom.value));
    amtOther.classList.toggle('active', dState.amount > 0 && !!amtCustom.value);
    const a = dState.amount;
    impactText.textContent = a > 0
      ? 'Provides ' + impactFor(a) + (dState.freq === 'month' ? ' \u2014 every month, all year long.' : '.')
      : 'Choose an amount to see exactly what your gift makes possible.';
    donateLabel.textContent = a > 0
      ? 'Give ' + fmtMoney(a) + (dState.freq === 'month' ? ' every month' : ' now')
      : 'Choose an amount';
    impactLine.classList.remove('flash'); void impactLine.offsetWidth; impactLine.classList.add('flash');
  }
  amtBtns.forEach(b => b.addEventListener('click', () => { dState.amount = Number(b.dataset.amt); amtCustom.value = ''; renderDonate(); }));
  amtOther.addEventListener('click', () => amtCustom.focus());
  amtCustom.addEventListener('input', () => {
    const v = parseFloat(amtCustom.value);
    dState.amount = isNaN(v) ? 0 : v;
    renderDonate();
  });
  $$('#freqToggle [data-freq]').forEach(b => b.addEventListener('click', () => { dState.freq = b.dataset.freq; renderDonate(); }));
  renderDonate();

  donateSubmit.addEventListener('click', () => {
    if (!(dState.amount > 0)) { toast('Please choose a gift amount first.'); return; }
    donateSubmit.classList.add('loading');
    donateSubmit.disabled = true;
    donateLabel.textContent = 'Processing\u2026';
    setTimeout(() => {
      const a = dState.amount;
      $('#donateSuccessText').textContent = dState.freq === 'month'
        ? 'Your monthly gift of ' + fmtMoney(a) + ' provides ' + impactFor(a) + ' \u2014 that\u2019s ' + fmtMoney(a * 12) + ' of year-round support.'
        : 'Your one-time gift of ' + fmtMoney(a) + ' will provide ' + impactFor(a) + '.';
      $('#donateFormWrap').hidden = true;
      $('#donateSuccess').hidden = false;
      donateSubmit.classList.remove('loading');
      donateSubmit.disabled = false;
      toast('Thank you for your ' + (dState.freq === 'month' ? 'monthly' : 'one-time') + ' gift of ' + fmtMoney(a) + '!');
    }, 1100);
  });
  $('#giveAgain').addEventListener('click', () => {
    dState.amount = 0; dState.freq = 'once'; amtCustom.value = '';
    renderDonate();
    $('#donateSuccess').hidden = true;
    $('#donateFormWrap').hidden = false;
  });
  $('#shareCopy').addEventListener('click', () => {
    copyText(window.location.href);
    toast('Link copied \u2014 thank you for spreading the word!');
  });
  function copyText(text) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
    } else fallbackCopy(text);
  }
  function fallbackCopy(text) {
    const ta = document.createElement('textarea');
    ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';
    document.body.appendChild(ta); ta.select();
    try { document.execCommand('copy'); } catch (e) {}
    ta.remove();
  }

  /* ---------- Apply modal ---------- */
  const modal = $('#applyModal');
  function openModal() {
    modal.classList.add('open');
    modal.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden';
    $('#applyFormWrap').hidden = false;
    $('#applySuccess').hidden = true;
    setTimeout(() => $('#afName').focus(), 60);
  }
  function closeModal() {
    modal.classList.remove('open');
    modal.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = '';
  }
  $$('[data-apply]').forEach(b => b.addEventListener('click', openModal));
  $$('[data-close]', modal).forEach(b => b.addEventListener('click', closeModal));
  document.addEventListener('keydown', e => { if (e.key === 'Escape' && modal.classList.contains('open')) closeModal(); });
  $('#applyForm').addEventListener('submit', ev => {
    ev.preventDefault();
    const name = $('#afName').value.trim(), contact = $('#afContact').value.trim(), err = $('#afErr');
    if (name.length < 2) { err.textContent = 'Please tell us your name.'; return; }
    if (contact.length < 5) { err.textContent = 'Please leave a phone number or email so we can reach you.'; return; }
    err.textContent = '';
    $('#afRef').textContent = 'BS-' + Math.floor(10000 + Math.random() * 89999);
    $('#applyFormWrap').hidden = true;
    $('#applySuccess').hidden = false;
    toast('Application received \u2014 a case manager will reach out within three business days.');
  });

  /* ---------- Newsletter ---------- */
  $('#newsForm').addEventListener('submit', ev => {
    ev.preventDefault();
    const input = $('#newsEmail'), msg = $('#newsMsg'), v = input.value.trim();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) {
      msg.textContent = 'Hmm \u2014 that email doesn\u2019t look quite right. Mind checking it?';
      input.classList.add('bad');
      return;
    }
    $('#newsFormWrap').innerHTML = '<p class="news-done"><svg class="ic" aria-hidden="true"><use href="#i-check"/></svg>You\u2019re on the list \u2014 see you in your inbox next month.</p>';
    toast('Welcome to The BrightSpan Brief!');
  });
  $('#newsEmail').addEventListener('input', () => {
    $('#newsMsg').textContent = '';
    $('#newsEmail').classList.remove('bad');
  });

  /* ---------- Misc wired elements ---------- */
  $('#reportBtn').addEventListener('click', () => {
    toast('Preparing your download \u2014 BrightSpan-Annual-Report-2024.pdf (4.2 MB)\u2026');
  });
  $$('.legal-link').forEach(a => a.addEventListener('click', ev => {
    ev.preventDefault();
    toast(a.dataset.msg);
  }));

  /* ---------- Footer year ---------- */
  $('#year').textContent = new Date().getFullYear();
})();
</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-12T10:12:00.762Z",
  "url": "https://benchmark.aimac.invalid/3ed49fc78ed404863f1ba55dd1f7e6319ae699013e59dc88366e61f07780cede.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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=\"BrightSpan Foundation \u2014 home\">",
          "target": [
            "a[aria-label=\"BrightSpan Foundation \u2014 home\"]"
          ]
        }
      ]
    },
    {
      "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=\"BrightSpan Foundation \u2014 home\">",
          "target": [
            "a[aria-label=\"BrightSpan Foundation \u2014 home\"]"
          ]
        }
      ]
    },
    {
      "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=\"split-bar\" role=\"img\" aria-label=\"Of every dollar: 86 cents to programs, 9 cents to administration, 5 cents to fundraising\">",
          "target": [
            ".split-bar"
          ]
        }
      ]
    },
    {
      "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 width=\"0\" height=\"0\" style=\"position:absolute;overflow:hidden\" aria-hidden=\"true\">",
          "target": [
            "svg[width=\"0\"]"
          ]
        }
      ]
    },
    {
      "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=\"BrightSpan Foundation \u2014 home\">",
          "target": [
            "a[aria-label=\"BrightSpan Foundation \u2014 home\"]"
          ]
        }
      ]
    },
    {
      "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=\"split-bar\" role=\"img\" aria-label=\"Of every dollar: 86 cents to programs, 9 cents to administration, 5 cents to fundraising\">",
          "target": [
            ".split-bar"
          ]
        }
      ]
    },
    {
      "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=\"split-bar\" role=\"img\" aria-label=\"Of every dollar: 86 cents to programs, 9 cents to administration, 5 cents to fundraising\">",
          "target": [
            ".split-bar"
          ]
        }
      ]
    },
    {
      "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=\"BrightSpan Foundation \u2014 home\">",
          "target": [
            "a[aria-label=\"BrightSpan Foundation \u2014 home\"]"
          ]
        }
      ]
    },
    {
      "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=\"BrightSpan Foundation \u2014 home\">",
          "target": [
            "a[aria-label=\"BrightSpan Foundation \u2014 home\"]"
          ]
        }
      ]
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "autocomplete-valid",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "the autocomplete attribute is correctly formatted"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<input type=\"email\" id=\"newsEmail\" placeholder=\"you@example.com\" aria-label=\"Email address\" autocomplete=\"email\">",
          "target": [
            "#newsEmail"
          ]
        }
      ]
    },
    {
      "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": "<h1 class=\"reveal in\" style=\"--d:.06s\">Bridging gaps.<br><em>Building futures.<svg class=\"scribble\" viewBox=\"0 0 220 12\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><path d=\"M3 9C40 3 78 3 110 6.5S185 10.5 217 4.5\"></path></svg></em></h1>",
          "target": [
            "h1"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"p-toggle\" type=\"button\" aria-expanded=\"false\" data-label=\"More about BrightStart\"><span class=\"pt-label\">More about BrightStart</span><svg class=\"ic\" aria-hidden=\"true\"><use href=\"#i-plus\"></use></svg></button>",
          "target": [
            "button[data-label=\"More about BrightStart\"]"
          ]
        }
      ]
    },
    {
      "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 class=\"reveal in\" style=\"--d:.06s\">Bridging gaps.<br><em>Building futures.<svg class=\"scribble\" viewBox=\"0 0 220 12\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><path d=\"M3 9C40 3 78 3 110 6.5S185 10.5 217 4.5\"></path></svg></em></h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"reveal\" style=\"--d:.06s\">Built by neighbors,<br>for neighbors.</h2>",
                  "target": [
                    ".about-body > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"reveal\" style=\"--d:.06s\">Four programs.<br>One promise.</h2>",
                  "target": [
                    "#programs > .container > .sec-head > div > h2"
                  ]
                },
                {
                  "html": "<h3>BrightStart Education</h3>",
                  "target": [
                    "article:nth-child(1) > .p-body > h3"
                  ]
                },
                {
                  "html": "<h3>The Open Table</h3>",
                  "target": [
                    ".flip:nth-child(2) > .p-body > h3"
                  ]
                },
                {
                  "html": "<h3>Community Health Access</h3>",
                  "target": [
                    "article:nth-child(3) > .p-body > h3"
                  ]
                },
                {
                  "html": "<h3>Rapid Response Fund</h3>",
                  "target": [
                    ".flip:nth-child(4) > .p-body > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"reveal\" style=\"--d:.06s\">Compassion,<br>measured.</h2>",
                  "target": [
                    ".impact-grid > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h3>2024 Annual Report</h3>",
                  "target": [
                    ".report-card > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"reveal\" style=\"--d:.06s\">Real people.<br>Real turning points.</h2>",
                  "target": [
                    "#stories > .container > .sec-head > div > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"reveal\" style=\"--d:.06s\">Support starts with a conversation.</h2>",
                  "target": [
                    ".help-body > h2"
                  ]
                },
                {
                  "html": "<h4>Check eligibility</h4>",
                  "target": [
                    ".step.reveal:nth-child(1) > div > h4"
                  ]
                },
                {
                  "html": "<h4>Apply your way</h4>",
                  "target": [
                    ".step.reveal:nth-child(2) > div > h4"
                  ]
                },
                {
                  "html": "<h4>Meet your case manager</h4>",
                  "target": [
                    ".step.reveal:nth-child(3) > div > h4"
                  ]
                },
                {
                  "html": "<h3>Common questions</h3>",
                  "target": [
                    ".faq-card > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"reveal\" style=\"--d:.06s\">Give time.<br>It counts twice.</h2>",
                  "target": [
                    "#volunteer > .container > .sec-head > div > h2"
                  ]
                },
                {
                  "html": "<h4>Community Kitchen Meal Packing</h4>",
                  "target": [
                    ".opp.reveal:nth-child(1) > .opp-info > h4"
                  ]
                },
                {
                  "html": "<h4>BrightStart Tutor Orientation</h4>",
                  "target": [
                    ".opp.reveal:nth-child(2) > .opp-info > h4"
                  ]
                },
                {
                  "html": "<h4>Spring Watershed Cleanup</h4>",
                  "target": [
                    ".opp.reveal:nth-child(3) > .opp-info > h4"
                  ]
                },
                {
                  "html": "<h4>Mobile Health Fair Support</h4>",
                  "target": [
                    ".opp.reveal:nth-child(4) > .opp-info > h4"
                  ]
                },
                {
                  "html": "<h3>Log your hours</h3>",
                  "target": [
                    ".logger-head > div > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"reveal\" style=\"--d:.06s\">Your gift becomes someone's turning point.</h2>",
                  "target": [
                    ".donate-body > h2"
                  ]
                },
                {
                  "html": "<h4>Where your dollar goes</h4>",
                  "target": [
                    ".split-card > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"reveal\" style=\"--d:.06s\">One hopeful email, once a month.</h2>",
                  "target": [
                    ".container > h2"
                  ]
                },
                {
                  "html": "<h4>Explore</h4>",
                  "target": [
                    ".foot-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Get involved</h4>",
                  "target": [
                    ".foot-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact</h4>",
                  "target": [
                    ".foot-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\" class=\"js\">",
          "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": "#b4b6aa",
                "bgColor": "#0a1d12",
                "contrastRatio": 8.52,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 8.52"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span class=\"tb-left\"><svg class=\"ic\" aria-hidden=\"true\"><use href=\"#i-shield\"></use></svg>A registered 501(c)(3) nonprofit \u00b7 EIN 27-3141592</span>",
          "target": [
            ".tb-left"
          ]
        }
      ]
    },
    {
      "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\" class=\"js\">",
          "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": "mobilePanel",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"mobile-panel\" id=\"mobilePanel\">",
          "target": [
            "#mobilePanel"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label class=\"field\">",
                  "target": [
                    "#logForm > label"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<select id=\"logActivity\">",
          "target": [
            "#logActivity"
          ]
        }
      ]
    },
    {
      "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\" class=\"js\">",
          "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\" class=\"js\">",
          "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/1B5136/F6F1E5?text=BS&amp;font=playfair+display\" alt=\"BrightSpan Foundation logo\" width=\"46\" height=\"46\">",
          "target": [
            "a[aria-label=\"BrightSpan Foundation \u2014 home\"] > img[alt=\"BrightSpan Foundation logo\"][width=\"46\"][height=\"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": "implicit-label",
              "data": {
                "implicitLabel": "Hours 2.5"
              },
              "relatedNodes": [
                {
                  "html": "<label class=\"field\"><span class=\"f-label\">Hours</span><input type=\"number\" id=\"logHours\" min=\"0.5\" step=\"0.5\" inputmode=\"decimal\" placeholder=\"2.5\"></label>",
                  "target": [
                    ".log-row > label:nth-child(1)"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an implicit (wrapped) <label>"
            },
            {
              "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=\"logHours\" min=\"0.5\" step=\"0.5\" inputmode=\"decimal\" placeholder=\"2.5\">",
          "target": [
            "#logHours"
          ]
        }
      ]
    },
    {
      "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\" href=\"#main\">Skip to content</a>",
          "target": [
            ".skip"
          ]
        }
      ]
    },
    {
      "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=\"trust reveal\" style=\"--d:.24s\">",
          "target": [
            ".trust"
          ]
        }
      ]
    },
    {
      "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>",
          "target": [
            ".trust > 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\">",
          "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/1B5136/F6F1E5?text=BS&amp;font=playfair+display\" alt=\"BrightSpan Foundation logo\" width=\"46\" height=\"46\">",
          "target": [
            "a[aria-label=\"BrightSpan Foundation \u2014 home\"] > img[alt=\"BrightSpan Foundation logo\"][width=\"46\"][height=\"46\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "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=\"split-bar\" role=\"img\" aria-label=\"Of every dollar: 86 cents to programs, 9 cents to administration, 5 cents to fundraising\">",
          "target": [
            ".split-bar"
          ]
        }
      ]
    },
    {
      "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": "implicit-label",
              "data": {
                "implicitLabel": "Activity"
              },
              "relatedNodes": [
                {
                  "html": "<label class=\"field\">",
                  "target": [
                    "#logForm > label"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an implicit (wrapped) <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=\"logActivity\">",
          "target": [
            "#logActivity"
          ]
        }
      ]
    },
    {
      "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": 161.3,
                "height": 50.4
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (161.3px by 50.4px, 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\" href=\"#main\">Skip to content</a>",
          "target": [
            ".skip"
          ]
        }
      ]
    }
  ],
  "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": {
                "fontSize": "18.0pt (24px)",
                "fontWeight": "normal",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "3:1"
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"hero-visual reveal in\" style=\"--d:.15s\">",
                  "target": [
                    ".hero-visual"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<b>412K</b>",
          "target": [
            ".hero-card > div > b"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo element"
        }
      ]
    }
  ],
  "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": "#d96c35",
                "bgColor": "#f6f1e5",
                "contrastRatio": 3.03,
                "fontSize": "7.1pt (9.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"mainbar\" id=\"mainbar\">",
                  "target": [
                    "#mainbar"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 7.1pt (9.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<i>Foundation</i>",
          "target": [
            "a[aria-label=\"BrightSpan Foundation \u2014 home\"] > .brand-text > i"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 7.1pt (9.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#f6f1e5",
                "contrastRatio": 4.47,
                "fontSize": "10.9pt (14.5px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"mainbar\" id=\"mainbar\">",
                  "target": [
                    "#mainbar"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#top\" class=\"active\">Home</a>",
          "target": [
            ".active[href$=\"#top\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fff6ec",
                "bgColor": "#d96c35",
                "contrastRatio": 3.19,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#donate\" class=\"btn btn-primary btn-sm\">Donate</a>",
                  "target": [
                    ".btn-sm.btn-primary[href$=\"#donate\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#donate\" class=\"btn btn-primary btn-sm\">Donate</a>",
          "target": [
            ".btn-sm.btn-primary[href$=\"#donate\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#f6f1e5",
                "contrastRatio": 3.03,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">BrightSpan Foundation \u00b7 A community foundation since 2009</span>",
          "target": [
            ".in.eyebrow.reveal"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fff6ec",
                "bgColor": "#d96c35",
                "contrastRatio": 3.19,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#donate\" class=\"btn btn-primary\">Give now<svg class=\"ic\" aria-hidden=\"true\"><use href=\"#i-heart\"></use></svg></a>",
                  "target": [
                    ".hero-cta > .btn-primary.btn[href$=\"#donate\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#donate\" class=\"btn btn-primary\">Give now<svg class=\"ic\" aria-hidden=\"true\"><use href=\"#i-heart\"></use></svg></a>",
          "target": [
            ".hero-cta > .btn-primary.btn[href$=\"#donate\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#747c71",
                "bgColor": "#0a1d12",
                "contrastRatio": 4.06,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer id=\"contact\">",
                  "target": [
                    "#contact"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.06 (foreground color: #747c71, background color: #0a1d12, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h4>Explore</h4>",
          "target": [
            ".foot-col:nth-child(2) > h4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.06 (foreground color: #747c71, background color: #0a1d12, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#747c71",
                "bgColor": "#0a1d12",
                "contrastRatio": 4.06,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer id=\"contact\">",
                  "target": [
                    "#contact"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.06 (foreground color: #747c71, background color: #0a1d12, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h4>Get involved</h4>",
          "target": [
            ".foot-col:nth-child(3) > h4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.06 (foreground color: #747c71, background color: #0a1d12, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#747c71",
                "bgColor": "#0a1d12",
                "contrastRatio": 4.06,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer id=\"contact\">",
                  "target": [
                    "#contact"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.06 (foreground color: #747c71, background color: #0a1d12, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h4>Contact</h4>",
          "target": [
            ".foot-col:nth-child(4) > h4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.06 (foreground color: #747c71, background color: #0a1d12, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#f6f1e5",
                "contrastRatio": 3.03,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">BrightSpan Foundation \u00b7 A community foundation since 2009</span>",
          "target": [
            ".hero-copy > .in.eyebrow.reveal"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a9281",
                "bgColor": "#f6f1e5",
                "contrastRatio": 2.86,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"partners\">",
                  "target": [
                    ".partners"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"plogo pl-serif\">Harborlight Bank</span>",
          "target": [
            ".pl-serif"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a9281",
                "bgColor": "#f6f1e5",
                "contrastRatio": 2.86,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"partners\">",
                  "target": [
                    ".partners"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 11.3pt (15px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"plogo pl-caps\">Cedar Foods</span>",
          "target": [
            ".pl-caps"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 11.3pt (15px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a9281",
                "bgColor": "#f6f1e5",
                "contrastRatio": 2.86,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"partners\">",
                  "target": [
                    ".partners"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"plogo pl-italic\">Meridian Health</span>",
          "target": [
            ".pl-italic"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a9281",
                "bgColor": "#f6f1e5",
                "contrastRatio": 2.86,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"partners\">",
                  "target": [
                    ".partners"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 15.0pt (20px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"plogo pl-bold\">Alder&nbsp;&amp;&nbsp;Co.</span>",
          "target": [
            ".pl-bold"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 15.0pt (20px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a9281",
                "bgColor": "#f6f1e5",
                "contrastRatio": 2.86,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"partners\">",
                  "target": [
                    ".partners"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"plogo pl-caps2\">Bluebird Tech</span>",
          "target": [
            ".pl-caps2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a9281",
                "bgColor": "#f6f1e5",
                "contrastRatio": 2.86,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"partners\">",
                  "target": [
                    ".partners"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"plogo pl-serif2\">Summit Ridge</span>",
          "target": [
            ".pl-serif2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.86 (foreground color: #8a9281, background color: #f6f1e5, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#fdfbf4",
                "contrastRatio": 3.29,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"sec about\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">Who we are</span>",
          "target": [
            ".about-body > .in.eyebrow.reveal"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#f6f1e5",
                "contrastRatio": 3.03,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">BrightSpan Foundation \u00b7 A community foundation since 2009</span>",
          "target": [
            ".hero-copy > .eyebrow.in.reveal"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#fdfbf4",
                "contrastRatio": 3.29,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"sec about\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">Who we are</span>",
          "target": [
            ".about-body > .eyebrow.in.reveal"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5f6e61",
                "bgColor": "#0a1d12",
                "contrastRatio": 3.24,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer><b>Amara Okafor</b>Executive Director, BrightSpan Foundation</footer>",
                  "target": [
                    ".about-quote > footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.24 (foreground color: #5f6e61, background color: #0a1d12, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<footer><b>Amara Okafor</b>Executive Director, BrightSpan Foundation</footer>",
          "target": [
            ".about-quote > footer"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.24 (foreground color: #5f6e61, background color: #0a1d12, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0f2a1b",
                "bgColor": "#0a1d12",
                "contrastRatio": 1.14,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer><b>Amara Okafor</b>Executive Director, BrightSpan Foundation</footer>",
                  "target": [
                    ".about-quote > footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.14 (foreground color: #0f2a1b, background color: #0a1d12, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<b>Amara Okafor</b>",
          "target": [
            "footer > b"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.14 (foreground color: #0f2a1b, background color: #0a1d12, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#f6f1e5",
                "contrastRatio": 3.03,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">What we do</span>",
          "target": [
            ".sec-head > div > .eyebrow.in.reveal"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#f6f1e5",
                "contrastRatio": 4.47,
                "fontSize": "10.9pt (14.5px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"mainbar scrolled\" id=\"mainbar\">",
                  "target": [
                    "#mainbar"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#programs\" class=\"active\">Programs</a>",
          "target": [
            ".active[href$=\"#programs\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#f6f1e5",
                "contrastRatio": 4.47,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"pt-label\">More about BrightStart</span>",
          "target": [
            "button[data-label=\"More about BrightStart\"] > .pt-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#f6f1e5",
                "contrastRatio": 4.47,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"pt-label\">More about The Open Table</span>",
          "target": [
            "button[data-label=\"More about The Open Table\"] > .pt-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#f6f1e5",
                "contrastRatio": 4.47,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"pt-label\">More about Community Health Access</span>",
          "target": [
            "article:nth-child(3) > .p-body > .p-toggle[type=\"button\"] > .pt-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#f6f1e5",
                "contrastRatio": 4.47,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"pt-label\">More about the Rapid Response Fund</span>",
          "target": [
            ".flip:nth-child(4) > .p-body > .p-toggle[type=\"button\"] > .pt-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#f6f1e5",
                "contrastRatio": 4.47,
                "fontSize": "10.9pt (14.5px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"mainbar scrolled\" id=\"mainbar\">",
                  "target": [
                    "#mainbar"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#impact\" class=\"active\">Impact</a>",
          "target": [
            ".active[href$=\"#impact\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#e4e1d5",
                "contrastRatio": 3.85,
                "fontSize": "10.9pt (14.5px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"mainbar scrolled\" id=\"mainbar\">",
                  "target": [
                    "#mainbar"
                  ]
                },
                {
                  "html": "<section class=\"sec impact on-dark\" id=\"impact\">",
                  "target": [
                    "#impact"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.85 (foreground color: #b5511e, background color: #e4e1d5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#stories\" class=\"active\">Stories</a>",
          "target": [
            ".active[href$=\"#stories\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.85 (foreground color: #b5511e, background color: #e4e1d5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#f6f1e5",
                "contrastRatio": 3.03,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">What we do</span>",
          "target": [
            "#programs > .container > .sec-head > div > .eyebrow.in.reveal"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#fdfbf4",
                "contrastRatio": 3.29,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"sec stories\" id=\"stories\">",
                  "target": [
                    "#stories"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">Beneficiary stories</span>",
          "target": [
            "#stories > .container > .sec-head > div > .eyebrow.in.reveal"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#f6f1e5",
                "contrastRatio": 3.03,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">Get help</span>",
          "target": [
            ".help-body > .eyebrow.in.reveal"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fff6ec",
                "bgColor": "#d96c35",
                "contrastRatio": 3.19,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-primary\" type=\"button\" data-apply=\"\">Apply for support<svg class=\"ic\" aria-hidden=\"true\"><use href=\"#i-arrow\"></use></svg></button>",
                  "target": [
                    "button[data-apply=\"\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"btn btn-primary\" type=\"button\" data-apply=\"\">Apply for support<svg class=\"ic\" aria-hidden=\"true\"><use href=\"#i-arrow\"></use></svg></button>",
          "target": [
            "button[data-apply=\"\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#f6f1e5",
                "contrastRatio": 4.47,
                "fontSize": "10.9pt (14.5px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"mainbar scrolled\" id=\"mainbar\">",
                  "target": [
                    "#mainbar"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#volunteer\" class=\"active\">Volunteer</a>",
          "target": [
            ".active[href$=\"#volunteer\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#fdfbf4",
                "contrastRatio": 3.29,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"sec volunteer\" id=\"volunteer\">",
                  "target": [
                    "#volunteer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">Volunteer</span>",
          "target": [
            "#volunteer > .container > .sec-head > div > .eyebrow.in.reveal"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#ece2cc",
                "contrastRatio": 3.92,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"opp-date\"><b>14</b><span>Mar</span></div>",
                  "target": [
                    ".opp.in.reveal:nth-child(1) > .opp-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Mar</span>",
          "target": [
            ".opp.in.reveal:nth-child(1) > .opp-date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#ece2cc",
                "contrastRatio": 3.92,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"opp-date\"><b>21</b><span>Mar</span></div>",
                  "target": [
                    ".opp.in.reveal:nth-child(2) > .opp-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Mar</span>",
          "target": [
            ".opp.in.reveal:nth-child(2) > .opp-date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#ece2cc",
                "contrastRatio": 3.92,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"opp-date\"><b>04</b><span>Apr</span></div>",
                  "target": [
                    ".opp.in.reveal:nth-child(3) > .opp-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Apr</span>",
          "target": [
            ".opp.in.reveal:nth-child(3) > .opp-date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fff6ec",
                "bgColor": "#d96c35",
                "contrastRatio": 3.19,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-primary btn-block\" type=\"submit\">Add entry</button>",
                  "target": [
                    "#logForm > .btn-block.btn-primary[type=\"submit\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"btn btn-primary btn-block\" type=\"submit\">Add entry</button>",
          "target": [
            "#logForm > .btn-block.btn-primary[type=\"submit\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#ece2cc",
                "contrastRatio": 3.92,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"opp-date\"><b>18</b><span>Apr</span></div>",
                  "target": [
                    ".opp.in.reveal:nth-child(4) > .opp-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Apr</span>",
          "target": [
            ".opp.in.reveal:nth-child(4) > .opp-date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5f6e61",
                "bgColor": "#ece2cc",
                "contrastRatio": 4.19,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"freq\" id=\"freqToggle\">\n            <span class=\"freq-thumb\" aria-hidden=\"true\"></span>\n            <button type=\"button\" data-freq=\"once\" class=\"active\">One-time</button>\n            <button type=\"button\" data-freq=\"month\">Monthly</button>\n          </div>",
                  "target": [
                    "#freqToggle"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.19 (foreground color: #5f6e61, background color: #ece2cc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button type=\"button\" data-freq=\"month\">Monthly</button>",
          "target": [
            "button[data-freq=\"month\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.19 (foreground color: #5f6e61, background color: #ece2cc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fff6ec",
                "bgColor": "#d96c35",
                "contrastRatio": 3.19,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-primary btn-block\" id=\"donateSubmit\" type=\"button\"><span id=\"donateLabel\">Choose an amount</span></button>",
                  "target": [
                    "#donateSubmit"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span id=\"donateLabel\">Choose an amount</span>",
          "target": [
            "#donateLabel"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#f6f1e5",
                "contrastRatio": 3.03,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">BrightSpan Foundation \u00b7 A community foundation since 2009</span>",
          "target": [
            ".hero-copy > .eyebrow.reveal.in"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#fdfbf4",
                "contrastRatio": 3.29,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"sec about\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">Who we are</span>",
          "target": [
            ".about-body > .eyebrow.reveal.in"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#f6f1e5",
                "contrastRatio": 3.03,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">What we do</span>",
          "target": [
            "#programs > .container > .sec-head > div > .eyebrow.reveal.in"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#fdfbf4",
                "contrastRatio": 3.29,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"sec stories\" id=\"stories\">",
                  "target": [
                    "#stories"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">Beneficiary stories</span>",
          "target": [
            "#stories > .container > .sec-head > div > .eyebrow.reveal.in"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#f6f1e5",
                "contrastRatio": 3.03,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">Get help</span>",
          "target": [
            ".help-body > .eyebrow.reveal.in"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#fdfbf4",
                "contrastRatio": 3.29,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"sec volunteer\" id=\"volunteer\">",
                  "target": [
                    "#volunteer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">Volunteer</span>",
          "target": [
            "#volunteer > .container > .sec-head > div > .eyebrow.reveal.in"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.29 (foreground color: #d96c35, background color: #fdfbf4, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#ece2cc",
                "contrastRatio": 3.92,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"opp-date\"><b>14</b><span>Mar</span></div>",
                  "target": [
                    ".opp.reveal.in:nth-child(1) > .opp-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Mar</span>",
          "target": [
            ".opp.reveal.in:nth-child(1) > .opp-date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#ece2cc",
                "contrastRatio": 3.92,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"opp-date\"><b>21</b><span>Mar</span></div>",
                  "target": [
                    ".opp.reveal.in:nth-child(2) > .opp-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Mar</span>",
          "target": [
            ".opp.reveal.in:nth-child(2) > .opp-date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#ece2cc",
                "contrastRatio": 3.92,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"opp-date\"><b>04</b><span>Apr</span></div>",
                  "target": [
                    ".opp.reveal.in:nth-child(3) > .opp-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Apr</span>",
          "target": [
            ".opp.reveal.in:nth-child(3) > .opp-date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#ece2cc",
                "contrastRatio": 3.92,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"opp-date\"><b>18</b><span>Apr</span></div>",
                  "target": [
                    ".opp.reveal.in:nth-child(4) > .opp-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Apr</span>",
          "target": [
            ".opp.reveal.in:nth-child(4) > .opp-date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.92 (foreground color: #b5511e, background color: #ece2cc, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d96c35",
                "bgColor": "#f6f1e5",
                "contrastRatio": 3.03,
                "fontSize": "9.4pt (12.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow reveal in\">Stay in the loop</span>",
          "target": [
            ".container > .eyebrow.reveal.in"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #d96c35, background color: #f6f1e5, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fff6ec",
                "bgColor": "#d96c35",
                "contrastRatio": 3.19,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-primary\" type=\"submit\">Subscribe</button>",
                  "target": [
                    "#newsForm > .btn-primary.btn[type=\"submit\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"btn btn-primary\" type=\"submit\">Subscribe</button>",
          "target": [
            "#newsForm > .btn-primary.btn[type=\"submit\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.19 (foreground color: #fff6ec, background color: #d96c35, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b5511e",
                "bgColor": "#f6f1e5",
                "contrastRatio": 4.47,
                "fontSize": "10.9pt (14.5px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"mainbar scrolled\" id=\"mainbar\">",
                  "target": [
                    "#mainbar"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#contact\" class=\"active\">Contact</a>",
          "target": [
            ".active[href$=\"#contact\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.47 (foreground color: #b5511e, background color: #f6f1e5, font size: 10.9pt (14.5px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    },
    {
      "id": "target-size",
      "impact": "serious",
      "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": 9,
                "height": 9
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has insufficient size (9px by 9px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 10,
                "minOffset": 24
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"dot\" type=\"button\" aria-label=\"Show story 2\"></button>",
                  "target": [
                    "button[aria-label=\"Show story 2\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 10px instead of at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"dot\" type=\"button\" aria-label=\"Show story 1\"></button>",
          "target": [
            "button[aria-label=\"Show story 1\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Target has insufficient size (9px by 9px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 10px instead of at least 24px."
        },
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 9,
                "height": 9
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has insufficient size (9px by 9px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 10,
                "minOffset": 24
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"dot\" type=\"button\" aria-label=\"Show story 1\"></button>",
                  "target": [
                    "button[aria-label=\"Show story 1\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 10px instead of at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"dot\" type=\"button\" aria-label=\"Show story 2\"></button>",
          "target": [
            "button[aria-label=\"Show story 2\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Target has insufficient size (9px by 9px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 10px instead of at least 24px."
        },
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "messageKey": "partiallyObscured",
                "minSize": 24,
                "width": 348,
                "height": 19
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#stories\" class=\"\">Stories</a>",
                  "target": [
                    "nav > a[href$=\"#stories\"]"
                  ]
                },
                {
                  "html": "<a href=\"#help\" class=\"active\">Get Help</a>",
                  "target": [
                    ".active[href$=\"#help\"]"
                  ]
                },
                {
                  "html": "<a href=\"#volunteer\">Volunteer</a>",
                  "target": [
                    "nav > a[href$=\"#volunteer\"]"
                  ]
                },
                {
                  "html": "<a href=\"#contact\">Contact</a>",
                  "target": [
                    "nav > a[href$=\"#contact\"]"
                  ]
                },
                {
                  "html": "<a href=\"#donate\" class=\"btn btn-primary btn-sm\">Donate</a>",
                  "target": [
                    ".btn-sm.btn-primary[href$=\"#donate\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient size because it is partially obscured (smallest space is 348px by 19px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 2.2,
                "minOffset": 24
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">Do you only help people in your service area?<span class=\"faq-ic\"><svg class=\"ic\" aria-hidden=\"true\"><use href=\"#i-plus\"></use></svg></span></button>",
                  "target": [
                    ".faq-item:nth-child(5) > .faq-q[type=\"button\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 2.2px instead of at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">How is my personal information protected?<span class=\"faq-ic\"><svg class=\"ic\" aria-hidden=\"true\"><use href=\"#i-plus\"></use></svg></span></button>",
          "target": [
            ".faq-item:nth-child(6) > .faq-q[type=\"button\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Target has insufficient size because it is partially obscured (smallest space is 348px by 19px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 2.2px instead of at least 24px."
        },
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 9,
                "height": 9
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has insufficient size (9px by 9px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 10,
                "minOffset": 24
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"dot\" type=\"button\" aria-label=\"Show story 2\"></button>",
                  "target": [
                    "button[aria-label=\"Show story 2\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 10px instead of at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"dot\" type=\"button\" aria-label=\"Show story 3\"></button>",
          "target": [
            "button[aria-label=\"Show story 3\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Target has insufficient size (9px by 9px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 10px instead of at least 24px."
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 10442
      },
      {
        "y": 564,
        "height": 10430
      },
      {
        "y": 1140,
        "height": 10430
      },
      {
        "y": 1716,
        "height": 10430
      },
      {
        "y": 2292,
        "height": 10430
      },
      {
        "y": 2868,
        "height": 10430
      },
      {
        "y": 3444,
        "height": 10430
      },
      {
        "y": 4020,
        "height": 10430
      },
      {
        "y": 4596,
        "height": 10430
      },
      {
        "y": 5172,
        "height": 10430
      },
      {
        "y": 5748,
        "height": 10430
      },
      {
        "y": 6324,
        "height": 10430
      },
      {
        "y": 6900,
        "height": 10430
      },
      {
        "y": 7476,
        "height": 10430
      },
      {
        "y": 8052,
        "height": 10430
      },
      {
        "y": 8628,
        "height": 10430
      },
      {
        "y": 9204,
        "height": 10430
      },
      {
        "y": 9710,
        "height": 10430
      }
    ],
    "scans": 19,
    "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: "Programs", "Get Help", "Contact".
-   **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: "Beneficiary Stories", "Annual Reports", "Volunteer Opportunities".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "501(c)(3) status", "endowment", "impact measurement".
    -   **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", "Join Event".
-   **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: "volunteer hour logger".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "recent news", "partner highlights", "event calendar".
-   **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.