Z.ai GLM 5.3 – Religion and Spirituality

via Z.AI · Generated

  • AIMAC Debt 5.62
  • Cost $0.15
  • Total Violations 45
  • HTML Size 76 KB
  • Em Dashes 33

Screenshot

View Z.ai GLM 5.3 Religion and Spirituality page View Live Page

Accessibility Issues Found

45 Serious

  • color-contrast serious 45 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="brand-tag">Anchored in Scripture · Awakened to Love</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Grace Harbor Fellowship is a Christ-centered church family in Mariners Bay. Join us for worship, faith formation, outreach, and community.">
<title>Grace Harbor Fellowship | Anchored in Scripture. Awakened to Love.</title>
<link rel="icon" href="https://placehold.co/32x32/14213d/c8a24a?text=GH&font=lora">
<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=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
<style>
  /* ============ Design Tokens ============ */
  :root{
    --navy:#14213d;
    --navy-2:#1d2d52;
    --navy-3:#2a3f70;
    --gold:#c8a24a;
    --gold-soft:#e6cf96;
    --gold-dark:#a8843a;
    --cream:#faf7f0;
    --cream-2:#f2ecdd;
    --ink:#232a3c;
    --muted:#5c6579;
    --line:#e5decb;
    --white:#ffffff;
    --shadow:0 12px 34px rgba(20,33,61,.10);
    --radius:16px;
    --serif:'Playfair Display', Georgia, serif;
    --sans:'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  }

  /* ============ Base ============ */
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.7;font-size:1.05rem;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit}
  ul{list-style:none}
  h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);line-height:1.2;font-weight:600}
  section{scroll-margin-top:96px}
  .container{width:min(1180px, 92%);margin:0 auto}
  .no-js .reveal{opacity:1;transform:none}

  /* ============ Buttons ============ */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 30px;border-radius:999px;font-weight:600;font-size:1rem;letter-spacing:.02em;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:all .25s ease;font-family:var(--sans)}
  .btn-gold{background:var(--gold);color:var(--navy)}
  .btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px);box-shadow:0 10px 24px rgba(200,162,74,.4)}
  .btn-navy{background:var(--navy);color:#fff}
  .btn-navy:hover{background:var(--navy-3);transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,33,61,.28)}
  .btn-outline-light{border-color:rgba(255,255,255,.65);color:#fff;background:transparent}
  .btn-outline-light:hover{background:rgba(255,255,255,.14);border-color:#fff}
  .btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
  .btn-outline:hover{background:var(--navy);color:#fff}
  .btn-sm{padding:9px 22px;font-size:.92rem}
  .btn-lg{padding:17px 38px;font-size:1.05rem}

  /* ============ Topbar ============ */
  .topbar{background:var(--navy);color:rgba(255,255,255,.85);font-size:.88rem;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
  .topbar-note{display:flex;align-items:center;gap:8px;font-weight:400}
  .topbar-note svg{flex:none;fill:var(--gold)}
  .topbar-links{display:flex;gap:22px}
  .topbar-links a{color:var(--gold-soft);text-decoration:none;font-weight:600}
  .topbar-links a:hover{color:#fff;text-decoration:underline}

  /* ============ Header ============ */
  .site-header{background:rgba(255,255,255,.97);position:sticky;top:0;z-index:200;transition:box-shadow .3s ease;border-bottom:1px solid var(--line)}
  .site-header.scrolled{box-shadow:0 6px 24px rgba(20,33,61,.12)}
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
  .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
  .brand-logo{width:54px;height:54px;border-radius:12px;flex:none}
  .brand-name{display:block;font-family:var(--serif);font-size:1.32rem;font-weight:700;color:var(--navy);line-height:1.15}
  .brand-tag{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);font-weight:600}
  .nav-menu{display:flex;align-items:center;gap:6px}
  .nav-menu > li > a{display:block;padding:10px 14px;text-decoration:none;font-weight:600;font-size:.98rem;color:var(--ink);border-radius:8px;transition:color .2s, background .2s}
  .nav-menu > li > a:hover{color:var(--gold-dark);background:var(--cream)}
  .nav-menu > li > a.btn{margin-left:10px;padding:10px 24px}
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
  .nav-toggle span{display:block;width:26px;height:3px;background:var(--navy);margin:5px 0;border-radius:2px;transition:.3s}
  .nav-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle.active span:nth-child(2){opacity:0}
  .nav-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  /* ============ Hero ============ */
  .hero{position:relative;min-height:88vh;display:flex;align-items:center;background:url('https://picsum.photos/1920/1080?grayscale') center/cover no-repeat}
  .hero::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg, rgba(13,22,42,.88) 0%, rgba(20,33,61,.72) 55%, rgba(20,33,61,.45) 100%)}
  .hero-inner{position:relative;z-index:2;padding:110px 0 130px;max-width:780px}
  .eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:18px}
  .eyebrow.light{color:var(--gold-soft)}
  .hero h1{font-size:clamp(2.5rem, 5.2vw, 4.1rem);color:#fff;margin-bottom:22px}
  .hero h1 em{font-style:italic;color:var(--gold-soft)}
  .hero-sub{color:rgba(255,255,255,.9);font-size:1.18rem;max-width:620px;margin-bottom:36px;font-weight:300}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:52px}
  .hero-meta{display:flex;gap:14px;flex-wrap:wrap}
  .hero-chip{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);border-radius:12px;padding:12px 20px;color:#fff;font-size:.92rem;display:flex;align-items:center;gap:10px}
  .hero-chip svg{fill:var(--gold);flex:none}

  /* ============ Section Headers ============ */
  .section{padding:96px 0}
  .section-head{max-width:720px;margin-bottom:56px}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .section-head h2{font-size:clamp(1.9rem, 3.4vw, 2.7rem);margin-bottom:16px}
  .lead{color:var(--muted);font-size:1.12rem;font-weight:300}

  /* ============ Service Times ============ */
  .times-section{background:var(--cream)}
  .times-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-bottom:44px}
  .time-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease}
  .time-card::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gold)}
  .time-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,33,61,.14)}
  .time-card .tc-icon{width:48px;height:48px;border-radius:12px;background:var(--cream-2);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .time-card .tc-icon svg{fill:var(--gold-dark)}
  .tc-day{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark)}
  .tc-title{font-size:1.28rem;margin:6px 0 2px}
  .tc-time{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--navy-3);margin-bottom:12px}
  .tc-loc{font-size:.86rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
  .tc-desc{font-size:.96rem;color:var(--muted);line-height:1.6}
  .center-cta{text-align:center}

  /* ============ Split Layouts (About / Formation) ============ */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .split-img{position:relative}
  .split-img img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;object-fit:cover}
  .split-img::before{content:'';position:absolute;top:-18px;left:-18px;right:18px;bottom:18px;border:2px solid var(--gold);border-radius:var(--radius);z-index:-1}
  .split-img.flip::before{top:18px;left:18px;right:-18px;bottom:-18px}
  .split-copy p{margin-bottom:18px;color:var(--muted)}
  .split-copy p strong{color:var(--ink)}
  .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:34px 0 30px;padding-top:28px;border-top:1px solid var(--line)}
  .stat-num{font-family:var(--serif);font-size:1.9rem;color:var(--gold-dark);font-weight:700;line-height:1.1}
  .stat-label{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
  .text-link{font-weight:700;color:var(--gold-dark);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;transition:color .2s}
  .text-link:hover{color:var(--navy)}
  .program-list{margin:26px 0 30px;display:grid;gap:14px}
  .program-list li{display:flex;gap:14px;align-items:flex-start}
  .program-list .pl-check{flex:none;width:26px;height:26px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center;margin-top:3px}
  .program-list .pl-check svg{fill:var(--gold-dark)}
  .program-list strong{display:block;color:var(--navy);font-size:1.02rem}
  .program-list span{color:var(--muted);font-size:.95rem}

  /* ============ Week / Events + Sidebar ============ */
  .week-layout{display:grid;grid-template-columns:1fr 350px;gap:52px;align-items:start}
  .event-list{display:grid;gap:20px;margin-bottom:40px}
  .event-item{display:flex;gap:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 4px 16px rgba(20,33,61,.05);transition:transform .22s ease, box-shadow .22s ease}
  .event-item:hover{transform:translateX(6px);box-shadow:0 12px 30px rgba(20,33,61,.10)}
  .date-badge{flex:none;width:72px;border-radius:12px;background:var(--navy);text-align:center;padding:10px 0;align-self:flex-start}
  .date-badge .db-month{display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--gold-soft);text-transform:uppercase}
  .date-badge .db-day{display:block;font-family:var(--serif);font-size:1.7rem;color:#fff;font-weight:700;line-height:1.15}
  .event-body h3{font-size:1.22rem;margin-bottom:4px}
  .event-meta{font-size:.86rem;color:var(--gold-dark);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
  .event-body p{color:var(--muted);font-size:.97rem}
  .event-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:var(--cream-2);color:var(--gold-dark);margin-left:8px;vertical-align:middle}
  .event-actions{display:flex;gap:14px;flex-wrap:wrap}

  /* Sidebar widgets */
  .sidebar{display:grid;gap:30px;position:sticky;top:110px}
  .widget{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
  .widget-title{font-size:1.18rem;margin-bottom:6px}
  .widget-sub{font-size:.9rem;color:var(--muted);margin-bottom:18px}
  .schedule-list li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed var(--line)}
  .schedule-list li:last-child{border-bottom:0}
  .schedule-list svg{flex:none;fill:var(--gold-dark);margin-top:4px}
  .schedule-list strong{display:block;color:var(--navy)}
  .schedule-list span{font-size:.9rem;color:var(--muted)}
  .sermon-item{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);align-items:center}
  .sermon-item:last-of-type{border-bottom:0}
  .sermon-thumb{flex:none;width:58px;height:58px;border-radius:10px}
  .sermon-item strong{display:block;font-size:.99rem;color:var(--navy);line-height:1.35}
  .sermon-item .sermon-series{font-size:.78rem;color:var(--gold-dark);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
  .sermon-item .sermon-dur{font-size:.8rem;color:var(--muted)}
  .verse-card{background:var(--navy);border:0}
  .verse-card .widget-title{color:#fff}
  .verse-card blockquote{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:rgba(255,255,255,.94);line-height:1.55;transition:opacity .35s;margin-bottom:10px}
  .verse-card cite{display:block;color:var(--gold-soft);font-style:normal;font-weight:700;font-size:.9rem;letter-spacing:.08em;margin-bottom:18px;transition:opacity .35s}
  .verse-card blockquote.fading, .verse-card cite.fading{opacity:0}
  .btn-verse{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;padding:9px 20px;border-radius:999px;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:.88rem;transition:.25s}
  .btn-verse:hover{background:rgba(255,255,255,.14);border-color:#fff}
  .prayer-form label{display:block;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
  .prayer-form input, .prayer-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-family:var(--sans);font-size:.96rem;margin-bottom:14px;background:var(--cream);color:var(--ink);resize:vertical}
  .prayer-form input:focus, .prayer-form textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
  .prayer-note{display:none;margin-top:14px;background:var(--cream-2);border-left:4px solid var(--gold);padding:12px 16px;border-radius:8px;font-size:.94rem;color:var(--navy)}
  .prayer-note.show{display:block}
  .highlight-img{border-radius:12px;margin-bottom:16px}

  /* ============ Ministries ============ */
  .ministries-section{background:var(--cream)}
  .ministry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:48px}
  .ministry-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease;display:flex;flex-direction:column}
  .ministry-card:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(20,33,61,.16)}
  .ministry-card img{height:190px;width:100%;object-fit:cover}
  .ministry-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
  .ministry-body h3{font-size:1.3rem;margin-bottom:10px}
  .ministry-body p{color:var(--muted);font-size:.97rem;margin-bottom:18px;flex:1}
  .ministry-link{font-weight:700;font-size:.92rem;color:var(--gold-dark);text-decoration:none;letter-spacing:.04em;text-transform:uppercase}
  .ministry-link:hover{color:var(--navy)}
  .ministry-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-left:6px solid var(--gold);border-radius:var(--radius);padding:30px 36px;box-shadow:var(--shadow)}
  .ministry-cta h3{font-size:1.4rem;margin-bottom:4px}
  .ministry-cta p{color:var(--muted)}
  .ministry-cta-actions{display:flex;gap:14px;flex-wrap:wrap}

  /* ============ Giving ============ */
  .giving-section{background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);color:rgba(255,255,255,.88)}
  .giving-section .eyebrow{color:var(--gold-soft)}
  .giving-section h2{color:#fff}
  .giving-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
  .giving-copy p{margin-bottom:18px;font-weight:300}
  .giving-copy p strong{color:#fff;font-weight:600}
  .giving-quote{border-left:4px solid var(--gold);padding:6px 0 6px 22px;margin:26px 0;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--gold-soft)}
  .giving-quote cite{display:block;font-family:var(--sans);font-style:normal;font-size:.84rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:8px}
  .giving-list li{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px;font-size:.98rem}
  .giving-list svg{flex:none;fill:var(--gold);margin-top:5px}
  .give-widget{background:#fff;border-radius:20px;padding:36px;box-shadow:0 30px 60px rgba(0,0,0,.35);color:var(--ink)}
  .give-widget-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
  .give-widget-head h3{font-size:1.4rem}
  .secure-badge{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:#3d7a4e;background:#e9f5ec;border-radius:999px;padding:5px 12px;letter-spacing:.04em}
  .secure-badge svg{fill:#3d7a4e}
  .give-label{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:18px 0 10px}
  .freq-group, .amount-group{display:grid;gap:10px}
  .freq-group{grid-template-columns:repeat(3,1fr)}
  .amount-group{grid-template-columns:repeat(4,1fr)}
  .freq-btn, .amount-btn{border:2px solid var(--line);background:var(--cream);border-radius:12px;padding:12px 8px;font-family:var(--sans);font-weight:700;font-size:.98rem;color:var(--ink);cursor:pointer;transition:.2s}
  .amount-btn{font-size:1.05rem}
  .freq-btn:hover, .amount-btn:hover{border-color:var(--gold)}
  .freq-btn.active, .amount-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
  .custom-wrap{position:relative;margin-top:10px}
  .custom-wrap .cur{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--muted)}
  .custom-wrap input{width:100%;border:2px solid var(--line);background:var(--cream);border-radius:12px;padding:12px 16px 12px 38px;font-family:var(--sans);font-size:1rem;color:var(--ink)}
  .custom-wrap input:focus{outline:none;border-color:var(--gold)}
  .give-widget select{width:100%;border:2px solid var(--line);background:var(--cream);border-radius:12px;padding:12px 16px;font-family:var(--sans);font-size:.98rem;color:var(--ink);cursor:pointer}
  .impact-box{margin-top:22px;background:var(--cream-2);border-radius:12px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
  .impact-box svg{flex:none;fill:var(--gold-dark);margin-top:3px}
  .impact-box strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-dark);margin-bottom:4px}
  .impact-box p{font-size:.95rem;color:var(--ink);line-height:1.55}
  .annual-note{font-size:.86rem;color:var(--muted);font-style:italic;margin-top:10px}
  .give-submit{width:100%;margin-top:22px}
  .give-note{display:none;margin-top:16px;padding:14px 18px;border-radius:10px;font-size:.95rem}
  .give-note.success{display:block;background:#e9f5ec;color:#2c5e3b;border-left:4px solid #3d7a4e}
  .give-note.error{display:block;background:#fbe9e7;color:#8c3b2e;border-left:4px solid #c05a45}
  .give-footnote{text-align:center;font-size:.8rem;color:var(--muted);margin-top:14px}

  /* ============ Testimonials ============ */
  .stories-section{background:var(--cream)}
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .testi-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s ease}
  .testi-card:hover{transform:translateY(-6px)}
  .stars{color:var(--gold);letter-spacing:4px;font-size:1.05rem;margin-bottom:16px}
  .testi-card blockquote{font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--ink);line-height:1.65;flex:1;margin-bottom:24px}
  .testi-footer{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:20px}
  .testi-footer img{width:52px;height:52px;border-radius:50%;border:3px solid var(--cream-2)}
  .testi-footer strong{display:block;color:var(--navy);font-size:1rem}
  .testi-footer span{font-size:.84rem;color:var(--muted)}

  /* ============ FAQ ============ */
  .faq-wrap{max-width:820px;margin:0 auto}
  .faq-item{border:1px solid var(--line);border-radius:14px;margin-bottom:14px;background:#fff;overflow:hidden;transition:box-shadow .25s}
  .faq-item.open{box-shadow:var(--shadow)}
  .faq-question{width:100%;background:none;border:0;text-align:left;padding:22px 26px;font-family:var(--serif);font-size:1.14rem;font-weight:600;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px}
  .faq-question:hover{color:var(--gold-dark)}
  .faq-icon{flex:none;width:30px;height:30px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center;transition:transform .3s ease, background .3s}
  .faq-icon::before, .faq-icon::after{content:'';position:absolute;width:12px;height:2px;background:var(--gold-dark);border-radius:2px}
  .faq-icon::after{transform:rotate(90deg);transition:transform .3s ease, opacity .3s}
  .faq-item.open .faq-icon{background:var(--gold)}
  .faq-item.open .faq-icon::after{transform:rotate(0);opacity:0}
  .faq-icon{position:relative}
  .faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease}
  .faq-answer p{padding:0 26px 24px;color:var(--muted)}

  /* ============ Visit / Contact ============ */
  .visit-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .visit-img{position:relative}
  .visit-img img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;object-fit:cover}
  .visit-address-card{position:absolute;bottom:-24px;left:24px;right:24px;background:var(--navy);color:#fff;border-radius:14px;padding:22px 28px;box-shadow:0 18px 40px rgba(20,33,61,.35)}
  .visit-address-card strong{display:block;font-family:var(--serif);font-size:1.15rem;margin-bottom:4px;color:#fff}
  .visit-address-card p{font-size:.92rem;color:rgba(255,255,255,.8)}
  .visit-copy p{color:var(--muted);margin-bottom:18px}
  .visit-details{display:grid;gap:14px;margin:26px 0 30px;padding:26px;background:var(--cream);border-radius:var(--radius)}
  .visit-details li{display:flex;gap:14px;align-items:flex-start}
  .visit-details svg{flex:none;fill:var(--gold-dark);margin-top:4px}
  .visit-details strong{display:block;color:var(--navy);font-size:.95rem}
  .visit-details span{color:var(--muted);font-size:.94rem}
  .visit-actions{display:flex;gap:14px;flex-wrap:wrap}

  /* ============ Footer ============ */
  .site-footer{background:var(--navy);color:rgba(255,255,255,.78);padding:78px 0 0;font-size:.95rem}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:56px}
  .footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}
  .footer-brand img{width:48px;height:48px;border-radius:10px}
  .footer-brand .brand-name{color:#fff;font-size:1.2rem}
  .footer-brand .brand-tag{color:var(--gold-soft)}
  .footer-desc{font-weight:300;margin-bottom:24px}
  .social-row{display:flex;gap:12px}
  .social-row a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;transition:.25s}
  .social-row a:hover{background:var(--gold);border-color:var(--gold)}
  .social-row svg{fill:#fff;transition:.25s}
  .social-row a:hover svg{fill:var(--navy)}
  .footer-col h4{color:#fff;font-size:1.05rem;margin-bottom:20px;position:relative;padding-bottom:10px}
  .footer-col h4::after{content:'';position:absolute;bottom:0;left:0;width:34px;height:2px;background:var(--gold)}
  .footer-col ul{display:grid;gap:11px}
  .footer-col a{text-decoration:none;transition:color .2s}
  .footer-col a:hover{color:var(--gold-soft)}
  .footer-times li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(255,255,255,.14);padding-bottom:9px}
  .footer-times strong{color:var(--gold-soft);font-weight:600}
  .footer-contact li{display:flex;gap:12px;margin-bottom:12px;align-items:flex-start}
  .footer-contact svg{flex:none;fill:var(--gold);margin-top:4px}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.88rem}
  .footer-bottom nav{display:flex;gap:24px}
  .footer-bottom a{text-decoration:none}
  .footer-bottom a:hover{color:var(--gold-soft)}

  /* ============ Back to top ============ */
  .back-top{position:fixed;bottom:28px;right:28px;width:50px;height:50px;border-radius:50%;background:var(--gold);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(20,33,61,.3);opacity:0;pointer-events:none;transform:translateY(14px);transition:.3s;z-index:150}
  .back-top.show{opacity:1;pointer-events:auto;transform:none}
  .back-top svg{fill:var(--navy)}
  .back-top:hover{background:var(--gold-soft)}

  /* ============ Reveal animation ============ */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease}
  .reveal.visible{opacity:1;transform:none}

  /* ============ Responsive ============ */
  @media(max-width:1080px){
    .times-grid{grid-template-columns:repeat(2,1fr)}
    .week-layout{grid-template-columns:1fr}
    .sidebar{position:static;grid-template-columns:repeat(2,1fr)}
    .ministry-grid{grid-template-columns:repeat(2,1fr)}
    .giving-layout{grid-template-columns:1fr;gap:48px}
    .footer-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:960px){
    .nav-toggle{display:block}
    .nav-menu{position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;padding:18px 5%;gap:4px;display:none;box-shadow:0 18px 40px rgba(0,0,0,.25)}
    .nav-menu.open{display:flex}
    .nav-menu > li > a{color:#fff;padding:13px 10px}
    .nav-menu > li > a:hover{background:rgba(255,255,255,.08);color:var(--gold-soft)}
    .nav-menu > li > a.btn{margin:10px 0 4px;justify-content:center}
    .split, .visit-layout{grid-template-columns:1fr;gap:44px}
    .testi-grid{grid-template-columns:1fr;max-width:640px;margin:0 auto}
  }
  @media(max-width:680px){
    .topbar{display:none}
    .times-grid, .sidebar, .ministry-grid{grid-template-columns:1fr}
    .stats-row{grid-template-columns:repeat(2,1fr)}
    .hero-inner{padding:80px 0 90px}
    .hero-actions .btn{width:100%}
    .event-item{flex-direction:column;gap:16px}
    .give-widget{padding:26px 20px}
    .amount-group{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column;text-align:center}
    .section{padding:70px 0}
  }
</style>
</head>
<body>

<!-- ============ Topbar ============ -->
<div class="topbar">
  <div class="container topbar-inner">
    <p class="topbar-note">
      <svg width="14" height="14" viewBox="0 0 24 24"><path d="M12 2l2.4 7.2H22l-6 4.4 2.3 7.4L12 16.6 5.7 21l2.3-7.4-6-4.4h7.6z"/></svg>
      Sundays: Traditional 8:30 AM &middot; Contemporary 10:30 AM &middot; Vespers 6:00 PM
    </p>
    <div class="topbar-links">
      <a href="#giving">Give Online</a>
      <a href="#visit">Plan Your Visit</a>
      <a href="#sermons">Watch Sermons</a>
    </div>
  </div>
</div>

<!-- ============ Header ============ -->
<header class="site-header" id="siteHeader">
  <div class="container header-inner">
    <a href="#hero" class="brand" aria-label="Grace Harbor Fellowship home">
      <img class="brand-logo" src="https://placehold.co/64x64/14213d/c8a24a?text=GH&font=lora" alt="Grace Harbor Fellowship anchor logo">
      <span class="brand-text">
        <span class="brand-name">Grace Harbor Fellowship</span>
        <span class="brand-tag">Anchored in Scripture &middot; Awakened to Love</span>
      </span>
    </a>
    <nav class="site-nav" aria-label="Primary navigation">
      <button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="navMenu" aria-label="Toggle navigation menu">
        <span></span><span></span><span></span>
      </button>
      <ul class="nav-menu" id="navMenu">
        <li><a href="#hero">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#ministries">Ministries</a></li>
        <li><a href="#events">Events</a></li>
        <li><a href="#sermons">Sermons</a></li>
        <li><a href="#visit">Contact</a></li>
        <li><a href="#giving" class="btn btn-gold btn-sm">Give</a></li>
      </ul>
    </nav>
  </div>
</header>

<main>

<!-- ============ Hero ============ -->
<section class="hero" id="hero">
  <div class="container hero-inner">
    <p class="eyebrow light">All Are Welcome &middot; Mariners Bay, California</p>
    <h1>Anchored in Scripture.<br><em>Awakened to Love.</em></h1>
    <p class="hero-sub">Grace Harbor Fellowship is a Christ-centered family where honest questions, deep worship, and generous outreach meet. Wherever you are on your journey — searching, returning, or rooted — there is a seat saved for you at the harbor.</p>
    <div class="hero-actions">
      <a class="btn btn-gold btn-lg" href="#times">Join Worship This Sunday</a>
      <a class="btn btn-outline-light btn-lg" href="#visit">Plan Your Visit</a>
    </div>
    <div class="hero-meta">
      <div class="hero-chip">
        <svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 2a7 7 0 100 14 7 7 0 000-14zm0 16c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z"/></svg>
        Kids &amp; Youth Programs at Every Service
      </div>
      <div class="hero-chip">
        <svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 3v10.6a4 4 0 101.9.2L15 12h3V9h-3V6h4V3h-7z"/></svg>
        Livestream Available Every Sunday
      </div>
      <div class="hero-chip">
        <svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.3-8.4C.9 9.4 2.4 5.6 5.8 5.1c2-.3 3.9.7 4.9 2.3h2.6c1-1.6 2.9-2.6 4.9-2.3 3.4.5 4.9 4.3 3.1 7.5C19 16.4 12 21 12 21z"/></svg>
        Radical Hospitality, Zero Pressure
      </div>
    </div>
  </div>
</section>

<!-- ============ Service Times ============ -->
<section class="section times-section" id="times">
  <div class="container">
    <div class="section-head center reveal">
      <p class="eyebrow">Service Times</p>
      <h2>A Weekly Rhythm of Worship</h2>
      <p class="lead">Whether you love the richness of hymns and liturgy or the energy of a full worship band, there is a gathering shaped for you. Come as you are — we mean it.</p>
    </div>
    <div class="times-grid">
      <article class="time-card reveal">
        <div class="tc-icon"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 7a5 5 0 100 10 5 5 0 000-10zm0-6l1.2 3h3.3l-2.7 2h-3.6L7.5 4h3.3L12 1zm0 22l-1.2-3H7.5l2.7-2h3.6l2.7 2h-3.3L12 23z"/></svg></div>
        <p class="tc-day">Every Sunday</p>
        <h3 class="tc-title">Traditional Service</h3>
        <p class="tc-time">8:30 AM</p>
        <p class="tc-loc">Sanctuary</p>
        <p class="tc-desc">Hymns, liturgy, and reverent worship in our historic sanctuary, with communion served on the first Sunday of each month.</p>
      </article>
      <article class="time-card reveal">
        <div class="tc-icon"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3v10.6a4 4 0 101.9.2L15 12h3V9h-3V6h4V3h-7z"/></svg></div>
        <p class="tc-day">Every Sunday</p>
        <h3 class="tc-title">Contemporary Worship</h3>
        <p class="tc-time">10:30 AM</p>
        <p class="tc-loc">Harbor Hall</p>
        <p class="tc-desc">Full band worship and practical, hope-filled teaching from Scripture in a warm, come-as-you-are atmosphere.</p>
      </article>
      <article class="time-card reveal">
        <div class="tc-icon"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M9 2h6s-1 3-1 6c2 1 3 2.5 3 5a5 5 0 01-10 0c0-2.5 1-4 3-5 0-3-1-6-1-6z"/></svg></div>
        <p class="tc-day">Sunday Evenings</p>
        <h3 class="tc-title">Evening Vespers</h3>
        <p class="tc-time">6:00 PM</p>
        <p class="tc-loc">Chapel</p>
        <p class="tc-desc">A quiet, candlelit hour of prayer, reflection, and communion to still your heart and close the Lord's Day.</p>
      </article>
      <article class="time-card reveal">
        <div class="tc-icon"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M4 4h12a2 2 0 012 2v14H6a2 2 0 01-2-2V4zm14 4h2a2 2 0 012 2v7a2 2 0 01-2 2h-2V8zM6 2h8v2H6V2z"/></svg></div>
        <p class="tc-day">Wednesdays</p>
        <h3 class="tc-title">Midweek Renewal</h3>
        <p class="tc-time">7:00 PM</p>
        <p class="tc-loc">Fellowship Room</p>
        <p class="tc-desc">Bible study, honest testimony, and table fellowship — spiritual fuel for the middle of a busy week.</p>
      </article>
    </div>
    <div class="center-cta reveal">
      <a class="btn btn-navy" href="#visit">Plan Your Visit</a>
    </div>
  </div>
</section>

<!-- ============ About ============ -->
<section class="section" id="about">
  <div class="container">
    <div class="split">
      <div class="split-img reveal">
        <img src="https://picsum.photos/760/580" alt="The Grace Harbor Fellowship congregation gathering in warm morning light">
      </div>
      <div class="split-copy reveal">
        <p class="eyebrow">Our Story</p>
        <h2 style="font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:18px">A Harbor for Every Journey</h2>
        <p>Grace Harbor Fellowship began in 1987 with eleven families, a rented community center, and a simple conviction: that the church should feel less like an institution and more like a harbor — a safe place where weary people drop anchor and find their strength renewed.</p>
        <p>Nearly four decades later, that conviction still steers everything we do. We are an interdenominational church family of more than 1,200 members in the heart of Mariners Bay, united by <strong>Scripture, shared table fellowship, and a call to serve our neighbors</strong>. Our teaching is rooted in the Word, our worship is heartfelt, and our doors are genuinely open — to the doubting, the returning, and the lifelong believer alike.</p>
        <p>We believe faith was never meant to be walked out alone. That's why our life together revolves around small groups we call <strong>Harbor Groups</strong>, weekly worship, and an outward-focused rhythm of outreach that extends from our own pier to partners across the globe.</p>
        <div class="stats-row">
          <div><div class="stat-num">38</div><div class="stat-label">Years of Ministry</div></div>
          <div><div class="stat-num">1,200+</div><div class="stat-label">Church Family</div></div>
          <div><div class="stat-num">24</div><div class="stat-label">Ministries &amp; Groups</div></div>
          <div><div class="stat-num">9,500</div><div class="stat-label">Volunteer Hours / Year</div></div>
        </div>
        <a class="text-link" href="#ministries">Meet our pastors and leadership &rarr;</a>
      </div>
    </div>
  </div>
</section>

<!-- ============ Faith Formation ============ -->
<section class="section times-section" id="formation">
  <div class="container">
    <div class="split">
      <div class="split-copy reveal">
        <p class="eyebrow">Faith Formation</p>
        <h2 style="font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:18px">Growing Deeper, Together</h2>
        <p>Following Jesus is a lifelong journey, and no one navigates it alone. Our faith formation pathways are designed to meet you at every season of life — from the first crayon-colored Bible story to the deep waters of theological study in later adulthood.</p>
        <p>We hold that Scripture is living and active, and that faith is formed best in circles, not rows: around dining room tables, in honest questions, over coffee after service, and in the quiet accountability of trusted friendship. Every group at the harbor is anchored in three practices — <strong>Scripture, prayer, and generous hospitality</strong>.</p>
        <ul class="program-list">
          <li>
            <span class="pl-check"><svg width="14" height="14" viewBox="0 0 24 24"><path d="M9 16.2l-4.2-4.2L3 13.8 9 19.8 21 7.8 19.2 6z"/></svg></span>
            <div><strong>Harbor Groups</strong><span>Weekly small groups meeting in homes across Mariners Bay and beyond.</span></div>
          </li>
          <li>
            <span class="pl-check"><svg width="14" height="14" viewBox="0 0 24 24"><path d="M9 16.2l-4.2-4.2L3 13.8 9 19.8 21 7.8 19.2 6z"/></svg></span>
            <div><strong>Sunday Discipleship Hour</strong><span>Formation classes for every age at 9:45 AM, between our two services.</span></div>
          </li>
          <li>
            <span class="pl-check"><svg width="14" height="14" viewBox="0 0 24 24"><path d="M9 16.2l-4.2-4.2L3 13.8 9 19.8 21 7.8 19.2 6z"/></svg></span>
            <div><strong>Rooted: Foundations Course</strong><span>A ten-week journey through the core of Christian belief for new and returning believers.</span></div>
          </li>
          <li>
            <span class="pl-check"><svg width="14" height="14" viewBox="0 0 24 24"><path d="M9 16.2l-4.2-4.2L3 13.8 9 19.8 21 7.8 19.2 6z"/></svg></span>
            <div><strong>Student Discipleship</strong><span>Midweek worship, mentorship, and mission trips for grades 6 through 12.</span></div>
          </li>
        </ul>
        <a class="btn btn-navy" href="#events">Get Involved in a Group</a>
      </div>
      <div class="split-img flip reveal">
        <img src="https://picsum.photos/720/540?grayscale" alt="A small group studying Scripture together around a table">
      </div>
    </div>
  </div>
</section>

<!-- ============ This Week: Events + Sidebar ============ -->
<section class="section" id="events">
  <div class="container">
    <div class="section-head reveal">
      <p class="eyebrow">Community Events</p>
      <h2>This Week at the Harbor</h2>
      <p class="lead">Life at Grace Harbor extends far beyond Sunday morning. From outreach initiatives to family dinners, there's always a way to belong, serve, and celebrate together.</p>
    </div>
    <div class="week-layout">
      <div class="week-main">
        <div class="event-list">
          <article class="event-item reveal">
            <div class="date-badge"><span class="db-month">Oct</span><span class="db-day">14</span></div>
            <div class="event-body">
              <h3>Community Harvest Dinner <span class="event-tag">Fellowship</span></h3>
              <p class="event-meta">5:30 PM &middot; Harbor Hall &middot; Free &amp; Open to All</p>
              <p>Our annual harvest table is set for the whole neighborhood. Enjoy a home-cooked autumn meal, live acoustic worship, and a short program celebrating what God has done in our city this year. Bring a friend — or make five.</p>
            </div>
          </article>
          <article class="event-item reveal">
            <div class="date-badge"><span class="db-month">Oct</span><span class="db-day">19</span></div>
            <div class="event-body">
              <h3>Men's Breakfast &amp; Study <span class="event-tag">Discipleship</span></h3>
              <p class="event-meta">7:00 AM &middot; Fellowship Room</p>
              <p>Pancakes, strong coffee, and an honest look at the book of James. All men are welcome — no registration needed, just show up hungry in every sense of the word.</p>
            </div>
          </article>
          <article class="event-item reveal">
            <div class="date-badge"><span class="db-month">Oct</span><span class="db-day">21</span></div>
            <div class="event-body">
              <h3>Operation Warm Coat <span class="event-tag">Outreach</span></h3>
              <p class="event-meta">9:00 AM &middot; Mariners Bay Waterfront</p>
              <p>Partnering with the Harbor Pantry to distribute 500 coats, blankets, and hot meals before winter sets in. Volunteers are needed for setup, distribution, and prayer teams on site.</p>
            </div>
          </article>
          <article class="event-item reveal">
            <div class="date-badge"><span class="db-month">Oct</span><span class="db-day">26</span></div>
            <div class="event-body">
              <h3>Young Adults Bonfire Night <span class="event-tag">The Current</span></h3>
              <p class="event-meta">7:00 PM &middot; Capeside Beach</p>
              <p>Worship under the stars, s'mores around the fire, and real conversation about following Jesus in your twenties and thirties. Ages 18–30. Bring a blanket and a friend.</p>
            </div>
          </article>
          <article class="event-item reveal">
            <div class="date-badge"><span class="db-month">Nov</span><span class="db-day">02</span></div>
            <div class="event-body">
              <h3>New Members Class <span class="event-tag">Next Steps</span></h3>
              <p class="event-meta">11:45 AM &middot; Chapel &middot; Lunch Provided</p>
              <p>Curious about making Grace Harbor your church home? Join our pastoral team for lunch as we share our story, beliefs, and the many ways to plug into the life of the fellowship.</p>
            </div>
          </article>
        </div>
        <div class="event-actions reveal">
          <a class="btn btn-outline" href="#events">See the Full Calendar</a>
          <a class="btn btn-gold" href="#ministries">Volunteer at an Event</a>
        </div>
      </div>

      <aside class="sidebar" aria-label="Church sidebar">
        <div class="widget reveal">
          <h3 class="widget-title">Weekly Rhythm</h3>
          <p class="widget-sub">Our regular gatherings each week</p>
          <ul class="schedule-list">
            <li>
              <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 2a7 7 0 100 14 7 7 0 000-14zm0 16c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z"/></svg>
              <div><strong>Sun &middot; Traditional Service</strong><span>8:30 AM &middot; Sanctuary</span></div>
            </li>
            <li>
              <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 2a7 7 0 100 14 7 7 0 000-14zm0 16c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z"/></svg>
              <div><strong>Sun &middot; Contemporary Worship</strong><span>10:30 AM &middot; Harbor Hall</span></div>
            </li>
            <li>
              <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 2a7 7 0 100 14 7 7 0 000-14zm0 16c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z"/></svg>
              <div><strong>Sun &middot; Evening Vespers</strong><span>6:00 PM &middot; Chapel</span></div>
            </li>
            <li>
              <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 2a7 7 0 100 14 7 7 0 000-14zm0 16c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z"/></svg>
              <div><strong>Wed &middot; Midweek Renewal</strong><span>7:00 PM &middot; Fellowship Room</span></div>
            </li>
          </ul>
        </div>

        <div class="widget reveal" id="sermons">
          <h3 class="widget-title">Recent Sermons</h3>
          <p class="widget-sub">Catch up or revisit a message</p>
          <article class="sermon-item">
            <img class="sermon-thumb" src="https://placehold.co/72x72/14213d/c8a24a?text=S1&font=lora" alt="Sermon series artwork: Anchored, week one">
            <div>
              <span class="sermon-series">Series: Anchored &middot; Pt. 1</span>
              <strong>The God Who Speaks</strong>
              <span class="sermon-dur">Hebrews 1 &middot; 38 min</span>
            </div>
          </article>
          <article class="sermon-item">
            <img class="sermon-thumb" src="https://placehold.co/72x72/14213d/c8a24a?text=S2&font=lora" alt="Sermon series artwork: Anchored, week two">
            <div>
              <span class="sermon-series">Series: Anchored &middot; Pt. 2</span>
              <strong>Storms, Boats, and Faith</strong>
              <span class="sermon-dur">Mark 4 &middot; 42 min</span>
            </div>
          </article>
          <article class="sermon-item">
            <img class="sermon-thumb" src="https://placehold.co/72x72/14213d/c8a24a?text=S3&font=lora" alt="Sermon series artwork: Harbor Lights">
            <div>
              <span class="sermon-series">Series: Harbor Lights</span>
              <strong>A Table for the Weary</strong>
              <span class="sermon-dur">Luke 14 &middot; 35 min</span>
            </div>
          </article>
          <p style="margin-top:16px"><a class="text-link" href="#sermons">Browse the sermon archive &rarr;</a></p>
        </div>

        <div class="widget verse-card reveal">
          <h3 class="widget-title">Dwell on the Word</h3>
          <blockquote id="verseText">&ldquo;Be still, and know that I am God; I will be exalted among the nations.&rdquo;</blockquote>
          <cite id="verseRef">Psalm 46:10</cite>
          <button class="btn-verse" id="verseBtn" type="button">Another Verse</button>
        </div>

        <div class="widget reveal" id="prayer">
          <h3 class="widget-title">How Can We Pray for You?</h3>
          <p class="widget-sub">Our intercessory team prays over every request each Thursday morning. Nothing is too small.</p>
          <form class="prayer-form" id="prayerForm">
            <label for="prayerName">Your first name</label>
            <input type="text" id="prayerName" name="prayerName" placeholder="e.g., Sarah" autocomplete="given-name">
            <label for="prayerRequest">Prayer request</label>
            <textarea id="prayerRequest" name="prayerRequest" rows="3" placeholder="Share as much or as little as you'd like…" required></textarea>
            <button class="btn btn-navy" type="submit" style="width:100%">Submit Prayer Request</button>
          </form>
          <p class="prayer-note" id="prayerNote" role="status"></p>
        </div>

        <div class="widget reveal">
          <img class="highlight-img" src="https://picsum.photos/360/220" alt="Volunteers serving families at the Harbor Pantry">
          <h3 class="widget-title">Community Highlight</h3>
          <p class="widget-sub">Harbor Pantry &middot; Last Month</p>
          <p style="color:var(--muted);font-size:.95rem;margin-bottom:14px">Thanks to your generosity and 61 volunteers, the Harbor Pantry served <strong style="color:var(--navy)">214 families</strong> — our largest month yet. Glory to God, and thank you, Mariners Bay.</p>
          <a class="text-link" href="#giving">Support the Pantry &rarr;</a>
        </div>
      </aside>
    </div>
  </div>
</section>

<!-- ============ Ministries ============ -->
<section class="section ministries-section" id="ministries">
  <div class="container">
    <div class="section-head center reveal">
      <p class="eyebrow">Ministries</p>
      <h2>Find Your Place to Belong &amp; Serve</h2>
      <p class="lead">Every person at the harbor has a gift worth giving. Explore our ministry families and discover where your story fits into God's bigger story.</p>
    </div>
    <div class="ministry-grid">
      <article class="ministry-card reveal">
        <img src="https://picsum.photos/400/300" alt="Children laughing during Harbor Kids ministry">
        <div class="ministry-body">
          <h3>Harbor Kids</h3>
          <p>Safe, joyful, Bible-saturated ministry for birth through 5th grade — Sunday mornings, midweek clubs, and a summer day camp that's the talk of the town.</p>
          <a class="ministry-link" href="#events">Explore Harbor Kids &rarr;</a>
        </div>
      </article>
      <article class="ministry-card reveal">
        <img src="https://picsum.photos/401/300" alt="Teenagers worshipping at Anchor Youth">
        <div class="ministry-body">
          <h3>Anchor Youth</h3>
          <p>Grades 6–12 gather weekly for worship, honest teaching, small groups, and mentorship that carries faith through the turbulent teenage years.</p>
          <a class="ministry-link" href="#events">Explore Anchor Youth &rarr;</a>
        </div>
      </article>
      <article class="ministry-card reveal">
        <img src="https://picsum.photos/402/300" alt="Worship band leading music during a service">
        <div class="ministry-body">
          <h3>Worship &amp; Arts</h3>
          <p>Musicians, vocalists, visual artists, and tech crews who lend their gifts to lead our church family into the presence of God every week.</p>
          <a class="ministry-link" href="#events">Explore Worship &amp; Arts &rarr;</a>
        </div>
      </article>
      <article class="ministry-card reveal">
        <img src="https://picsum.photos/403/300" alt="Volunteers packing food boxes for local outreach">
        <div class="ministry-body">
          <h3>Outreach &amp; Missions</h3>
          <p>From the Harbor Pantry and winter shelter rotations on our own waterfront to twelve global mission partnerships — the gospel, carried with open hands.</p>
          <a class="ministry-link" href="#giving">Explore Outreach &rarr;</a>
        </div>
      </article>
      <article class="ministry-card reveal">
        <img src="https://picsum.photos/404/300" alt="Prayer team members praying together">
        <div class="ministry-body">
          <h3>Care &amp; Prayer</h3>
          <p>Pastoral care, meal trains, hospital visitation, grief support, and intercessory prayer teams — because no one at the harbor walks a hard season alone.</p>
          <a class="ministry-link" href="#prayer">Explore Care &amp; Prayer &rarr;</a>
        </div>
      </article>
      <article class="ministry-card reveal">
        <img src="https://picsum.photos/405/300" alt="Young adults gathered around a beach bonfire">
        <div class="ministry-body">
          <h3>The Current</h3>
          <p>Our young adults community (18–30) meets weekly for worship around the table, discipleship in the Word, and monthly city-wide service projects.</p>
          <a class="ministry-link" href="#events">Explore The Current &rarr;</a>
        </div>
      </article>
    </div>
    <div class="ministry-cta reveal">
      <div>
        <h3>Not Sure Where You Fit?</h3>
        <p>Take the Next Step class — a one-hour conversation over coffee that helps match your gifts, story, and schedule with the right team.</p>
      </div>
      <div class="ministry-cta-actions">
        <a class="btn btn-gold" href="#events">Volunteer</a>
        <a class="btn btn-outline" href="#visit">Contact a Pastor</a>
      </div>
    </div>
  </div>
</section>

<!-- ============ Giving Portal (Interactive) ============ -->
<section class="section giving-section" id="giving">
  <div class="container">
    <div class="giving-layout">
      <div class="giving-copy reveal">
        <p class="eyebrow">Online Giving</p>
        <h2 style="font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:18px">Generosity That Flows Beyond the Harbor</h2>
        <p>Everything we are and everything we do exists because of God's outrageous generosity toward us. Giving at Grace Harbor isn't about meeting a budget — it's <strong>an act of worship</strong>, a tangible way to say that our hope rests in God alone, not in what we hold.</p>
        <p>Your tithes and offerings keep the lights on and the doors open, but they also do so much more: they stock the Harbor Pantry, send mission teams across the globe, sponsor children in our partner communities, and ensure that pastoral care is available to anyone in crisis, regardless of what they can give back.</p>
        <blockquote class="giving-quote">
          &ldquo;Each of you should give what you have decided in your heart to give, not reluctantly or under compulsion, for God loves a cheerful giver.&rdquo;
          <cite>2 Corinthians 9:7</cite>
        </blockquote>
        <ul class="giving-list">
          <li><svg width="14" height="14" viewBox="0 0 24 24"><path d="M9 16.2l-4.2-4.2L3 13.8 9 19.8 21 7.8 19.2 6z"/></svg><span>Weekly worship gatherings and livestream ministry</span></li>
          <li><svg width="14" height="14" viewBox="0 0 24 24"><path d="M9 16.2l-4.2-4.2L3 13.8 9 19.8 21 7.8 19.2 6z"/></svg><span>Faith formation for every age, from nursery to seniors</span></li>
          <li><svg width="14" height="14" viewBox="0 0 24 24"><path d="M9 16.2l-4.2-4.2L3 13.8 9 19.8 21 7.8 19.2 6z"/></svg><span>Local outreach and twelve global mission partnerships</span></li>
          <li><svg width="14" height="14" viewBox="0 0 24 24"><path d="M9 16.2l-4.2-4.2L3 13.8 9 19.8 21 7.8 19.2 6z"/></svg><span>Benevolence care for neighbors facing crisis</span></li>
        </ul>
      </div>

      <div class="give-widget reveal" id="giveWidget">
        <div class="give-widget-head">
          <h3>Give Securely</h3>
          <span class="secure-badge"><svg width="13" height="13" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.6 3.8 10.7 9 12 5.2-1.3 9-6.4 9-12V5l-9-4zm-1 15l-4-4 1.4-1.4L11 13.2l4.6-4.6L17 10l-6 6z"/></svg>256-bit Encrypted</span>
        </div>

        <label class="give-label">1 &middot; How often?</label>
        <div class="freq-group" role="group" aria-label="Giving frequency">
          <button type="button" class="freq-btn active" data-freq="one-time">One-time</button>
          <button type="button" class="freq-btn" data-freq="weekly">Weekly</button>
          <button type="button" class="freq-btn" data-freq="monthly">Monthly</button>
        </div>

        <label class="give-label">2 &middot; Choose an amount</label>
        <div class="amount-group" role="group" aria-label="Giving amount">
          <button type="button" class="amount-btn" data-amount="25">$25</button>
          <button type="button" class="amount-btn active" data-amount="50">$50</button>
          <button type="button" class="amount-btn" data-amount="100">$100</button>
          <button type="button" class="amount-btn" data-amount="250">$250</button>
        </div>
        <div class="custom-wrap">
          <span class="cur">$</span>
          <input type="number" id="customAmount" min="1" step="1" placeholder="Or enter a custom amount" aria-label="Custom giving amount">
        </div>

        <label class="give-label" for="fundSelect">3 &middot; Direct your gift</label>
        <select id="fundSelect">
          <option value="tithe">Tithes &amp; Offerings — General Fund</option>
          <option value="missions">Global Missions &amp; Harbor Pantry</option>
          <option value="building">Harbor Commons Building Fund</option>
          <option value="benevolence">Benevolence &amp; Care Fund</option>
        </select>

        <div class="impact-box">
          <svg width="22" height="22" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.3-8.4C.9 9.4 2.4 5.6 5.8 5.1c2-.3 3.9.7 4.9 2.3h2.6c1-1.6 2.9-2.6 4.9-2.3 3.4.5 4.9 4.3 3.1 7.5C19 16.4 12 21 12 21z"/></svg>
          <div>
            <strong>Your Impact</strong>
            <p id="impactText">$50 sustains the weekly rhythm of the church — worship gatherings, pastoral care, and faith formation for every generation.</p>
          </div>
        </div>
        <p class="annual-note" id="annualNote">Make it recurring to sustain the harbor all year long.</p>

        <button class="btn btn-gold btn-lg give-submit" id="giveBtn" type="button">Give Now</button>
        <p class="give-note" id="giveNote" role="status"></p>
        <p class="give-footnote">You'll be redirected to our secure giving portal to complete your gift.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============ Testimonials ============ -->
<section class="section stories-section" id="stories">
  <div class="container">
    <div class="section-head center reveal">
      <p class="eyebrow">Testimonies</p>
      <h2>Stories from the Harbor</h2>
      <p class="lead">Don't take our word for it — hear from a few of the ordinary, beloved people who call Grace Harbor home.</p>
    </div>
    <div class="testi-grid">
      <article class="testi-card reveal">
        <div class="stars" aria-label="Rated 5 out of 5 stars">★★★★★</div>
        <blockquote>&ldquo;I walked in on a random Sunday after losing my mom, half-expecting to be invisible. Instead, a woman named June sat with me through the whole service. Six years later, Harbor Group is the first place I go with good news or bad. This church caught me when I was falling.&rdquo;</blockquote>
        <div class="testi-footer">
          <img src="https://i.pravatar.cc/96?u=maria" alt="Portrait of Maria Delgado">
          <div><strong>Maria Delgado</strong><span>Member since 2018 &middot; Harbor Group Leader</span></div>
        </div>
      </article>
      <article class="testi-card reveal">
        <div class="stars" aria-label="Rated 5 out of 5 stars">★★★★★</div>
        <blockquote>&ldquo;I'm an engineer — I came in with a spreadsheet full of doubts. The teaching here never asked me to check my brain at the door. Pastor Ray took my questions seriously, and the Rooted course gave my faith a foundation I could actually stand on. Now I lead the outreach team.&rdquo;</blockquote>
        <div class="testi-footer">
          <img src="https://i.pravatar.cc/96?u=james" alt="Portrait of James Whitfield">
          <div><strong>James Whitfield</strong><span>Outreach Volunteer &middot; Rooted Alumnus</span></div>
        </div>
      </article>
      <article class="testi-card reveal">
        <div class="stars" aria-label="Rated 5 out of 5 stars">★★★★★</div>
        <blockquote>&ldquo;Our kids used to dread church. Now they race us to the Harbor Kids check-in. The security is thorough, the volunteers genuinely know my children by name, and my seven-year-old teaches US the memory verse at dinner. That alone was worth the visit.&rdquo;</blockquote>
        <div class="testi-footer">
          <img src="https://i.pravatar.cc/96?u=elena" alt="Portrait of Elena Park">
          <div><strong>Elena Park</strong><span>Parent of Three &middot; New Attender</span></div>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ============ FAQ ============ -->
<section class="section" id="faq">
  <div class="container">
    <div class="section-head center reveal">
      <p class="eyebrow">Common Questions</p>
      <h2>Before You Visit</h2>
      <p class="lead">First time at Grace Harbor? You're probably wondering about a few things. Here are honest answers to the questions we hear most.</p>
    </div>
    <div class="faq-wrap">
      <div class="faq-item reveal">
        <button class="faq-question" aria-expanded="false">What should I wear?<span class="faq-icon"></span></button>
        <div class="faq-answer"><p>Honestly? Whatever's comfortable. You'll see everything at the harbor from Sunday best to flannel and flip-flops. The traditional service leans a touch more dressed-up, and the contemporary gathering is firmly come-as-you-are. God looks at the heart — we just ask that you come wearing yours.</p></div>
      </div>
      <div class="faq-item reveal">
        <button class="faq-question" aria-expanded="false">Where do I park, and which door do I use?<span class="faq-icon"></span></button>
        <div class="faq-answer"><p>Our main lot is on Harborview Lane with plenty of visitor spots right up front — look for the gold flags. If the lot fills, overflow parking is available at Mariners Bay Elementary next door with a two-minute walk. Greeters in navy lanyards are stationed at every entrance and will happily walk you wherever you're headed.</p></div>
      </div>
      <div class="faq-item reveal">
        <button class="faq-question" aria-expanded="false">What happens with my kids?<span class="faq-icon"></span></button>
        <div class="faq-answer"><p>Harbor Kids (birth–5th grade) runs during both Sunday services with secure, fast check-in at the kiosks in the atrium. Every volunteer is background-checked and trained, and you'll get a matching pickup tag. Kids begin in the service for a couple of worship songs in most gatherings, then are dismissed to their classes — or they're welcome to stay with you the whole time. No pressure either way.</p></div>
      </div>
      <div class="faq-item reveal">
        <button class="faq-question" aria-expanded="false">How do I become a member?<span class="faq-icon"></span></button>
        <div class="faq-answer"><p>Three simple steps: attend the New Members Class (offered the first Sunday of most months, lunch included), share your story of faith with one of our pastors, and affirm our statement of belief. Membership isn't about exclusivity — it's about covenant. It's how you say, "This is my family, and I'm all in." Visit the Next Steps table in the atrium to begin.</p></div>
      </div>
      <div class="faq-item reveal">
        <button class="faq-question" aria-expanded="false">Is there a livestream?<span class="faq-icon"></span></button>
        <div class="faq-answer"><p>Yes — both Sunday services stream live on our website and YouTube channel, with the archive of past sermons available anytime. We love that homebound members, traveling families, and curious first-timers can join from anywhere. That said, we'll always gently remind you: there's no app that replaces a hand on your shoulder. Come when you can.</p></div>
      </div>
      <div class="faq-item reveal">
        <button class="faq-question" aria-expanded="false">Can I talk to a pastor, even if I'm not a member?<span class="faq-icon"></span></button>
        <div class="faq-answer"><p>Absolutely. Our pastoral team sets aside office hours every Tuesday and Thursday afternoon, and you can request a conversation anytime through the contact form or by calling the church office. Whether you're carrying grief, exploring faith for the first time, or just need a wise listener — our door and our table are open to you. No membership required. No strings attached.</p></div>
      </div>
    </div>
  </div>
</section>

<!-- ============ Visit / Contact ============ -->
<section class="section times-section" id="visit">
  <div class="container">
    <div class="visit-layout">
      <div class="visit-img reveal">
        <img src="https://picsum.photos/800/620" alt="The Grace Harbor Fellowship sanctuary building on a sunny morning">
        <div class="visit-address-card">
          <strong>Grace Harbor Fellowship</strong>
          <p>1240 Harborview Lane, Mariners Bay, CA 94965</p>
        </div>
      </div>
      <div class="visit-copy reveal">
        <p class="eyebrow">Plan Your Visit</p>
        <h2 style="font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:18px">We'd Love to Meet You</h2>
        <p>Tell us you're coming and we'll roll out the proper welcome: a reserved parking spot, a greeter who knows your name, a hot cup of coffee waiting at the Harbor Café, and a no-pressure tour of the building if you'd like one. First-time guests are our honored guests — we never single you out from the stage, ever.</p>
        <p>Our office is open Monday through Friday, and a pastor is on call around the clock for emergencies. However you reach out, a real human — not an autoresponder — will get back to you within one business day.</p>
        <ul class="visit-details">
          <li>
            <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 2a7 7 0 100 14 7 7 0 000-14zm0 16c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z"/></svg>
            <div><strong>Worship Gatherings</strong><span>Sundays 8:30 &amp; 10:30 AM &middot; Vespers 6:00 PM</span></div>
          </li>
          <li>
            <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 2a7 7 0 100 14 7 7 0 000-14zm0 16c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z"/></svg>
            <div><strong>Church Office</strong><span>Mon–Fri, 9:00 AM – 4:30 PM &middot; (555) 014-2830</span></div>
          </li>
          <li>
            <svg width="18" height="18" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
            <div><strong>Email</strong><span>hello@graceharborfellowship.org</span></div>
          </li>
        </ul>
        <div class="visit-actions">
          <a class="btn btn-gold" href="mailto:hello@graceharborfellowship.org?subject=Planning%20My%20Visit">Plan Your Visit</a>
          <a class="btn btn-outline" href="https://maps.google.com/?q=1240+Harborview+Lane" target="_blank" rel="noopener">Get Directions</a>
        </div>
      </div>
    </div>
  </div>
</section>

</main>

<!-- ============ Footer ============ -->
<footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-col">
        <div class="footer-brand">
          <img src="https://placehold.co/64x64/14213d/c8a24a?text=GH&font=lora" alt="Grace Harbor Fellowship logo">
          <span class="brand-text">
            <span class="brand-name">Grace Harbor Fellowship</span>
            <span class="brand-tag">Anchored in Scripture &middot; Awakened to Love</span>
          </span>
        </div>
        <p class="footer-desc">A Christ-centered church family in Mariners Bay, sharing the good news of Jesus through warm worship, deep faith formation, and generous outreach — around our corner and around the world.</p>
        <div class="social-row">
          <a href="#" aria-label="Grace Harbor on Facebook"><svg width="18" height="18" viewBox="0 0 24 24"><path d="M13.5 22v-8h2.7l.4-3.2h-3.1V8.7c0-.9.3-1.6 1.6-1.6h1.7V4.2c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.4H7.4V14h2.7v8h3.4z"/></svg></a>
          <a href="#" aria-label="Grace Harbor on Instagram"><svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2-.1-1.3-.1-1.7-.1-4.9s0-3.6.1-4.9c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.3-.1 1.7-.1 4.9-.1zm0 3.1a6.7 6.7 0 100 13.4 6.7 6.7 0 000-13.4zm0 11a4.3 4.3 0 110-8.6 4.3 4.3 0 010 8.6zm8.5-11.2a1.6 1.6 0 11-3.2 0 1.6 1.6 0 013.2 0z"/></svg></a>
          <a href="#" aria-label="Grace Harbor on YouTube"><svg width="18" height="18" viewBox="0 0 24 24"><path d="M23 8.2s-.2-1.6-.9-2.3c-.9-.9-1.8-.9-2.3-1C16.6 4.6 12 4.6 12 4.6h0s-4.6 0-7.8.3c-.5.1-1.4.1-2.3 1-.7.7-.9 2.3-.9 2.3S.8 10 .8 11.9v1.7c0 1.9.2 3.7.2 3.7s.2 1.6.9 2.3c.9.9 2 .9 2.5 1 1.9.2 7.6.3 7.6.3s4.6 0 7.8-.4c.5-.1 1.4-.1 2.3-1 .7-.7.9-2.3.9-2.3s.2-1.8.2-3.7v-1.7c0-1.8-.2-3.6-.2-3.6zM9.7 15.6V8.9l6.1 3.4-6.1 3.3z"/></svg></a>
        </div>
      </div>
      <div class="footer-col">
        <h4>Explore</h4>
        <ul>
          <li><a href="#about">About Us</a></li>
          <li><a href="#ministries">Ministries</a></li>
          <li><a href="#events">Events Calendar</a></li>
          <li><a href="#sermons">Sermon Archive</a></li>
          <li><a href="#giving">Give Online</a></li>
          <li><a href="#prayer">Prayer Requests</a></li>
          <li><a href="#visit">Plan Your Visit</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Service Times</h4>
        <ul class="footer-times">
          <li><strong>Sun 8:30 AM</strong><span>Traditional</span></li>
          <li><strong>Sun 10:30 AM</strong><span>Contemporary</span></li>
          <li><strong>Sun 6:00 PM</strong><span>Vespers</span></li>
          <li><strong>Wed 7:00 PM</strong><span>Midweek Renewal</span></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Contact</h4>
        <ul class="footer-contact">
          <li>
            <svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 2a7 7 0 100 14 7 7 0 000-14zm0 16c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z"/></svg>
            <span>1240 Harborview Lane<br>Mariners Bay, CA 94965</span>
          </li>
          <li>
            <svg width="16" height="16" viewBox="0 0 24 24"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z"/></svg>
            <span>(555) 014-2830</span>
          </li>
          <li>
            <svg width="16" height="16" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
            <span>hello@graceharborfellowship.org</span>
          </li>
          <li>
            <svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/></svg>
            <span>Office: Mon–Fri, 9:00 AM – 4:30 PM</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <p>&copy; <span id="year">2025</span> Grace Harbor Fellowship. All rights reserved. A 501(c)(3) nonprofit organization.</p>
      <nav aria-label="Legal links">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Use</a>
        <a href="#">Accessibility</a>
      </nav>
    </div>
  </div>
</footer>

<button class="back-top" id="backTop" aria-label="Back to top">
  <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 4l-8 8 2.1 2.1L10.5 9.7V20h3V9.7l4.4 4.4L20 12l-8-8z"/></svg>
</button>

<script>
  document.documentElement.classList.remove('no-js');

  /* ---------- Footer year ---------- */
  document.getElementById('year').textContent = new Date().getFullYear();

  /* ---------- Mobile navigation ---------- */
  const navToggle = document.getElementById('navToggle');
  const navMenu = document.getElementById('navMenu');
  navToggle.addEventListener('click', () => {
    const open = navMenu.classList.toggle('open');
    navToggle.classList.toggle('active', open);
    navToggle.setAttribute('aria-expanded', String(open));
  });
  navMenu.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
      navMenu.classList.remove('open');
      navToggle.classList.remove('active');
      navToggle.setAttribute('aria-expanded', 'false');
    });
  });

  /* ---------- Header shadow + back-to-top ---------- */
  const header = document.getElementById('siteHeader');
  const backTop = document.getElementById('backTop');
  window.addEventListener('scroll', () => {
    header.classList.toggle('scrolled', window.scrollY > 40);
    backTop.classList.toggle('show', window.scrollY > 600);
  }, { passive: true });
  backTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));

  /* ---------- FAQ accordion ---------- */
  document.querySelectorAll('.faq-item').forEach(item => {
    const btn = item.querySelector('.faq-question');
    const answer = item.querySelector('.faq-answer');
    btn.addEventListener('click', () => {
      const wasOpen = item.classList.contains('open');
      document.querySelectorAll('.faq-item.open').forEach(openItem => {
        openItem.classList.remove('open');
        openItem.querySelector('.faq-answer').style.maxHeight = null;
        openItem.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
      });
      if (!wasOpen) {
        item.classList.add('open');
        answer.style.maxHeight = answer.scrollHeight + 'px';
        btn.setAttribute('aria-expanded', 'true');
      }
    });
  });

  /* ---------- Giving widget ---------- */
  const giveState = { amount: 50, frequency: 'one-time', fund: 'tithe' };
  const freqBtns = document.querySelectorAll('.freq-btn');
  const amountBtns = document.querySelectorAll('.amount-btn');
  const customInput = document.getElementById('customAmount');
  const fundSelect = document.getElementById('fundSelect');
  const impactText = document.getElementById('impactText');
  const annualNote = document.getElementById('annualNote');
  const giveBtn = document.getElementById('giveBtn');
  const giveNote = document.getElementById('giveNote');
  const fundLabels = {
    tithe: 'Tithes & Offerings',
    missions: 'Global Missions & Harbor Pantry',
    building: 'Harbor Commons Building Fund',
    benevolence: 'Benevolence & Care Fund'
  };

  const fmt = n => '$' + Math.round(n).toLocaleString('en-US');
  const currentAmount = () => {
    const v = parseFloat(customInput.value);
    return (customInput.value !== '' && v > 0) ? v : giveState.amount;
  };

  function updateImpact() {
    const a = currentAmount();
    let text;
    switch (giveState.fund) {
      case 'missions':
        text = `${fmt(a)} provides ${Math.max(1, Math.round(a * 0.8))} nourishing meals through the Harbor Pantry and sustains our twelve global mission partners.`;
        break;
      case 'building':
        text = `${fmt(a)} advances the Harbor Commons — a 24/7 community space, warming center, and café opening in 2026.`;
        break;
      case 'benevolence':
        text = `${fmt(a)} covers ${Math.max(1, Math.round(a / 18))} nights of safe shelter and ${Math.max(1, Math.round(a / 45))} pastoral counseling sessions for neighbors in crisis.`;
        break;
      default:
        text = `${fmt(a)} sustains the weekly rhythm of the church — worship gatherings, pastoral care, and faith formation for every generation.`;
    }
    impactText.textContent = text;

    if (giveState.frequency === 'weekly') {
      annualNote.textContent = `That's ${fmt(a * 52)} over the next year of weekly faithfulness.`;
    } else if (giveState.frequency === 'monthly') {
      annualNote.textContent = `That's ${fmt(a * 12)} over the next year of monthly generosity.`;
    } else {
      annualNote.textContent = 'Make it recurring to sustain the harbor all year long.';
    }
  }

  freqBtns.forEach(btn => btn.addEventListener('click', () => {
    freqBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    giveState.frequency = btn.dataset.freq;
    updateImpact();
  }));

  amountBtns.forEach(btn => btn.addEventListener('click', () => {
    amountBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    customInput.value = '';
    giveState.amount = Number(btn.dataset.amount);
    updateImpact();
  }));

  customInput.addEventListener('input', () => {
    if (parseFloat(customInput.value) > 0) {
      amountBtns.forEach(b => b.classList.remove('active'));
    }
    updateImpact();
  });

  fundSelect.addEventListener('change', () => {
    giveState.fund = fundSelect.value;
    updateImpact();
  });

  giveBtn.addEventListener('click', () => {
    const a = currentAmount();
    if (!a || a <= 0) {
      giveNote.textContent = 'Please choose or enter a gift amount first.';
      giveNote.className = 'give-note error';
      return;
    }
    giveBtn.disabled = true;
    giveBtn.textContent = 'Processing…';
    giveNote.className = 'give-note';
    setTimeout(() => {
      giveNote.innerHTML = `Thank you for your cheerful heart! Your <strong>${giveState.frequency}</strong> gift of <strong>${fmt(a)}</strong> to the <strong>${fundLabels[giveState.fund]}</strong> is being prepared for our secure portal. May God bless the harvest it produces.`;
      giveNote.className = 'give-note success';
      giveBtn.disabled = false;
      giveBtn.textContent = 'Give Now';
    }, 900);
  });

  /* ---------- Verse rotator ---------- */
  const verses = [
    { ref: 'Psalm 46:10', text: '“Be still, and know that I am God; I will be exalted among the nations.”' },
    { ref: 'Isaiah 43:2', text: '“When you pass through the waters, I will be with you; and when you pass through the rivers, they will not sweep over you.”' },
    { ref: 'Matthew 11:28', text: '“Come to me, all you who are weary and burdened, and I will give you rest.”' },
    { ref: 'Jeremiah 29:13', text: '“You will seek me and find me when you seek me with all your heart.”' },
    { ref: 'Hebrews 10:24–25', text: '“Let us consider how we may spur one another on toward love and good deeds, not giving up meeting together.”' },
    { ref: 'Lamentations 3:22–23', text: '“Because of the Lord’s great love we are not consumed, for his compassions never fail. They are new every morning.”' }
  ];
  let verseIdx = 0;
  const verseText = document.getElementById('verseText');
  const verseRef = document.getElementById('verseRef');
  document.getElementById('verseBtn').addEventListener('click', () => {
    verseText.classList.add('fading');
    verseRef.classList.add('fading');
    setTimeout(() => {
      verseIdx = (verseIdx + 1) % verses.length;
      verseText.textContent = verses[verseIdx].text;
      verseRef.textContent = verses[verseIdx].ref;
      verseText.classList.remove('fading');
      verseRef.classList.remove('fading');
    }, 350);
  });

  /* ---------- Prayer request form ---------- */
  const prayerForm = document.getElementById('prayerForm');
  const prayerNote = document.getElementById('prayerNote');
  prayerForm.addEventListener('submit', e => {
    e.preventDefault();
    const name = document.getElementById('prayerName').value.trim() || 'Friend';
    prayerNote.textContent = `Thank you, ${name}. Our intercessory team will lift your request before the Lord this Thursday morning — you are seen, and you are loved.`;
    prayerNote.classList.add('show');
    prayerForm.reset();
  });

  /* ---------- Scroll reveal ---------- */
  const revealObserver = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        revealObserver.unobserve(entry.target);
      }
    });
  }, { threshold: 0.12 });
  document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
