MiniMax MiniMax M3 – Religion and Spirituality

via CoreWeave · Generated

  • AIMAC Debt 4.44
  • Cost $0.017
  • Total Violations 13
  • HTML Size 59 KB
  • Em Dashes 22

Screenshot

View MiniMax MiniMax M3 Religion and Spirituality page View Live Page

Accessibility Issues Found

13 Serious

  • color-contrast serious 13 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="eyebrow">From Our Pastor</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grace Harbor Fellowship — A Welcoming Community of Faith</title>
<meta name="description" content="Grace Harbor Fellowship is a vibrant community of believers committed to worship, discipleship, and serving our neighbors. Join us this Sunday.">
<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:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  /* ============================================
     DESIGN TOKENS
     ============================================ */
  :root {
    --navy: #1a3a5c;
    --navy-deep: #0f2641;
    --gold: #c9a961;
    --gold-soft: #e3cc97;
    --cream: #f8f5f0;
    --cream-deep: #efe9dd;
    --sage: #7a8b7e;
    --burgundy: #6b2737;
    --text: #2a2a2a;
    --text-muted: #5a5a5a;
    --border: #e6e0d3;
    --white: #ffffff;
    --shadow-sm: 0 2px 8px rgba(26,58,92,0.06);
    --shadow-md: 0 8px 24px rgba(26,58,92,0.10);
    --shadow-lg: 0 16px 48px rgba(26,58,92,0.14);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ============================================
     RESET & BASE
     ============================================ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; font-size: 16px; }
  body {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    color: var(--text);
    background: var(--cream);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--navy);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
  h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
  h3 { font-size: 1.4rem; }
  h4 { font-size: 1.15rem; }
  p { margin-bottom: 1rem; color: var(--text); }
  a { color: var(--navy); text-decoration: none; transition: var(--transition); }
  a:hover { color: var(--gold); }
  img { max-width: 100%; height: auto; display: block; }
  ul { list-style: none; }

  .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  .eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 0.75rem;
  }

  .section-title {
    text-align: center;
    margin-bottom: 3rem;
  }
  .section-title h2 { margin-bottom: 0.75rem; }
  .section-title p { color: var(--text-muted); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }

  .btn {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
    text-align: center;
  }
  .btn-primary {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
  }
  .btn-primary:hover {
    background: var(--navy-deep);
    border-color: var(--navy-deep);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .btn-gold {
    background: var(--gold);
    color: var(--navy-deep);
    border-color: var(--gold);
  }
  .btn-gold:hover {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    color: var(--navy-deep);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .btn-outline {
    background: transparent;
    color: var(--navy);
    border-color: var(--navy);
  }
  .btn-outline:hover {
    background: var(--navy);
    color: var(--white);
  }
  .btn-outline-light {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,0.6);
  }
  .btn-outline-light:hover {
    background: var(--white);
    color: var(--navy);
    border-color: var(--white);
  }

  /* ============================================
     HEADER
     ============================================ */
  .site-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
  }
  .header-top {
    background: var(--navy-deep);
    color: var(--cream);
    font-size: 0.85rem;
    padding: 0.5rem 0;
  }
  .header-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .header-top a { color: var(--cream); }
  .header-top a:hover { color: var(--gold); }
  .header-top-info { display: flex; gap: 1.5rem; flex-wrap: wrap; }
  .header-top-info span { display: inline-flex; align-items: center; gap: 0.4rem; }
  .header-social { display: flex; gap: 0.75rem; }
  .header-social a {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    font-size: 0.75rem;
  }
  .header-social a:hover { background: var(--gold); color: var(--navy-deep); }

  .header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    gap: 2rem;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .brand-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--navy-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    font-size: 1.7rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid var(--gold);
  }
  .brand-text { display: flex; flex-direction: column; }
  .brand-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
  }
  .brand-tagline {
    font-size: 0.82rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    font-style: italic;
  }

  .nav-primary ul {
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }
  .nav-primary a {
    display: block;
    padding: 0.5rem 0.95rem;
    color: var(--navy);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 4px;
  }
  .nav-primary a:hover {
    background: var(--cream);
    color: var(--gold);
  }
  .nav-primary .has-cta a {
    background: var(--gold);
    color: var(--navy-deep);
    font-weight: 600;
  }
  .nav-primary .has-cta a:hover {
    background: var(--gold-soft);
    color: var(--navy-deep);
  }
  .nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
  }
  .nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--navy);
    margin: 6px 0;
    transition: var(--transition);
  }

  /* ============================================
     HERO
     ============================================ */
  .hero {
    position: relative;
    min-height: 620px;
    background: linear-gradient(rgba(15, 38, 65, 0.72), rgba(15, 38, 65, 0.78)),
                url('https://picsum.photos/1920/900?blur=1') center/cover;
    color: var(--white);
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.15), transparent 60%);
  }
  .hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 5rem 0;
  }
  .hero-content h1 {
    color: var(--white);
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
  }
  .hero-content h1 em {
    color: var(--gold);
    font-style: normal;
    font-weight: 500;
  }
  .hero-lede {
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.92);
    margin-bottom: 2rem;
    max-width: 540px;
  }
  .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

  .service-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 2rem;
    color: var(--white);
  }
  .service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .service-card-header h3 { color: var(--white); margin: 0; font-size: 1.3rem; }
  .live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--burgundy);
    color: var(--white);
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .live-dot {
    width: 8px; height: 8px;
    background: var(--white);
    border-radius: 50%;
    animation: pulse 1.6s infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  .service-card-stream {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--navy-deep), var(--navy));
    border-radius: 6px;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
  }
  .service-card-stream:hover { transform: scale(1.02); }
  .service-card-stream::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://picsum.photos/600/340?blur=2') center/cover;
    opacity: 0.4;
  }
  .play-icon {
    position: relative;
    z-index: 2;
    width: 64px; height: 64px;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--navy);
    font-size: 1.4rem;
    padding-left: 4px;
    transition: var(--transition);
  }
  .service-card-stream:hover .play-icon { background: var(--gold); }
  .service-times-list { font-size: 0.95rem; }
  .service-times-list li {
    display: flex; justify-content: space-between;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .service-times-list li:last-child { border-bottom: none; }
  .service-times-list strong { color: var(--gold-soft); font-weight: 600; }

  /* ============================================
     WELCOME / ABOUT
     ============================================ */
  .welcome {
    padding: 6rem 0;
    background: var(--white);
  }
  .welcome-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
    align-items: center;
  }
  .welcome-image {
    position: relative;
  }
  .welcome-image img {
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
  }
  .welcome-image-badge {
    position: absolute;
    bottom: -24px;
    right: -24px;
    background: var(--gold);
    color: var(--navy-deep);
    padding: 1.5rem 1.75rem;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    text-align: center;
  }
  .welcome-image-badge .num {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
  }
  .welcome-image-badge .label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .welcome-text h2 { margin-bottom: 1.25rem; }
  .welcome-text .lede {
    font-size: 1.15rem;
    color: var(--navy);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    margin-bottom: 1.5rem;
    line-height: 1.5;
  }
  .pastor-signature {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border);
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  .pastor-signature img {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 2px solid var(--gold);
  }
  .pastor-signature-text strong {
    display: block;
    color: var(--navy);
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
  }
  .pastor-signature-text span {
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  /* ============================================
     SERVICE TIMES
     ============================================ */
  .services {
    padding: 6rem 0;
    background: var(--cream);
    position: relative;
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .service-tile {
    background: var(--white);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    border-top: 4px solid var(--gold);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
  }
  .service-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }
  .service-tile-icon {
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    background: var(--cream);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--navy);
    font-size: 1.6rem;
  }
  .service-tile h3 { margin-bottom: 0.5rem; }
  .service-tile-time {
    font-family: 'Playfair Display', serif;
    color: var(--gold);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
  }
  .service-tile p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1rem; }
  .service-tile-tag {
    display: inline-block;
    background: var(--cream-deep);
    color: var(--navy);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
  }

  /* ============================================
     MINISTRIES
     ============================================ */
  .ministries {
    padding: 6rem 0;
    background: var(--white);
  }
  .ministries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .ministry-card {
    background: var(--cream);
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--border);
  }
  .ministry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold);
  }
  .ministry-card-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--cream-deep);
  }
  .ministry-card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: var(--transition);
  }
  .ministry-card:hover .ministry-card-image img { transform: scale(1.05); }
  .ministry-card-body { padding: 1.5rem; }
  .ministry-card-body h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
  .ministry-card-body p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
  }
  .ministry-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--navy);
    font-weight: 600;
    font-size: 0.9rem;
  }
  .ministry-card-link:hover { color: var(--gold); gap: 0.7rem; }

  /* ============================================
     SERMON / TEACHING
     ============================================ */
  .sermon {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--navy), var(--navy-deep));
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  .sermon::after {
    content: '';
    position: absolute;
    bottom: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(201,169,97,0.12), transparent 70%);
  }
  .sermon .section-title h2 { color: var(--white); }
  .sermon .section-title p { color: rgba(255,255,255,0.75); }
  .sermon-feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 2.5rem;
    margin-top: 3rem;
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 2;
  }
  .sermon-thumb {
    aspect-ratio: 16/10;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
  }
  .sermon-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .sermon-thumb::after {
    content: '▶';
    position: absolute;
    inset: 0;
    background: rgba(15,38,65,0.4);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-size: 2.5rem;
    padding-left: 0.4rem;
    transition: var(--transition);
  }
  .sermon-thumb:hover::after { background: rgba(15,38,65,0.2); }
  .sermon-detail .meta {
    display: flex; gap: 0.75rem; flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .sermon-detail .meta span {
    background: rgba(201,169,97,0.18);
    color: var(--gold-soft);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .sermon-detail h3 { color: var(--white); font-size: 1.7rem; margin-bottom: 0.75rem; }
  .sermon-detail .pastor {
    color: var(--gold-soft);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    font-style: italic;
  }
  .sermon-detail p {
    color: rgba(255,255,255,0.85);
    margin-bottom: 1.5rem;
  }
  .sermon-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

  /* ============================================
     EVENTS + SIDEBAR
     ============================================ */
  .events {
    padding: 6rem 0;
    background: var(--cream);
  }
  .events-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
  }
  .event-list { display: flex; flex-direction: column; gap: 1rem; }
  .event-item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    background: var(--white);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border-left: 4px solid transparent;
  }
  .event-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--gold);
  }
  .event-date {
    text-align: center;
    background: var(--cream-deep);
    border-radius: 6px;
    padding: 0.75rem 0.5rem;
  }
  .event-date .month {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--burgundy);
    font-weight: 700;
  }
  .event-date .day {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
  }
  .event-info h4 { margin-bottom: 0.25rem; }
  .event-info p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
  }
  .event-info .event-meta {
    display: flex; gap: 1rem;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted);
  }
  .event-info .event-meta span::before { content: '• '; color: var(--gold); }

  .sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
  .sidebar-card {
    background: var(--white);
    border-radius: 8px;
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
  }
  .sidebar-card h3 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--cream-deep);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .sidebar-card h3::before {
    content: '';
    width: 4px; height: 18px;
    background: var(--gold);
    border-radius: 2px;
  }
  .announcement {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
  }
  .announcement:last-child { border-bottom: none; padding-bottom: 0; }
  .announcement:first-child { padding-top: 0; }
  .announcement h4 {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--navy);
  }
  .announcement p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
  }
  .announcement .date {
    font-size: 0.78rem;
    color: var(--gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .prayer-card {
    background: linear-gradient(135deg, var(--burgundy), var(--navy-deep));
    color: var(--white);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
  }
  .prayer-card h3 { color: var(--white); margin-bottom: 0.75rem; }
  .prayer-card p { color: rgba(255,255,255,0.85); font-size: 0.95rem; margin-bottom: 1.25rem; }

  /* ============================================
     TESTIMONIALS
     ============================================ */
  .testimonials {
    padding: 6rem 0;
    background: var(--white);
  }
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
  }
  .testimonial {
    background: var(--cream);
    padding: 2rem;
    border-radius: 8px;
    position: relative;
    border: 1px solid var(--border);
  }
  .testimonial::before {
    content: '"';
    position: absolute;
    top: -10px; left: 24px;
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    color: var(--gold);
    line-height: 1;
  }
  .testimonial blockquote {
    font-style: italic;
    color: var(--text);
    margin: 1rem 0 1.5rem;
    line-height: 1.6;
    font-size: 0.98rem;
  }
  .testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
  }
  .testimonial-author img {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 2px solid var(--gold);
  }
  .testimonial-author strong {
    display: block;
    color: var(--navy);
    font-family: 'Playfair Display', serif;
  }
  .testimonial-author span {
    font-size: 0.82rem;
    color: var(--text-muted);
  }

  /* ============================================
     FAQ
     ============================================ */
  .faq {
    padding: 6rem 0;
    background: var(--cream);
  }
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: start;
    margin-top: 3rem;
  }
  .faq-aside h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  .faq-aside p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
  }
  .faq-contact-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--gold);
  }
  .faq-contact-card strong {
    display: block;
    color: var(--navy);
    margin-bottom: 0.3rem;
  }
  .faq-contact-card a { color: var(--gold); font-weight: 600; }

  .faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
  .faq-item {
    background: var(--white);
    border-radius: 6px;
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .faq-item summary {
    cursor: pointer;
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    color: var(--navy);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: var(--transition);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: '+';
    font-size: 1.6rem;
    color: var(--gold);
    font-weight: 300;
    transition: var(--transition);
    line-height: 1;
  }
  .faq-item[open] summary { background: var(--cream); }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-item summary:hover { color: var(--gold); }
  .faq-answer {
    padding: 0 1.5rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.65;
  }

  /* ============================================
     CONNECT / NEWSLETTER
     ============================================ */
  .connect {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--burgundy), var(--navy-deep));
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  .connect::before {
    content: '';
    position: absolute;
    top: -80px; left: -80px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(201,169,97,0.18), transparent 70%);
  }
  .connect-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .connect-text h2 { color: var(--white); margin-bottom: 1rem; }
  .connect-text p { color: rgba(255,255,255,0.88); font-size: 1.05rem; }
  .connect-form {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 2rem;
    backdrop-filter: blur(10px);
  }
  .connect-form h3 { color: var(--white); margin-bottom: 0.5rem; }
  .connect-form > p { color: rgba(255,255,255,0.75); font-size: 0.92rem; margin-bottom: 1.5rem; }
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    color: var(--white);
    font-family: inherit;
    font-size: 0.95rem;
  }
  .form-input::placeholder { color: rgba(255,255,255,0.5); }
  .form-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255,255,255,0.12);
  }
  .form-input-full { margin-bottom: 1rem; }
  .form-check {
    display: flex; gap: 0.5rem; align-items: start;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.78);
    margin-bottom: 1rem;
  }
  .form-check input { margin-top: 4px; accent-color: var(--gold); }

  /* ============================================
     FOOTER
     ============================================ */
  .site-footer {
    background: var(--navy-deep);
    color: var(--cream);
    padding: 4rem 0 0;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .footer-brand .brand-logo {
    background: var(--gold);
    color: var(--navy-deep);
    border-color: var(--cream);
  }
  .footer-brand .brand-name { color: var(--white); }
  .footer-brand .brand-tagline { color: rgba(255,255,255,0.6); }
  .footer-brand p {
    color: rgba(255,255,255,0.7);
    font-size: 0.92rem;
    margin: 1.25rem 0 1.5rem;
    max-width: 320px;
  }
  .footer-social { display: flex; gap: 0.6rem; }
  .footer-social a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    color: var(--cream);
    font-size: 0.85rem;
    transition: var(--transition);
  }
  .footer-social a:hover {
    background: var(--gold);
    color: var(--navy-deep);
    transform: translateY(-2px);
  }
  .footer-col h4 {
    color: var(--white);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
  }
  .footer-col ul li { margin-bottom: 0.6rem; }
  .footer-col a {
    color: rgba(255,255,255,0.7);
    font-size: 0.92rem;
  }
  .footer-col a:hover { color: var(--gold); }
  .footer-contact-item {
    display: flex; gap: 0.75rem; align-items: start;
    margin-bottom: 0.85rem;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.7);
  }
  .footer-contact-item strong {
    display: block;
    color: var(--white);
    margin-bottom: 0.2rem;
  }
  .footer-contact-item svg, .footer-contact-item .ico {
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 3px;
  }
  .footer-bottom {
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
  }
  .footer-bottom-links { display: flex; gap: 1.5rem; }
  .footer-bottom-links a { color: rgba(255,255,255,0.55); }
  .footer-bottom-links a:hover { color: var(--gold); }

  /* ============================================
     RESPONSIVE
     ============================================ */
  @media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .welcome-grid, .sermon-feature, .connect-inner, .faq-grid {
      grid-template-columns: 1fr; gap: 2.5rem;
    }
    .ministries-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .events-layout { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 768px) {
    .nav-toggle { display: block; }
    .nav-primary {
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: var(--white);
      box-shadow: var(--shadow-md);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    .nav-primary.open { max-height: 500px; }
    .nav-primary ul {
      flex-direction: column;
      align-items: stretch;
      padding: 1rem;
      gap: 0.25rem;
    }
    .nav-primary a { padding: 0.85rem 1rem; }
    .header-top-info { font-size: 0.78rem; gap: 1rem; }
    .hero { min-height: 500px; }
    .ministries-grid, .services-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .welcome-image-badge { right: 0; bottom: -16px; padding: 1rem 1.25rem; }
    .event-item { grid-template-columns: 70px 1fr; }
    .event-item .btn { grid-column: 1 / -1; }
    .form-row { grid-template-columns: 1fr; }
  }
</style>
</head>
<body>

<!-- ============================================
     HEADER
     ============================================ -->
<header class="site-header">
  <div class="header-top">
    <div class="container header-top-inner">
      <div class="header-top-info">
        <span>📍 418 Harborview Drive, Asheville, NC</span>
        <span>📞 (828) 555-0142</span>
        <span>✉ office@graceharbor.org</span>
      </div>
      <div class="header-social">
        <a href="#" aria-label="Facebook">f</a>
        <a href="#" aria-label="Instagram">ig</a>
        <a href="#" aria-label="YouTube">yt</a>
        <a href="#" aria-label="Spotify">sp</a>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="header-main">
      <a href="#" class="brand">
        <div class="brand-logo" aria-hidden="true">GH</div>
        <div class="brand-text">
          <span class="brand-name">Grace Harbor Fellowship</span>
          <span class="brand-tagline">A welcoming community of faith, family &amp; fellowship</span>
        </div>
      </a>
      <button class="nav-toggle" aria-label="Toggle navigation" onclick="document.querySelector('.nav-primary').classList.toggle('open')">
        <span></span><span></span><span></span>
      </button>
      <nav class="nav-primary" aria-label="Primary">
        <ul>
          <li><a href="#welcome">About</a></li>
          <li><a href="#services">Service Times</a></li>
          <li><a href="#ministries">Ministries</a></li>
          <li><a href="#sermon">Sermons</a></li>
          <li><a href="#events">Events</a></li>
          <li><a href="#youth">Youth</a></li>
          <li><a href="#faith">Our Faith</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="has-cta"><a href="#connect">Visit Us</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<!-- ============================================
     HERO
     ============================================ -->
<section class="hero">
  <div class="container">
    <div class="hero-inner">
      <div class="hero-content">
        <span class="eyebrow" style="color: var(--gold-soft);">Welcome Home</span>
        <h1>Find your place in a <em>community of grace</em></h1>
        <p class="hero-lede">
          For over forty years, Grace Harbor has been a place where doubt and belief sit at the same table.
          Whether you're exploring faith for the first time or looking for a church to call home, our doors —
          and our hearts — are open to you.
        </p>
        <div class="hero-actions">
          <a href="#services" class="btn btn-gold">Join Worship This Sunday</a>
          <a href="#sermon" class="btn btn-outline-light">Watch Live Stream</a>
        </div>
      </div>

      <aside class="service-card" aria-label="Live Stream & Service Times">
        <div class="service-card-header">
          <h3>This Sunday</h3>
          <span class="live-badge"><span class="live-dot"></span>LIVE NOW</span>
        </div>
        <div class="service-card-stream" role="button" tabindex="0" aria-label="Play live stream">
          <div class="play-icon">▶</div>
        </div>
        <ul class="service-times-list">
          <li><span>Sunday Worship</span><strong>9:00 &amp; 10:45 AM</strong></li>
          <li><span>Sunday School</span><strong>9:00 AM</strong></li>
          <li><span>Wednesday Prayer</span><strong>6:30 PM</strong></li>
          <li><span>Youth Group</span><strong>Sundays · 5 PM</strong></li>
        </ul>
      </aside>
    </div>
  </div>
</section>

<!-- ============================================
     WELCOME / PASTOR'S MESSAGE
     ============================================ -->
<section class="welcome" id="welcome">
  <div class="container">
    <div class="welcome-grid">
      <div class="welcome-image">
        <img src="https://picsum.photos/600/750" alt="Pastor Jonathan Wells preaching in the sanctuary at Grace Harbor Fellowship" loading="lazy">
        <div class="welcome-image-badge">
          <div class="num">42</div>
          <div class="label">Years Serving</div>
        </div>
      </div>
      <div class="welcome-text">
        <span class="eyebrow">From Our Pastor</span>
        <h2>You are welcome here, just as you are.</h2>
        <p class="lede">
          "Church is not a museum for saints but a hospital for sinners. If you've ever felt that your questions
          were too big or your past was too heavy, you've come to the right place."
        </p>
        <p>
          I'm Pastor Jonathan Wells, and along with my wife Margaret and our three kids, I'm grateful to serve
          as the lead pastor of Grace Harbor Fellowship. Our congregation is a beautiful tapestry of teachers
          and tradespeople, students and retirees, doubters and dreamers — drawn together by the simple belief
          that we need each other on this journey of faith.
        </p>
        <p>
          We are a non-denominational, Bible-centered community rooted in the historic Christian tradition but
          committed to engaging the questions of our day with grace, humility, and hope. We believe the gospel
          is good news for everyone, and we work to embody that good news through weekly worship, small group
          discipleship, and serving our neighbors across Asheville and around the world.
        </p>
        <p>
          Whether you're exploring Christianity for the first time, returning to faith after time away, or simply
          looking for a community to belong to — we'd love to walk alongside you. Come as you are. We'll save
          you a seat.
        </p>
        <div class="pastor-signature">
          <img src="https://i.pravatar.cc/120?u=pastor-jonathan-wells" alt="Pastor Jonathan Wells">
          <div class="pastor-signature-text">
            <strong>Pastor Jonathan Wells</strong>
            <span>Lead Pastor · Grace Harbor Fellowship</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============================================
     SERVICE TIMES
     ============================================ -->
<section class="services" id="services">
  <div class="container">
    <div class="section-title">
      <span class="eyebrow">Gather With Us</span>
      <h2>Service Times &amp; Locations</h2>
      <p>Worship is at the heart of who we are. Join us in person or online — every gathering is open to everyone.</p>
    </div>
    <div class="services-grid">
      <div class="service-tile">
        <div class="service-tile-icon">☀️</div>
        <h3>Sunday Morning</h3>
        <div class="service-tile-time">9:00 &amp; 10:45 AM</div>
        <p>Our main worship service with full choir, children's programming, and a relevant message from Scripture. Casual dress, come as you are.</p>
        <span class="service-tile-tag">In-Person &amp; Online</span>
      </div>
      <div class="service-tile">
        <div class="service-tile-icon">🌙</div>
        <h3>Evening Prayer</h3>
        <div class="service-tile-time">6:00 PM</div>
        <p>A contemplative service of candles, communion, and quiet reflection. A sacred space to slow down and listen for the still, small voice of God.</p>
        <span class="service-tile-tag">In-Person Only</span>
      </div>
      <div class="service-tile">
        <div class="service-tile-icon">🙏</div>
        <h3>Midweek Gathering</h3>
        <div class="service-tile-time">Wed · 6:30 PM</div>
        <p>Dinner together at 6, teaching and small groups at 7. A midweek touchpoint to recharge with teaching, fellowship, and prayer.</p>
        <span class="service-tile-tag">Family Friendly</span>
      </div>
    </div>
  </div>
</section>

<!-- ============================================
     MINISTRIES
     ============================================ -->
<section class="ministries" id="ministries">
  <div class="container">
    <div class="section-title">
      <span class="eyebrow">Get Involved</span>
      <h2>Ministries for Every Season of Life</h2>
      <p>Every member of our congregation is uniquely gifted. Discover a place to grow, serve, and belong — whether you're seven or seventy-seven.</p>
    </div>
    <div class="ministries-grid">
      <article class="ministry-card">
        <div class="ministry-card-image">
          <img src="https://picsum.photos/400/300?random=1" alt="Children laughing during Sunday school" loading="lazy">
        </div>
        <div class="ministry-card-body">
          <h3>Children's Ministry</h3>
          <p>Safe, fun, Christ-centered programming for infants through 5th grade. Sunday school, midweek clubs, vacation Bible school, and family events throughout the year.</p>
          <a href="#" class="ministry-card-link">Learn more →</a>
        </div>
      </article>
      <article class="ministry-card">
        <div class="ministry-card-image">
          <img src="https://picsum.photos/400/300?random=2" alt="Youth group gathered in worship" loading="lazy">
        </div>
        <div class="ministry-card-body">
          <h3>Youth Programs</h3>
          <p>Our middle and high school students gather for authentic community, biblical teaching, retreats, mission trips, and a whole lot of laughter every Sunday evening.</p>
          <a href="#youth" class="ministry-card-link">Learn more →</a>
        </div>
      </article>
      <article class="ministry-card">
        <div class="ministry-card-image">
          <img src="https://picsum.photos/400/300?random=3" alt="Worship team leading congregation in song" loading="lazy">
        </div>
        <div class="ministry-card-body">
          <h3>Music Ministry</h3>
          <p>From our 60-voice chancel choir to the contemporary praise band, music is a treasured gift in our worship. Auditions open; hearts willing required.</p>
          <a href="#" class="ministry-card-link">Learn more →</a>
        </div>
      </article>
      <article class="ministry-card">
        <div class="ministry-card-image">
          <img src="https://picsum.photos/400/300?random=4" alt="Volunteers serving meals at community outreach" loading="lazy">
        </div>
        <div class="ministry-card-body">
          <h3>Outreach &amp; Mission</h3>
          <p>Our hands extend beyond our walls. Local food drives, homeless shelters, global partnerships in Haiti and Guatemala — find your calling to serve.</p>
          <a href="#" class="ministry-card-link">Learn more →</a>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ============================================
     SERMON FEATURE
     ============================================ -->
<section class="sermon" id="sermon">
  <div class="container">
    <div class="section-title">
      <span class="eyebrow">Latest Teaching</span>
      <h2>Recent Messages</h2>
      <p>Miss a Sunday? Catch up on the latest sermons from our teaching team, available to watch or listen anytime.</p>
    </div>
    <div class="sermon-feature">
      <div class="sermon-thumb" role="button" tabindex="0" aria-label="Play latest sermon">
        <img src="https://picsum.photos/800/500?random=5" alt="Sermon video thumbnail" loading="lazy">
      </div>
      <div class="sermon-detail">
        <div class="meta">
          <span>SERMON</span>
          <span>SERIES: HOPE RISING</span>
          <span>34 MIN</span>
        </div>
        <h3>When the Waves Don't Stop: Finding God in the Storm</h3>
        <p class="pastor">Pastor Jonathan Wells · Sunday, March 16</p>
        <p>
          In week three of our series Hope Rising, we turn to the story of Peter stepping out onto the water —
          a sermon about the moments when our faith is tested not by absence of storms, but by our willingness
          to keep our eyes on Jesus through them. Discover why the most courageous prayers are sometimes the
          shortest ones.
        </p>
        <div class="sermon-actions">
          <a href="#" class="btn btn-gold">▶ Watch Now</a>
          <a href="#" class="btn btn-outline-light">Listen to Podcast</a>
          <a href="#" class="btn btn-outline-light">Browse Archive</a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============================================
     EVENTS + SIDEBAR
     ============================================ -->
<section class="events" id="events">
  <div class="container">
    <div class="section-title">
      <span class="eyebrow">What's Happening</span>
      <h2>Upcoming Events &amp; Weekly Announcements</h2>
      <p>From Bible studies to family picnics, there's always something happening at Grace Harbor. Here's what's coming up.</p>
    </div>

    <div class="events-layout">
      <div>
        <div class="event-list">
          <article class="event-item">
            <div class="event-date">
              <span class="month">Mar</span>
              <span class="day">22</span>
            </div>
            <div class="event-info">
              <h4>Community Easter Egg Hunt</h4>
              <p>Over 8,000 eggs, inflatable obstacle course, and a visit from the Easter Bunny himself. Open to the whole community — invite a friend!</p>
              <div class="event-meta">
                <span>10:00 AM – 1:00 PM</span>
                <span>Front Lawn</span>
                <span>Free Admission</span>
              </div>
            </div>
            <a href="#" class="btn btn-outline">Attend Event</a>
          </article>

          <article class="event-item">
            <div class="event-date">
              <span class="month">Mar</span>
              <span class="day">29</span>
            </div>
            <div class="event-info">
              <h4>Good Friday Tenebrae Service</h4>
              <p>A powerful, candlelit service of scripture, song, and silence as we journey through the final hours of Christ. Childcare provided for ages 0-5.</p>
              <div class="event-meta">
                <span>7:00 PM – 8:30 PM</span>
                <span>Main Sanctuary</span>
                <span>All Ages Welcome</span>
              </div>
            </div>
            <a href="#" class="btn btn-outline">Attend Event</a>
          </article>

          <article class="event-item">
            <div class="event-date">
              <span class="month">Apr</span>
              <span class="day">05</span>
            </div>
            <div class="event-info">
              <h4>Youth Mission Trip Interest Meeting</h4>
              <p>High school students and parents — come hear about our summer mission trips to Guatemala and inner-city Atlanta. Q&amp;A and signup info included.</p>
              <div class="event-meta">
                <span>6:30 PM – 8:00 PM</span>
                <span>Student Center</span>
                <span>Grades 9-12</span>
              </div>
            </div>
            <a href="#" class="btn btn-outline">Attend Event</a>
          </article>

          <article class="event-item">
            <div class="event-date">
              <span class="month">Apr</span>
              <span class="day">12</span>
            </div>
            <div class="event-info">
              <h4>Women's Spring Retreat: Breathe</h4>
              <p>A Saturday retreat focused on spiritual renewal for women of all ages. Featuring author and speaker Lisa Robinson. Includes lunch and refreshments.</p>
              <div class="event-meta">
                <span>9:00 AM – 4:00 PM</span>
                <span>Blue Ridge Retreat Center</span>
                <span>$35 Registration</span>
              </div>
            </div>
            <a href="#" class="btn btn-outline">Register Now</a>
          </article>
        </div>
      </div>

      <aside class="sidebar">
        <div class="sidebar-card">
          <h3>Weekly Announcements</h3>
          <div class="announcement">
            <span class="date">Posted March 18</span>
            <h4>New Alpha Course Starting April 8</h4>
            <p>A free 11-week exploration of the basics of the Christian faith in a relaxed, judgment-free setting. Dinner included each Tuesday.</p>
          </div>
          <div class="announcement">
            <span class="date">Posted March 15</span>
            <h4>Food Pantry Drive This Month</h4>
            <p>We're collecting non-perishables for the Asheville Community Fridge. Drop-off bins located at every entrance through April.</p>
          </div>
          <div class="announcement">
            <span class="date">Posted March 10</span>
            <h4>Congregational Meeting March 30</h4>
            <p>All members encouraged to attend our quarterly meeting to discuss budget, vision, and pastoral transition updates.</p>
          </div>
        </div>

        <div class="prayer-card">
          <h3>Prayer Requests</h3>
          <p>Our prayer team would be honored to lift up your needs. Submit a confidential request and our staff will pray for you this week.</p>
          <a href="#" class="btn btn-gold">Submit Request</a>
        </div>

        <div class="sidebar-card">
          <h3>This Week's Schedule</h3>
          <ul class="service-times-list" style="color: var(--text);">
            <li style="display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--border);"><span>Sun · Worship</span><strong style="color:var(--navy)">9 &amp; 10:45 AM</strong></li>
            <li style="display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--border);"><span>Sun · Youth Group</span><strong style="color:var(--navy)">5:00 PM</strong></li>
            <li style="display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--border);"><span>Mon · Men's Bible Study</span><strong style="color:var(--navy)">6:30 AM</strong></li>
            <li style="display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--border);"><span>Tue · Alpha Course</span><strong style="color:var(--navy)">6:30 PM</strong></li>
            <li style="display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--border);"><span>Wed · Family Dinner</span><strong style="color:var(--navy)">6:00 PM</strong></li>
            <li style="display:flex;justify-content:space-between;padding:0.5rem 0;"><span>Sat · Prayer Walking</span><strong style="color:var(--navy)">8:00 AM</strong></li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</section>

<!-- ============================================
     TESTIMONIALS
     ============================================ -->
<section class="testimonials" id="youth">
  <div class="container">
    <div class="section-title">
      <span class="eyebrow">Stories of Grace</span>
      <h2>What Our Congregation Is Saying</h2>
      <p>The church is not a building — it's the people. Here's how Grace Harbor has shaped the lives of some of our members.</p>
    </div>
    <div class="testimonials-grid">
      <article class="testimonial">
        <blockquote>
          "We walked into Grace Harbor on Easter Sunday three years ago, completely burned out on church. No one
          asked us to sign anything or fill out a card — they just handed us a coffee and a hug. We never left."
        </blockquote>
        <div class="testimonial-author">
          <img src="https://i.pravatar.cc/120?u=marcus-reeves" alt="Marcus Reeves">
          <div>
            <strong>Marcus &amp; Danielle Reeves</strong>
            <span>Members since 2022</span>
          </div>
        </div>
      </article>

      <article class="testimonial">
        <blockquote>
          "The youth ministry here changed my son's life. He went from a quiet kid who hated school to leading
          our small group Bible study. The volunteers genuinely care — they know his name, his struggles, his
          favorite snacks."
        </blockquote>
        <div class="testimonial-author">
          <img src="https://i.pravatar.cc/120?u=elena-park" alt="Elena Park">
          <div>
            <strong>Elena Park</strong>
            <span>Parent &amp; Small Group Leader</span>
          </div>
        </div>
      </article>

      <article class="testimonial">
        <blockquote>
          "I was a lifelong atheist who wandered in after my divorce, just looking for a quiet place to sit.
          Two years later I was baptized in this very church. The grace here is real — it changed everything."
        </blockquote>
        <div class="testimonial-author">
          <img src="https://i.pravatar.cc/120?u=thomas-aldridge" alt="Thomas Aldridge">
          <div>
            <strong>Thomas Aldridge</strong>
            <span>New Believer, Class of 2024</span>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ============================================
     FAQ
     ============================================ -->
<section class="faq" id="faith">
  <div class="container">
    <div class="section-title">
      <span class="eyebrow">Common Questions</span>
      <h2>Visiting Grace Harbor</h2>
      <p>New to church or new to town? Here are answers to the questions we hear most often from first-time visitors.</p>
    </div>
    <div class="faq-grid">
      <div class="faq-aside">
        <h3>Still have questions?</h3>
        <p>We'd love to hear from you. Whether you're planning your first visit, looking for a specific ministry, or just curious about who we are — our team is here to help.</p>
        <div class="faq-contact-card">
          <strong>Speak with a Pastor</strong>
          <a href="tel:+18285550142">(828) 555-0142</a>
          <p style="margin-top: 0.4rem; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0;">Monday – Friday, 9 AM to 5 PM</p>
        </div>
        <a href="#contact" class="btn btn-primary" style="margin-top: 1.5rem;">Contact Pastor →</a>
      </div>

      <div class="faq-list">
        <details class="faq-item" open>
          <summary>What should I wear to attend a service?</summary>
          <div class="faq-answer">
            Wear whatever makes you comfortable. On any given Sunday you'll see everything from jeans and
            flannels to suits and dresses. We care about your presence, not your wardrobe. If you'd like a
            heads-up, our 9 AM service tends to be a bit more casual and our 10:45 AM service tends to be
            a bit more "dressed up" — but there are no rules.
          </div>
        </details>
        <details class="faq-item">
          <summary>What denomination is Grace Harbor?</summary>
          <div class="faq-answer">
            We are a non-denominational church rooted in the historic Christian tradition. We affirm the
            historic creeds (Apostles' Creed, Nicene Creed), affirm the authority of Scripture, practice the
            two ordinances of baptism and communion, and warmly welcome believers from a wide range of
            backgrounds — Baptist, Methodist, Presbyterian, Pentecostal, Catholic, and everything in between.
          </div>
        </details>
        <details class="faq-item">
          <summary>Is there programming for my children during the service?</summary>
          <div class="faq-answer">
            Yes! We offer nursery care for infants through age 2 during both Sunday services. Grace Kids
            programming (ages 3 through 5th grade) is offered during the 10:45 AM service with age-appropriate
            Bible teaching, games, and crafts. All volunteers are background-checked and trained. You can
            pre-register your child online to make check-in faster.
          </div>
        </details>
        <details class="faq-item">
          <summary>What do you believe about salvation and the Bible?</summary>
          <div class="faq-answer">
            We believe the Bible is the inspired, authoritative Word of God. We believe that salvation is by
            grace alone through faith alone in Christ alone — that no amount of good works can earn what
            Christ has freely given. We believe in one God, eternally existing in Father, Son, and Holy
            Spirit. We believe the church is called to make disciples of all nations. We'd love to walk you
            through any of these in more depth — just ask.
          </div>
        </details>
        <details class="faq-item">
          <summary>How can I get involved if I'm just visiting?</summary>
          <div class="faq-answer">
            Take your time — there's no pressure to "join" anything. But if you'd like to get connected,
            the easiest first step is to fill out a connection card on Sunday or stop by our Welcome Center
            in the lobby. From there we can help you find a small group, a serving team, or simply introduce
            you to a few friendly faces who'd love to grab coffee with you.
          </div>
        </details>
        <details class="faq-item">
          <summary>Do you offer online services or just in-person?</summary>
          <div class="faq-answer">
            Both! Our full 10:45 AM worship service is live-streamed every Sunday at graceharbor.org/live,
            on YouTube, and on the Grace Harbor app. The service remains available on demand afterward,
            and you can subscribe to our sermon podcast on Apple Podcasts and Spotify. Communion elements
            can be picked up at the church office beforehand if you'd like to participate at home.
          </div>
        </details>
      </div>
    </div>
  </div>
</section>

<!-- ============================================
     CONNECT / NEWSLETTER
     ============================================ -->
<section class="connect" id="connect">
  <div class="container">
    <div class="connect-inner">
      <div class="connect-text">
        <span class="eyebrow" style="color: var(--gold-soft);">Stay Connected</span>
        <h2>Join our weekly newsletter</h2>
        <p>
          Every Thursday morning, we send out <em>The Harbor Light</em> — a short, friendly email with the
          upcoming sermon, ways to serve, upcoming events, and a weekly reflection from Pastor Jonathan.
          No spam, ever. Unsubscribe anytime.
        </p>
        <p style="margin-top: 1.5rem; font-size: 0.92rem; color: rgba(255,255,255,0.7);">
          Already 2,400+ members of our extended Grace Harbor family receive it.
        </p>
      </div>
      <form class="connect-form" onsubmit="event.preventDefault(); alert('Thank you! Please check your email to confirm your subscription.');">
        <h3>Subscribe to The Harbor Light</h3>
        <p>One email a week. Five minutes to read. Real encouragement for your week ahead.</p>
        <div class="form-row">
          <input type="text" class="form-input" placeholder="First name" required>
          <input type="text" class="form-input" placeholder="Last name" required>
        </div>
        <input type="email" class="form-input form-input-full" placeholder="Email address" required>
        <label class="form-check">
          <input type="checkbox" required>
          <span>I agree to receive email communications from Grace Harbor Fellowship. We respect your privacy.</span>
        </label>
        <button type="submit" class="btn btn-gold" style="width: 100%;">Subscribe Now</button>
      </form>
    </div>
  </div>
</section>

<!-- ============================================
     FOOTER
     ============================================ -->
<footer class="site-footer" id="contact">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <a href="#" class="brand">
          <div class="brand-logo" aria-hidden="true">GH</div>
          <div class="brand-text">
            <span class="brand-name">Grace Harbor Fellowship</span>
            <span class="brand-tagline">A welcoming community of faith</span>
          </div>
        </a>
        <p>
          A non-denominational Christian community in Asheville, North Carolina, committed to worship,
          discipleship, and serving our neighbors near and far. Come as you are.
        </p>
        <div class="footer-social">
          <a href="#" aria-label="Facebook">f</a>
          <a href="#" aria-label="Instagram">ig</a>
          <a href="#" aria-label="YouTube">yt</a>
          <a href="#" aria-label="Spotify">sp</a>
          <a href="#" aria-label="Apple Podcasts">ap</a>
        </div>
      </div>

      <div class="footer-col">
        <h4>Quick Links</h4>
        <ul>
          <li><a href="#welcome">About Us</a></li>
          <li><a href="#services">Service Times</a></li>
          <li><a href="#sermon">Sermon Archive</a></li>
          <li><a href="#events">Calendar</a></li>
          <li><a href="#ministries">Ministries</a></li>
          <li><a href="#youth">Youth &amp; Children</a></li>
          <li><a href="#faith">What We Believe</a></li>
        </ul>
      </div>

      <div class="footer-col">
        <h4>Get Connected</h4>
        <ul>
          <li><a href="#">Small Groups</a></li>
          <li><a href="#">Baptism Class</a></li>
          <li><a href="#">Membership</a></li>
          <li><a href="#">Volunteer Teams</a></li>
          <li><a href="#">Counseling Referrals</a></li>
          <li><a href="#">Benevolence Fund</a></li>
          <li><a href="#">Mission Trips</a></li>
        </ul>
      </div>

      <div class="footer-col">
        <h4>Visit Us</h4>
        <div class="footer-contact-item">
          <span class="ico">📍</span>
          <div><strong>Main Campus</strong>418 Harborview Drive<br>Asheville, NC 28801</div>
        </div>
        <div class="footer-contact-item">
          <span class="ico">📞</span>
          <div><strong>Phone</strong>(828) 555-0142</div>
        </div>
        <div class="footer-contact-item">
          <span class="ico">✉</span>
          <div><strong>Email</strong>office@graceharbor.org</div>
        </div>
        <div class="footer-contact-item">
          <span class="ico">⏰</span>
          <div><strong>Office Hours</strong>Mon – Fri · 9 AM – 5 PM</div>
        </div>
      </div>
    </div>

    <div class="footer-bottom">
      <div>© 2025 Grace Harbor Fellowship. All rights reserved.</div>
      <div class="footer-bottom-links">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Use</a>
        <a href="#">Accessibility</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>

<script>
  // Close mobile nav when a link is clicked
  document.querySelectorAll('.nav-primary a').forEach(link => {
    link.addEventListener('click', () => {
      document.querySelector('.nav-primary').classList.remove('open');
    });
  });
</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:42:05.653Z",
  "url": "https://benchmark.aimac.invalid/be688326f937b0a2e9566079bf02fbb024eba68e1eca5bfad80803064e3b0aff.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-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": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": []
    },
    {
      "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": "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=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            ".header-social > a[aria-label=\"Facebook\"][href=\"#\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"service-card-stream\" role=\"button\" tabindex=\"0\" aria-label=\"Play live stream\">\n          <div class=\"play-icon\">\u25b6</div>\n        </div>",
          "target": [
            ".service-card-stream"
          ]
        }
      ]
    },
    {
      "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=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            ".header-social > a[aria-label=\"Facebook\"][href=\"#\"]"
          ]
        }
      ]
    },
    {
      "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=\"service-card-stream\" role=\"button\" tabindex=\"0\" aria-label=\"Play live stream\">\n          <div class=\"play-icon\">\u25b6</div>\n        </div>",
          "target": [
            ".service-card-stream"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div class=\"brand-logo\" aria-hidden=\"true\">GH</div>",
          "target": [
            ".header-main > .brand[href=\"#\"] > .brand-logo[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            ".header-social > a[aria-label=\"Facebook\"][href=\"#\"]"
          ]
        }
      ]
    },
    {
      "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=\"service-card-stream\" role=\"button\" tabindex=\"0\" aria-label=\"Play live stream\">\n          <div class=\"play-icon\">\u25b6</div>\n        </div>",
          "target": [
            ".service-card-stream"
          ]
        }
      ]
    },
    {
      "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=\"service-card-stream\" role=\"button\" tabindex=\"0\" aria-label=\"Play live stream\">\n          <div class=\"play-icon\">\u25b6</div>\n        </div>",
          "target": [
            ".service-card-stream"
          ]
        }
      ]
    },
    {
      "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=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            ".header-social > a[aria-label=\"Facebook\"][href=\"#\"]"
          ]
        }
      ]
    },
    {
      "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=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            ".header-social > a[aria-label=\"Facebook\"][href=\"#\"]"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span class=\"eyebrow\" style=\"color: var(--gold-soft);\">Welcome Home</span>",
          "target": [
            ".hero-content > .eyebrow"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button type=\"submit\" class=\"btn btn-gold\" style=\"width: 100%;\">Subscribe Now</button>",
          "target": [
            "button[type=\"submit\"]"
          ]
        }
      ]
    },
    {
      "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>Find your place in a <em>community of grace</em></h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h3>This Sunday</h3>",
                  "target": [
                    ".service-card-header > h3"
                  ]
                },
                {
                  "html": "<h2>You are welcome here, just as you are.</h2>",
                  "target": [
                    ".welcome-text > h2"
                  ]
                },
                {
                  "html": "<h2>Service Times &amp; Locations</h2>",
                  "target": [
                    "#services > .container > .section-title > h2"
                  ]
                },
                {
                  "html": "<h3>Sunday Morning</h3>",
                  "target": [
                    ".service-tile:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Evening Prayer</h3>",
                  "target": [
                    ".service-tile:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Midweek Gathering</h3>",
                  "target": [
                    ".service-tile:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>Ministries for Every Season of Life</h2>",
                  "target": [
                    "#ministries > .container > .section-title > h2"
                  ]
                },
                {
                  "html": "<h3>Children's Ministry</h3>",
                  "target": [
                    ".ministry-card:nth-child(1) > .ministry-card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Youth Programs</h3>",
                  "target": [
                    ".ministry-card:nth-child(2) > .ministry-card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Music Ministry</h3>",
                  "target": [
                    ".ministry-card:nth-child(3) > .ministry-card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Outreach &amp; Mission</h3>",
                  "target": [
                    ".ministry-card:nth-child(4) > .ministry-card-body > h3"
                  ]
                },
                {
                  "html": "<h2>Recent Messages</h2>",
                  "target": [
                    "#sermon > .container > .section-title > h2"
                  ]
                },
                {
                  "html": "<h3>When the Waves Don't Stop: Finding God in the Storm</h3>",
                  "target": [
                    ".sermon-detail > h3"
                  ]
                },
                {
                  "html": "<h2>Upcoming Events &amp; Weekly Announcements</h2>",
                  "target": [
                    "#events > .container > .section-title > h2"
                  ]
                },
                {
                  "html": "<h4>Community Easter Egg Hunt</h4>",
                  "target": [
                    ".event-item:nth-child(1) > .event-info > h4"
                  ]
                },
                {
                  "html": "<h4>Good Friday Tenebrae Service</h4>",
                  "target": [
                    ".event-item:nth-child(2) > .event-info > h4"
                  ]
                },
                {
                  "html": "<h4>Youth Mission Trip Interest Meeting</h4>",
                  "target": [
                    ".event-item:nth-child(3) > .event-info > h4"
                  ]
                },
                {
                  "html": "<h4>Women's Spring Retreat: Breathe</h4>",
                  "target": [
                    ".event-item:nth-child(4) > .event-info > h4"
                  ]
                },
                {
                  "html": "<h3>Weekly Announcements</h3>",
                  "target": [
                    ".sidebar-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h4>New Alpha Course Starting April 8</h4>",
                  "target": [
                    ".announcement:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Food Pantry Drive This Month</h4>",
                  "target": [
                    ".announcement:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Congregational Meeting March 30</h4>",
                  "target": [
                    ".announcement:nth-child(4) > h4"
                  ]
                },
                {
                  "html": "<h3>Prayer Requests</h3>",
                  "target": [
                    ".prayer-card > h3"
                  ]
                },
                {
                  "html": "<h3>This Week's Schedule</h3>",
                  "target": [
                    ".sidebar-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>What Our Congregation Is Saying</h2>",
                  "target": [
                    "#youth > .container > .section-title > h2"
                  ]
                },
                {
                  "html": "<h2>Visiting Grace Harbor</h2>",
                  "target": [
                    "#faith > .container > .section-title > h2"
                  ]
                },
                {
                  "html": "<h3>Still have questions?</h3>",
                  "target": [
                    ".faq-aside > h3"
                  ]
                },
                {
                  "html": "<h2>Join our weekly newsletter</h2>",
                  "target": [
                    ".connect-text > h2"
                  ]
                },
                {
                  "html": "<h3>Subscribe to The Harbor Light</h3>",
                  "target": [
                    "form > h3"
                  ]
                },
                {
                  "html": "<h4>Quick Links</h4>",
                  "target": [
                    ".footer-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Get Connected</h4>",
                  "target": [
                    ".footer-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Visit Us</h4>",
                  "target": [
                    ".footer-col:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f8f5f0",
                "bgColor": "#0f2641",
                "contrastRatio": 14.05,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 14.05"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span>\ud83d\udccd 418 Harborview Drive, Asheville, NC</span>",
          "target": [
            ".header-top-info > span:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" class=\"form-input\" placeholder=\"First name\" required=\"\">",
          "target": [
            "input[placeholder=\"First name\"]"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://picsum.photos/600/750\" alt=\"Pastor Jonathan Wells preaching in the sanctuary at Grace Harbor Fellowship\" loading=\"lazy\">",
          "target": [
            "img[src=\"https://picsum.photos/600/750\"]"
          ]
        }
      ]
    },
    {
      "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": "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\" class=\"form-input\" placeholder=\"First name\" required=\"\">",
          "target": [
            "input[placeholder=\"First name\"]"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"ministry-card-body\">",
                  "target": [
                    ".ministry-card:nth-child(1) > .ministry-card-body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"ministry-card-link\">Learn more \u2192</a>",
          "target": [
            ".ministry-card:nth-child(1) > .ministry-card-body > .ministry-card-link[href=\"#\"]"
          ]
        }
      ]
    },
    {
      "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"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "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=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            ".header-social > a[aria-label=\"Facebook\"][href=\"#\"]"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul>",
          "target": [
            "nav > ul"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#welcome\">About</a></li>",
          "target": [
            "nav > ul > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"service-card-stream\" role=\"button\" tabindex=\"0\" aria-label=\"Play live stream\">\n          <div class=\"play-icon\">\u25b6</div>\n        </div>",
          "target": [
            ".service-card-stream"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>What should I wear to attend a service?</summary>",
          "target": [
            "details[open=\"\"] > summary"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 26,
                "height": 26
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (26px by 26px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
          "target": [
            ".header-social > a[aria-label=\"Facebook\"][href=\"#\"]"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "20.4pt (27.2px)",
                "fontWeight": "bold",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"brand-logo\" aria-hidden=\"true\">GH</div>",
                  "target": [
                    ".header-main > .brand[href=\"#\"] > .brand-logo[aria-hidden=\"true\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"brand-logo\" aria-hidden=\"true\">GH</div>",
          "target": [
            ".header-main > .brand[href=\"#\"] > .brand-logo[aria-hidden=\"true\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#ffffff",
                "contrastRatio": 2.25,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"welcome\" id=\"welcome\">",
                  "target": [
                    "#welcome"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">From Our Pastor</span>",
          "target": [
            ".welcome-text > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#f8f5f0",
                "contrastRatio": 2.06,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"services\" id=\"services\">",
                  "target": [
                    "#services"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.06 (foreground color: #c9a961, background color: #f8f5f0, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Gather With Us</span>",
          "target": [
            "#services > .container > .section-title > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.06 (foreground color: #c9a961, background color: #f8f5f0, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#ffffff",
                "contrastRatio": 2.25,
                "fontSize": "15.6pt (20.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"service-tile\">",
                  "target": [
                    ".service-tile:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 15.6pt (20.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"service-tile-time\">9:00 &amp; 10:45 AM</div>",
          "target": [
            ".service-tile:nth-child(1) > .service-tile-time"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 15.6pt (20.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#ffffff",
                "contrastRatio": 2.25,
                "fontSize": "15.6pt (20.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"service-tile\">",
                  "target": [
                    ".service-tile:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 15.6pt (20.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"service-tile-time\">6:00 PM</div>",
          "target": [
            ".service-tile:nth-child(2) > .service-tile-time"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 15.6pt (20.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#ffffff",
                "contrastRatio": 2.25,
                "fontSize": "15.6pt (20.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"service-tile\">",
                  "target": [
                    ".service-tile:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 15.6pt (20.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"service-tile-time\">Wed \u00b7 6:30 PM</div>",
          "target": [
            ".service-tile:nth-child(3) > .service-tile-time"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 15.6pt (20.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#ffffff",
                "contrastRatio": 2.25,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"ministries\" id=\"ministries\">",
                  "target": [
                    "#ministries"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Get Involved</span>",
          "target": [
            "#ministries > .container > .section-title > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#f8f5f0",
                "contrastRatio": 2.06,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"events\" id=\"events\">",
                  "target": [
                    "#events"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.06 (foreground color: #c9a961, background color: #f8f5f0, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">What's Happening</span>",
          "target": [
            "#events > .container > .section-title > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.06 (foreground color: #c9a961, background color: #f8f5f0, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#ffffff",
                "contrastRatio": 2.25,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"date\">Posted March 18</span>",
          "target": [
            ".announcement:nth-child(2) > .date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#ffffff",
                "contrastRatio": 2.25,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"date\">Posted March 15</span>",
          "target": [
            ".announcement:nth-child(3) > .date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#ffffff",
                "contrastRatio": 2.25,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"date\">Posted March 10</span>",
          "target": [
            ".announcement:nth-child(4) > .date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#ffffff",
                "contrastRatio": 2.25,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"testimonials\" id=\"youth\">",
                  "target": [
                    "#youth"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Stories of Grace</span>",
          "target": [
            "#youth > .container > .section-title > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#f8f5f0",
                "contrastRatio": 2.06,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"faq\" id=\"faith\">",
                  "target": [
                    "#faith"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.06 (foreground color: #c9a961, background color: #f8f5f0, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Common Questions</span>",
          "target": [
            "#faith > .container > .section-title > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.06 (foreground color: #c9a961, background color: #f8f5f0, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a961",
                "bgColor": "#ffffff",
                "contrastRatio": 2.25,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"faq-contact-card\">\n          <strong>Speak with a Pastor</strong>\n          <a href=\"tel:+18285550142\">(828) 555-0142</a>\n          <p style=\"margin-top: 0.4rem; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0;\">Monday \u2013 Friday, 9 AM to 5 PM</p>\n        </div>",
                  "target": [
                    ".faq-contact-card"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"tel:+18285550142\">(828) 555-0142</a>",
          "target": [
            "a[href=\"tel:+18285550142\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.25 (foreground color: #c9a961, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 8657
      },
      {
        "y": 576,
        "height": 8657
      },
      {
        "y": 1152,
        "height": 8657
      },
      {
        "y": 1728,
        "height": 8657
      },
      {
        "y": 2304,
        "height": 8657
      },
      {
        "y": 2880,
        "height": 8657
      },
      {
        "y": 3456,
        "height": 8657
      },
      {
        "y": 4032,
        "height": 8657
      },
      {
        "y": 4608,
        "height": 8657
      },
      {
        "y": 5184,
        "height": 8657
      },
      {
        "y": 5760,
        "height": 8657
      },
      {
        "y": 6336,
        "height": 8657
      },
      {
        "y": 6912,
        "height": 8657
      },
      {
        "y": 7488,
        "height": 8657
      },
      {
        "y": 7937,
        "height": 8657
      }
    ],
    "scans": 16,
    "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: "Contact", "Youth", "Our Faith".
-   **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: "Youth Programs", "Service Times", "Music Ministry".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "congregation", "outreach", "prayer".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Contact Pastor", "Join Worship", "Attend Event".
-   **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: "service live stream".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "upcoming events", "weekly announcements", "service schedule".
-   **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.