MoonshotAI Kimi K2.7 Code – Society

via Moonshot AI · Generated

  • AIMAC Debt 5.27
  • Cost $0.13
  • Total Violations 31
  • HTML Size 59 KB
  • Em Dashes 5

Screenshot

View MoonshotAI Kimi K2.7 Code Society page View Live Page

Accessibility Issues Found

31 Serious

  • color-contrast serious 31 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <p class="text-xs text-harbor-600 font-medium tracking-wide">WHERE COMMUNITIES ANCHOR, MOVEMENTS LAUNCH</p>

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>Civic Harbor — Where Communities Anchor, Movements Launch</title>
    <meta name="description" content="Civic Harbor is a national coalition advancing equity, civic participation, and community-driven policy through collective action and coalition building.">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        harbor: {
                            900: '#0f172a',
                            800: '#1e293b',
                            700: '#334155',
                            600: '#0d9488',
                            500: '#14b8a6',
                            100: '#f0fdfa',
                            50: '#f8fafc'
                        },
                        accent: {
                            500: '#f59e0b',
                            600: '#d97706'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        display: ['Merriweather', 'Georgia', 'serif']
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', system-ui, sans-serif; }
        h1, h2, h3, .font-display { font-family: 'Merriweather', Georgia, serif; }
        .accordion-content {
            transition: max-height 0.3s ease-out, padding 0.3s ease-out;
            max-height: 0;
            overflow: hidden;
        }
        .accordion-content.active {
            max-height: 500px;
        }
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-harbor-50 text-harbor-900 antialiased">

    <!-- Skip to main content for accessibility -->
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-harbor-600 text-white px-4 py-2 rounded z-50">Skip to main content</a>

    <!-- HEADER -->
    <header class="bg-white shadow-sm sticky top-0 z-40">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20">
                <!-- Logo -->
                <a href="#" class="flex items-center gap-3 group">
                    <img src="https://placehold.co/48x48/0d9488/ffffff?text=CH&font=montserrat" alt="Civic Harbor logo" class="w-10 h-10 rounded-lg shadow group-hover:shadow-md transition">
                    <div>
                        <p class="text-xl font-bold text-harbor-900 leading-tight">Civic Harbor</p>
                        <p class="text-xs text-harbor-600 font-medium tracking-wide">WHERE COMMUNITIES ANCHOR, MOVEMENTS LAUNCH</p>
                    </div>
                </a>

                <!-- Desktop Navigation -->
                <nav class="hidden lg:flex items-center gap-1" aria-label="Primary">
                    <a href="#about" class="px-3 py-2 text-sm font-medium text-harbor-700 hover:text-harbor-600 hover:bg-harbor-100 rounded-md transition">About</a>
                    <a href="#issues" class="px-3 py-2 text-sm font-medium text-harbor-700 hover:text-harbor-600 hover:bg-harbor-100 rounded-md transition">Issues</a>
                    <a href="#events" class="px-3 py-2 text-sm font-medium text-harbor-700 hover:text-harbor-600 hover:bg-harbor-100 rounded-md transition">Events</a>
                    <a href="#news" class="px-3 py-2 text-sm font-medium text-harbor-700 hover:text-harbor-600 hover:bg-harbor-100 rounded-md transition">News</a>
                    <a href="#action" class="px-3 py-2 text-sm font-medium text-harbor-700 hover:text-harbor-600 hover:bg-harbor-100 rounded-md transition">Action</a>
                    <a href="#join" class="ml-2 px-4 py-2 text-sm font-semibold text-white bg-harbor-600 hover:bg-harbor-700 rounded-md transition shadow-sm">Join</a>
                    <a href="#donate" class="ml-1 px-4 py-2 text-sm font-semibold text-harbor-900 bg-accent-500 hover:bg-accent-600 rounded-md transition shadow-sm">Donate</a>
                </nav>

                <!-- Mobile menu button -->
                <button id="mobile-menu-btn" class="lg:hidden p-2 rounded-md text-harbor-700 hover:bg-harbor-100 focus:outline-none focus:ring-2 focus:ring-harbor-600" aria-expanded="false" aria-controls="mobile-menu" aria-label="Open main menu">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>

        <!-- Mobile Navigation -->
        <div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-100">
            <div class="px-4 pt-2 pb-4 space-y-1">
                <a href="#about" class="block px-3 py-2 text-base font-medium text-harbor-700 hover:bg-harbor-100 rounded-md">About</a>
                <a href="#issues" class="block px-3 py-2 text-base font-medium text-harbor-700 hover:bg-harbor-100 rounded-md">Issues</a>
                <a href="#events" class="block px-3 py-2 text-base font-medium text-harbor-700 hover:bg-harbor-100 rounded-md">Events</a>
                <a href="#news" class="block px-3 py-2 text-base font-medium text-harbor-700 hover:bg-harbor-100 rounded-md">News</a>
                <a href="#action" class="block px-3 py-2 text-base font-medium text-harbor-700 hover:bg-harbor-100 rounded-md">Action</a>
                <a href="#join" class="block px-3 py-2 text-base font-semibold text-white bg-harbor-600 rounded-md">Join</a>
                <a href="#donate" class="block px-3 py-2 text-base font-semibold text-harbor-900 bg-accent-500 rounded-md">Donate</a>
            </div>
        </div>
    </header>

    <main id="main-content">

        <!-- HERO SECTION -->
        <section id="about" class="relative bg-harbor-900 overflow-hidden">
            <div class="absolute inset-0">
                <img src="https://picsum.photos/1600/900?grayscale" alt="Community gathering in urban plaza" class="w-full h-full object-cover opacity-30">
                <div class="absolute inset-0 bg-gradient-to-r from-harbor-900 via-harbor-900/90 to-harbor-900/70"></div>
            </div>
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
                <div class="max-w-3xl reveal visible">
                    <span class="inline-block px-3 py-1 mb-6 text-xs font-bold tracking-wider text-harbor-100 bg-harbor-600/30 border border-harbor-500/40 rounded-full uppercase">National Coalition for Civic Action</span>
                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">Building Coalitions. Advancing Equity. Amplifying Voices.</h1>
                    <p class="text-lg sm:text-xl text-gray-200 leading-relaxed mb-8">Civic Harbor is a national coalition of neighborhood organizers, policy advocates, and cultural leaders working at the intersection of justice, democracy, and community care. We believe lasting change happens when everyday people have the tools, connections, and platforms to turn shared concerns into collective action.</p>
                    <p class="text-base text-gray-300 leading-relaxed mb-10 max-w-2xl">From grassroots mutual aid networks to city hall testimony, our members are advancing housing justice, climate equity, immigrant rights, and civic participation in communities across the country. Together, we are building the infrastructure for a more inclusive, responsive democracy.</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#join" class="inline-flex items-center px-6 py-3 text-base font-semibold text-white bg-harbor-600 hover:bg-harbor-500 rounded-lg transition shadow-lg">Join the Movement</a>
                        <a href="#issues" class="inline-flex items-center px-6 py-3 text-base font-semibold text-harbor-900 bg-white hover:bg-gray-100 rounded-lg transition shadow-lg">Explore Our Issues</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- IMPACT STATS -->
        <section class="bg-white border-b border-gray-200">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                    <div class="reveal">
                        <p class="text-3xl lg:text-4xl font-bold text-harbor-600">47K+</p>
                        <p class="text-sm font-medium text-harbor-700 mt-1">Active Members</p>
                    </div>
                    <div class="reveal">
                        <p class="text-3xl lg:text-4xl font-bold text-harbor-600">180+</p>
                        <p class="text-sm font-medium text-harbor-700 mt-1">Local Chapters</p>
                    </div>
                    <div class="reveal">
                        <p class="text-3xl lg:text-4xl font-bold text-harbor-600">$2.4M</p>
                        <p class="text-sm font-medium text-harbor-700 mt-1">Resources Distributed</p>
                    </div>
                    <div class="reveal">
                        <p class="text-3xl lg:text-4xl font-bold text-harbor-600">36</p>
                        <p class="text-sm font-medium text-harbor-700 mt-1">Policy Wins This Year</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- CURRENT ISSUES -->
        <section id="issues" class="py-20 lg:py-28">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-3xl mx-auto text-center mb-16 reveal">
                    <h2 class="text-3xl sm:text-4xl font-bold text-harbor-900 mb-4">Current Issues We Are Fighting For</h2>
                    <p class="text-lg text-harbor-700 leading-relaxed">Our coalition organizes around the issues that shape daily life in our communities. We develop equity initiatives, produce policy briefs, and support local campaigns that center the people most affected by systemic inequity.</p>
                </div>

                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                    <!-- Issue 1 -->
                    <article class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal">
                        <img src="https://picsum.photos/600/400?random=1" alt="Housing justice community meeting" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <div class="w-10 h-10 bg-harbor-100 rounded-lg flex items-center justify-center mb-4">
                                <svg class="w-5 h-5 text-harbor-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                            </div>
                            <h3 class="text-xl font-bold text-harbor-900 mb-3">Housing Justice</h3>
                            <p class="text-harbor-700 text-sm leading-relaxed mb-4">Everyone deserves a safe, affordable place to live. We organize tenant unions, advocate for rent stabilization, and fight displacement in neighborhoods undergoing rapid development.</p>
                            <p class="text-harbor-700 text-sm leading-relaxed mb-6">Our housing justice work is grounded in community-led planning, legal empowerment, and coalition building with labor, faith, and environmental partners.</p>
                            <a href="#" class="text-harbor-600 font-semibold text-sm hover:text-harbor-800 inline-flex items-center">Learn more <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></a>
                        </div>
                    </article>

                    <!-- Issue 2 -->
                    <article class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal">
                        <img src="https://picsum.photos/600/400?random=2" alt="Climate equity action" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <div class="w-10 h-10 bg-harbor-100 rounded-lg flex items-center justify-center mb-4">
                                <svg class="w-5 h-5 text-harbor-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064"></path></svg>
                            </div>
                            <h3 class="text-xl font-bold text-harbor-900 mb-3">Climate Equity</h3>
                            <p class="text-harbor-700 text-sm leading-relaxed mb-4">The climate crisis is not felt equally. Frontline communities bear the brunt of pollution, extreme heat, and underinvestment in green infrastructure.</p>
                            <p class="text-harbor-700 text-sm leading-relaxed mb-6">We advance climate equity by supporting community-owned solar, environmental justice mapping, and policies that prioritize public health over profit.</p>
                            <a href="#" class="text-harbor-600 font-semibold text-sm hover:text-harbor-800 inline-flex items-center">Learn more <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></a>
                        </div>
                    </article>

                    <!-- Issue 3 -->
                    <article class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal">
                        <img src="https://picsum.photos/600/400?random=3" alt="Civic participation event" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <div class="w-10 h-10 bg-harbor-100 rounded-lg flex items-center justify-center mb-4">
                                <svg class="w-5 h-5 text-harbor-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            </div>
                            <h3 class="text-xl font-bold text-harbor-900 mb-3">Civic Participation</h3>
                            <p class="text-harbor-700 text-sm leading-relaxed mb-4">Democracy works best when everyone has a voice. We register voters, protect voting rights, and train community members to engage in public decision-making.</p>
                            <p class="text-harbor-700 text-sm leading-relaxed mb-6">Our civic academies teach residents how to navigate city budgets, testify at hearings, and hold elected officials accountable year-round.</p>
                            <a href="#" class="text-harbor-600 font-semibold text-sm hover:text-harbor-800 inline-flex items-center">Learn more <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></a>
                        </div>
                    </article>

                    <!-- Issue 4 -->
                    <article class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal">
                        <img src="https://picsum.photos/600/400?random=4" alt="Immigrant rights rally" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <div class="w-10 h-10 bg-harbor-100 rounded-lg flex items-center justify-center mb-4">
                                <svg class="w-5 h-5 text-harbor-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                            </div>
                            <h3 class="text-xl font-bold text-harbor-900 mb-3">Immigrant Rights</h3>
                            <p class="text-harbor-700 text-sm leading-relaxed mb-4">We defend the dignity and rights of immigrants through know-your-rights trainings, legal referral networks, and campaigns for inclusive municipal policies.</p>
                            <p class="text-harbor-700 text-sm leading-relaxed mb-6">Our immigrant rights coalition bridges language, culture, and geography to ensure newcomer communities are seen, heard, and protected.</p>
                            <a href="#" class="text-harbor-600 font-semibold text-sm hover:text-harbor-800 inline-flex items-center">Learn more <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <!-- MOVEMENT NEWS -->
        <section id="news" class="bg-harbor-100 py-20 lg:py-28">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-12 reveal">
                    <div class="max-w-2xl">
                        <h2 class="text-3xl sm:text-4xl font-bold text-harbor-900 mb-4">Movement News</h2>
                        <p class="text-lg text-harbor-700 leading-relaxed">Stay informed about the latest victories, campaigns, and analysis from across the Civic Harbor network. Our news coverage centers the voices of organizers and community members on the front lines.</p>
                    </div>
                    <a href="#" class="mt-6 md:mt-0 inline-flex items-center text-harbor-600 font-semibold hover:text-harbor-800">View all news <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></a>
                </div>

                <div class="grid lg:grid-cols-3 gap-8">
                    <!-- Featured News -->
                    <article class="lg:col-span-2 bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition reveal">
                        <div class="md:flex h-full">
                            <div class="md:w-1/2">
                                <img src="https://picsum.photos/800/600?random=5" alt="Coalition members celebrating policy win" class="w-full h-full min-h-[250px] object-cover">
                            </div>
                            <div class="md:w-1/2 p-8 flex flex-col justify-center">
                                <span class="text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2">Policy Victory</span>
                                <h3 class="text-2xl font-bold text-harbor-900 mb-4">City Council Passes Nation's Strongest Tenant Protection Package After Two-Year Coalition Campaign</h3>
                                <p class="text-harbor-700 leading-relaxed mb-4">After twenty-four months of town halls, rallies, and direct testimony, the Metro Tenant Coalition—anchored by Civic Harbor members—secured landmark protections including just-cause eviction standards, rent caps for older buildings, and a dedicated tenant legal defense fund.</p>
                                <p class="text-harbor-700 leading-relaxed mb-6">The victory demonstrates what is possible when housing advocates, labor unions, faith leaders, and public health experts align around a shared agenda. Organizers say the next step is ensuring landlords comply and tenants know their rights.</p>
                                <a href="#" class="text-harbor-600 font-semibold hover:text-harbor-800 inline-flex items-center mt-auto">Read the full story <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></a>
                            </div>
                        </div>
                    </article>

                    <!-- Side News -->
                    <div class="space-y-8">
                        <article class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition reveal">
                            <img src="https://picsum.photos/600/350?random=6" alt="Youth civic leadership program" class="w-full h-44 object-cover">
                            <div class="p-6">
                                <span class="text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2">Program Launch</span>
                                <h3 class="text-lg font-bold text-harbor-900 mb-2">Youth Civic Leadership Academy Expands to 12 New Cities</h3>
                                <p class="text-harbor-700 text-sm leading-relaxed mb-4">The free, six-week program trains young people in community organizing, media advocacy, and local government engagement.</p>
                                <a href="#" class="text-harbor-600 text-sm font-semibold hover:text-harbor-800">Read more</a>
                            </div>
                        </article>

                        <article class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition reveal">
                            <img src="https://picsum.photos/600/350?random=7" alt="Community health fair" class="w-full h-44 object-cover">
                            <div class="p-6">
                                <span class="text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2">Field Report</span>
                                <h3 class="text-lg font-bold text-harbor-900 mb-2">Mobile Justice Clinic Serves 3,000 Residents in First Quarter</h3>
                                <p class="text-harbor-700 text-sm leading-relaxed mb-4">Volunteer attorneys and organizers brought legal aid, voter registration, and resource navigation directly to neighborhoods.</p>
                                <a href="#" class="text-harbor-600 text-sm font-semibold hover:text-harbor-800">Read more</a>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </section>

        <!-- COMMUNITY STORIES / TESTIMONIALS -->
        <section class="py-20 lg:py-28">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-3xl mx-auto text-center mb-16 reveal">
                    <h2 class="text-3xl sm:text-4xl font-bold text-harbor-900 mb-4">Community Stories</h2>
                    <p class="text-lg text-harbor-700 leading-relaxed">Behind every campaign are people who stepped up, spoke out, and changed their communities. Here are a few of their stories.</p>
                </div>

                <div class="grid md:grid-cols-3 gap-8">
                    <!-- Testimonial 1 -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 reveal">
                        <div class="flex items-center gap-4 mb-6">
                            <img src="https://i.pravatar.cc/80?u=marcus" alt="Marcus Chen" class="w-14 h-14 rounded-full object-cover">
                            <div>
                                <p class="font-bold text-harbor-900">Marcus Chen</p>
                                <p class="text-sm text-harbor-600">Tenant Organizer, Riverside</p>
                            </div>
                        </div>
                        <p class="text-harbor-700 leading-relaxed italic mb-4">"Before Civic Harbor, our tenant association was isolated. Through coalition building, we connected with legal clinics, labor allies, and city councilors who actually listened. Last month, we stopped a mass eviction."</p>
                        <p class="text-harbor-700 leading-relaxed text-sm">Marcus now trains other organizers in negotiation tactics and knows-your-rights education.</p>
                    </div>

                    <!-- Testimonial 2 -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 reveal">
                        <div class="flex items-center gap-4 mb-6">
                            <img src="https://i.pravatar.cc/80?u=amina" alt="Amina Diallo" class="w-14 h-14 rounded-full object-cover">
                            <div>
                                <p class="font-bold text-harbor-900">Amina Diallo</p>
                                <p class="text-sm text-harbor-600">Youth Fellow, Lakewood</p>
                            </div>
                        </div>
                        <p class="text-harbor-700 leading-relaxed italic mb-4">"The Civic Leadership Academy taught me that my voice matters in city hall. I testified for the first time about school funding, and the board adopted one of our recommendations."</p>
                        <p class="text-harbor-700 leading-relaxed text-sm">Amina is now leading a student-led civic engagement campaign at her high school.</p>
                    </div>

                    <!-- Testimonial 3 -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 reveal">
                        <div class="flex items-center gap-4 mb-6">
                            <img src="https://i.pravatar.cc/80?u=rosa" alt="Rosa Velasquez" class="w-14 h-14 rounded-full object-cover">
                            <div>
                                <p class="font-bold text-harbor-900">Rosa Velasquez</p>
                                <p class="text-sm text-harbor-600">Climate Justice Advocate, Harborview</p>
                            </div>
                        </div>
                        <p class="text-harbor-700 leading-relaxed italic mb-4">"Our neighborhood had the highest asthma rates in the county but the fewest trees. Civic Harbor helped us win a green infrastructure plan and a community garden that also serves as a cooling center."</p>
                        <p class="text-harbor-700 leading-relaxed text-sm">Rosa coordinates a bilingual environmental justice working group.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- ENGAGEMENT: REPRESENTATIVE LOCATOR -->
        <section id="action" class="bg-harbor-800 py-20 lg:py-28">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid lg:grid-cols-2 gap-12 items-center">
                    <div class="reveal">
                        <h2 class="text-3xl sm:text-4xl font-bold text-white mb-6">Find Your Representatives. Make Your Voice Heard.</h2>
                        <p class="text-lg text-gray-300 leading-relaxed mb-6">Meaningful civic engagement starts with knowing who represents you. Enter your ZIP code below to discover your elected officials at the local, state, and federal levels, along with direct contact information and upcoming public meetings.</p>
                        <p class="text-base text-gray-300 leading-relaxed mb-8">This tool is designed to lower the barrier between residents and government. Once you know who to contact, you can call, email, attend a town hall, or organize a meeting with neighbors. Every message matters.</p>
                        <ul class="space-y-3 text-gray-300 mb-8">
                            <li class="flex items-start"><svg class="w-5 h-5 text-harbor-500 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>Instantly locate federal, state, and local representatives</li>
                            <li class="flex items-start"><svg class="w-5 h-5 text-harbor-500 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>Access phone numbers, emails, and social media</li>
                            <li class="flex items-start"><svg class="w-5 h-5 text-harbor-500 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>Discover upcoming town halls and committee hearings</li>
                        </ul>
                    </div>

                    <div class="bg-white rounded-xl shadow-2xl p-8 reveal">
                        <h3 class="text-xl font-bold text-harbor-900 mb-4">Representative Locator</h3>
                        <p class="text-harbor-700 text-sm mb-6">Enter a U.S. ZIP code to see a sample representative lookup. In a live deployment, this connects to the Cicero or Google Civic Information API.</p>
                        
                        <form id="locator-form" class="mb-6">
                            <label for="zipcode" class="block text-sm font-medium text-harbor-700 mb-2">ZIP Code</label>
                            <div class="flex gap-3">
                                <input type="text" id="zipcode" name="zipcode" placeholder="90210" maxlength="5" pattern="[0-9]{5}" class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-harbor-600 focus:border-harbor-600 outline-none" required>
                                <button type="submit" class="px-6 py-3 bg-harbor-600 hover:bg-harbor-700 text-white font-semibold rounded-lg transition">Find</button>
                            </div>
                            <p id="zip-error" class="text-red-600 text-sm mt-2 hidden">Please enter a valid 5-digit ZIP code.</p>
                        </form>

                        <div id="rep-results" class="hidden space-y-4">
                            <div class="p-4 bg-harbor-50 rounded-lg border border-harbor-100">
                                <p class="text-xs font-bold text-harbor-600 uppercase tracking-wider mb-1">Federal Representative</p>
                                <p class="font-bold text-harbor-900" id="rep-name">Rep. Sample Name</p>
                                <p class="text-sm text-harbor-700" id="rep-district">U.S. House District 12</p>
                                <div class="mt-3 flex flex-wrap gap-2">
                                    <a href="#" class="text-xs px-3 py-1 bg-white border border-gray-300 rounded-full text-harbor-700 hover:bg-gray-50">Call Office</a>
                                    <a href="#" class="text-xs px-3 py-1 bg-white border border-gray-300 rounded-full text-harbor-700 hover:bg-gray-50">Send Email</a>
                                    <a href="#" class="text-xs px-3 py-1 bg-white border border-gray-300 rounded-full text-harbor-700 hover:bg-gray-50">View Schedule</a>
                                </div>
                            </div>
                            <div class="p-4 bg-harbor-50 rounded-lg border border-harbor-100">
                                <p class="text-xs font-bold text-harbor-600 uppercase tracking-wider mb-1">State Senator</p>
                                <p class="font-bold text-harbor-900" id="sen-name">Sen. Sample Name</p>
                                <p class="text-sm text-harbor-700" id="sen-district">State Senate District 8</p>
                                <div class="mt-3 flex flex-wrap gap-2">
                                    <a href="#" class="text-xs px-3 py-1 bg-white border border-gray-300 rounded-full text-harbor-700 hover:bg-gray-50">Call Office</a>
                                    <a href="#" class="text-xs px-3 py-1 bg-white border border-gray-300 rounded-full text-harbor-700 hover:bg-gray-50">Send Email</a>
                                </div>
                            </div>
                            <div class="p-4 bg-harbor-50 rounded-lg border border-harbor-100">
                                <p class="text-xs font-bold text-harbor-600 uppercase tracking-wider mb-1">Local Official</p>
                                <p class="font-bold text-harbor-900" id="local-name">Councilmember Sample Name</p>
                                <p class="text-sm text-harbor-700" id="local-district">City Council Ward 3</p>
                            </div>
                        </div>

                        <div id="rep-loading" class="hidden text-center py-8">
                            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-harbor-600"></div>
                            <p class="text-sm text-harbor-600 mt-2">Looking up representatives...</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- EVENTS -->
        <section id="events" class="py-20 lg:py-28">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-12 reveal">
                    <div class="max-w-2xl">
                        <h2 class="text-3xl sm:text-4xl font-bold text-harbor-900 mb-4">Upcoming Events</h2>
                        <p class="text-lg text-harbor-700 leading-relaxed">Connect with organizers, attend trainings, and take action at events across the country. Whether you are new to movement work or a seasoned advocate, there is a place for you.</p>
                    </div>
                    <a href="#" class="mt-6 md:mt-0 inline-flex items-center text-harbor-600 font-semibold hover:text-harbor-800">View full calendar <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></a>
                </div>

                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- Event 1 -->
                    <article class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal">
                        <div class="bg-harbor-600 text-white px-6 py-4">
                            <p class="text-3xl font-bold">14</p>
                            <p class="text-sm uppercase tracking-wider">November 2024</p>
                        </div>
                        <div class="p-6">
                            <p class="text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2">Virtual Training</p>
                            <h3 class="text-xl font-bold text-harbor-900 mb-3">Organizing 101: From Concern to Campaign</h3>
                            <p class="text-harbor-700 text-sm leading-relaxed mb-4">Learn the fundamentals of community organizing, including power mapping, one-on-one conversations, and campaign strategy. Open to all experience levels.</p>
                            <div class="flex items-center text-sm text-harbor-700 mb-6">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>6:00 PM ET • Online
                            </div>
                            <a href="#" class="block w-full text-center px-4 py-2 border-2 border-harbor-600 text-harbor-600 font-semibold rounded-lg hover:bg-harbor-600 hover:text-white transition">Register Now</a>
                        </div>
                    </article>

                    <!-- Event 2 -->
                    <article class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal">
                        <div class="bg-harbor-600 text-white px-6 py-4">
                            <p class="text-3xl font-bold">22</p>
                            <p class="text-sm uppercase tracking-wider">November 2024</p>
                        </div>
                        <div class="p-6">
                            <p class="text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2">In-Person Rally</p>
                            <h3 class="text-xl font-bold text-harbor-900 mb-3">Housing Justice March: Homes for All</h3>
                            <p class="text-harbor-700 text-sm leading-relaxed mb-4">Join hundreds of tenants, housing advocates, and allies as we march to demand affordable housing, eviction protections, and community control of land.</p>
                            <div class="flex items-center text-sm text-harbor-700 mb-6">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>City Hall Plaza, Metro City
                            </div>
                            <a href="#" class="block w-full text-center px-4 py-2 border-2 border-harbor-600 text-harbor-600 font-semibold rounded-lg hover:bg-harbor-600 hover:text-white transition">RSVP</a>
                        </div>
                    </article>

                    <!-- Event 3 -->
                    <article class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal">
                        <div class="bg-harbor-600 text-white px-6 py-4">
                            <p class="text-3xl font-bold">05</p>
                            <p class="text-sm uppercase tracking-wider">December 2024</p>
                        </div>
                        <div class="p-6">
                            <p class="text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2">Workshop</p>
                            <h3 class="text-xl font-bold text-harbor-900 mb-3">Climate Equity Policy Workshop</h3>
                            <p class="text-harbor-700 text-sm leading-relaxed mb-4">A hands-on session for residents and organizers interested in shaping local climate policy. Topics include green infrastructure, air quality monitoring, and environmental justice frameworks.</p>
                            <div class="flex items-center text-sm text-harbor-700 mb-6">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>2:00 PM ET • Community Center
                            </div>
                            <a href="#" class="block w-full text-center px-4 py-2 border-2 border-harbor-600 text-harbor-600 font-semibold rounded-lg hover:bg-harbor-600 hover:text-white transition">Sign Up</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <!-- JOIN / NEWSLETTER -->
        <section id="join" class="bg-harbor-600 py-20 lg:py-28">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal">
                <h2 class="text-3xl sm:text-4xl font-bold text-white mb-6">Join the Movement for a Just Society</h2>
                <p class="text-lg text-harbor-100 leading-relaxed mb-8">Become a member of Civic Harbor to receive action alerts, event invitations, and organizing resources tailored to your community. Membership is free, and every new voice strengthens our collective impact.</p>
                <p class="text-base text-harbor-100 leading-relaxed mb-10">When you join, you are not signing up for a mailing list—you are plugging into a network of people committed to equity, dignity, and democratic participation. Together, we can turn concern into action and action into lasting change.</p>
                
                <form class="max-w-xl mx-auto bg-white p-2 rounded-lg shadow-lg flex flex-col sm:flex-row gap-2" onsubmit="event.preventDefault(); alert('Thank you for joining! This is a demo form.');">
                    <label for="join-email" class="sr-only">Email address</label>
                    <input type="email" id="join-email" placeholder="Enter your email address" class="flex-1 px-4 py-3 rounded-md outline-none text-harbor-900" required>
                    <button type="submit" class="px-6 py-3 bg-harbor-900 hover:bg-harbor-800 text-white font-semibold rounded-md transition">Join Now</button>
                </form>
                <p class="text-sm text-harbor-100 mt-4">By joining, you agree to receive updates from Civic Harbor. You can unsubscribe at any time.</p>
            </div>
        </section>

        <!-- FAQ ACCORDION -->
        <section class="py-20 lg:py-28">
            <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12 reveal">
                    <h2 class="text-3xl sm:text-4xl font-bold text-harbor-900 mb-4">Frequently Asked Questions</h2>
                    <p class="text-lg text-harbor-700 leading-relaxed">Have questions about Civic Harbor, membership, or how to get involved? Find answers below.</p>
                </div>

                <div class="space-y-4 reveal">
                    <!-- FAQ Item 1 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                        <button class="accordion-btn w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none focus:bg-gray-50" aria-expanded="false">
                            <span class="font-semibold text-harbor-900">What does Civic Harbor do?</span>
                            <svg class="accordion-icon w-5 h-5 text-harbor-600 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div class="accordion-content px-6">
                            <p class="text-harbor-700 leading-relaxed pb-4">Civic Harbor is a national coalition that supports community organizing, advocacy, and civic engagement. We provide training, research, communications support, and coalition-building infrastructure to local groups working on issues like housing justice, climate equity, immigrant rights, and democratic participation. We also run campaigns, produce policy analysis, and host events that connect organizers across regions and issues.</p>
                        </div>
                    </div>

                    <!-- FAQ Item 2 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                        <button class="accordion-btn w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none focus:bg-gray-50" aria-expanded="false">
                            <span class="font-semibold text-harbor-900">How can I get involved if I am new to organizing?</span>
                            <svg class="accordion-icon w-5 h-5 text-harbor-600 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div class="accordion-content px-6">
                            <p class="text-harbor-700 leading-relaxed pb-4">Everyone starts somewhere. The best first step is to join our email list and attend an upcoming Organizing 101 training or local chapter meeting. You can also use our representative locator to contact your elected officials about an issue you care about. There are many ways to contribute—whether you have time to volunteer, skills to share, or simply a desire to learn.</p>
                        </div>
                    </div>

                    <!-- FAQ Item 3 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                        <button class="accordion-btn w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none focus:bg-gray-50" aria-expanded="false">
                            <span class="font-semibold text-harbor-900">Does Civic Harbor accept donations?</span>
                            <svg class="accordion-icon w-5 h-5 text-harbor-600 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div class="accordion-content px-6">
                            <p class="text-harbor-700 leading-relaxed pb-4">Yes. Civic Harbor is a nonprofit organization funded by individual donors, foundations, and grassroots fundraising. Donations support our training programs, legal clinics, community grants, and digital organizing tools. Contributions are tax-deductible to the fullest extent allowed by law. You can make a one-time or recurring gift through our secure donation page.</p>
                        </div>
                    </div>

                    <!-- FAQ Item 4 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                        <button class="accordion-btn w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none focus:bg-gray-50" aria-expanded="false">
                            <span class="font-semibold text-harbor-900">How do I start a Civic Harbor chapter in my area?</span>
                            <svg class="accordion-icon w-5 h-5 text-harbor-600 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div class="accordion-content px-6">
                            <p class="text-harbor-700 leading-relaxed pb-4">We welcome new chapters that align with our values of equity, inclusion, and community-led change. To get started, fill out the chapter interest form on our website and a regional organizer will reach out to schedule a conversation. We provide onboarding resources, training, and ongoing support to help new chapters build power in their communities.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!-- FOOTER -->
    <footer class="bg-harbor-900 text-gray-300 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
                <!-- About -->
                <div>
                    <div class="flex items-center gap-3 mb-6">
                        <img src="https://placehold.co/40x40/14b8a6/ffffff?text=CH&font=montserrat" alt="Civic Harbor logo" class="w-10 h-10 rounded-lg">
                        <div>
                            <p class="text-lg font-bold text-white">Civic Harbor</p>
                        </div>
                    </div>
                    <p class="text-sm leading-relaxed mb-6">Civic Harbor is a national coalition advancing equity, civic participation, and community-driven policy. We turn shared concerns into collective action.</p>
                    <div class="flex gap-4">
                        <a href="#" class="text-gray-400 hover:text-white transition" aria-label="Facebook">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition" aria-label="Twitter">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition" aria-label="Instagram">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                        </a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div>
                    <h4 class="text-white font-bold mb-4">Quick Links</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#about" class="hover:text-white transition">About Us</a></li>
                        <li><a href="#issues" class="hover:text-white transition">Our Issues</a></li>
                        <li><a href="#events" class="hover:text-white transition">Events</a></li>
                        <li><a href="#news" class="hover:text-white transition">News</a></li>
                        <li><a href="#action" class="hover:text-white transition">Take Action</a></li>
                        <li><a href="#join" class="hover:text-white transition">Join</a></li>
                    </ul>
                </div>

                <!-- Resources -->
                <div>
                    <h4 class="text-white font-bold mb-4">Resources</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="hover:text-white transition">Organizing Toolkit</a></li>
                        <li><a href="#" class="hover:text-white transition">Policy Briefs</a></li>
                        <li><a href="#" class="hover:text-white transition">Partner Organizations</a></li>
                        <li><a href="#" class="hover:text-white transition">Action Alerts</a></li>
                        <li><a href="#" class="hover:text-white transition">Media Kit</a></li>
                    </ul>
                </div>

                <!-- Contact -->
                <div>
                    <h4 class="text-white font-bold mb-4">Contact Us</h4>
                    <address class="not-italic text-sm space-y-3">
                        <p>Civic Harbor National Headquarters<br>1420 Justice Plaza, Suite 400<br>Washington, DC 20005</p>
                        <p>Phone: <a href="tel:+12025550142" class="hover:text-white transition">(202) 555-0142</a></p>
                        <p>Email: <a href="mailto:hello@civicharbor.org" class="hover:text-white transition">hello@civicharbor.org</a></p>
                    </address>
                </div>
            </div>

            <div class="border-t border-harbor-800 pt-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <p class="text-sm text-gray-400">&copy; 2024 Civic Harbor. All rights reserved.</p>
                <div class="flex flex-wrap gap-6 text-sm text-gray-400">
                    <a href="#" class="hover:text-white transition">Privacy Policy</a>
                    <a href="#" class="hover:text-white transition">Terms of Service</a>
                    <a href="#" class="hover:text-white transition">Cookie Settings</a>
                    <a href="#" class="hover:text-white transition">Accessibility</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Mobile menu toggle
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuBtn.addEventListener('click', () => {
            const isExpanded = mobileMenuBtn.getAttribute('aria-expanded') === 'true';
            mobileMenuBtn.setAttribute('aria-expanded', !isExpanded);
            mobileMenu.classList.toggle('hidden');
        });

        // Close mobile menu when clicking a link
        mobileMenu.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                mobileMenuBtn.setAttribute('aria-expanded', 'false');
            });
        });

        // Representative Locator
        const locatorForm = document.getElementById('locator-form');
        const zipInput = document.getElementById('zipcode');
        const zipError = document.getElementById('zip-error');
        const repLoading = document.getElementById('rep-loading');
        const repResults = document.getElementById('rep-results');
        const repName = document.getElementById('rep-name');
        const repDistrict = document.getElementById('rep-district');
        const senName = document.getElementById('sen-name');
        const senDistrict = document.getElementById('sen-district');
        const localName = document.getElementById('local-name');
        const localDistrict = document.getElementById('local-district');

        const repFirstNames = ['Elena', 'James', 'Sofia', 'David', 'Maya', 'Robert', 'Aisha', 'Michael'];
        const repLastNames = ['Rodriguez', 'Patel', 'Thompson', 'Kim', 'Washington', 'Chen', 'Okafor', 'Martinez'];
        const senFirstNames = ['Patricia', 'Daniel', 'Laura', 'William', 'Fatima', 'Christopher', 'Nina', 'Joseph'];
        const localFirstNames = ['Angela', 'Thomas', 'Rosa', 'Kevin', 'Priya', 'Brian', 'Yuki', 'Marcus'];
        const localLastNames = ['Johnson', 'Singh', 'Garcia', 'Lee', 'Brown', 'Ali', 'Davis', 'Wilson'];

        function getHash(str) {
            let hash = 0;
            for (let i = 0; i < str.length; i++) {
                hash = str.charCodeAt(i) + ((hash << 5) - hash);
            }
            return Math.abs(hash);
        }

        locatorForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const zip = zipInput.value.trim();
            
            if (!/^\d{5}$/.test(zip)) {
                zipError.classList.remove('hidden');
                repResults.classList.add('hidden');
                return;
            }
            
            zipError.classList.add('hidden');
            repResults.classList.add('hidden');
            repLoading.classList.remove('hidden');
            
            // Simulate API call
            setTimeout(() => {
                const hash = getHash(zip);
                const rfn = repFirstNames[hash % repFirstNames.length];
                const rln = repLastNames[(hash + 1) % repLastNames.length];
                const sfn = senFirstNames[(hash + 2) % senFirstNames.length];
                const lfn = localFirstNames[(hash + 3) % localFirstNames.length];
                const lln = localLastNames[(hash + 4) % localLastNames.length];
                const districtNum = (hash % 35) + 1;
                const senDistrictNum = (hash % 40) + 1;
                const wardNum = (hash % 9) + 1;
                
                repName.textContent = `Rep. ${rfn} ${rln}`;
                repDistrict.textContent = `U.S. House District ${districtNum}`;
                senName.textContent = `Sen. ${sfn} ${rln}`;
                senDistrict.textContent = `State Senate District ${senDistrictNum}`;
                localName.textContent = `Councilmember ${lfn} ${lln}`;
                localDistrict.textContent = `City Council Ward ${wardNum}`;
                
                repLoading.classList.add('hidden');
                repResults.classList.remove('hidden');
            }, 1200);
        });

        // FAQ Accordion
        const accordionBtns = document.querySelectorAll('.accordion-btn');
        
        accordionBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const content = btn.nextElementSibling;
                const icon = btn.querySelector('.accordion-icon');
                const isExpanded = btn.getAttribute('aria-expanded') === 'true';
                
                // Close all others
                accordionBtns.forEach(otherBtn => {
                    if (otherBtn !== btn) {
                        otherBtn.setAttribute('aria-expanded', 'false');
                        otherBtn.nextElementSibling.classList.remove('active');
                        otherBtn.querySelector('.accordion-icon').classList.remove('rotate-180');
                    }
                });
                
                btn.setAttribute('aria-expanded', !isExpanded);
                content.classList.toggle('active');
                icon.classList.toggle('rotate-180');
            });
        });

        // Scroll reveal animation
        const revealElements = document.querySelectorAll('.reveal');
        const revealObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    revealObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });

        revealElements.forEach(el => revealObserver.observe(el));
    </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:44:01.031Z",
  "url": "https://benchmark.aimac.invalid/433c73ac75718dbbae6fa70d147fa35a1946d89b64c14900d2bd9b54240f9391.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-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": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-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": []
    },
    {
      "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-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": []
    },
    {
      "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": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<nav class=\"hidden lg:flex items-center gap-1\" aria-label=\"Primary\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"hidden lg:flex items-center gap-1\" aria-label=\"Primary\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "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 class=\"bg-harbor-50 text-harbor-900 antialiased\">",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"hidden lg:flex items-center gap-1\" aria-label=\"Primary\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"hidden lg:flex items-center gap-1\" aria-label=\"Primary\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"hidden lg:flex items-center gap-1\" aria-label=\"Primary\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "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=\"px-6 py-3 bg-harbor-600 hover:bg-harbor-700 text-white font-semibold rounded-lg transition\">Find</button>",
          "target": [
            ".hover\\:bg-harbor-700.py-3[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 class=\"text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6\">Building Coalitions. Advancing Equity. Amplifying Voices.</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl sm:text-4xl font-bold text-harbor-900 mb-4\">Current Issues We Are Fighting For</h2>",
                  "target": [
                    "#issues > .max-w-7xl.sm\\:px-6.lg\\:px-8 > .mb-16.max-w-3xl.text-center > h2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold text-harbor-900 mb-3\">Housing Justice</h3>",
                  "target": [
                    ".lg\\:grid-cols-4.md\\:grid-cols-2.gap-8 > article:nth-child(1) > .p-6 > .mb-3.text-xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold text-harbor-900 mb-3\">Climate Equity</h3>",
                  "target": [
                    ".lg\\:grid-cols-4.md\\:grid-cols-2.gap-8 > article:nth-child(2) > .p-6 > .mb-3.text-xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold text-harbor-900 mb-3\">Civic Participation</h3>",
                  "target": [
                    ".lg\\:grid-cols-4.md\\:grid-cols-2.gap-8 > article:nth-child(3) > .p-6 > .mb-3.text-xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold text-harbor-900 mb-3\">Immigrant Rights</h3>",
                  "target": [
                    "article:nth-child(4) > .p-6 > .mb-3.text-xl"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl sm:text-4xl font-bold text-harbor-900 mb-4\">Movement News</h2>",
                  "target": [
                    "#news > .max-w-7xl.sm\\:px-6.lg\\:px-8 > .md\\:items-end.md\\:flex-row.md\\:justify-between > .max-w-2xl > h2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-2xl font-bold text-harbor-900 mb-4\">City Council Passes Nation's Strongest Tenant Protection Package After Two-Year Coalition Campaign</h3>",
                  "target": [
                    ".text-2xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-lg font-bold text-harbor-900 mb-2\">Youth Civic Leadership Academy Expands to 12 New Cities</h3>",
                  "target": [
                    "article:nth-child(1) > .p-6 > .mb-2:nth-child(2)"
                  ]
                },
                {
                  "html": "<h3 class=\"text-lg font-bold text-harbor-900 mb-2\">Mobile Justice Clinic Serves 3,000 Residents in First Quarter</h3>",
                  "target": [
                    "article:nth-child(2) > .p-6 > .mb-2:nth-child(2)"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl sm:text-4xl font-bold text-harbor-900 mb-4\">Community Stories</h2>",
                  "target": [
                    ".py-20.lg\\:py-28:nth-child(5) > .max-w-7xl.sm\\:px-6.lg\\:px-8 > .mb-16.max-w-3xl.text-center > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-6\">Find Your Representatives. Make Your Voice Heard.</h2>",
                  "target": [
                    ".lg\\:grid-cols-2 > .reveal:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold text-harbor-900 mb-4\">Representative Locator</h3>",
                  "target": [
                    ".shadow-2xl > .text-xl"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl sm:text-4xl font-bold text-harbor-900 mb-4\">Upcoming Events</h2>",
                  "target": [
                    "#events > .max-w-7xl.sm\\:px-6.lg\\:px-8 > .md\\:items-end.md\\:flex-row.md\\:justify-between > .max-w-2xl > h2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold text-harbor-900 mb-3\">Organizing 101: From Concern to Campaign</h3>",
                  "target": [
                    ".lg\\:grid-cols-3.md\\:grid-cols-2.gap-8 > article:nth-child(1) > .p-6 > .mb-3.text-xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold text-harbor-900 mb-3\">Housing Justice March: Homes for All</h3>",
                  "target": [
                    ".lg\\:grid-cols-3.md\\:grid-cols-2.gap-8 > article:nth-child(2) > .p-6 > .mb-3.text-xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold text-harbor-900 mb-3\">Climate Equity Policy Workshop</h3>",
                  "target": [
                    ".lg\\:grid-cols-3.md\\:grid-cols-2.gap-8 > article:nth-child(3) > .p-6 > .mb-3.text-xl"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-6\">Join the Movement for a Just Society</h2>",
                  "target": [
                    ".max-w-4xl > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl sm:text-4xl font-bold text-harbor-900 mb-4\">Frequently Asked Questions</h2>",
                  "target": [
                    ".mb-12.text-center.reveal > h2"
                  ]
                },
                {
                  "html": "<h4 class=\"text-white font-bold mb-4\">Quick Links</h4>",
                  "target": [
                    "div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"text-white font-bold mb-4\">Resources</h4>",
                  "target": [
                    "div:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"text-white font-bold mb-4\">Contact Us</h4>",
                  "target": [
                    "div:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"main-content\">",
                  "target": [
                    "#main-content"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0f172a",
                "bgColor": "#ffffff",
                "contrastRatio": 17.85,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 17.85"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<p class=\"text-xl font-bold text-harbor-900 leading-tight\">Civic Harbor</p>",
          "target": [
            ".leading-tight.text-xl.text-harbor-900"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "mobile-menu",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div id=\"mobile-menu\" class=\"hidden lg:hidden bg-white border-t border-gray-100\">",
          "target": [
            "#mobile-menu"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"zipcode\" class=\"block text-sm font-medium text-harbor-700 mb-2\">ZIP Code</label>",
                  "target": [
                    "label[for=\"zipcode\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"zipcode\" name=\"zipcode\" placeholder=\"90210\" maxlength=\"5\" pattern=\"[0-9]{5}\" class=\"flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-harbor-600 focus:border-harbor-600 outline-none\" required=\"\">",
          "target": [
            "#zipcode"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/48x48/0d9488/ffffff?text=CH&amp;font=montserrat\" alt=\"Civic Harbor logo\" class=\"w-10 h-10 rounded-lg shadow group-hover:shadow-md transition\">",
          "target": [
            ".shadow"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"zipcode\" class=\"block text-sm font-medium text-harbor-700 mb-2\">ZIP Code</label>",
                  "target": [
                    "label[for=\"zipcode\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"zipcode\" name=\"zipcode\" placeholder=\"90210\" maxlength=\"5\" pattern=\"[0-9]{5}\" class=\"flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-harbor-600 focus:border-harbor-600 outline-none\" required=\"\">",
          "target": [
            "#zipcode"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#main-content\" class=\"sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-harbor-600 text-white px-4 py-2 rounded z-50\">Skip to main content</a>",
          "target": [
            ".focus\\:not-sr-only"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"space-y-3 text-gray-300 mb-8\">",
          "target": [
            ".reveal:nth-child(1) > .space-y-3"
          ]
        }
      ]
    },
    {
      "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 class=\"flex items-start\"><svg class=\"w-5 h-5 text-harbor-500 mr-3 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"></path></svg>Instantly locate federal, state, and local representatives</li>",
          "target": [
            ".items-start:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/48x48/0d9488/ffffff?text=CH&amp;font=montserrat\" alt=\"Civic Harbor logo\" class=\"w-10 h-10 rounded-lg shadow group-hover:shadow-md transition\">",
          "target": [
            ".shadow"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#main-content\" class=\"sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-harbor-600 text-white px-4 py-2 rounded z-50\">Skip to main content</a>",
          "target": [
            ".focus\\:not-sr-only"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": "imgNode",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"inline-block px-3 py-1 mb-6 text-xs font-bold tracking-wider text-harbor-100 bg-harbor-600/30 border border-harbor-500/40 rounded-full uppercase\">National Coalition for Civic Action</span>",
                  "target": [
                    ".bg-harbor-600\\/30"
                  ]
                },
                {
                  "html": "<img src=\"https://picsum.photos/1600/900?grayscale\" alt=\"Community gathering in urban plaza\" class=\"w-full h-full object-cover opacity-30\">",
                  "target": [
                    ".opacity-30"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined because element contains an image node"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"inline-block px-3 py-1 mb-6 text-xs font-bold tracking-wider text-harbor-100 bg-harbor-600/30 border border-harbor-500/40 rounded-full uppercase\">National Coalition for Civic Action</span>",
          "target": [
            ".bg-harbor-600\\/30"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because element contains an image node"
        }
      ]
    }
  ],
  "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": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"bg-white shadow-sm sticky top-0 z-40\">",
                  "target": [
                    "header"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-xs text-harbor-600 font-medium tracking-wide\">WHERE COMMUNITIES ANCHOR, MOVEMENTS LAUNCH</p>",
          "target": [
            ".tracking-wide"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#0d9488",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#join\" class=\"ml-2 px-4 py-2 text-sm font-semibold text-white bg-harbor-600 hover:bg-harbor-700 rounded-md transition shadow-sm\">Join</a>",
                  "target": [
                    ".ml-2"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#join\" class=\"ml-2 px-4 py-2 text-sm font-semibold text-white bg-harbor-600 hover:bg-harbor-700 rounded-md transition shadow-sm\">Join</a>",
          "target": [
            ".ml-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#0d9488",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#join\" class=\"inline-flex items-center px-6 py-3 text-base font-semibold text-white bg-harbor-600 hover:bg-harbor-500 rounded-lg transition shadow-lg\">Join the Movement</a>",
                  "target": [
                    ".hover\\:bg-harbor-500"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#join\" class=\"inline-flex items-center px-6 py-3 text-base font-semibold text-white bg-harbor-600 hover:bg-harbor-500 rounded-lg transition shadow-lg\">Join the Movement</a>",
          "target": [
            ".hover\\:bg-harbor-500"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".lg\\:grid-cols-4.md\\:grid-cols-2.gap-8 > article:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-harbor-600 font-semibold text-sm hover:text-harbor-800 inline-flex items-center\">Learn more <svg class=\"w-4 h-4 ml-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path></svg></a>",
          "target": [
            "article:nth-child(1) > .p-6 > .hover\\:text-harbor-800.inline-flex.font-semibold"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".lg\\:grid-cols-4.md\\:grid-cols-2.gap-8 > article:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-harbor-600 font-semibold text-sm hover:text-harbor-800 inline-flex items-center\">Learn more <svg class=\"w-4 h-4 ml-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path></svg></a>",
          "target": [
            "article:nth-child(2) > .p-6 > .hover\\:text-harbor-800.inline-flex.font-semibold"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".lg\\:grid-cols-4.md\\:grid-cols-2.gap-8 > article:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-harbor-600 font-semibold text-sm hover:text-harbor-800 inline-flex items-center\">Learn more <svg class=\"w-4 h-4 ml-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path></svg></a>",
          "target": [
            "article:nth-child(3) > .p-6 > .hover\\:text-harbor-800.inline-flex.font-semibold"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    "article:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-harbor-600 font-semibold text-sm hover:text-harbor-800 inline-flex items-center\">Learn more <svg class=\"w-4 h-4 ml-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path></svg></a>",
          "target": [
            "article:nth-child(4) > .p-6 > .hover\\:text-harbor-800.inline-flex.font-semibold"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#f0fdfa",
                "contrastRatio": 3.59,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section id=\"news\" class=\"bg-harbor-100 py-20 lg:py-28\">",
                  "target": [
                    "#news"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.59 (foreground color: #0d9488, background color: #f0fdfa, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"mt-6 md:mt-0 inline-flex items-center text-harbor-600 font-semibold hover:text-harbor-800\">",
          "target": [
            "#news > .max-w-7xl.sm\\:px-6.lg\\:px-8 > .md\\:items-end.md\\:flex-row.md\\:justify-between > .mt-6.md\\:mt-0.inline-flex"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.59 (foreground color: #0d9488, background color: #f0fdfa, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"lg:col-span-2 bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".lg\\:col-span-2"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2\">Policy Victory</span>",
          "target": [
            ".md\\:w-1\\/2.p-8.flex-col > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"lg:col-span-2 bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".lg\\:col-span-2"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, 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=\"#\" class=\"text-harbor-600 font-semibold hover:text-harbor-800 inline-flex items-center mt-auto\">",
          "target": [
            ".mt-auto"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".space-y-8 > article:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2\">Program Launch</span>",
          "target": [
            "article:nth-child(1) > .p-6 > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".space-y-8 > article:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-harbor-600 text-sm font-semibold hover:text-harbor-800\">Read more</a>",
          "target": [
            ".space-y-8 > article:nth-child(1) > .p-6 > .hover\\:text-harbor-800.font-semibold[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".space-y-8 > article:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2\">Field Report</span>",
          "target": [
            "article:nth-child(2) > .p-6 > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".space-y-8 > article:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-harbor-600 text-sm font-semibold hover:text-harbor-800\">Read more</a>",
          "target": [
            ".space-y-8 > article:nth-child(2) > .p-6 > .hover\\:text-harbor-800.font-semibold[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-xl shadow-sm border border-gray-100 p-8 reveal visible\">",
                  "target": [
                    ".p-8.rounded-xl.border-gray-100:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-sm text-harbor-600\">Tenant Organizer, Riverside</p>",
          "target": [
            ".p-8.rounded-xl.border-gray-100:nth-child(1) > .gap-4.mb-6.items-center > div > .text-harbor-600.text-sm"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-xl shadow-sm border border-gray-100 p-8 reveal visible\">",
                  "target": [
                    ".p-8.rounded-xl.border-gray-100:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-sm text-harbor-600\">Youth Fellow, Lakewood</p>",
          "target": [
            ".p-8.rounded-xl.border-gray-100:nth-child(2) > .gap-4.mb-6.items-center > div > .text-harbor-600.text-sm"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-xl shadow-sm border border-gray-100 p-8 reveal visible\">",
                  "target": [
                    ".p-8.rounded-xl.border-gray-100:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-sm text-harbor-600\">Climate Justice Advocate, Harborview</p>",
          "target": [
            ".p-8.rounded-xl.border-gray-100:nth-child(3) > .gap-4.mb-6.items-center > div > .text-harbor-600.text-sm"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#0d9488",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button type=\"submit\" class=\"px-6 py-3 bg-harbor-600 hover:bg-harbor-700 text-white font-semibold rounded-lg transition\">Find</button>",
                  "target": [
                    ".hover\\:bg-harbor-700.py-3[type=\"submit\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button type=\"submit\" class=\"px-6 py-3 bg-harbor-600 hover:bg-harbor-700 text-white font-semibold rounded-lg transition\">Find</button>",
          "target": [
            ".hover\\:bg-harbor-700.py-3[type=\"submit\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#f8fafc",
                "contrastRatio": 3.57,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-harbor-50 text-harbor-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.57 (foreground color: #0d9488, background color: #f8fafc, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"mt-6 md:mt-0 inline-flex items-center text-harbor-600 font-semibold hover:text-harbor-800\">",
          "target": [
            "#events > .max-w-7xl.sm\\:px-6.lg\\:px-8 > .md\\:items-end.md\\:flex-row.md\\:justify-between > .mt-6.md\\:mt-0.inline-flex"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.57 (foreground color: #0d9488, background color: #f8fafc, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#0d9488",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-harbor-600 text-white px-6 py-4\">\n                            <p class=\"text-3xl font-bold\">14</p>\n                            <p class=\"text-sm uppercase tracking-wider\">November 2024</p>\n                        </div>",
                  "target": [
                    "article:nth-child(1) > .py-4.bg-harbor-600.px-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-sm uppercase tracking-wider\">November 2024</p>",
          "target": [
            "article:nth-child(1) > .py-4.bg-harbor-600.px-6 > .uppercase.tracking-wider.text-sm"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".lg\\:grid-cols-3.md\\:grid-cols-2.gap-8 > article:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2\">Virtual Training</p>",
          "target": [
            ".lg\\:grid-cols-3.md\\:grid-cols-2.gap-8 > article:nth-child(1) > .p-6 > .mb-2.uppercase.tracking-wider"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".lg\\:grid-cols-3.md\\:grid-cols-2.gap-8 > article:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, 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=\"#\" class=\"block w-full text-center px-4 py-2 border-2 border-harbor-600 text-harbor-600 font-semibold rounded-lg hover:bg-harbor-600 hover:text-white transition\">Register Now</a>",
          "target": [
            "article:nth-child(1) > .p-6 > .border-2.hover\\:bg-harbor-600.border-harbor-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#0d9488",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-harbor-600 text-white px-6 py-4\">\n                            <p class=\"text-3xl font-bold\">22</p>\n                            <p class=\"text-sm uppercase tracking-wider\">November 2024</p>\n                        </div>",
                  "target": [
                    "article:nth-child(2) > .py-4.bg-harbor-600.px-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-sm uppercase tracking-wider\">November 2024</p>",
          "target": [
            "article:nth-child(2) > .py-4.bg-harbor-600.px-6 > .uppercase.tracking-wider.text-sm"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".lg\\:grid-cols-3.md\\:grid-cols-2.gap-8 > article:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2\">In-Person Rally</p>",
          "target": [
            ".lg\\:grid-cols-3.md\\:grid-cols-2.gap-8 > article:nth-child(2) > .p-6 > .mb-2.uppercase.tracking-wider"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".lg\\:grid-cols-3.md\\:grid-cols-2.gap-8 > article:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, 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=\"#\" class=\"block w-full text-center px-4 py-2 border-2 border-harbor-600 text-harbor-600 font-semibold rounded-lg hover:bg-harbor-600 hover:text-white transition\">RSVP</a>",
          "target": [
            "article:nth-child(2) > .p-6 > .border-2.hover\\:bg-harbor-600.border-harbor-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#0d9488",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-harbor-600 text-white px-6 py-4\">\n                            <p class=\"text-3xl font-bold\">05</p>\n                            <p class=\"text-sm uppercase tracking-wider\">December 2024</p>\n                        </div>",
                  "target": [
                    "article:nth-child(3) > .py-4.bg-harbor-600.px-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-sm uppercase tracking-wider\">December 2024</p>",
          "target": [
            "article:nth-child(3) > .py-4.bg-harbor-600.px-6 > .uppercase.tracking-wider.text-sm"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".lg\\:grid-cols-3.md\\:grid-cols-2.gap-8 > article:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-xs font-bold text-harbor-600 uppercase tracking-wider mb-2\">Workshop</p>",
          "target": [
            "article:nth-child(3) > .p-6 > .mb-2.uppercase.tracking-wider"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition reveal visible\">",
                  "target": [
                    ".lg\\:grid-cols-3.md\\:grid-cols-2.gap-8 > article:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, 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=\"#\" class=\"block w-full text-center px-4 py-2 border-2 border-harbor-600 text-harbor-600 font-semibold rounded-lg hover:bg-harbor-600 hover:text-white transition\">Sign Up</a>",
          "target": [
            "article:nth-child(3) > .p-6 > .border-2.hover\\:bg-harbor-600.border-harbor-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f0fdfa",
                "bgColor": "#0d9488",
                "contrastRatio": 3.59,
                "fontSize": "13.5pt (18px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section id=\"join\" class=\"bg-harbor-600 py-20 lg:py-28\">",
                  "target": [
                    "#join"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.59 (foreground color: #f0fdfa, background color: #0d9488, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-lg text-harbor-100 leading-relaxed mb-8\">Become a member of Civic Harbor to receive action alerts, event invitations, and organizing resources tailored to your community. Membership is free, and every new voice strengthens our collective impact.</p>",
          "target": [
            ".text-harbor-100.mb-8.text-lg"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.59 (foreground color: #f0fdfa, background color: #0d9488, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f0fdfa",
                "bgColor": "#0d9488",
                "contrastRatio": 3.59,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section id=\"join\" class=\"bg-harbor-600 py-20 lg:py-28\">",
                  "target": [
                    "#join"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.59 (foreground color: #f0fdfa, background color: #0d9488, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-base text-harbor-100 leading-relaxed mb-10\">When you join, you are not signing up for a mailing list\u2014you are plugging into a network of people committed to equity, dignity, and democratic participation. Together, we can turn concern into action and action into lasting change.</p>",
          "target": [
            ".mb-10.text-harbor-100.text-base"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.59 (foreground color: #f0fdfa, background color: #0d9488, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f0fdfa",
                "bgColor": "#0d9488",
                "contrastRatio": 3.59,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section id=\"join\" class=\"bg-harbor-600 py-20 lg:py-28\">",
                  "target": [
                    "#join"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.59 (foreground color: #f0fdfa, background color: #0d9488, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-sm text-harbor-100 mt-4\">By joining, you agree to receive updates from Civic Harbor. You can unsubscribe at any time.</p>",
          "target": [
            ".mt-4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.59 (foreground color: #f0fdfa, background color: #0d9488, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 7546
      },
      {
        "y": 576,
        "height": 7546
      },
      {
        "y": 1152,
        "height": 7546
      },
      {
        "y": 1728,
        "height": 7546
      },
      {
        "y": 2304,
        "height": 7546
      },
      {
        "y": 2880,
        "height": 7546
      },
      {
        "y": 3456,
        "height": 7546
      },
      {
        "y": 4032,
        "height": 7546
      },
      {
        "y": 4608,
        "height": 7546
      },
      {
        "y": 5184,
        "height": 7546
      },
      {
        "y": 5760,
        "height": 7546
      },
      {
        "y": 6336,
        "height": 7546
      },
      {
        "y": 6826,
        "height": 7546
      }
    ],
    "scans": 14,
    "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 "Society" 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: "Society"
- Description: Social issues, advocacy, cultural organizations, and community initiatives.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Society" 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: "Events", "Join", "Action".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Society" category. Consider themes similar to: "Movement News", "Current Issues", "Community Stories".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "collective action", "coalition building", "equity initiatives".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Sign Petition", "Take Action", "Spread Awareness".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Society" sector. Ideas similar but not limited to: "representative locator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "resource guides", "partner organizations", "action alerts".
-   **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.