inclusionAI Ling 3.0 Flash – Pets

via Novita · Generated

  • AIMAC Debt 4.94
  • Cost $0.0012
  • Total Violations 22
  • HTML Size 66 KB
  • Em Dashes 13

Screenshot

View inclusionAI Ling 3.0 Flash Pets page View Live Page

Accessibility Issues Found

22 Serious

  • color-contrast serious 22 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <a href="#quiz" class="nav-cta">Pet Match</a>

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>PawBridge — Connecting Hearts, Healing Pets</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
    <style>
        /* ===== RESET & BASE ===== */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; font-size: 16px; }
        body {
            font-family: 'Poppins', sans-serif;
            color: #2d2d2d;
            background: #fafaf7;
            line-height: 1.7;
            overflow-x: hidden;
        }
        img { max-width: 100%; height: auto; display: block; }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }

        /* ===== UTILITY ===== */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
        .section { padding: 80px 0; }
        .section-alt { background: #fff; }
        .section-dark { background: #1a1a1a; color: #f0f0f0; }
        .section-dark a { color: #f4a261; }
        .section-dark .footer-link:hover { color: #fff; }
        .section-title {
            font-family: 'Lora', serif;
            font-size: 2.4rem;
            font-weight: 600;
            margin-bottom: 12px;
            color: #1a1a1a;
        }
        .section-subtitle {
            font-size: 1.05rem;
            color: #6b6b6b;
            max-width: 640px;
            margin-bottom: 40px;
        }
        .section-dark .section-title { color: #f0f0f0; }
        .section-dark .section-subtitle { color: #aaa; }
        .text-center { text-align: center; }
        .text-center .section-subtitle { margin-left: auto; margin-right: auto; }
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-family: 'Poppins', sans-serif;
        }
        .btn-primary {
            background: #e76f51;
            color: #fff;
        }
        .btn-primary:hover { background: #d45a3b; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(231,111,81,0.3); }
        .btn-outline {
            background: transparent;
            color: #e76f51;
            border: 2px solid #e76f51;
        }
        .btn-outline:hover { background: #e76f51; color: #fff; transform: translateY(-2px); }
        .btn-dark {
            background: #1a1a1a;
            color: #fff;
        }
        .btn-dark:hover { background: #333; transform: translateY(-2px); }
        .btn-light {
            background: #fff;
            color: #1a1a1a;
        }
        .btn-light:hover { background: #f0f0f0; transform: translateY(-2px); }

        /* ===== HEADER ===== */
        header {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0,0,0,0.06);
            transition: box-shadow 0.3s;
        }
        header.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.08); }
        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 72px;
        }
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .logo img { width: 42px; height: 42px; border-radius: 12px; }
        .logo-text {
            font-family: 'Lora', serif;
            font-size: 1.35rem;
            font-weight: 700;
            color: #1a1a1a;
        }
        .logo-text span { color: #e76f51; }
        nav { display: flex; align-items: center; gap: 28px; }
        nav a {
            font-size: 0.9rem;
            font-weight: 500;
            color: #555;
            transition: color 0.2s;
            position: relative;
        }
        nav a::after {
            content: '';
            position: absolute;
            bottom: -4px; left: 0;
            width: 0; height: 2px;
            background: #e76f51;
            transition: width 0.3s;
        }
        nav a:hover { color: #e76f51; }
        nav a:hover::after { width: 100%; }
        .nav-cta {
            padding: 10px 24px;
            background: #e76f51;
            color: #fff !important;
            border-radius: 50px;
            font-weight: 600;
        }
        .nav-cta:hover { background: #d45a3b; color: #fff !important; }
        .nav-cta::after { display: none !important; }
        .mobile-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #2d2d2d;
        }

        /* ===== HERO ===== */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #fef3e2 0%, #fde8d0 40%, #fce4d6 100%);
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: -20%; right: -10%;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(231,111,81,0.08) 0%, transparent 70%);
            border-radius: 50%;
        }
        .hero::after {
            content: '';
            position: absolute;
            bottom: -30%; left: -5%;
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(231,111,81,0.06) 0%, transparent 70%);
            border-radius: 50%;
        }
        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        .hero-content { padding: 40px 0; }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px;
            background: rgba(231,111,81,0.1);
            color: #e76f51;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 24px;
        }
        .hero-badge svg { width: 16px; height: 16px; }
        .hero h1 {
            font-family: 'Lora', serif;
            font-size: 3.6rem;
            font-weight: 700;
            line-height: 1.15;
            margin-bottom: 20px;
            color: #1a1a1a;
        }
        .hero h1 em {
            font-style: italic;
            color: #e76f51;
        }
        .hero p {
            font-size: 1.1rem;
            color: #555;
            margin-bottom: 32px;
            max-width: 520px;
        }
        .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
        .hero-visual {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hero-visual img {
            border-radius: 20px;
            box-shadow: 0 30px 60px rgba(0,0,0,0.12);
            max-width: 100%;
        }
        .hero-float-card {
            position: absolute;
            background: #fff;
            padding: 16px 22px;
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 12px;
            animation: float 4s ease-in-out infinite;
        }
        .hero-float-card.card-1 { top: 10%; left: -30px; animation-delay: 0s; }
        .hero-float-card.card-2 { bottom: 15%; right: -20px; animation-delay: 1.5s; }
        .hero-float-card .icon-circle {
            width: 44px; height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        .hero-float-card .card-text strong { display: block; font-size: 0.85rem; color: #1a1a1a; }
        .hero-float-card .card-text span { font-size: 0.78rem; color: #888; }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* ===== STATS BAR ===== */
        .stats-bar {
            background: #fff;
            border-top: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
            padding: 32px 0;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
            text-align: center;
        }
        .stat-number {
            font-size: 2.2rem;
            font-weight: 800;
            color: #e76f51;
            font-family: 'Lora', serif;
        }
        .stat-label {
            font-size: 0.85rem;
            color: #888;
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* ===== FEATURES GRID ===== */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
            margin-top: 48px;
        }
        .feature-card {
            background: #fff;
            border-radius: 20px;
            padding: 36px 28px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid #f5f5f5;
        }
        .feature-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 48px rgba(0,0,0,0.08);
        }
        .feature-icon {
            width: 56px; height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 20px;
        }
        .feature-card h3 {
            font-size: 1.15rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: #1a1a1a;
        }
        .feature-card p {
            font-size: 0.92rem;
            color: #6b6b6b;
            line-height: 1.7;
        }

        /* ===== PETS AVAILABLE ===== */
        .pets-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-top: 40px;
        }
        .pet-card {
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid #f5f5f5;
        }
        .pet-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 36px rgba(0,0,0,0.1);
        }
        .pet-card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }
        .pet-card-body { padding: 20px; }
        .pet-card-body h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
        .pet-card-body .pet-meta {
            display: flex;
            gap: 12px;
            font-size: 0.8rem;
            color: #888;
            margin-bottom: 12px;
        }
        .pet-card-body .pet-meta span {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .pet-tag {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .tag-adopted { background: #e8f5e9; color: #2e7d32; }
        .tag-available { background: #fff3e0; color: #e65100; }
        .tag-medical { background: #fce4ec; color: #c62828; }

        /* ===== QUIZ SECTION ===== */
        .quiz-container {
            max-width: 720px;
            margin: 0 auto;
            background: #fff;
            border-radius: 24px;
            padding: 48px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.06);
            border: 1px solid #f0f0f0;
        }
        .quiz-step { display: none; }
        .quiz-step.active { display: block; }
        .quiz-step h3 {
            font-family: 'Lora', serif;
            font-size: 1.4rem;
            margin-bottom: 8px;
            color: #1a1a1a;
        }
        .quiz-step p { color: #6b6b6b; margin-bottom: 28px; font-size: 0.95rem; }
        .quiz-options { display: flex; flex-direction: column; gap: 12px; }
        .quiz-option {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 20px;
            border: 2px solid #eee;
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.95rem;
        }
        .quiz-option:hover { border-color: #e76f51; background: #fef8f5; }
        .quiz-option.selected { border-color: #e76f51; background: #fef3e2; }
        .quiz-option .radio {
            width: 22px; height: 22px;
            border-radius: 50%;
            border: 2px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: border-color 0.2s;
        }
        .quiz-option.selected .radio { border-color: #e76f51; }
        .quiz-option .radio::after {
            content: '';
            width: 10px; height: 10px;
            border-radius: 50%;
            background: #e76f51;
            transform: scale(0);
            transition: transform 0.2s;
        }
        .quiz-option.selected .radio::after { transform: scale(1); }
        .quiz-nav {
            display: flex;
            justify-content: space-between;
            margin-top: 32px;
        }
        .quiz-progress {
            display: flex;
            gap: 8px;
            margin-bottom: 32px;
        }
        .quiz-dot {
            width: 10px; height: 10px;
            border-radius: 50%;
            background: #ddd;
            transition: background 0.3s;
        }
        .quiz-dot.active { background: #e76f51; width: 28px; border-radius: 5px; }
        .quiz-result { text-align: center; }
        .quiz-result .result-icon { font-size: 4rem; margin-bottom: 16px; }
        .quiz-result h3 { font-size: 1.6rem; margin-bottom: 12px; }
        .quiz-result p { color: #6b6b6b; margin-bottom: 24px; }

        /* ===== TESTIMONIALS ===== */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            margin-top: 48px;
        }
        .testimonial-card {
            background: #fff;
            border-radius: 16px;
            padding: 32px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
            border: 1px solid #f5f5f5;
            position: relative;
        }
        .testimonial-card .quote-mark {
            font-size: 3rem;
            color: #e76f51;
            opacity: 0.2;
            font-family: 'Lora', serif;
            line-height: 1;
            margin-bottom: -8px;
        }
        .testimonial-card p {
            font-size: 0.92rem;
            color: #555;
            font-style: italic;
            margin-bottom: 20px;
            line-height: 1.8;
        }
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .testimonial-author img {
            width: 44px; height: 44px;
            border-radius: 50%;
            object-fit: cover;
        }
        .testimonial-author .author-info strong { font-size: 0.9rem; display: block; }
        .testimonial-author .author-info span { font-size: 0.8rem; color: #888; }
        .stars { color: #f4a261; font-size: 0.85rem; margin-bottom: 12px; }

        /* ===== FAQ ACCORDION ===== */
        .faq-list { max-width: 780px; margin: 40px auto 0; }
        .faq-item {
            border-bottom: 1px solid #eee;
        }
        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            cursor: pointer;
            font-weight: 600;
            font-size: 1rem;
            color: #1a1a1a;
            transition: color 0.2s;
        }
        .faq-question:hover { color: #e76f51; }
        .faq-question .arrow {
            width: 28px; height: 28px;
            border-radius: 50%;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s, background 0.3s;
            flex-shrink: 0;
        }
        .faq-item.active .faq-question .arrow {
            transform: rotate(180deg);
            background: #e76f51;
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease;
        }
        .faq-item.active .faq-answer {
            max-height: 300px;
            padding-bottom: 20px;
        }
        .faq-answer p {
            font-size: 0.92rem;
            color: #6b6b6b;
            line-height: 1.8;
        }

        /* ===== SIDEBAR LAYOUT ===== */
        .content-layout {
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 40px;
            align-items: start;
        }
        .sidebar-card {
            background: #fff;
            border-radius: 16px;
            padding: 28px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
            border: 1px solid #f5f5f5;
            margin-bottom: 24px;
        }
        .sidebar-card h4 {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 2px solid #f0f0f0;
        }
        .sidebar-card .event-item {
            display: flex;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #f8f8f8;
        }
        .sidebar-card .event-item:last-child { border-bottom: none; }
        .event-date {
            min-width: 48px;
            text-align: center;
            background: #fef3e2;
            border-radius: 10px;
            padding: 6px 8px;
            font-size: 0.75rem;
            font-weight: 700;
            color: #e76f51;
        }
        .event-date .day { font-size: 1.1rem; display: block; }
        .event-info h5 { font-size: 0.88rem; font-weight: 600; margin-bottom: 2px; }
        .event-info span { font-size: 0.78rem; color: #888; }
        .tip-item {
            padding: 12px 0;
            border-bottom: 1px solid #f8f8f8;
        }
        .tip-item:last-child { border-bottom: none; }
        .tip-item h5 { font-size: 0.88rem; font-weight: 600; margin-bottom: 4px; }
        .tip-item p { font-size: 0.82rem; color: #6b6b6b; }
        .tip-item .tip-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px; height: 28px;
            border-radius: 8px;
            background: #fef3e2;
            margin-right: 8px;
            font-size: 0.8rem;
        }

        /* ===== TRAINING SECTION ===== */
        .training-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px;
            margin-top: 40px;
        }
        .training-card {
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
            border: 1px solid #f5f5f5;
        }
        .training-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            min-height: 200px;
        }
        .training-card-body {
            padding: 28px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .training-card-body h3 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .training-card-body p {
            font-size: 0.88rem;
            color: #6b6b6b;
            margin-bottom: 16px;
            line-height: 1.7;
        }
        .training-card-body .btn { padding: 10px 22px; font-size: 0.85rem; }

        /* ===== NUTRITION SECTION ===== */
        .nutrition-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            align-items: center;
        }
        .nutrition-text h3 {
            font-family: 'Lora', serif;
            font-size: 1.6rem;
            margin-bottom: 16px;
            color: #1a1a1a;
        }
        .nutrition-text p {
            font-size: 0.92rem;
            color: #6b6b6b;
            margin-bottom: 16px;
            line-height: 1.8;
        }
        .nutrition-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 20px;
        }
        .nutrition-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.88rem;
            color: #444;
        }
        .nutrition-list li .check {
            color: #2e7d32;
            font-weight: 700;
            margin-top: 2px;
        }
        .nutrition-visual {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }

        /* ===== FOOTER ===== */
        footer {
            padding: 60px 0 30px;
            background: #1a1a1a;
            color: #aaa;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }
        .footer-brand .logo { margin-bottom: 16px; }
        .footer-brand .logo-text { color: #fff; }
        .footer-brand p {
            font-size: 0.88rem;
            line-height: 1.8;
            color: #888;
            margin-bottom: 20px;
        }
        .footer-social {
            display: flex;
            gap: 12px;
        }
        .footer-social a {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
            font-size: 0.9rem;
        }
        .footer-social a:hover { background: #e76f51; }
        .footer-col h4 {
            color: #fff;
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 18px;
        }
        .footer-col a {
            display: block;
            font-size: 0.85rem;
            color: #888;
            padding: 4px 0;
            transition: color 0.2s;
        }
        .footer-col a:hover { color: #e76f51; }
        .footer-contact li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.85rem;
            color: #888;
            padding: 4px 0;
        }
        .footer-contact li .icon {
            color: #e76f51;
            margin-top: 3px;
        }
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.08);
            padding-top: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            color: #666;
        }
        .footer-bottom a { color: #888; transition: color 0.2s; }
        .footer-bottom a:hover { color: #e76f51; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1024px) {
            .hero-grid { grid-template-columns: 1fr; text-align: center; }
            .hero p { margin-left: auto; margin-right: auto; }
            .hero-buttons { justify-content: center; }
            .hero-visual { order: -1; }
            .hero h1 { font-size: 2.8rem; }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .pets-grid { grid-template-columns: repeat(2, 1fr); }
            .testimonials-grid { grid-template-columns: 1fr 1fr; }
            .content-layout { grid-template-columns: 1fr; }
            .nutrition-grid { grid-template-columns: 1fr; }
            .training-grid { grid-template-columns: 1fr; }
            .training-card { grid-template-columns: 1fr; }
            .training-card img { min-height: 180px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 768px) {
            nav { display: none; }
            nav.open {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 72px; left: 0; right: 0;
                background: #fff;
                padding: 24px;
                border-bottom: 1px solid #eee;
                box-shadow: 0 8px 30px rgba(0,0,0,0.08);
            }
            .mobile-toggle { display: block; }
            .hero h1 { font-size: 2.2rem; }
            .section-title { font-size: 1.8rem; }
            .features-grid { grid-template-columns: 1fr; }
            .pets-grid { grid-template-columns: 1fr 1fr; }
            .testimonials-grid { grid-template-columns: 1fr; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
            .quiz-container { padding: 28px 20px; }
            .nutrition-list { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
        }

        /* ===== SCROLL REVEAL ===== */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== DIVIDER ===== */
        .divider {
            width: 60px;
            height: 3px;
            background: #e76f51;
            border-radius: 2px;
            margin: 16px auto 0;
        }
    </style>
</head>
<body>

    <!-- ===== HEADER ===== -->
    <header id="siteHeader">
        <div class="container header-inner">
            <a href="#" class="logo">
                <img src="https://placehold.co/84x84/e76f51/ffffff?text=🐾&font=noto+sans" alt="PawBridge Logo">
                <div class="logo-text">Paw<span>Bridge</span></div>
            </a>
            <nav id="mainNav">
                <a href="#home">Home</a>
                <a href="#services">Services</a>
                <a href="#pets">Adopt</a>
                <a href="#nutrition">Nutrition</a>
                <a href="#community">Community</a>
                <a href="#care">Pet Care</a>
                <a href="#about">About</a>
                <a href="#quiz" class="nav-cta">Pet Match</a>
            </nav>
            <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle navigation">☰</button>
        </div>
    </header>

    <!-- ===== HERO ===== -->
    <section class="hero" id="home">
        <div class="container">
            <div class="hero-grid">
                <div class="hero-content">
                    <div class="hero-badge">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                        Trusted by 12,000+ Pet Families
                    </div>
                    <h1>Every Pet Deserves a <em>Bridge</em> to a Better Life</h1>
                    <p>We connect compassionate pet lovers with the resources, community, and companionship they need — from preventive care and nutrition guidance to adoption and rescue support. Together, we build stronger bonds between humans and animals.</p>
                    <div class="hero-buttons">
                        <a href="#pets" class="btn btn-primary">Adopt Today</a>
                        <a href="#quiz" class="btn btn-outline">Find Your Match</a>
                    </div>
                </div>
                <div class="hero-visual">
                    <img src="https://picsum.photos/560/480?random=hero1" alt="Happy pets at PawBridge">
                    <div class="hero-float-card card-1">
                        <div class="icon-circle" style="background:#fef3e2;">❤️</div>
                        <div class="card-text">
                            <strong>1,247 Pets</strong>
                            <span>Adopted this year</span>
                        </div>
                    </div>
                    <div class="hero-float-card card-2">
                        <div class="icon-circle" style="background:#e8f5e9;">🏥</div>
                        <div class="card-text">
                            <strong>Vet Partnerships</strong>
                            <span>38 clinics nationwide</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== STATS BAR ===== -->
    <section class="stats-bar">
        <div class="container">
            <div class="stats-grid">
                <div><div class="stat-number">12,400+</div><div class="stat-label">Happy Families</div></div>
                <div><div class="stat-number">1,247</div><div class="stat-label">Pets Adopted</div></div>
                <div><div class="stat-number">38</div><div class="stat-label">Vet Partners</div></div>
                <div><div class="stat-number">96%</div><div class="stat-label">Satisfaction</div></div>
            </div>
        </div>
    </section>

    <!-- ===== SERVICES / FEATURES ===== -->
    <section class="section section-alt" id="services">
        <div class="container text-center">
            <h2 class="section-title reveal">Comprehensive Pet Services</h2>
            <p class="section-subtitle reveal">From preventive care to behavioral support, our integrated approach ensures every pet receives the individualized attention they deserve.</p>
            <div class="features-grid reveal">
                <div class="feature-card">
                    <div class="feature-icon" style="background:#fef3e2;">🍖</div>
                    <h3>Nutrition Guidance</h3>
                    <p>Our certified nutritionists develop personalized diet plans based on your pet's age, breed, and health conditions. We emphasize preventive care through proper nutrition requirements tailored to each life stage.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon" style="background:#e8f5e9;">🧠</div>
                    <h3>Behavioral Support</h3>
                    <p>Our certified trainers provide evidence-based behavior modification programs. From separation anxiety to leash reactivity, we help you understand and address your pet's needs using positive reinforcement techniques.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon" style="background:#fce4ec;">💉</div>
                    <h3>Veterinary Resources</h3>
                    <p>Access to a network of 38 partner clinics offering preventive care, spay/neuter programs, vaccinations, and emergency services. We believe proactive health management is the foundation of a long, happy life for your companion.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon" style="background:#e3f2fd;">🏠</div>
                    <h3>Adoption Services</h3>
                    <p>Our adoption program connects loving homes with pets in need. Every animal undergoes thorough health screening and behavioral assessment to ensure the best possible match for your family and lifestyle.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon" style="background:#f3e5f5;">🎓</div>
                    <h3>Training Programs</h3>
                    <p>From puppy socialization to advanced obedience, our structured courses build confidence and strengthen the bond between you and your pet. Group and private sessions available for all skill levels.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon" style="background:#fff3e0;">🤝</div>
                    <h3>Community Rescue</h3>
                    <p>We partner with local rescue organizations to provide foster care, rehabilitation, and placement services. Our rescue network has helped over 3,000 animals find permanent, loving homes since inception.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== PETS AVAILABLE ===== -->
    <section class="section" id="pets">
        <div class="container text-center">
            <h2 class="section-title reveal">Pets Ready for Their Forever Home</h2>
            <p class="section-subtitle reveal">Each of our animals has been carefully assessed for health and temperament. Meet our current residents and discover the companion who's been waiting for you.</p>
            <div class="pets-grid reveal">
                <div class="pet-card">
                    <img src="https://picsum.photos/400/300?random=dog1" alt="Buddy the Golden Retriever">
                    <div class="pet-card-body">
                        <h4>Buddy</h4>
                        <div class="pet-meta"><span>🐕 Golden Retriever</span><span>⭐ 3 yrs</span></div>
                        <p style="font-size:0.82rem;color:#6b6b6b;margin-bottom:10px;">Gentle and affectionate, Buddy loves long walks and is great with children. He's fully vaccinated and neutered.</p>
                        <span class="pet-tag tag-available">Available</span>
                    </div>
                </div>
                <div class="pet-card">
                    <img src="https://picsum.photos/400/300?random=cat1" alt="Luna the Tabby Cat">
                    <div class="pet-card-body">
                        <h4>Luna</h4>
                        <div class="pet-meta"><span>🐈 Tabby</span><span>⭐ 1 yr</span></div>
                        <p style="font-size:0.82rem;color:#6b6b6b;margin-bottom:10px;">Playful and curious, Luna enjoys interactive toys and cozy sunny spots. She's spayed and up to date on all preventive care.</p>
                        <span class="pet-tag tag-available">Available</span>
                    </div>
                </div>
                <div class="pet-card">
                    <img src="https://picsum.photos/400/300?random=dog2" alt="Max the Beagle">
                    <div class="pet-card-body">
                        <h4>Max</h4>
                        <div class="pet-meta"><span>🐕 Beagle</span><span>⭐ 5 yrs</span></div>
                        <p style="font-size:0.82rem;color:#6b6b6b;margin-bottom:10px;">A loyal companion with a calm demeanor. Max has completed basic training and thrives in quiet, loving households.</p>
                        <span class="pet-tag tag-available">Available</span>
                    </div>
                </div>
                <div class="pet-card">
                    <img src="https://picsum.photos/400/300?random=rabbit1" alt="Clover the Rabbit">
                    <div class="pet-card-body">
                        <h4>Clover</h4>
                        <div class="pet-meta"><span>🐰 Holland Lop</span><span>⭐ 8 mo</span></div>
                        <p style="font-size:0.82rem;color:#6b6b6b;margin-bottom:10px;">Sweet and social, Clover loves being gently held and exploring safe outdoor spaces. Spayed and microchipped.</p>
                        <span class="pet-tag tag-medical">Special Care</span>
                    </div>
                </div>
            </div>
            <div style="margin-top:36px;" class="reveal">
                <a href="#" class="btn btn-primary">View All Available Pets</a>
            </div>
        </div>
    </section>

    <!-- ===== NUTRITION SECTION ===== -->
    <section class="section section-alt" id="nutrition">
        <div class="container">
            <div class="nutrition-grid">
                <div class="nutrition-text reveal">
                    <h3>Proper Nutrition Is Preventive Care</h3>
                    <p>Just like humans, pets require balanced nutrition to thrive at every stage of life. Puppies and kittens need different nutrition requirements than senior animals, and breed-specific needs can significantly impact long-term health outcomes.</p>
                    <p>Our veterinary nutrition team works with you to develop feeding plans that support optimal growth, maintain healthy weight, and manage chronic conditions such as diabetes, kidney disease, and food allergies. We believe that informed feeding choices are one of the most powerful tools in preventive care.</p>
                    <ul class="nutrition-list">
                        <li><span class="check">✓</span> Age-appropriate formulations</li>
                        <li><span class="check">✓</span> Weight management programs</span></li>
                        <li><span class="check">✓</span> Allergy identification</li>
                        <li><span class="check">✓</span> Supplement guidance</li>
                        <li><span class="check">✓</span> Raw vs. processed analysis</li>
                        <li><span class="check">✓</span> Feeding schedule optimization</li>
                    </ul>
                    <a href="#" class="btn btn-primary" style="margin-top:24px;">Schedule Nutrition Consult</a>
                </div>
                <div class="nutrition-visual reveal">
                    <img src="https://picsum.photos/560/480?random=petfood" alt="Pet nutrition consultation">
                </div>
            </div>
        </div>
    </section>

    <!-- ===== TRAINING SECTION ===== -->
    <section class="section" id="care">
        <div class="container text-center">
            <h2 class="section-title reveal">Training & Behavior Programs</h2>
            <p class="section-subtitle reveal">Our certified trainers use positive reinforcement methods to build trust and communication between you and your pet. Every program is designed to address real-world challenges while strengthening your bond.</p>
            <div class="training-grid reveal">
                <div class="training-card">
                    <img src="https://picsum.photos/400/300?random=train1" alt="Puppy training class">
                    <div class="training-card-body">
                        <h3>Puppy Foundations</h3>
                        <p>Socialization, basic commands, house training, and bite inhibition for puppies aged 8–16 weeks. Small class sizes ensure personalized attention.</p>
                        <a href="#" class="btn btn-outline">Enroll Now</a>
                    </div>
                </div>
                <div class="training-card">
                    <img src="https://picsum.photos/400/300?random=train2" alt="Behavior modification session">
                    <div class="training-card-body">
                        <h3>Behavior Modification</h3>
                        <p>Custom programs for anxiety, aggression, and fear-based behaviors. Our certified applied animal behaviorists create individualized treatment plans.</p>
                        <a href="#" class="btn btn-outline">Get Assessment</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== QUIZ SECTION ===== -->
    <section class="section section-alt" id="quiz">
        <div class="container text-center">
            <h2 class="section-title reveal">Find Your Perfect Pet Match</h2>
            <p class="section-subtitle reveal">Answer a few questions and our compatibility algorithm will recommend the ideal pet breed and temperament for your lifestyle, home, and family.</p>
            <div class="quiz-container reveal" id="petQuiz">
                <div class="quiz-progress" id="quizProgress">
                    <div class="quiz-dot active"></div>
                    <div class="quiz-dot"></div>
                    <div class="quiz-dot"></div>
                    <div class="quiz-dot"></div>
                </div>

                <!-- Step 1 -->
                <div class="quiz-step active" data-step="1">
                    <h3>What's your living situation?</h3>
                    <p>This helps us understand the space and environment your future pet will have.</p>
                    <div class="quiz-options">
                        <div class="quiz-option" data-value="apartment" onclick="selectOption(this, 1)">🏢 Apartment or condo with limited space</div>
                        <div class="quiz-option" data-value="house" onclick="selectOption(this, 1)">🏡 House with a fenced yard</div>
                        <div class="quiz-option" data-value="rural" onclick="selectOption(this, 1)">🌾 Rural property with open land</div>
                        <div class="quiz-option" data-value="shared" onclick="selectOption(this, 1)">🏠 Shared living with roommates</div>
                    </div>
                </div>

                <!-- Step 2 -->
                <div class="quiz-step" data-step="2">
                    <h3>How much time can you dedicate daily?</h3>
                    <p>Exercise and attention needs vary widely across breeds and species.</p>
                    <div class="quiz-options">
                        <div class="quiz-option" data-value="low" onclick="selectOption(this, 2)">⏰ 1–2 hours (low energy pet)</div>
                        <div class="quiz-option" data-value="moderate" onclick="selectOption(this, 2)">🕐 2–4 hours (moderate activity)</div>
                        <div class="quiz-option" data-value="high" onclick="selectOption(this, 2)">🏃 4+ hours (high energy companion)</div>
                    </div>
                </div>

                <!-- Step 3 -->
                <div class="quiz-step" data-step="3">
                    <h3>Who will be living with the pet?</h3>
                    <p>Compatibility with family members is essential for a harmonious household.</p>
                    <div class="quiz-options">
                        <div class="quiz-option" data-value="solo" onclick="selectOption(this, 3)">👤 Just me — quiet companionship</div>
                        <div class="quiz-option" data-value="couple" onclick="selectOption(this, 3)">👫 Couple — active lifestyle</div>
                        <div class="quiz-option" data-value="family" onclick="selectOption(this, 3)">👨‍👩‍👧‍👦 Family with young children</div>
                        <div class="quiz-option" data-value="seniors" onclick="selectOption(this, 3)">🧓 Seniors seeking calm friend</div>
                    </div>
                </div>

                <!-- Step 4 -->
                <div class="quiz-step" data-step="4">
                    <h3>Any preferences or concerns?</h3>
                    <p>Let us know if you have any specific needs or considerations.</p>
                    <div class="quiz-options">
                        <div class="quiz-option" data-value=" hypoallergenic" onclick="selectOption(this, 4)">🌿 Hypoallergenic — low shedding</div>
                        <div class="quiz-option" data-value="small" onclick="selectOption(this, 4)">🐾 Small breed preference</div>
                        <div class="quiz-option" data-value="seniorpet" onclick="selectOption(this, 4)">💛 Prefer an older, calmer pet</div>
                        <div class="quiz-option" data-value="mixed" onclick="selectOption(this, 4)">🐕 Open to any mix — just want love</div>
                    </div>
                </div>

                <!-- Result -->
                <div class="quiz-step" data-step="result">
                    <div class="quiz-result">
                        <div class="result-icon">🐾</div>
                        <h3 id="quizResultTitle">Your Perfect Match</h3>
                        <p id="quizResultText">Based on your answers, we recommend a Cavalier King Charles Spaniel — a gentle, adaptable companion perfect for apartment living and families alike.</p>
                        <a href="#" class="btn btn-primary" onclick="resetQuiz()">Take Quiz Again</a>
                        <a href="#pets" class="btn btn-outline" style="margin-left:12px;">Browse Available Pets</a>
                    </div>
                </div>

                <div class="quiz-nav">
                    <button class="btn btn-outline" id="quizPrev" onclick="prevStep()" style="visibility:hidden;">← Back</button>
                    <button class="btn btn-primary" id="quizNext" onclick="nextStep()">Next →</button>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== COMMUNITY / TESTIMONIALS ===== -->
    <section class="section section-dark" id="community">
        <div class="container text-center">
            <h2 class="section-title reveal">Our Community Stories</h2>
            <p class="section-subtitle reveal">Real experiences from the families and animals whose lives have been transformed through PawBridge.</p>
            <div class="testimonials-grid reveal">
                <div class="testimonial-card">
                    <div class="quote-mark">"</div>
                    <div class="stars">★★★★★</div>
                    <p>PawBridge helped us find our forever companion, Maple. Their behavioral assessment was thorough, and the training resources they provided made the transition seamless for our entire family.</p>
                    <div class="testimonial-author">
                        <img src="https://i.pravatar.cc/88?u=user1" alt="Sarah M.">
                        <div class="author-info">
                            <strong>Sarah Mitchell</strong>
                            <span>Adopted 2024</span>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <div class="quote-mark">"</div>
                    <div class="stars">★★★★★</div>
                    <p>The nutrition consultation changed everything for our senior dog, Buster. The team identified a food sensitivity that was causing chronic discomfort, and now he's playful and comfortable again.</p>
                    <div class="testimonial-author">
                        <img src="https://i.pravatar.cc/88?u=user2" alt="James T.">
                        <div class="author-info">
                            <strong>James Thornton</strong>
                            <span>Client since 2023</span>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <div class="quote-mark">"</div>
                    <div class="stars">★★★★★</div>
                    <p>As a volunteer, I've seen firsthand the incredible impact PawBridge has on rescue animals. Their rehabilitation programs give second chances to pets who might otherwise go without one.</p>
                    <div class="testimonial-author">
                        <img src="https://i.pravatar.cc/88?u=user3" alt="Maria L.">
                        <div class="author-info">
                            <strong>Maria Gonzalez</strong>
                            <span>Volunteer & Foster</span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top:40px;" class="reveal">
                <a href="#" class="btn btn-light">Volunteer With Us</a>
            </div>
        </div>
    </section>

    <!-- ===== ABOUT + FAQ ===== -->
    <section class="section" id="about">
        <div class="container">
            <div class="content-layout">
                <div class="main-content">
                    <h2 class="section-title reveal">About PawBridge</h2>
                    <p class="reveal">Founded in 2018, PawBridge began as a small rescue operation in a suburban garage and has grown into a comprehensive pet care organization serving thousands of families across the region. Our mission is simple: every animal deserves a chance at a happy, healthy life.</p>
                    <p class="reveal">We believe that responsible pet ownership starts with education and access. That's why we offer everything from preventive care guidance and spay/neuter resources to behavioral support and nutritional counseling — all under one roof. Our team of veterinarians, certified trainers, and animal behaviorists work collaboratively to ensure every pet receives the highest standard of care.</p>
                    <p class="reveal">Through our community partnerships, we've facilitated over 1,200 adoptions, sponsored 500+ spay/neuter procedures, and trained 300+ rescue volunteers. We're not just an organization — we're a movement dedicated to building a world where every pet is valued, protected, and loved.</p>
                    <a href="#" class="btn btn-primary" style="margin-top:20px;">Learn More About Our Mission</a>

                    <!-- FAQ -->
                    <div class="faq-list reveal" style="margin-top:48px;">
                        <h3 style="font-family:'Lora',serif;font-size:1.4rem;margin-bottom:20px;">Frequently Asked Questions</h3>
                        <div class="faq-item">
                            <div class="faq-question" onclick="toggleFaq(this)">
                                What does the adoption process involve?
                                <div class="arrow">▼</div>
                            </div>
                            <div class="faq-answer">
                                <p>Our adoption process includes an application review, a home visit to ensure a safe environment, and a meet-and-greet session with the pet. We also provide a 30-day support period with access to our veterinary partners and training resources to help new families adjust smoothly.</p>
                            </div>
                        </div>
                        <div class="faq-item">
                            <div class="faq-question" onclick="toggleFaq(this)">
                                Do you offer emergency veterinary services?
                                <div class="arrow">▼</div>
                            </div>
                            <div class="faq-answer">
                                <p>While PawBridge doesn't operate an emergency clinic directly, our partner network of 38 veterinary practices includes several that offer 24/7 emergency services. We can help direct you to the nearest emergency facility and provide guidance on what to do in critical situations.</p>
                            </div>
                        </div>
                        <div class="faq-item">
                            <div class="faq-question" onclick="toggleFaq(this)">
                                How can I volunteer or foster a pet?
                                <div class="arrow">▼</div>
                            </div>
                            <div class="faq-answer">
                                <p>We welcome volunteers of all experience levels. Fostering is one of the most impactful ways to help — you provide a temporary home while we cover all medical and behavioral support. Our foster program includes training, supplies, and 24/7 support from our veterinary team.</p>
                            </div>
                        </div>
                        <div class="faq-item">
                            <div class="faq-question" onclick="toggleFaq(this)">
                                What training methods do you use?
                                <div class="arrow">▼</div>
                            </div>
                            <div class="faq-answer">
                                <p>All our training programs are based on positive reinforcement techniques. We believe in building trust and communication rather than using punishment-based methods. Our certified trainers stay current with the latest research in animal behavior science to ensure the most effective and humane approach.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <aside class="sidebar">
                    <div class="sidebar-card">
                        <h4>📅 Upcoming Events</h4>
                        <div class="event-item">
                            <div class="event-date"><span class="day">15</span>Jun</div>
                            <div class="event-info">
                                <h5>Adoption Fair</h5>
                                <span>Central Park, 10am–4pm</span>
                            </div>
                        </div>
                        <div class="event-item">
                            <div class="event-date"><span class="day">22</span>Jun</div>
                            <div class="event-info">
                                <h5>Pet First Aid Workshop</h5>
                                <span>Community Center, 2pm</span>
                            </div>
                        </div>
                        <div class="event-item">
                            <div class="event-date"><span class="day">03</span>Jul</div>
                            <div class="event-info">
                                <h5>Fundraiser Gala</h5>
                                <span>Riverside Hall, 6pm</span>
                            </div>
                        </div>
                        <div class="event-item">
                            <div class="event-date"><span class="day">10</span>Jul</div>
                            <div class="event-info">
                                <h5>Free Vaccination Clinic</h5>
                                <span>Downtown Vet, 9am–1pm</span>
                            </div>
                        </div>
                    </div>
                    <div class="sidebar-card">
                        <h4>💡 Training Tips</h4>
                        <div class="tip-item">
                            <h5>Consistency is Key</h5>
                            <p>Use the same commands and rewards every time. Pets thrive on predictable routines.</p>
                        </div>
                        <div class="tip-item">
                            <h5>Short Sessions Win</h5>
                            <p>Keep training to 5–10 minutes. Pets lose focus quickly — end on a positive note.</p>
                        </div>
                        <div class="tip-item">
                            <h5>Socialize Early</h5>
                            <p>Expose puppies and kittens to new environments, people, and animals between 3–14 weeks.</p>
                        </div>
                    </div>
                    <div class="sidebar-card">
                        <h4>🆕 Rescue Spotlight</h4>
                        <img src="https://picsum.photos/300x180?random=rescue1" alt="Rescue pet spotlight" style="border-radius:10px;margin-bottom:12px;">
                        <h5>Rosie — 2 yr old Shepherd Mix</h5>
                        <p style="font-size:0.82rem;color:#6b6b6b;margin-bottom:10px;">Found as a stray, Rosie is now a gentle, loyal companion looking for her forever home. She's great with kids and loves belly rubs.</p>
                        <a href="#" class="btn btn-outline" style="padding:8px 18px;font-size:0.82rem;">Read Her Story</a>
                    </div>
                </aside>
            </div>
        </div>
    </section>

    <!-- ===== CTA BANNER ===== -->
    <section class="section" style="background:linear-gradient(135deg,#e76f51,#f4a261);">
        <div class="container text-center reveal">
            <h2 class="section-title" style="color:#fff;">Ready to Make a Difference?</h2>
            <p style="color:rgba(255,255,255,0.9);max-width:560px;margin:0 auto 32px;font-size:1.05rem;">Whether you're ready to adopt, volunteer, or support our mission, there's a place for you in the PawBridge family. Every action counts.</p>
            <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
                <a href="#pets" class="btn btn-light">Adopt Today</a>
                <a href="#" class="btn btn-dark">Make Appointment</a>
                <a href="#" class="btn btn-outline" style="border-color:#fff;color:#fff;">Volunteer Now</a>
            </div>
        </div>
    </section>

    <!-- ===== FOOTER ===== -->
    <footer id="about">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a href="#" class="logo">
                        <img src="https://placehold.co/84x84/e76f51/ffffff?text=🐾&font=noto+sans" alt="PawBridge Logo">
                        <div class="logo-text">Paw<span>Bridge</span></div>
                    </a>
                    <p>Connecting hearts, healing pets. Since 2018, PawBridge has been a trusted resource for pet care, adoption, veterinary support, and community building in the greater metropolitan area.</p>
                    <div class="footer-social">
                        <a href="#" aria-label="Facebook">📘</a>
                        <a href="#" aria-label="Instagram">📸</a>
                        <a href="#" aria-label="Twitter">🐦</a>
                        <a href="#" aria-label="YouTube">▶️</a>
                    </div>
                </div>
                <div class="footer-col">
                    <h4>Quick Links</h4>
                    <a href="#home">Home</a>
                    <a href="#services">Services</a>
                    <a href="#pets">Adopt</a>
                    <a href="#nutrition">Nutrition</a>
                    <a href="#community">Community</a>
                    <a href="#care">Pet Care</a>
                    <a href="#about">About</a>
                </div>
                <div class="footer-col">
                    <h4>Resources</h4>
                    <a href="#">Pet Care Guides</a>
                    <a href="#">Training Videos</a>
                    <a href="#">Nutrition Articles</a>
                    <a href="#">Behavior FAQ</a>
                    <a href="#">Rescue Network</a>
                </div>
                <div class="footer-col">
                    <h4>Contact Us</h4>
                    <ul class="footer-contact">
                        <li><span class="icon">📍</span> 742 Maple Avenue, Suite 100, Portland, OR 97201</li>
                        <li><span class="icon">📞</span> (503) 555-0147</li>
                        <li><span class="icon">✉️</span> hello@pawbridge.org</li>
                        <li><span class="icon">🕐</span> Mon–Fri: 8am–6pm, Sat: 9am–3pm</li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <span>&copy; 2025 PawBridge. All rights reserved.</span>
                <span>
                    <a href="#">Privacy Policy</a> · <a href="#">Terms of Service</a> · <a href="#">Accessibility</a>
                </span>
            </div>
        </div>
    </footer>

    <!-- ===== JAVASCRIPT ===== -->
    <script>
        // Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.getElementById('siteHeader');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        // Mobile nav toggle
        document.getElementById('mobileToggle').addEventListener('click', () => {
            document.getElementById('mainNav').classList.toggle('open');
        });

        // Close mobile nav on link click
        document.querySelectorAll('#mainNav a').forEach(link => {
            link.addEventListener('click', () => {
                document.getElementById('mainNav').classList.remove('open');
            });
        });

        // Scroll reveal
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });

        document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

        // Quiz logic
        let currentStep = 1;
        const totalSteps = 4;
        const answers = {};

        function selectOption(el, step) {
            const parent = el.closest('.quiz-step');
            parent.querySelectorAll('.quiz-option').forEach(opt => opt.classList.remove('selected'));
            el.classList.add('selected');
            answers['step' + step] = el.dataset.value;
        }

        function updateProgress() {
            document.querySelectorAll('.quiz-dot').forEach((dot, i) => {
                dot.classList.toggle('active', i < currentStep);
            });
        }

        function updateNavButtons() {
            document.getElementById('quizPrev').style.visibility = currentStep === 1 ? 'hidden' : 'visible';
            document.getElementById('quizNext').textContent = currentStep === totalSteps ? 'See Results' : 'Next →';
        }

        function nextStep() {
            if (currentStep <= totalSteps) {
                const currentEl = document.querySelector(`.quiz-step[data-step="${currentStep}"]`);
                const selected = currentEl ? currentEl.querySelector('.quiz-option.selected') : null;
                if (!selected && currentStep <= totalSteps) {
                    // Allow proceeding even without selection for demo
                }
            }

            if (currentStep < totalSteps) {
                document.querySelector(`.quiz-step[data-step="${currentStep}"]`).classList.remove('active');
                currentStep++;
                document.querySelector(`.quiz-step[data-step="${currentStep}"]`).classList.add('active');
                updateProgress();
                updateNavButtons();
            } else {
                // Show result
                document.querySelector(`.quiz-step[data-step="${currentStep}"]`).classList.remove('active');
                const result = document.querySelector('.quiz-step[data-step="result"]');
                result.classList.add('active');

                // Generate result based on answers
                const results = {
                    'apartment-low-solo': { title: 'Cavalier King Charles Spaniel', text: 'A gentle, adaptable companion perfect for apartment living and quiet companionship. Cavaliers are affectionate, easygoing, and thrive in smaller spaces.' },
                    'apartment-low-family': { title: 'Bichon Frise', text: ' Cheerful and hypoallergenic, the Bichon Frise is ideal for families in apartments. They are playful yet calm, and get along wonderfully with children.' },
                    'house-high-family': { title: 'Labrador Retriever', text: 'An energetic and loyal family dog who thrives with space and activity. Labs are intelligent, eager to please, and excellent with children of all ages.' },
                    'rural-high-couple': { title: 'Australian Shepherd', text: 'A high-energy, intelligent breed that thrives in open spaces with active couples. Aussies are loyal, trainable, and love having a job to do.' },
                    'shared-moderate-seniors': { title: 'Greyhound (Retired)', text: 'Surprisingly calm indoors, retired racing Greyhounds make wonderful companions for seniors in shared living. They are gentle, low-maintenance, and affectionate.' },
                    'house-high-family': { title: 'Golden Retriever', text: 'The quintessential family dog — loyal, intelligent, and patient with children. Goldens thrive in homes with yards and plenty of love to give.' },
                };

                // Try to match, fallback to default
                const key = `${answers.step1}-${answers.step2}-${answers.step3}`;
                const result = results[key] || {
                    title: 'Mixed Breed Companion',
                    text: 'Based on your lifestyle, a mixed-breed dog or cat from our shelter would make an excellent companion. Mixed breeds often have fewer genetic health issues and unique, wonderful personalities. Visit our adoption center to meet your match!'
                };

                document.getElementById('quizResultTitle').textContent = `Your Match: ${result.title}`;
                document.getElementById('quizResultText').textContent = result.text;
            }
        }

        function prevStep() {
            if (currentStep > 1) {
                document.querySelector(`.quiz-step[data-step="${currentStep}"]`).classList.remove('active');
                currentStep--;
                document.querySelector(`.quiz-step[data-step="${currentStep}"]`).classList.add('active');
                updateProgress();
                updateNavButtons();
            }
        }

        function resetQuiz() {
            currentStep = 1;
            document.querySelectorAll('.quiz-step').forEach(s => s.classList.remove('active'));
            document.querySelector('.quiz-step[data-step="1"]').classList.add('active');
            document.querySelectorAll('.quiz-option').forEach(o => o.classList.remove('selected'));
            updateProgress();
            updateNavButtons();
        }

        // FAQ accordion
        function toggleFaq(el) {
            const item = el.parentElement;
            const isActive = item.classList.contains('active');
            // Close all
            document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('active'));
            // Toggle current
            if (!isActive) {
                item.classList.add('active');
            }
        }

        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    e.preventDefault();
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });
    </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:45:29.764Z",
  "url": "https://benchmark.aimac.invalid/ccf908a77c59cb0a53832a1c7ad5188a0572250d878fb3793e7ba56e8c0c3354.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": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": []
    },
    {
      "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": "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": []
    },
    {
      "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": "<a href=\"#\" aria-label=\"Facebook\">\ud83d\udcd8</a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Facebook\">\ud83d\udcd8</a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Facebook\">\ud83d\udcd8</a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Facebook\">\ud83d\udcd8</a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Facebook\">\ud83d\udcd8</a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div class=\"icon-circle\" style=\"background:#fef3e2;\">\u2764\ufe0f</div>",
          "target": [
            ".card-1 > .icon-circle"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"btn btn-primary\" id=\"quizNext\" onclick=\"nextStep()\">Next \u2192</button>",
          "target": [
            "#quizNext"
          ]
        }
      ]
    },
    {
      "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>Every Pet Deserves a <em>Bridge</em> to a Better Life</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title reveal\">Comprehensive Pet Services</h2>",
                  "target": [
                    "#services > .text-center.container > h2"
                  ]
                },
                {
                  "html": "<h3>Nutrition Guidance</h3>",
                  "target": [
                    ".feature-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Behavioral Support</h3>",
                  "target": [
                    ".feature-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Veterinary Resources</h3>",
                  "target": [
                    ".feature-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Adoption Services</h3>",
                  "target": [
                    ".feature-card:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h3>Training Programs</h3>",
                  "target": [
                    ".feature-card:nth-child(5) > h3"
                  ]
                },
                {
                  "html": "<h3>Community Rescue</h3>",
                  "target": [
                    ".feature-card:nth-child(6) > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title reveal\">Pets Ready for Their Forever Home</h2>",
                  "target": [
                    "#pets > .text-center.container > h2"
                  ]
                },
                {
                  "html": "<h4>Buddy</h4>",
                  "target": [
                    ".pet-card:nth-child(1) > .pet-card-body > h4"
                  ]
                },
                {
                  "html": "<h4>Luna</h4>",
                  "target": [
                    ".pet-card:nth-child(2) > .pet-card-body > h4"
                  ]
                },
                {
                  "html": "<h4>Max</h4>",
                  "target": [
                    ".pet-card:nth-child(3) > .pet-card-body > h4"
                  ]
                },
                {
                  "html": "<h4>Clover</h4>",
                  "target": [
                    ".pet-card:nth-child(4) > .pet-card-body > h4"
                  ]
                },
                {
                  "html": "<h3>Proper Nutrition Is Preventive Care</h3>",
                  "target": [
                    ".nutrition-text > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title reveal\">Training &amp; Behavior Programs</h2>",
                  "target": [
                    "#care > .text-center.container > h2"
                  ]
                },
                {
                  "html": "<h3>Puppy Foundations</h3>",
                  "target": [
                    ".training-card:nth-child(1) > .training-card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Behavior Modification</h3>",
                  "target": [
                    ".training-card:nth-child(2) > .training-card-body > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title reveal\">Find Your Perfect Pet Match</h2>",
                  "target": [
                    "#quiz > .text-center.container > h2"
                  ]
                },
                {
                  "html": "<h3>What's your living situation?</h3>",
                  "target": [
                    "div[data-step=\"1\"] > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title reveal\">Our Community Stories</h2>",
                  "target": [
                    "#community > .text-center.container > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title reveal\">About PawBridge</h2>",
                  "target": [
                    ".main-content > h2"
                  ]
                },
                {
                  "html": "<h3 style=\"font-family:'Lora',serif;font-size:1.4rem;margin-bottom:20px;\">Frequently Asked Questions</h3>",
                  "target": [
                    ".faq-list > h3"
                  ]
                },
                {
                  "html": "<h4>\ud83d\udcc5 Upcoming Events</h4>",
                  "target": [
                    ".sidebar-card:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h5>Adoption Fair</h5>",
                  "target": [
                    ".event-item:nth-child(2) > .event-info > h5"
                  ]
                },
                {
                  "html": "<h5>Pet First Aid Workshop</h5>",
                  "target": [
                    ".event-item:nth-child(3) > .event-info > h5"
                  ]
                },
                {
                  "html": "<h5>Fundraiser Gala</h5>",
                  "target": [
                    ".event-item:nth-child(4) > .event-info > h5"
                  ]
                },
                {
                  "html": "<h5>Free Vaccination Clinic</h5>",
                  "target": [
                    ".event-item:nth-child(5) > .event-info > h5"
                  ]
                },
                {
                  "html": "<h4>\ud83d\udca1 Training Tips</h4>",
                  "target": [
                    ".sidebar-card:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h5>Consistency is Key</h5>",
                  "target": [
                    ".tip-item:nth-child(2) > h5"
                  ]
                },
                {
                  "html": "<h5>Short Sessions Win</h5>",
                  "target": [
                    ".tip-item:nth-child(3) > h5"
                  ]
                },
                {
                  "html": "<h5>Socialize Early</h5>",
                  "target": [
                    ".tip-item:nth-child(4) > h5"
                  ]
                },
                {
                  "html": "<h4>\ud83c\udd95 Rescue Spotlight</h4>",
                  "target": [
                    ".sidebar-card:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h5>Rosie \u2014 2 yr old Shepherd Mix</h5>",
                  "target": [
                    ".sidebar-card:nth-child(3) > h5"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\" style=\"color:#fff;\">Ready to Make a Difference?</h2>",
                  "target": [
                    ".text-center.container.reveal > h2"
                  ]
                },
                {
                  "html": "<h4>Quick Links</h4>",
                  "target": [
                    ".footer-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Resources</h4>",
                  "target": [
                    ".footer-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact Us</h4>",
                  "target": [
                    ".footer-col:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e76f51",
                "bgColor": "#ffffff",
                "contrastRatio": 3.09,
                "fontSize": "26.4pt (35.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 3.09"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"stat-number\">12,400+</div>",
          "target": [
            "div:nth-child(1) > .stat-number"
          ]
        }
      ]
    },
    {
      "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": "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/84x84/e76f51/ffffff?text=\ud83d\udc3e&amp;font=noto+sans\" alt=\"PawBridge Logo\">",
          "target": [
            ".header-inner > .logo[href=\"#\"] > img[alt=\"PawBridge Logo\"]"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"main-content\">",
                  "target": [
                    ".main-content"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text in some way other than by color"
            },
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"main-content\">",
                  "target": [
                    ".main-content"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"btn btn-primary\" style=\"margin-top:20px;\">Learn More About Our Mission</a>",
          "target": [
            ".main-content > .btn-primary.btn[href=\"#\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "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=\"#\" class=\"logo\">\n                <img src=\"https://placehold.co/84x84/e76f51/ffffff?text=\ud83d\udc3e&amp;font=noto+sans\" alt=\"PawBridge Logo\">\n                <div class=\"logo-text\">Paw<span>Bridge</span></div>\n            </a>",
          "target": [
            ".header-inner > .logo[href=\"#\"]"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"nutrition-list\">",
          "target": [
            ".nutrition-list"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><span class=\"check\">\u2713</span> Age-appropriate formulations</li>",
          "target": [
            ".nutrition-list > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/84x84/e76f51/ffffff?text=\ud83d\udc3e&amp;font=noto+sans\" alt=\"PawBridge Logo\">",
          "target": [
            ".header-inner > .logo[href=\"#\"] > img[alt=\"PawBridge Logo\"]"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 160.2,
                "height": 42
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (160.2px by 42px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"logo\">\n                <img src=\"https://placehold.co/84x84/e76f51/ffffff?text=\ud83d\udc3e&amp;font=noto+sans\" alt=\"PawBridge Logo\">\n                <div class=\"logo-text\">Paw<span>Bridge</span></div>\n            </a>",
          "target": [
            ".header-inner > .logo[href=\"#\"]"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "16.2pt (21.6px)",
                "fontWeight": "bold",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header id=\"siteHeader\">",
                  "target": [
                    "#siteHeader"
                  ]
                },
                {
                  "html": "<section class=\"hero\" id=\"home\">",
                  "target": [
                    "#home"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"logo-text\">Paw<span>Bridge</span></div>",
          "target": [
            ".header-inner > .logo[href=\"#\"] > .logo-text"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e76f51",
                "contrastRatio": 3.09,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#quiz\" class=\"nav-cta\">Pet Match</a>",
                  "target": [
                    ".nav-cta"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #e76f51, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#quiz\" class=\"nav-cta\">Pet Match</a>",
          "target": [
            ".nav-cta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #e76f51, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#888888",
                "bgColor": "#ffffff",
                "contrastRatio": 3.54,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"stats-bar\">",
                  "target": [
                    ".stats-bar"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"stat-label\">Happy Families</div>",
          "target": [
            "div:nth-child(1) > .stat-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#888888",
                "bgColor": "#ffffff",
                "contrastRatio": 3.54,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"stats-bar\">",
                  "target": [
                    ".stats-bar"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"stat-label\">Pets Adopted</div>",
          "target": [
            "div:nth-child(2) > .stat-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#888888",
                "bgColor": "#ffffff",
                "contrastRatio": 3.54,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"stats-bar\">",
                  "target": [
                    ".stats-bar"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"stat-label\">Vet Partners</div>",
          "target": [
            "div:nth-child(3) > .stat-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#888888",
                "bgColor": "#ffffff",
                "contrastRatio": 3.54,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"stats-bar\">",
                  "target": [
                    ".stats-bar"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"stat-label\">Satisfaction</div>",
          "target": [
            "div:nth-child(4) > .stat-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e76f51",
                "contrastRatio": 3.09,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\" style=\"margin-top:20px;\">Learn More About Our Mission</a>",
                  "target": [
                    ".main-content > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #e76f51, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\" style=\"margin-top:20px;\">Learn More About Our Mission</a>",
          "target": [
            ".main-content > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #e76f51, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e76f51",
                "bgColor": "#fef3e2",
                "contrastRatio": 2.81,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\"><span class=\"day\">15</span>Jun</div>",
                  "target": [
                    ".event-item:nth-child(2) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"event-date\"><span class=\"day\">15</span>Jun</div>",
          "target": [
            ".event-item:nth-child(2) > .event-date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e76f51",
                "bgColor": "#fef3e2",
                "contrastRatio": 2.81,
                "fontSize": "13.2pt (17.6px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\"><span class=\"day\">15</span>Jun</div>",
                  "target": [
                    ".event-item:nth-child(2) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"day\">15</span>",
          "target": [
            ".event-item:nth-child(2) > .event-date > .day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#888888",
                "bgColor": "#ffffff",
                "contrastRatio": 3.54,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Central Park, 10am\u20134pm</span>",
          "target": [
            ".event-item:nth-child(2) > .event-info > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e76f51",
                "bgColor": "#fef3e2",
                "contrastRatio": 2.81,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\"><span class=\"day\">22</span>Jun</div>",
                  "target": [
                    ".event-item:nth-child(3) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"event-date\"><span class=\"day\">22</span>Jun</div>",
          "target": [
            ".event-item:nth-child(3) > .event-date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e76f51",
                "bgColor": "#fef3e2",
                "contrastRatio": 2.81,
                "fontSize": "13.2pt (17.6px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\"><span class=\"day\">22</span>Jun</div>",
                  "target": [
                    ".event-item:nth-child(3) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"day\">22</span>",
          "target": [
            ".event-item:nth-child(3) > .event-date > .day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#888888",
                "bgColor": "#ffffff",
                "contrastRatio": 3.54,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Community Center, 2pm</span>",
          "target": [
            ".event-item:nth-child(3) > .event-info > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e76f51",
                "bgColor": "#fef3e2",
                "contrastRatio": 2.81,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\"><span class=\"day\">03</span>Jul</div>",
                  "target": [
                    ".event-item:nth-child(4) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"event-date\"><span class=\"day\">03</span>Jul</div>",
          "target": [
            ".event-item:nth-child(4) > .event-date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e76f51",
                "bgColor": "#fef3e2",
                "contrastRatio": 2.81,
                "fontSize": "13.2pt (17.6px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\"><span class=\"day\">03</span>Jul</div>",
                  "target": [
                    ".event-item:nth-child(4) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"day\">03</span>",
          "target": [
            ".event-item:nth-child(4) > .event-date > .day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#888888",
                "bgColor": "#ffffff",
                "contrastRatio": 3.54,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Riverside Hall, 6pm</span>",
          "target": [
            ".event-item:nth-child(4) > .event-info > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e76f51",
                "bgColor": "#fef3e2",
                "contrastRatio": 2.81,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\"><span class=\"day\">10</span>Jul</div>",
                  "target": [
                    ".event-item:nth-child(5) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"event-date\"><span class=\"day\">10</span>Jul</div>",
          "target": [
            ".event-item:nth-child(5) > .event-date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e76f51",
                "bgColor": "#fef3e2",
                "contrastRatio": 2.81,
                "fontSize": "13.2pt (17.6px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\"><span class=\"day\">10</span>Jul</div>",
                  "target": [
                    ".event-item:nth-child(5) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"day\">10</span>",
          "target": [
            ".event-item:nth-child(5) > .event-date > .day"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #fef3e2, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#888888",
                "bgColor": "#ffffff",
                "contrastRatio": 3.54,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Downtown Vet, 9am\u20131pm</span>",
          "target": [
            ".event-item:nth-child(5) > .event-info > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e76f51",
                "bgColor": "#ffffff",
                "contrastRatio": 3.09,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.09 (foreground color: #e76f51, background color: #ffffff, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-outline\" style=\"padding:8px 18px;font-size:0.82rem;\">Read Her Story</a>",
          "target": [
            ".sidebar-card:nth-child(3) > .btn-outline.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.09 (foreground color: #e76f51, background color: #ffffff, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#666666",
                "bgColor": "#1a1a1a",
                "contrastRatio": 3.03,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer id=\"about\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #666666, background color: #1a1a1a, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>\u00a9 2025 PawBridge. All rights reserved.</span>",
          "target": [
            ".footer-bottom > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #666666, background color: #1a1a1a, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#666666",
                "bgColor": "#1a1a1a",
                "contrastRatio": 3.03,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer id=\"about\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.03 (foreground color: #666666, background color: #1a1a1a, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>\n                    <a href=\"#\">Privacy Policy</a> \u00b7 <a href=\"#\">Terms of Service</a> \u00b7 <a href=\"#\">Accessibility</a>\n                </span>",
          "target": [
            ".footer-bottom > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.03 (foreground color: #666666, background color: #1a1a1a, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e76f51",
                "bgColor": "#f4f4f4",
                "contrastRatio": 2.81,
                "fontSize": "16.2pt (21.6px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header id=\"siteHeader\">",
                  "target": [
                    "#siteHeader"
                  ]
                },
                {
                  "html": "<section class=\"section section-dark\" id=\"community\">",
                  "target": [
                    "#community"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #f4f4f4, font size: 16.2pt (21.6px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Bridge</span>",
          "target": [
            ".header-inner > .logo[href=\"#\"] > .logo-text > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.81 (foreground color: #e76f51, background color: #f4f4f4, font size: 16.2pt (21.6px), font weight: bold). Expected contrast ratio of 3:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 8228
      },
      {
        "y": 576,
        "height": 8228
      },
      {
        "y": 1152,
        "height": 8228
      },
      {
        "y": 1728,
        "height": 8228
      },
      {
        "y": 2304,
        "height": 8228
      },
      {
        "y": 2880,
        "height": 8228
      },
      {
        "y": 3456,
        "height": 8228
      },
      {
        "y": 4032,
        "height": 8228
      },
      {
        "y": 4608,
        "height": 8228
      },
      {
        "y": 5184,
        "height": 8228
      },
      {
        "y": 5760,
        "height": 8228
      },
      {
        "y": 6336,
        "height": 8228
      },
      {
        "y": 6912,
        "height": 8228
      },
      {
        "y": 7488,
        "height": 8228
      },
      {
        "y": 7508,
        "height": 8228
      }
    ],
    "scans": 16,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Pets" 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: "Pets"
- Description: Pet care, adoption, veterinary resources, training, and animal rescue information.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Pets" 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: "Community", "Pet Care", "About".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Pets" category. Consider themes similar to: "Nutrition Advice", "Behavior Help", "Available Pets".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "preventive care", "spay/neuter", "nutrition requirements".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Volunteer", "Adopt Today", "Make Appointment".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Pets" sector. Ideas similar but not limited to: "pet compatibility quiz".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "event calendar", "training advice", "rescue spotlights".
-   **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.