</script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:51:04.534Z",
  "url": "https://benchmark.aimac.invalid/0c3b52533c12712c50e1f0e9d42066db5fb04131f0438f4efd2b3b711e11226d.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-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": []
    },
    {
      "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": "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": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a href=\"#hero\" class=\"brand\" aria-label=\"Grace Harbor Fellowship home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#hero\" class=\"brand\" aria-label=\"Grace Harbor Fellowship home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"freq-group\" role=\"group\" aria-label=\"Giving frequency\">",
          "target": [
            ".freq-group"
          ]
        }
      ]
    },
    {
      "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-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a href=\"#hero\" class=\"brand\" aria-label=\"Grace Harbor Fellowship home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"freq-group\" role=\"group\" aria-label=\"Giving frequency\">",
          "target": [
            ".freq-group"
          ]
        }
      ]
    },
    {
      "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=\"freq-group\" role=\"group\" aria-label=\"Giving frequency\">",
          "target": [
            ".freq-group"
          ]
        }
      ]
    },
    {
      "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 href=\"#hero\" class=\"brand\" aria-label=\"Grace Harbor Fellowship home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#hero\" class=\"brand\" aria-label=\"Grace Harbor Fellowship home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "autocomplete-valid",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "the autocomplete attribute is correctly formatted"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<input type=\"text\" id=\"prayerName\" name=\"prayerName\" placeholder=\"e.g., Sarah\" autocomplete=\"given-name\">",
          "target": [
            "#prayerName"
          ]
        }
      ]
    },
    {
      "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=\"btn-verse\" id=\"verseBtn\" type=\"button\">Another Verse</button>",
          "target": [
            "#verseBtn"
          ]
        }
      ]
    },
    {
      "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>Anchored in Scripture.<br><em>Awakened to Love.</em></h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>A Weekly Rhythm of Worship</h2>",
                  "target": [
                    "#times > .container > .center.section-head.reveal > h2"
                  ]
                },
                {
                  "html": "<h3 class=\"tc-title\">Traditional Service</h3>",
                  "target": [
                    ".time-card:nth-child(1) > .tc-title"
                  ]
                },
                {
                  "html": "<h3 class=\"tc-title\">Contemporary Worship</h3>",
                  "target": [
                    ".time-card:nth-child(2) > .tc-title"
                  ]
                },
                {
                  "html": "<h3 class=\"tc-title\">Evening Vespers</h3>",
                  "target": [
                    ".time-card:nth-child(3) > .tc-title"
                  ]
                },
                {
                  "html": "<h3 class=\"tc-title\">Midweek Renewal</h3>",
                  "target": [
                    ".time-card:nth-child(4) > .tc-title"
                  ]
                },
                {
                  "html": "<h2 style=\"font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:18px\">A Harbor for Every Journey</h2>",
                  "target": [
                    "#about > .container > .split > .split-copy.reveal > h2"
                  ]
                },
                {
                  "html": "<h2 style=\"font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:18px\">Growing Deeper, Together</h2>",
                  "target": [
                    "#formation > .container > .split > .split-copy.reveal > h2"
                  ]
                },
                {
                  "html": "<h2>This Week at the Harbor</h2>",
                  "target": [
                    "#events > .container > .section-head.reveal > h2"
                  ]
                },
                {
                  "html": "<h3>Community Harvest Dinner <span class=\"event-tag\">Fellowship</span></h3>",
                  "target": [
                    ".event-item:nth-child(1) > .event-body > h3"
                  ]
                },
                {
                  "html": "<h3>Men's Breakfast &amp; Study <span class=\"event-tag\">Discipleship</span></h3>",
                  "target": [
                    ".event-item:nth-child(2) > .event-body > h3"
                  ]
                },
                {
                  "html": "<h3>Operation Warm Coat <span class=\"event-tag\">Outreach</span></h3>",
                  "target": [
                    ".event-item:nth-child(3) > .event-body > h3"
                  ]
                },
                {
                  "html": "<h3>Young Adults Bonfire Night <span class=\"event-tag\">The Current</span></h3>",
                  "target": [
                    ".event-item:nth-child(4) > .event-body > h3"
                  ]
                },
                {
                  "html": "<h3>New Members Class <span class=\"event-tag\">Next Steps</span></h3>",
                  "target": [
                    ".event-item:nth-child(5) > .event-body > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"widget-title\">Weekly Rhythm</h3>",
                  "target": [
                    ".widget.reveal:nth-child(1) > .widget-title"
                  ]
                },
                {
                  "html": "<h3 class=\"widget-title\">Recent Sermons</h3>",
                  "target": [
                    "#sermons > .widget-title"
                  ]
                },
                {
                  "html": "<h3 class=\"widget-title\">Dwell on the Word</h3>",
                  "target": [
                    ".verse-card > .widget-title"
                  ]
                },
                {
                  "html": "<h3 class=\"widget-title\">How Can We Pray for You?</h3>",
                  "target": [
                    "#prayer > .widget-title"
                  ]
                },
                {
                  "html": "<h3 class=\"widget-title\">Community Highlight</h3>",
                  "target": [
                    ".widget.reveal:nth-child(5) > .widget-title"
                  ]
                },
                {
                  "html": "<h2>Find Your Place to Belong &amp; Serve</h2>",
                  "target": [
                    "#ministries > .container > .center.section-head.reveal > h2"
                  ]
                },
                {
                  "html": "<h3>Harbor Kids</h3>",
                  "target": [
                    ".ministry-card:nth-child(1) > .ministry-body > h3"
                  ]
                },
                {
                  "html": "<h3>Anchor Youth</h3>",
                  "target": [
                    ".ministry-card:nth-child(2) > .ministry-body > h3"
                  ]
                },
                {
                  "html": "<h3>Worship &amp; Arts</h3>",
                  "target": [
                    ".ministry-card:nth-child(3) > .ministry-body > h3"
                  ]
                },
                {
                  "html": "<h3>Outreach &amp; Missions</h3>",
                  "target": [
                    ".ministry-card:nth-child(4) > .ministry-body > h3"
                  ]
                },
                {
                  "html": "<h3>Care &amp; Prayer</h3>",
                  "target": [
                    ".ministry-card:nth-child(5) > .ministry-body > h3"
                  ]
                },
                {
                  "html": "<h3>The Current</h3>",
                  "target": [
                    ".ministry-card:nth-child(6) > .ministry-body > h3"
                  ]
                },
                {
                  "html": "<h3>Not Sure Where You Fit?</h3>",
                  "target": [
                    ".ministry-cta > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h2 style=\"font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:18px\">Generosity That Flows Beyond the Harbor</h2>",
                  "target": [
                    ".giving-copy > h2"
                  ]
                },
                {
                  "html": "<h3>Give Securely</h3>",
                  "target": [
                    ".give-widget-head > h3"
                  ]
                },
                {
                  "html": "<h2>Stories from the Harbor</h2>",
                  "target": [
                    "#stories > .container > .center.section-head.reveal > h2"
                  ]
                },
                {
                  "html": "<h2>Before You Visit</h2>",
                  "target": [
                    "#faq > .container > .center.section-head.reveal > h2"
                  ]
                },
                {
                  "html": "<h2 style=\"font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:18px\">We'd Love to Meet You</h2>",
                  "target": [
                    ".visit-copy > h2"
                  ]
                },
                {
                  "html": "<h4>Explore</h4>",
                  "target": [
                    ".footer-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Service Times</h4>",
                  "target": [
                    ".footer-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact</h4>",
                  "target": [
                    ".footer-col:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main>",
                  "target": [
                    "main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" class=\"\">",
          "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": "#dcdee2",
                "bgColor": "#14213d",
                "contrastRatio": 11.85,
                "fontSize": "10.6pt (14.08px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 11.85"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<p class=\"topbar-note\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><path d=\"M12 2l2.4 7.2H22l-6 4.4 2.3 7.4L12 16.6 5.7 21l2.3-7.4-6-4.4h7.6z\"></path></svg>\n      Sundays: Traditional 8:30 AM \u00b7 Contemporary 10:30 AM \u00b7 Vespers 6:00 PM\n    </p>",
          "target": [
            ".topbar-note"
          ]
        }
      ]
    },
    {
      "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=\"\">",
          "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": "navMenu",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<ul class=\"nav-menu\" id=\"navMenu\">",
          "target": [
            "#navMenu"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"prayerName\">Your first name</label>",
                  "target": [
                    "label[for=\"prayerName\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"prayerName\" name=\"prayerName\" placeholder=\"e.g., Sarah\" autocomplete=\"given-name\">",
          "target": [
            "#prayerName"
          ]
        }
      ]
    },
    {
      "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=\"\">",
          "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=\"\">",
          "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 class=\"brand-logo\" src=\"https://placehold.co/64x64/14213d/c8a24a?text=GH&amp;font=lora\" alt=\"Grace Harbor Fellowship anchor logo\">",
          "target": [
            ".brand-logo"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"prayerName\">Your first name</label>",
                  "target": [
                    "label[for=\"prayerName\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <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=\"text\" id=\"prayerName\" name=\"prayerName\" placeholder=\"e.g., Sarah\" autocomplete=\"given-name\">",
          "target": [
            "#prayerName"
          ]
        }
      ]
    },
    {
      "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 href=\"#giving\">Give Online</a>",
          "target": [
            ".topbar-links > a[href$=\"#giving\"]"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"nav-menu\" id=\"navMenu\">",
          "target": [
            "#navMenu"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#hero\">Home</a></li>",
          "target": [
            "#navMenu > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img class=\"brand-logo\" src=\"https://placehold.co/64x64/14213d/c8a24a?text=GH&amp;font=lora\" alt=\"Grace Harbor Fellowship anchor logo\">",
          "target": [
            ".brand-logo"
          ]
        }
      ]
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label class=\"give-label\" for=\"fundSelect\">3 \u00b7 Direct your gift</label>",
                  "target": [
                    "label[for=\"fundSelect\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select id=\"fundSelect\">",
          "target": [
            "#fundSelect"
          ]
        }
      ]
    },
    {
      "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-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 href=\"#giving\">Give Online</a>",
          "target": [
            ".topbar-links > a[href$=\"#giving\"]"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"stars\" aria-label=\"Rated 5 out of 5 stars\">\u2605\u2605\u2605\u2605\u2605</div>",
          "target": [
            ".testi-card:nth-child(1) > .stars[aria-label=\"Rated 5 out of 5 stars\"]"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "4.5:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" id=\"hero\">",
                  "target": [
                    "#hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow light\">All Are Welcome \u00b7 Mariners Bay, California</p>",
          "target": [
            ".light"
          ],
          "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": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.1pt (12.16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"site-header\" id=\"siteHeader\">",
                  "target": [
                    "#siteHeader"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"brand-tag\">Anchored in Scripture \u00b7 Awakened to Love</span>",
          "target": [
            ".brand > .brand-text > .brand-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#faf7f0",
                "contrastRatio": 3.25,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section times-section\" id=\"times\">",
                  "target": [
                    "#times"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Service Times</p>",
          "target": [
            ".visible > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#faf7f0",
                "contrastRatio": 3.25,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section times-section\" id=\"times\">",
                  "target": [
                    "#times"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Service Times</p>",
          "target": [
            ".center.section-head.visible > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"time-card reveal visible\">",
                  "target": [
                    ".time-card.visible:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"tc-day\">Every Sunday</p>",
          "target": [
            ".time-card.visible:nth-child(1) > .tc-day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"time-card reveal visible\">",
                  "target": [
                    ".time-card.visible:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"tc-day\">Every Sunday</p>",
          "target": [
            ".time-card.visible:nth-child(2) > .tc-day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"time-card reveal visible\">",
                  "target": [
                    ".time-card.visible:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"tc-day\">Sunday Evenings</p>",
          "target": [
            ".time-card.visible:nth-child(3) > .tc-day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"time-card reveal visible\">",
                  "target": [
                    ".time-card.visible:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"tc-day\">Wednesdays</p>",
          "target": [
            ".time-card.visible:nth-child(4) > .tc-day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "12.6pt (16.8px)",
                "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.48 (foreground color: #a8843a, background color: #ffffff, font size: 12.6pt (16.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#ministries\">Meet our pastors and leadership \u2192</a>",
          "target": [
            ".text-link[href$=\"#ministries\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 12.6pt (16.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.6pt (12.8px)",
                "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.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Community Events</p>",
          "target": [
            "#events > .container > .section-head.visible.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"event-tag\">Fellowship</span>",
                  "target": [
                    ".event-item.visible > .event-body > h3 > .event-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-tag\">Fellowship</span>",
          "target": [
            ".event-item.visible > .event-body > h3 > .event-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"event-tag\">Fellowship</span>",
                  "target": [
                    ".event-item.visible:nth-child(1) > .event-body > h3 > .event-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-tag\">Fellowship</span>",
          "target": [
            ".event-item.visible:nth-child(1) > .event-body > h3 > .event-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"event-tag\">Discipleship</span>",
                  "target": [
                    ".event-item.visible:nth-child(2) > .event-body > h3 > .event-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-tag\">Discipleship</span>",
          "target": [
            ".event-item.visible:nth-child(2) > .event-body > h3 > .event-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"event-tag\">Outreach</span>",
                  "target": [
                    ".event-item.visible:nth-child(3) > .event-body > h3 > .event-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-tag\">Outreach</span>",
          "target": [
            ".event-item.visible:nth-child(3) > .event-body > h3 > .event-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"event-tag\">The Current</span>",
                  "target": [
                    ".event-item.visible:nth-child(4) > .event-body > h3 > .event-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-tag\">The Current</span>",
          "target": [
            ".event-item.visible:nth-child(4) > .event-body > h3 > .event-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"widget reveal visible\" id=\"sermons\">",
                  "target": [
                    "#sermons"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"sermon-series\">Series: Anchored \u00b7 Pt. 1</span>",
          "target": [
            ".sermon-item:nth-child(3) > div > .sermon-series"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"widget reveal visible\" id=\"sermons\">",
                  "target": [
                    "#sermons"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"sermon-series\">Series: Anchored \u00b7 Pt. 2</span>",
          "target": [
            ".sermon-item:nth-child(4) > div > .sermon-series"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"widget reveal visible\" id=\"sermons\">",
                  "target": [
                    "#sermons"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"sermon-series\">Series: Harbor Lights</span>",
          "target": [
            ".sermon-item:nth-child(5) > div > .sermon-series"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "12.6pt (16.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"widget reveal visible\" id=\"sermons\">",
                  "target": [
                    "#sermons"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 12.6pt (16.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#sermons\">Browse the sermon archive \u2192</a>",
          "target": [
            ".text-link[href$=\"#sermons\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 12.6pt (16.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"event-tag\">Next Steps</span>",
                  "target": [
                    ".event-item.visible:nth-child(5) > .event-body > h3 > .event-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-tag\">Next Steps</span>",
          "target": [
            ".event-item.visible:nth-child(5) > .event-body > h3 > .event-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"time-card reveal visible\">",
                  "target": [
                    ".time-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"tc-day\">Every Sunday</p>",
          "target": [
            ".time-card:nth-child(1) > .tc-day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"time-card reveal visible\">",
                  "target": [
                    ".time-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"tc-day\">Every Sunday</p>",
          "target": [
            ".time-card:nth-child(2) > .tc-day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"time-card reveal visible\">",
                  "target": [
                    ".time-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"tc-day\">Sunday Evenings</p>",
          "target": [
            ".time-card:nth-child(3) > .tc-day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"time-card reveal visible\">",
                  "target": [
                    ".time-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"tc-day\">Wednesdays</p>",
          "target": [
            ".time-card:nth-child(4) > .tc-day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"event-tag\">Fellowship</span>",
                  "target": [
                    ".event-item:nth-child(1) > .event-body > h3 > .event-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-tag\">Fellowship</span>",
          "target": [
            ".event-item:nth-child(1) > .event-body > h3 > .event-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"event-tag\">Discipleship</span>",
                  "target": [
                    ".event-item:nth-child(2) > .event-body > h3 > .event-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-tag\">Discipleship</span>",
          "target": [
            ".event-item:nth-child(2) > .event-body > h3 > .event-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"event-tag\">Outreach</span>",
                  "target": [
                    ".event-item:nth-child(3) > .event-body > h3 > .event-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-tag\">Outreach</span>",
          "target": [
            ".event-item:nth-child(3) > .event-body > h3 > .event-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"event-tag\">The Current</span>",
                  "target": [
                    ".event-item:nth-child(4) > .event-body > h3 > .event-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-tag\">The Current</span>",
          "target": [
            ".event-item:nth-child(4) > .event-body > h3 > .event-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"event-tag\">Next Steps</span>",
                  "target": [
                    ".event-item:nth-child(5) > .event-body > h3 > .event-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"event-tag\">Next Steps</span>",
          "target": [
            ".event-item:nth-child(5) > .event-body > h3 > .event-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "12.6pt (16.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"widget reveal visible\">",
                  "target": [
                    ".widget.visible.reveal:nth-child(5)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 12.6pt (16.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#giving\">Support the Pantry \u2192</a>",
          "target": [
            ".text-link[href$=\"#giving\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 12.6pt (16.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#faf7f0",
                "contrastRatio": 3.25,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section times-section\" id=\"times\">",
                  "target": [
                    "#times"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Service Times</p>",
          "target": [
            "#times > .container > .center.section-head.visible > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#faf7f0",
                "contrastRatio": 3.25,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section ministries-section\" id=\"ministries\">",
                  "target": [
                    "#ministries"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Ministries</p>",
          "target": [
            "#ministries > .container > .center.section-head.visible > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "11.0pt (14.72px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"ministry-card reveal visible\">",
                  "target": [
                    ".ministry-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"ministry-link\" href=\"#events\">Explore Harbor Kids \u2192</a>",
          "target": [
            ".ministry-card:nth-child(1) > .ministry-body > .ministry-link[href$=\"#events\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "11.0pt (14.72px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"ministry-card reveal visible\">",
                  "target": [
                    ".ministry-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"ministry-link\" href=\"#events\">Explore Anchor Youth \u2192</a>",
          "target": [
            ".ministry-card:nth-child(2) > .ministry-body > .ministry-link[href$=\"#events\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "11.0pt (14.72px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"ministry-card reveal visible\">",
                  "target": [
                    ".ministry-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"ministry-link\" href=\"#events\">Explore Worship &amp; Arts \u2192</a>",
          "target": [
            ".ministry-card:nth-child(3) > .ministry-body > .ministry-link[href$=\"#events\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "11.0pt (14.72px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"ministry-card reveal visible\">",
                  "target": [
                    ".ministry-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"ministry-link\" href=\"#giving\">Explore Outreach \u2192</a>",
          "target": [
            ".ministry-link[href$=\"#giving\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "11.0pt (14.72px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"ministry-card reveal visible\">",
                  "target": [
                    ".ministry-card:nth-child(5)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"ministry-link\" href=\"#prayer\">Explore Care &amp; Prayer \u2192</a>",
          "target": [
            ".ministry-link[href$=\"#prayer\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "11.0pt (14.72px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"ministry-card reveal visible\">",
                  "target": [
                    ".ministry-card:nth-child(6)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"ministry-link\" href=\"#events\">Explore The Current \u2192</a>",
          "target": [
            ".ministry-card:nth-child(6) > .ministry-body > .ministry-link[href$=\"#events\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 11.0pt (14.72px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#f2ecdd",
                "contrastRatio": 2.95,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"impact-box\">",
                  "target": [
                    ".impact-box"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<strong>Your Impact</strong>",
          "target": [
            ".impact-box > div > strong"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #a8843a, background color: #f2ecdd, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#faf7f0",
                "contrastRatio": 3.25,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section stories-section\" id=\"stories\">",
                  "target": [
                    "#stories"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Testimonies</p>",
          "target": [
            "#stories > .container > .center.section-head.visible > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.6pt (12.8px)",
                "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.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Common Questions</p>",
          "target": [
            "#faq > .container > .center.section-head.visible > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#faf7f0",
                "contrastRatio": 3.25,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section times-section\" id=\"times\">",
                  "target": [
                    "#times"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Service Times</p>",
          "target": [
            "#times > .container > .center.section-head.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.6pt (12.8px)",
                "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.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Community Events</p>",
          "target": [
            "#events > .container > .section-head.reveal.visible > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#faf7f0",
                "contrastRatio": 3.25,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section ministries-section\" id=\"ministries\">",
                  "target": [
                    "#ministries"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Ministries</p>",
          "target": [
            "#ministries > .container > .center.section-head.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#faf7f0",
                "contrastRatio": 3.25,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section stories-section\" id=\"stories\">",
                  "target": [
                    "#stories"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Testimonies</p>",
          "target": [
            "#stories > .container > .center.section-head.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.25 (foreground color: #a8843a, background color: #faf7f0, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8843a",
                "bgColor": "#ffffff",
                "contrastRatio": 3.48,
                "fontSize": "9.6pt (12.8px)",
                "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.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\">Common Questions</p>",
          "target": [
            "#faq > .container > .center.section-head.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #a8843a, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 12107
      },
      {
        "y": 576,
        "height": 12107
      },
      {
        "y": 1152,
        "height": 12107
      },
      {
        "y": 1728,
        "height": 12107
      },
      {
        "y": 2304,
        "height": 12107
      },
      {
        "y": 2880,
        "height": 12107
      },
      {
        "y": 3456,
        "height": 12107
      },
      {
        "y": 4032,
        "height": 12107
      },
      {
        "y": 4608,
        "height": 12107
      },
      {
        "y": 5184,
        "height": 12107
      },
      {
        "y": 5760,
        "height": 12107
      },
      {
        "y": 6336,
        "height": 12107
      },
      {
        "y": 6912,
        "height": 12107
      },
      {
        "y": 7488,
        "height": 12107
      },
      {
        "y": 8064,
        "height": 12107
      },
      {
        "y": 8640,
        "height": 12107
      },
      {
        "y": 9216,
        "height": 12107
      },
      {
        "y": 9792,
        "height": 12107
      },
      {
        "y": 10368,
        "height": 12107
      },
      {
        "y": 10944,
        "height": 12107
      },
      {
        "y": 11387,
        "height": 12107
      }
    ],
    "scans": 22,
    "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 "Religion and Spirituality" 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: "Religion and Spirituality"
- Description: Religious organizations, spiritual resources, faith communities, and worship services.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Religion and Spirituality" 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: "About", "Ministries", "Events".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Religion and Spirituality" category. Consider themes similar to: "Faith Formation", "Community Events", "Service Times".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "faith formation", "scripture", "outreach".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Volunteer", "Get Involved", "Join Worship".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Religion and Spirituality" sector. Ideas similar but not limited to: "giving portal".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "service schedule", "community highlights", "recent sermons".
-   **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.