DeepSeek DeepSeek V4 Pro 0813 – Real Estate

via Together · Generated

  • AIMAC Debt 4.85
  • Cost $0.08
  • Total Violations 20
  • HTML Size 72 KB
  • Em Dashes 6

Screenshot

View DeepSeek DeepSeek V4 Pro 0813 Real Estate page View Live Page

Accessibility Issues Found

20 Serious

  • color-contrast serious 20 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <a href="#" class="active">Home</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>Haven & Hearth Realty — Where Home Begins</title>
    <meta name="description" content="Haven & Hearth Realty offers expert guidance for buying, selling, and renting homes. Explore luxury properties, open houses, and mortgage resources.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --color-primary: #1A2A3A;
            --color-primary-light: #2C3E50;
            --color-accent: #C9A96E;
            --color-accent-light: #E8D5B5;
            --color-accent-dark: #A8894E;
            --color-bg: #FFFFFF;
            --color-bg-alt: #F8F6F3;
            --color-bg-dark: #1A2A3A;
            --color-text: #2D2D2D;
            --color-text-light: #6B7280;
            --color-text-white: #F5F5F5;
            --color-border: #E5E7EB;
            --color-success: #2E7D32;
            --color-error: #C62828;
            --font-heading: 'Playfair Display', Georgia, serif;
            --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
            --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 16px;
            --radius-xl: 24px;
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --container-max: 1200px;
            --section-padding: 80px 0;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            font-family: var(--font-body);
            color: var(--color-text);
            background-color: var(--color-bg);
            line-height: 1.7;
            font-size: 16px;
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: color var(--transition);
        }

        ul,
        ol {
            list-style: none;
        }

        .container {
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ============ HEADER ============ */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--color-border);
            transition: box-shadow var(--transition);
        }

        .site-header.scrolled {
            box-shadow: var(--shadow-md);
        }

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 0;
            gap: 24px;
            flex-wrap: wrap;
        }

        .logo-section {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-shrink: 0;
        }

        .logo-placeholder {
            width: 52px;
            height: 52px;
            border-radius: var(--radius-md);
            background: var(--color-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-accent);
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 20px;
            letter-spacing: 0.5px;
            flex-shrink: 0;
            overflow: hidden;
        }

        .logo-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo-text .site-name {
            font-family: var(--font-heading);
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--color-primary);
            letter-spacing: -0.3px;
            line-height: 1.2;
        }

        .logo-text .tagline {
            font-size: 0.75rem;
            color: var(--color-text-light);
            font-weight: 400;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
        }

        .main-nav a {
            padding: 8px 14px;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--color-text);
            border-radius: var(--radius-sm);
            transition: all var(--transition);
            position: relative;
            letter-spacing: 0.2px;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--color-accent-dark);
            background: var(--color-bg-alt);
        }

        .main-nav a.active::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: var(--color-accent);
            border-radius: 2px;
        }

        .nav-cta {
            background: var(--color-primary) !important;
            color: #fff !important;
            padding: 10px 20px !important;
            border-radius: var(--radius-sm) !important;
            font-weight: 600 !important;
            letter-spacing: 0.3px;
        }

        .nav-cta:hover {
            background: var(--color-primary-light) !important;
            color: #fff !important;
        }

        /* ============ HERO ============ */
        .hero {
            position: relative;
            min-height: 680px;
            display: flex;
            align-items: center;
            background: var(--color-primary);
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.45;
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg,
                    rgba(26, 42, 58, 0.92) 0%,
                    rgba(26, 42, 58, 0.7) 40%,
                    rgba(26, 42, 58, 0.5) 100%);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            padding: 80px 0;
            width: 100%;
        }

        .hero-badge {
            display: inline-block;
            background: rgba(201, 169, 110, 0.2);
            border: 1px solid rgba(201, 169, 110, 0.5);
            color: var(--color-accent-light);
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .hero h1 {
            font-family: var(--font-heading);
            font-size: 3.5rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.15;
            letter-spacing: -0.5px;
            margin-bottom: 20px;
            max-width: 700px;
        }

        .hero h1 .highlight {
            color: var(--color-accent);
            font-style: italic;
        }

        .hero-sub {
            font-size: 1.15rem;
            color: rgba(255, 255, 255, 0.85);
            max-width: 560px;
            margin-bottom: 36px;
            line-height: 1.8;
            font-weight: 300;
        }

        /* Search Bar */
        .search-bar {
            background: #fff;
            border-radius: var(--radius-lg);
            padding: 20px 24px;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: flex-end;
            box-shadow: var(--shadow-xl);
            max-width: 800px;
        }

        .search-field {
            flex: 1 1 180px;
            min-width: 150px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .search-field label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--color-text-light);
        }

        .search-field input,
        .search-field select {
            padding: 10px 14px;
            border: 1.5px solid var(--color-border);
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 0.9rem;
            color: var(--color-text);
            background: var(--color-bg);
            transition: border-color var(--transition);
            outline: none;
            width: 100%;
        }

        .search-field input:focus,
        .search-field select:focus {
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
        }

        .search-btn {
            padding: 12px 28px;
            background: var(--color-accent);
            color: var(--color-primary);
            border: none;
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition);
            letter-spacing: 0.3px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .search-btn:hover {
            background: var(--color-accent-dark);
            color: #fff;
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        /* ============ STATS BAR ============ */
        .stats-bar {
            background: var(--color-primary);
            padding: 28px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .stats-grid {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            flex-wrap: wrap;
            text-align: center;
        }

        .stat-item {
            flex: 1 1 150px;
        }

        .stat-number {
            font-family: var(--font-heading);
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--color-accent);
            line-height: 1.2;
        }

        .stat-label {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.7);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;
        }

        /* ============ SECTION COMMON ============ */
        .section {
            padding: var(--section-padding);
        }

        .section-alt {
            background: var(--color-bg-alt);
        }

        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 48px;
        }

        .section-header .eyebrow {
            display: inline-block;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--color-accent-dark);
            margin-bottom: 10px;
        }

        .section-header h2 {
            font-family: var(--font-heading);
            font-size: 2.4rem;
            font-weight: 700;
            color: var(--color-primary);
            letter-spacing: -0.3px;
            line-height: 1.25;
            margin-bottom: 14px;
        }

        .section-header p {
            font-size: 1.05rem;
            color: var(--color-text-light);
            line-height: 1.8;
        }

        /* ============ FEATURED PROPERTIES ============ */
        .properties-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 28px;
        }

        .property-card {
            background: #fff;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: all var(--transition);
            border: 1px solid var(--color-border);
            cursor: pointer;
            position: relative;
        }

        .property-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
            border-color: var(--color-accent-light);
        }

        .property-image {
            position: relative;
            height: 220px;
            overflow: hidden;
        }

        .property-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .property-card:hover .property-image img {
            transform: scale(1.05);
        }

        .property-badge {
            position: absolute;
            top: 14px;
            left: 14px;
            background: var(--color-accent);
            color: var(--color-primary);
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .property-badge.open-house {
            background: #2E7D32;
            color: #fff;
        }

        .property-badge.luxury {
            background: var(--color-primary);
            color: var(--color-accent);
        }

        .property-body {
            padding: 20px 22px 22px;
        }

        .property-price {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: 4px;
        }

        .property-address {
            font-size: 0.9rem;
            color: var(--color-text-light);
            margin-bottom: 12px;
        }

        .property-details {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            font-size: 0.85rem;
            color: var(--color-text-light);
            padding-top: 12px;
            border-top: 1px solid var(--color-border);
        }

        .property-details span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .property-details .icon {
            font-size: 1rem;
        }

        .property-cta {
            display: inline-block;
            margin-top: 14px;
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--color-accent-dark);
            letter-spacing: 0.3px;
        }

        .property-cta:hover {
            color: var(--color-primary);
        }

        /* ============ SERVICES ============ */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 24px;
        }

        .service-card {
            background: #fff;
            border-radius: var(--radius-lg);
            padding: 32px 24px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--color-border);
            transition: all var(--transition);
        }

        .service-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
            border-color: var(--color-accent-light);
        }

        .service-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: var(--color-bg-alt);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            font-size: 1.8rem;
            color: var(--color-accent-dark);
            transition: all var(--transition);
        }

        .service-card:hover .service-icon {
            background: var(--color-accent);
            color: #fff;
        }

        .service-card h3 {
            font-family: var(--font-heading);
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--color-primary);
            margin-bottom: 10px;
        }

        .service-card p {
            font-size: 0.9rem;
            color: var(--color-text-light);
            line-height: 1.7;
        }

        /* ============ LUXURY HOMES ============ */
        .luxury-showcase {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

        .luxury-image {
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            position: relative;
        }

        .luxury-image img {
            width: 100%;
            height: 420px;
            object-fit: cover;
        }

        .luxury-image .overlay-badge {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(26, 42, 58, 0.9);
            color: var(--color-accent);
            padding: 8px 18px;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
        }

        .luxury-content h3 {
            font-family: var(--font-heading);
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: 16px;
            letter-spacing: -0.3px;
        }

        .luxury-content p {
            color: var(--color-text-light);
            line-height: 1.8;
            margin-bottom: 16px;
            font-size: 0.95rem;
        }

        .luxury-features {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 20px 0;
        }

        .luxury-features span {
            background: var(--color-bg-alt);
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--color-text);
            border: 1px solid var(--color-border);
        }

        .btn-primary {
            display: inline-block;
            padding: 14px 32px;
            background: var(--color-primary);
            color: #fff;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.95rem;
            letter-spacing: 0.3px;
            transition: all var(--transition);
            border: none;
            cursor: pointer;
            font-family: var(--font-body);
        }

        .btn-primary:hover {
            background: var(--color-primary-light);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .btn-accent {
            display: inline-block;
            padding: 14px 32px;
            background: var(--color-accent);
            color: var(--color-primary);
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.95rem;
            letter-spacing: 0.3px;
            transition: all var(--transition);
            border: none;
            cursor: pointer;
            font-family: var(--font-body);
        }

        .btn-accent:hover {
            background: var(--color-accent-dark);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        /* ============ SELLER GUIDE ============ */
        .seller-guide-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
        }

        .guide-card {
            background: #fff;
            border-radius: var(--radius-lg);
            padding: 28px 24px;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--color-border);
            transition: all var(--transition);
            position: relative;
            overflow: hidden;
        }

        .guide-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--color-accent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--transition);
        }

        .guide-card:hover::before {
            transform: scaleX(1);
        }

        .guide-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .guide-number {
            font-family: var(--font-heading);
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--color-accent-light);
            line-height: 1;
            margin-bottom: 12px;
        }

        .guide-card h3 {
            font-family: var(--font-heading);
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--color-primary);
            margin-bottom: 10px;
        }

        .guide-card p {
            font-size: 0.9rem;
            color: var(--color-text-light);
            line-height: 1.7;
        }

        /* ============ TESTIMONIALS ============ */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
        }

        .testimonial-card {
            background: #fff;
            border-radius: var(--radius-lg);
            padding: 28px 24px;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--color-border);
            transition: all var(--transition);
        }

        .testimonial-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .testimonial-stars {
            color: var(--color-accent);
            font-size: 1.1rem;
            letter-spacing: 2px;
            margin-bottom: 12px;
        }

        .testimonial-text {
            font-size: 0.95rem;
            color: var(--color-text);
            line-height: 1.8;
            font-style: italic;
            margin-bottom: 16px;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .testimonial-author img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--color-accent-light);
        }

        .testimonial-author .name {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--color-primary);
        }

        .testimonial-author .role {
            font-size: 0.8rem;
            color: var(--color-text-light);
        }

        /* ============ MORTGAGE CALCULATOR ============ */
        .calculator-section {
            background: var(--color-primary);
            padding: var(--section-padding);
            color: #fff;
        }

        .calculator-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center;
        }

        .calculator-info h2 {
            font-family: var(--font-heading);
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: -0.3px;
            margin-bottom: 16px;
        }

        .calculator-info p {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.8;
            font-size: 0.95rem;
            margin-bottom: 20px;
        }

        .calculator-info .key-points {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .calculator-info .key-points li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.85);
        }

        .calculator-info .key-points li::before {
            content: '✓';
            color: var(--color-accent);
            font-weight: 700;
            font-size: 1rem;
        }

        .calculator-box {
            background: #fff;
            border-radius: var(--radius-lg);
            padding: 32px 28px;
            box-shadow: var(--shadow-xl);
            color: var(--color-text);
        }

        .calculator-box h3 {
            font-family: var(--font-heading);
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--color-primary);
            margin-bottom: 20px;
            text-align: center;
        }

        .calc-field {
            margin-bottom: 16px;
        }

        .calc-field label {
            display: block;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--color-text-light);
            margin-bottom: 4px;
        }

        .calc-field input,
        .calc-field select {
            width: 100%;
            padding: 10px 14px;
            border: 1.5px solid var(--color-border);
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 0.95rem;
            color: var(--color-text);
            background: var(--color-bg);
            transition: border-color var(--transition);
            outline: none;
        }

        .calc-field input:focus,
        .calc-field select:focus {
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
        }

        .calc-btn {
            width: 100%;
            padding: 14px;
            background: var(--color-accent);
            color: var(--color-primary);
            border: none;
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition);
            letter-spacing: 0.3px;
            margin-top: 8px;
        }

        .calc-btn:hover {
            background: var(--color-accent-dark);
            color: #fff;
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .calc-result {
            margin-top: 20px;
            padding: 18px;
            background: var(--color-bg-alt);
            border-radius: var(--radius-md);
            text-align: center;
            display: none;
        }

        .calc-result.visible {
            display: block;
            animation: fadeIn 0.4s ease;
        }

        .calc-result .monthly-payment {
            font-family: var(--font-heading);
            font-size: 2rem;
            font-weight: 700;
            color: var(--color-primary);
        }

        .calc-result .result-detail {
            font-size: 0.85rem;
            color: var(--color-text-light);
            margin-top: 4px;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ============ FAQ ============ */
        .faq-list {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            background: #fff;
            border-radius: var(--radius-md);
            margin-bottom: 12px;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--color-border);
            overflow: hidden;
            transition: all var(--transition);
        }

        .faq-item:hover {
            box-shadow: var(--shadow-md);
        }

        .faq-question {
            padding: 18px 24px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--color-primary);
            user-select: none;
            transition: background var(--transition);
            gap: 16px;
        }

        .faq-question:hover {
            background: var(--color-bg-alt);
        }

        .faq-question .faq-icon {
            font-size: 1.3rem;
            color: var(--color-accent);
            transition: transform var(--transition);
            flex-shrink: 0;
            font-weight: 400;
        }

        .faq-item.active .faq-icon {
            transform: rotate(45deg);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.3s ease;
            padding: 0 24px;
            color: var(--color-text-light);
            font-size: 0.9rem;
            line-height: 1.8;
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
            padding: 0 24px 20px;
        }

        /* ============ CTA SECTION ============ */
        .cta-section {
            background: var(--color-bg-alt);
            padding: 60px 0;
            text-align: center;
        }

        .cta-section h2 {
            font-family: var(--font-heading);
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: 12px;
            letter-spacing: -0.3px;
        }

        .cta-section p {
            color: var(--color-text-light);
            font-size: 1.05rem;
            max-width: 500px;
            margin: 0 auto 28px;
            line-height: 1.8;
        }

        .cta-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* ============ FOOTER ============ */
        .site-footer {
            background: var(--color-primary);
            color: rgba(255, 255, 255, 0.8);
            padding: 60px 0 0;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1.5fr;
            gap: 40px;
            padding-bottom: 40px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .footer-brand .site-name {
            font-family: var(--font-heading);
            font-size: 1.4rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 8px;
        }

        .footer-brand .tagline {
            font-size: 0.85rem;
            color: var(--color-accent-light);
            margin-bottom: 16px;
            letter-spacing: 0.5px;
        }

        .footer-brand p {
            font-size: 0.85rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.6);
            max-width: 300px;
        }

        .footer-col h4 {
            font-family: var(--font-heading);
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 16px;
            letter-spacing: 0.3px;
        }

        .footer-col ul li {
            margin-bottom: 8px;
        }

        .footer-col ul li a {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.6);
            transition: color var(--transition);
        }

        .footer-col ul li a:hover {
            color: var(--color-accent);
        }

        .footer-contact p {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .footer-social {
            display: flex;
            gap: 12px;
            margin-top: 16px;
        }

        .footer-social a {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 0.9rem;
            transition: all var(--transition);
        }

        .footer-social a:hover {
            background: var(--color-accent);
            color: var(--color-primary);
            transform: translateY(-2px);
        }

        .footer-bottom {
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.5);
        }

        .footer-bottom .legal-links {
            display: flex;
            gap: 20px;
        }

        .footer-bottom .legal-links a {
            color: rgba(255, 255, 255, 0.5);
            transition: color var(--transition);
        }

        .footer-bottom .legal-links a:hover {
            color: var(--color-accent);
        }

        /* ============ RESPONSIVE ============ */
        @media (max-width: 1024px) {
            .hero h1 {
                font-size: 2.8rem;
            }
            .luxury-showcase {
                grid-template-columns: 1fr;
                gap: 28px;
            }
            .luxury-image img {
                height: 300px;
            }
            .calculator-wrapper {
                grid-template-columns: 1fr;
                gap: 32px;
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 28px;
            }
        }

        @media (max-width: 768px) {
            .header-inner {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            .main-nav {
                width: 100%;
                justify-content: flex-start;
                gap: 2px;
                overflow-x: auto;
                padding-bottom: 4px;
                flex-wrap: nowrap;
            }
            .main-nav a {
                white-space: nowrap;
                padding: 6px 10px;
                font-size: 0.8rem;
            }
            .hero {
                min-height: 560px;
            }
            .hero h1 {
                font-size: 2.2rem;
            }
            .hero-sub {
                font-size: 1rem;
            }
            .search-bar {
                flex-direction: column;
                padding: 16px;
            }
            .search-field {
                min-width: 100%;
            }
            .search-btn {
                width: 100%;
            }
            .section-header h2 {
                font-size: 1.8rem;
            }
            .properties-grid {
                grid-template-columns: 1fr;
            }
            .services-grid {
                grid-template-columns: 1fr 1fr;
            }
            .testimonials-grid {
                grid-template-columns: 1fr;
            }
            .seller-guide-grid {
                grid-template-columns: 1fr;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
            .stats-grid {
                gap: 12px;
            }
            .stat-number {
                font-size: 1.6rem;
            }
        }

        @media (max-width: 480px) {
            .services-grid {
                grid-template-columns: 1fr;
            }
            .hero h1 {
                font-size: 1.8rem;
            }
            .section {
                padding: 50px 0;
            }
            .section-header h2 {
                font-size: 1.5rem;
            }
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
            .btn-primary,
            .btn-accent {
                width: 100%;
                text-align: center;
            }
        }
    </style>
</head>
<body>

    <!-- ==================== HEADER ==================== -->
    <header class="site-header" id="siteHeader">
        <div class="container header-inner">
            <div class="logo-section">
                <div class="logo-placeholder">
                    <img src="https://placehold.co/52x52/1A2A3A/C9A96E?text=H%26H&font=playfair display" alt="Haven & Hearth Realty Logo">
                </div>
                <div class="logo-text">
                    <span class="site-name">Haven &amp; Hearth Realty</span>
                    <span class="tagline">Where Home Begins</span>
                </div>
            </div>
            <nav class="main-nav" aria-label="Primary navigation">
                <a href="#" class="active">Home</a>
                <a href="#properties">Buy</a>
                <a href="#sell">Sell</a>
                <a href="#rent">Rent</a>
                <a href="#mortgages">Mortgages</a>
                <a href="#neighborhoods">Neighborhoods</a>
                <a href="#about">About</a>
                <a href="#contact" class="nav-cta">Contact Us</a>
            </nav>
        </div>
    </header>

    <!-- ==================== HERO ==================== -->
    <section class="hero" id="home">
        <img class="hero-bg" src="https://picsum.photos/seed/herohome/1920/1080" alt="Beautiful home exterior" loading="eager">
        <div class="hero-overlay"></div>
        <div class="container hero-content">
            <span class="hero-badge">Trusted Since 2008</span>
            <h1>Discover Your <span class="highlight">Perfect</span> Place to Call Home</h1>
            <p class="hero-sub">
                From first-time buyers to seasoned investors, our expert agents guide you through every step —
                from pre-approval to closing day. Explore curated listings, open houses, and neighborhood insights.
            </p>
            <div class="search-bar" id="propertySearch">
                <div class="search-field">
                    <label for="searchLocation">Location</label>
                    <input type="text" id="searchLocation" placeholder="City, ZIP, or neighborhood" value="">
                </div>
                <div class="search-field">
                    <label for="searchType">Property Type</label>
                    <select id="searchType">
                        <option value="all">All Types</option>
                        <option value="house">Single Family</option>
                        <option value="condo">Condo</option>
                        <option value="townhouse">Townhouse</option>
                        <option value="luxury">Luxury Estate</option>
                    </select>
                </div>
                <div class="search-field">
                    <label for="searchPrice">Price Range</label>
                    <select id="searchPrice">
                        <option value="all">Any Price</option>
                        <option value="under500">Under $500K</option>
                        <option value="500to1m">$500K – $1M</option>
                        <option value="1mto2m">$1M – $2M</option>
                        <option value="over2m">$2M+</option>
                    </select>
                </div>
                <button class="search-btn" id="searchBtn" type="button">Search Properties</button>
            </div>
        </div>
    </section>

    <!-- ==================== STATS BAR ==================== -->
    <div class="stats-bar">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-number">2,400+</div>
                    <div class="stat-label">Homes Sold</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">$850M</div>
                    <div class="stat-label">Total Sales Volume</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">98%</div>
                    <div class="stat-label">Client Satisfaction</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">15+</div>
                    <div class="stat-label">Years of Experience</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">45</div>
                    <div class="stat-label">Expert Agents</div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== FEATURED PROPERTIES ==================== -->
    <section class="section" id="properties">
        <div class="container">
            <div class="section-header">
                <span class="eyebrow">Featured Listings</span>
                <h2>Homes You'll Love</h2>
                <p>Handpicked properties across the region — from charming starter homes to breathtaking luxury estates. Each listing is carefully vetted by our team.</p>
            </div>
            <div class="properties-grid" id="propertiesGrid">
                <!-- Property 1 -->
                <div class="property-card" data-type="house" data-price="650000" data-location="Maplewood">
                    <div class="property-image">
                        <img src="https://picsum.photos/seed/property1/600/400" alt="Maplewood family home" loading="lazy">
                        <span class="property-badge open-house">Open House: Sat 2–4 PM</span>
                    </div>
                    <div class="property-body">
                        <div class="property-price">$650,000</div>
                        <div class="property-address">128 Maplewood Drive, Maplewood, NJ</div>
                        <div class="property-details">
                            <span>🛏 4 Beds</span>
                            <span>🛁 3 Baths</span>
                            <span>📐 2,450 sqft</span>
                        </div>
                        <a href="#" class="property-cta">View Details →</a>
                    </div>
                </div>
                <!-- Property 2 -->
                <div class="property-card" data-type="condo" data-price="420000" data-location="Downtown">
                    <div class="property-image">
                        <img src="https://picsum.photos/seed/property2/600/400" alt="Downtown condo" loading="lazy">
                        <span class="property-badge">New Listing</span>
                    </div>
                    <div class="property-body">
                        <div class="property-price">$420,000</div>
                        <div class="property-address">45 Riverfront Ave, Unit 12B, Downtown</div>
                        <div class="property-details">
                            <span>🛏 2 Beds</span>
                            <span>🛁 2 Baths</span>
                            <span>📐 1,180 sqft</span>
                        </div>
                        <a href="#" class="property-cta">View Details →</a>
                    </div>
                </div>
                <!-- Property 3 -->
                <div class="property-card" data-type="luxury" data-price="2400000" data-location="Highland Park">
                    <div class="property-image">
                        <img src="https://picsum.photos/seed/property3/600/400" alt="Luxury estate in Highland Park" loading="lazy">
                        <span class="property-badge luxury">Luxury Estate</span>
                    </div>
                    <div class="property-body">
                        <div class="property-price">$2,400,000</div>
                        <div class="property-address">7 Crestview Lane, Highland Park, TX</div>
                        <div class="property-details">
                            <span>🛏 6 Beds</span>
                            <span>🛁 7 Baths</span>
                            <span>📐 6,800 sqft</span>
                        </div>
                        <a href="#" class="property-cta">View Details →</a>
                    </div>
                </div>
                <!-- Property 4 -->
                <div class="property-card" data-type="townhouse" data-price="380000" data-location="Brookside">
                    <div class="property-image">
                        <img src="https://picsum.photos/seed/property4/600/400" alt="Brookside townhouse" loading="lazy">
                        <span class="property-badge">Price Reduced</span>
                    </div>
                    <div class="property-body">
                        <div class="property-price">$380,000</div>
                        <div class="property-address">22 Brookside Terrace, Brookside, MA</div>
                        <div class="property-details">
                            <span>🛏 3 Beds</span>
                            <span>🛁 2.5 Baths</span>
                            <span>📐 1,750 sqft</span>
                        </div>
                        <a href="#" class="property-cta">View Details →</a>
                    </div>
                </div>
                <!-- Property 5 -->
                <div class="property-card" data-type="house" data-price="890000" data-location="Oakwood">
                    <div class="property-image">
                        <img src="https://picsum.photos/seed/property5/600/400" alt="Oakwood family home" loading="lazy">
                        <span class="property-badge open-house">Open House: Sun 1–3 PM</span>
                    </div>
                    <div class="property-body">
                        <div class="property-price">$890,000</div>
                        <div class="property-address">310 Oakwood Ave, Oakwood, CA</div>
                        <div class="property-details">
                            <span>🛏 5 Beds</span>
                            <span>🛁 4 Baths</span>
                            <span>📐 3,200 sqft</span>
                        </div>
                        <a href="#" class="property-cta">View Details →</a>
                    </div>
                </div>
                <!-- Property 6 -->
                <div class="property-card" data-type="condo" data-price="310000" data-location="Riverside">
                    <div class="property-image">
                        <img src="https://picsum.photos/seed/property6/600/400" alt="Riverside condo" loading="lazy">
                        <span class="property-badge">Great Value</span>
                    </div>
                    <div class="property-body">
                        <div class="property-price">$310,000</div>
                        <div class="property-address">88 Riverside Walk, Unit 3A, Riverside</div>
                        <div class="property-details">
                            <span>🛏 1 Bed</span>
                            <span>🛁 1 Bath</span>
                            <span>📐 780 sqft</span>
                        </div>
                        <a href="#" class="property-cta">View Details →</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== SERVICES ==================== -->
    <section class="section section-alt" id="services">
        <div class="container">
            <div class="section-header">
                <span class="eyebrow">What We Do</span>
                <h2>Full-Service Real Estate Expertise</h2>
                <p>Whether you're buying your first home, selling a cherished property, or exploring rental opportunities, our team provides end-to-end guidance with a personal touch.</p>
            </div>
            <div class="services-grid">
                <div class="service-card" id="buy">
                    <div class="service-icon">🏠</div>
                    <h3>Buy a Home</h3>
                    <p>From pre-approval to closing, we help you navigate the market with confidence. Our agents provide comparative market analysis and negotiate on your behalf.</p>
                </div>
                <div class="service-card" id="sell">
                    <div class="service-icon">📈</div>
                    <h3>Sell Your Home</h3>
                    <p>Maximize your home's value with our strategic marketing, professional staging advice, and data-driven pricing. We handle everything from listing to escrow.</p>
                </div>
                <div class="service-card" id="rent">
                    <div class="service-icon">🔑</div>
                    <h3>Rent &amp; Leasing</h3>
                    <p>Find the perfect rental or list your investment property. We screen tenants, manage showings, and ensure a smooth leasing process from start to finish.</p>
                </div>
                <div class="service-card" id="mortgages">
                    <div class="service-icon">💰</div>
                    <h3>Mortgage Resources</h3>
                    <p>Connect with trusted lenders and explore financing options tailored to your situation. We'll help you understand rates, terms, and pre-approval requirements.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== LUXURY HOMES ==================== -->
    <section class="section" id="luxury">
        <div class="container">
            <div class="luxury-showcase">
                <div class="luxury-image">
                    <img src="https://picsum.photos/seed/luxuryhome/800/600" alt="Luxury estate with pool" loading="lazy">
                    <span class="overlay-badge">Featured Luxury Estate</span>
                </div>
                <div class="luxury-content">
                    <span class="eyebrow" style="display:inline-block;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--color-accent-dark);margin-bottom:10px;">Luxury Collection</span>
                    <h3>Exceptional Homes for Extraordinary Living</h3>
                    <p>
                        Our luxury portfolio features some of the most coveted properties in the region — from modern architectural masterpieces to timeless estates on sprawling acreage. Each listing is represented with white-glove service, private showings, and discreet marketing tailored to high-net-worth buyers and sellers.
                    </p>
                    <p>
                        Whether you're seeking a waterfront retreat, a penthouse with skyline views, or a historic manor, our luxury specialists bring deep market knowledge and an extensive network to every transaction.
                    </p>
                    <div class="luxury-features">
                        <span>Private Showings</span>
                        <span>Global Marketing</span>
                        <span>Off-Market Access</span>
                        <span>Concierge Service</span>
                    </div>
                    <a href="#" class="btn-primary">Explore Luxury Listings</a>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== SELLER GUIDE ==================== -->
    <section class="section section-alt" id="seller-guide">
        <div class="container">
            <div class="section-header">
                <span class="eyebrow">Seller Resources</span>
                <h2>Your Step-by-Step Seller Guide</h2>
                <p>Selling a home is a significant decision. Our comprehensive guide walks you through every phase — from initial valuation to final closing — so you can sell with confidence.</p>
            </div>
            <div class="seller-guide-grid">
                <div class="guide-card">
                    <div class="guide-number">01</div>
                    <h3>Comparative Market Analysis</h3>
                    <p>We start with a detailed CMA to determine your home's true market value. Our agents analyze recent sales, current listings, and neighborhood trends to price your property competitively.</p>
                </div>
                <div class="guide-card">
                    <div class="guide-number">02</div>
                    <h3>Strategic Preparation</h3>
                    <p>From decluttering and staging to minor repairs and professional photography, we help you present your home in its best light. Small investments in preparation often yield significant returns.</p>
                </div>
                <div class="guide-card">
                    <div class="guide-number">03</div>
                    <h3>Marketing &amp; Exposure</h3>
                    <p>Your listing gets maximum visibility through MLS syndication, social media campaigns, email marketing, and our network of buyer agents. We also host open houses and private showings.</p>
                </div>
                <div class="guide-card">
                    <div class="guide-number">04</div>
                    <h3>Negotiation &amp; Escrow</h3>
                    <p>We negotiate offers on your behalf, manage contingencies, and guide you through the escrow process. Our team coordinates with inspectors, appraisers, and title companies to ensure a smooth closing.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== TESTIMONIALS ==================== -->
    <section class="section" id="testimonials">
        <div class="container">
            <div class="section-header">
                <span class="eyebrow">Client Stories</span>
                <h2>What Our Clients Say</h2>
                <p>Real experiences from real people who found their way home with Haven &amp; Hearth Realty.</p>
            </div>
            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <div class="testimonial-stars">★★★★★</div>
                    <p class="testimonial-text">"From our first meeting to closing day, the Haven &amp; Hearth team was exceptional. They helped us navigate a competitive market, negotiated a great price, and made the entire process feel effortless. We couldn't be happier in our new home."</p>
                    <div class="testimonial-author">
                        <img src="https://i.pravatar.cc/100?u=sarah" alt="Sarah Mitchell" loading="lazy">
                        <div>
                            <div class="name">Sarah Mitchell</div>
                            <div class="role">First-Time Homebuyer</div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <div class="testimonial-stars">★★★★★</div>
                    <p class="testimonial-text">"We sold our family home of 22 years with Haven &amp; Hearth, and the experience was truly remarkable. Their comparative market analysis was spot-on, and the marketing strategy attracted multiple offers within the first week. We sold above asking price."</p>
                    <div class="testimonial-author">
                        <img src="https://i.pravatar.cc/100?u=james" alt="James Rodriguez" loading="lazy">
                        <div>
                            <div class="name">James Rodriguez</div>
                            <div class="role">Home Seller</div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <div class="testimonial-stars">★★★★★</div>
                    <p class="testimonial-text">"As an investor, I've worked with many real estate agencies, but Haven &amp; Hearth stands out for their market intelligence and responsiveness. They helped me acquire three rental properties this year, each with excellent ROI potential."</p>
                    <div class="testimonial-author">
                        <img src="https://i.pravatar.cc/100?u=emily" alt="Emily Chen" loading="lazy">
                        <div>
                            <div class="name">Emily Chen</div>
                            <div class="role">Real Estate Investor</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== MORTGAGE CALCULATOR ==================== -->
    <section class="calculator-section" id="mortgage-calculator">
        <div class="container">
            <div class="calculator-wrapper">
                <div class="calculator-info">
                    <span class="eyebrow" style="display:inline-block;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--color-accent);margin-bottom:10px;">Financial Planning</span>
                    <h2>Mortgage Calculator</h2>
                    <p>
                        Understanding your monthly payment is the first step toward confident homeownership. Use our calculator to estimate your mortgage payment based on current rates, down payment, and loan terms.
                    </p>
                    <ul class="key-points">
                        <li>Get pre-approved before you start shopping</li>
                        <li>Factor in property taxes and insurance</li>
                        <li>Compare different loan terms and rates</li>
                        <li>Understand your debt-to-income ratio</li>
                    </ul>
                </div>
                <div class="calculator-box">
                    <h3>Estimate Your Monthly Payment</h3>
                    <div class="calc-field">
                        <label for="homePrice">Home Price ($)</label>
                        <input type="number" id="homePrice" value="500000" min="50000" max="10000000" step="10000">
                    </div>
                    <div class="calc-field">
                        <label for="downPayment">Down Payment ($)</label>
                        <input type="number" id="downPayment" value="100000" min="0" max="5000000" step="5000">
                    </div>
                    <div class="calc-field">
                        <label for="interestRate">Interest Rate (%)</label>
                        <input type="number" id="interestRate" value="6.5" min="0.1" max="15" step="0.1">
                    </div>
                    <div class="calc-field">
                        <label for="loanTerm">Loan Term (Years)</label>
                        <select id="loanTerm">
                            <option value="15">15 Years</option>
                            <option value="20">20 Years</option>
                            <option value="30" selected>30 Years</option>
                        </select>
                    </div>
                    <button class="calc-btn" id="calcBtn" type="button">Calculate Payment</button>
                    <div class="calc-result" id="calcResult">
                        <div class="monthly-payment" id="monthlyPayment">$0</div>
                        <div class="result-detail" id="resultDetail">Monthly principal &amp; interest</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== FAQ ==================== -->
    <section class="section" id="faq">
        <div class="container">
            <div class="section-header">
                <span class="eyebrow">Common Questions</span>
                <h2>Frequently Asked Questions</h2>
                <p>Answers to the questions we hear most often from buyers, sellers, and renters.</p>
            </div>
            <div class="faq-list" id="faqList">
                <div class="faq-item active">
                    <div class="faq-question">
                        <span>What is the first step in buying a home?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        The first step is getting pre-approved for a mortgage. This gives you a clear picture of your budget and shows sellers that you're a serious, qualified buyer. Our team can connect you with trusted lenders who will review your financial situation and issue a pre-approval letter.
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>How long does the escrow process typically take?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        Escrow typically takes 30 to 45 days from the time an offer is accepted. This period includes the home inspection, appraisal, title search, and final loan approval. Our agents coordinate with all parties to keep the process on track and address any issues that arise.
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>What is a comparative market analysis (CMA)?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        A comparative market analysis is a detailed report that evaluates your home's value by comparing it to similar properties that have recently sold, are currently listed, or were taken off the market in your area. It's an essential tool for pricing your home competitively.
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Should I buy or rent in today's market?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        The decision to buy or rent depends on your financial situation, lifestyle, and long-term goals. Buying builds equity and offers stability, while renting provides flexibility and lower upfront costs. Our agents can help you evaluate your options based on current market conditions and your personal circumstances.
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>What costs should I expect beyond the down payment?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        Beyond the down payment, buyers should budget for closing costs (typically 2–5% of the loan amount), which include appraisal fees, title insurance, loan origination fees, and prepaid property taxes and insurance. We provide a detailed cost estimate early in the process so there are no surprises.
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== CTA SECTION ==================== -->
    <section class="cta-section" id="contact">
        <div class="container">
            <h2>Ready to Find Your Dream Home?</h2>
            <p>Whether you're buying, selling, or just exploring your options, our team is here to help. Schedule a consultation today.</p>
            <div class="cta-buttons">
                <a href="#" class="btn-primary">Schedule a Tour</a>
                <a href="#" class="btn-accent">Start Your Search</a>
            </div>
        </div>
    </section>

    <!-- ==================== FOOTER ==================== -->
    <footer class="site-footer" id="about">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <div class="site-name">Haven &amp; Hearth Realty</div>
                    <div class="tagline">Where Home Begins</div>
                    <p>
                        A full-service real estate agency dedicated to helping individuals and families find their perfect home. With over 15 years of experience and a team of 45 expert agents, we provide personalized guidance for every step of your real estate journey.
                    </p>
                </div>
                <div class="footer-col">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="#properties">Browse Listings</a></li>
                        <li><a href="#sell">Sell Your Home</a></li>
                        <li><a href="#rent">Rent a Property</a></li>
                        <li><a href="#mortgages">Mortgage Resources</a></li>
                        <li><a href="#luxury">Luxury Collection</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Resources</h4>
                    <ul>
                        <li><a href="#seller-guide">Seller Guide</a></li>
                        <li><a href="#faq">FAQs</a></li>
                        <li><a href="#mortgage-calculator">Mortgage Calculator</a></li>
                        <li><a href="#">Market Reports</a></li>
                        <li><a href="#">Neighborhood Guides</a></li>
                    </ul>
                </div>
                <div class="footer-col footer-contact">
                    <h4>Contact Us</h4>
                    <p>📍 450 Market Street, Suite 200<br>San Francisco, CA 94105</p>
                    <p>📞 (415) 555-0123</p>
                    <p>✉️ hello@havenhearthrealty.com</p>
                    <p>🕐 Mon–Fri: 9 AM – 6 PM<br>Sat: 10 AM – 4 PM</p>
                    <div class="footer-social">
                        <a href="#" aria-label="Facebook" title="Facebook">f</a>
                        <a href="#" aria-label="Instagram" title="Instagram">ig</a>
                        <a href="#" aria-label="LinkedIn" title="LinkedIn">in</a>
                        <a href="#" aria-label="X (Twitter)" title="X">𝕏</a>
                        <a href="#" aria-label="YouTube" title="YouTube">▶</a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <span>&copy; 2025 Haven &amp; Hearth Realty. All rights reserved.</span>
                <div class="legal-links">
                    <a href="#">Privacy Policy</a>
                    <a href="#">Terms of Service</a>
                    <a href="#">Accessibility</a>
                    <a href="#">Fair Housing</a>
                </div>
            </div>
        </div>
    </footer>

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

        // Property search/filter functionality
        const searchBtn = document.getElementById('searchBtn');
        const searchLocation = document.getElementById('searchLocation');
        const searchType = document.getElementById('searchType');
        const searchPrice = document.getElementById('searchPrice');
        const propertyCards = document.querySelectorAll('.property-card');

        function filterProperties() {
            const locationQuery = searchLocation.value.toLowerCase().trim();
            const typeQuery = searchType.value;
            const priceQuery = searchPrice.value;

            propertyCards.forEach(card => {
                const cardType = card.getAttribute('data-type');
                const cardPrice = parseInt(card.getAttribute('data-price'));
                const cardLocation = card.getAttribute('data-location').toLowerCase();

                let show = true;

                // Location filter
                if (locationQuery && !cardLocation.includes(locationQuery)) {
                    show = false;
                }

                // Type filter
                if (typeQuery !== 'all' && cardType !== typeQuery) {
                    show = false;
                }

                // Price filter
                if (priceQuery !== 'all') {
                    if (priceQuery === 'under500' && cardPrice >= 500000) show = false;
                    if (priceQuery === '500to1m' && (cardPrice < 500000 || cardPrice > 1000000)) show = false;
                    if (priceQuery === '1mto2m' && (cardPrice < 1000000 || cardPrice > 2000000)) show = false;
                    if (priceQuery === 'over2m' && cardPrice <= 2000000) show = false;
                }

                card.style.display = show ? 'block' : 'none';
            });

            // Scroll to properties section
            document.getElementById('properties').scrollIntoView({ behavior: 'smooth' });
        }

        searchBtn.addEventListener('click', filterProperties);

        // Allow Enter key in search fields
        searchLocation.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') filterProperties();
        });

        // Mortgage Calculator
        const calcBtn = document.getElementById('calcBtn');
        const calcResult = document.getElementById('calcResult');
        const monthlyPaymentEl = document.getElementById('monthlyPayment');
        const resultDetailEl = document.getElementById('resultDetail');

        function calculateMortgage() {
            const homePrice = parseFloat(document.getElementById('homePrice').value) || 0;
            const downPayment = parseFloat(document.getElementById('downPayment').value) || 0;
            const interestRate = parseFloat(document.getElementById('interestRate').value) || 0;
            const loanTermYears = parseInt(document.getElementById('loanTerm').value) || 30;

            const loanAmount = homePrice - downPayment;
            if (loanAmount <= 0) {
                monthlyPaymentEl.textContent = '$0';
                resultDetailEl.textContent = 'Down payment covers the full home price.';
                calcResult.classList.add('visible');
                return;
            }

            const monthlyRate = interestRate / 100 / 12;
            const numberOfPayments = loanTermYears * 12;

            let monthlyPayment;
            if (monthlyRate === 0) {
                monthlyPayment = loanAmount / numberOfPayments;
            } else {
                monthlyPayment = loanAmount *
                    (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments)) /
                    (Math.pow(1 + monthlyRate, numberOfPayments) - 1);
            }

            const totalPayment = monthlyPayment * numberOfPayments;
            const totalInterest = totalPayment - loanAmount;

            monthlyPaymentEl.textContent = '$' + monthlyPayment.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            resultDetailEl.textContent =
                'Monthly principal & interest | Total interest: $' +
                totalInterest.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
                ' | Loan amount: $' +
                loanAmount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');

            calcResult.classList.add('visible');
        }

        calcBtn.addEventListener('click', calculateMortgage);

        // FAQ Accordion
        const faqItems = document.querySelectorAll('.faq-item');
        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            question.addEventListener('click', () => {
                const isActive = item.classList.contains('active');
                // Close all items
                faqItems.forEach(i => i.classList.remove('active'));
                // Open clicked item if it wasn't active
                if (!isActive) {
                    item.classList.add('active');
                }
            });
        });

        // Smooth scroll for all anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                const targetEl = document.querySelector(targetId);
                if (targetEl) {
                    e.preventDefault();
                    targetEl.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:46:28.519Z",
  "url": "https://benchmark.aimac.invalid/ac2ebc362e6b1675ecc44151f48fb3d1ad93c72e18dc6c253d77eee1c664ea9b.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": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<nav class=\"main-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<nav class=\"main-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<nav class=\"main-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<nav class=\"main-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"main-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span class=\"eyebrow\" style=\"display:inline-block;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--color-accent-dark);margin-bottom:10px;\">Luxury Collection</span>",
          "target": [
            ".luxury-content > .eyebrow"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"search-btn\" id=\"searchBtn\" type=\"button\">Search Properties</button>",
          "target": [
            "#searchBtn"
          ]
        }
      ]
    },
    {
      "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>Discover Your <span class=\"highlight\">Perfect</span> Place to Call Home</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>Homes You'll Love</h2>",
                  "target": [
                    "#properties > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h2>Full-Service Real Estate Expertise</h2>",
                  "target": [
                    "#services > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h3>Buy a Home</h3>",
                  "target": [
                    "#buy > h3"
                  ]
                },
                {
                  "html": "<h3>Sell Your Home</h3>",
                  "target": [
                    "#sell > h3"
                  ]
                },
                {
                  "html": "<h3>Rent &amp; Leasing</h3>",
                  "target": [
                    "#rent > h3"
                  ]
                },
                {
                  "html": "<h3>Mortgage Resources</h3>",
                  "target": [
                    "#mortgages > h3"
                  ]
                },
                {
                  "html": "<h3>Exceptional Homes for Extraordinary Living</h3>",
                  "target": [
                    ".luxury-content > h3"
                  ]
                },
                {
                  "html": "<h2>Your Step-by-Step Seller Guide</h2>",
                  "target": [
                    "#seller-guide > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h3>Comparative Market Analysis</h3>",
                  "target": [
                    ".guide-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Strategic Preparation</h3>",
                  "target": [
                    ".guide-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Marketing &amp; Exposure</h3>",
                  "target": [
                    ".guide-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Negotiation &amp; Escrow</h3>",
                  "target": [
                    ".guide-card:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h2>What Our Clients Say</h2>",
                  "target": [
                    "#testimonials > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h2>Mortgage Calculator</h2>",
                  "target": [
                    ".calculator-info > h2"
                  ]
                },
                {
                  "html": "<h3>Estimate Your Monthly Payment</h3>",
                  "target": [
                    ".calculator-box > h3"
                  ]
                },
                {
                  "html": "<h2>Frequently Asked Questions</h2>",
                  "target": [
                    "#faq > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h2>Ready to Find Your Dream Home?</h2>",
                  "target": [
                    ".container > 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-contact > 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": "#1a2a3a",
                "bgColor": "#ffffff",
                "contrastRatio": 14.62,
                "fontSize": "16.2pt (21.6px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 14.62"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span class=\"site-name\">Haven &amp; Hearth Realty</span>",
          "target": [
            ".logo-text > .site-name"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "searchLocation",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<input type=\"text\" id=\"searchLocation\" placeholder=\"City, ZIP, or neighborhood\" value=\"\">",
          "target": [
            "#searchLocation"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"searchLocation\">Location</label>",
                  "target": [
                    "label[for=\"searchLocation\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"searchLocation\" placeholder=\"City, ZIP, or neighborhood\" value=\"\">",
          "target": [
            "#searchLocation"
          ]
        }
      ]
    },
    {
      "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/52x52/1A2A3A/C9A96E?text=H%26H&amp;font=playfair display\" alt=\"Haven &amp; Hearth Realty Logo\">",
          "target": [
            "img[alt=\"Haven & Hearth Realty Logo\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "Location"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"searchLocation\">Location</label>",
                  "target": [
                    "label[for=\"searchLocation\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"searchLocation\" placeholder=\"City, ZIP, or neighborhood\" value=\"\">",
          "target": [
            "#searchLocation"
          ]
        }
      ]
    },
    {
      "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=\"active\">Home</a>",
          "target": [
            ".active[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=\"key-points\">",
          "target": [
            ".key-points"
          ]
        }
      ]
    },
    {
      "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>Get pre-approved before you start shopping</li>",
          "target": [
            ".key-points > 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/52x52/1A2A3A/C9A96E?text=H%26H&amp;font=playfair display\" alt=\"Haven &amp; Hearth Realty Logo\">",
          "target": [
            "img[alt=\"Haven & Hearth Realty Logo\"]"
          ]
        }
      ]
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "Property Type"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"searchType\">Property Type</label>",
                  "target": [
                    "label[for=\"searchType\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select id=\"searchType\">",
          "target": [
            "#searchType"
          ]
        }
      ]
    },
    {
      "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": 69.5,
                "height": 40.5
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (69.5px by 40.5px, 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=\"active\">Home</a>",
          "target": [
            ".active[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": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": "imgNode",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"hero-badge\">Trusted Since 2008</span>",
                  "target": [
                    ".hero-badge"
                  ]
                },
                {
                  "html": "<img class=\"hero-bg\" src=\"https://picsum.photos/seed/herohome/1920/1080\" alt=\"Beautiful home exterior\" loading=\"eager\">",
                  "target": [
                    ".hero-bg"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined because element contains an image node"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"hero-badge\">Trusted Since 2008</span>",
          "target": [
            ".hero-badge"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because element contains an image node"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8894e",
                "bgColor": "#f8f6f3",
                "contrastRatio": 3.06,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"active\">Home</a>",
                  "target": [
                    ".active[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a8894e, background color: #f8f6f3, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"active\">Home</a>",
          "target": [
            ".active[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a8894e, background color: #f8f6f3, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8894e",
                "bgColor": "#ffffff",
                "contrastRatio": 3.3,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Featured Listings</span>",
          "target": [
            "#properties > .container > .section-header > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8894e",
                "bgColor": "#ffffff",
                "contrastRatio": 3.3,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"property-card\" data-type=\"house\" data-price=\"650000\" data-location=\"Maplewood\">",
                  "target": [
                    "div[data-price=\"650000\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"property-cta\">View Details \u2192</a>",
          "target": [
            "div[data-price=\"650000\"] > .property-body > .property-cta[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.3 (foreground color: #a8894e, 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": "#a8894e",
                "bgColor": "#ffffff",
                "contrastRatio": 3.3,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"property-card\" data-type=\"condo\" data-price=\"420000\" data-location=\"Downtown\">",
                  "target": [
                    "div[data-price=\"420000\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"property-cta\">View Details \u2192</a>",
          "target": [
            "div[data-price=\"420000\"] > .property-body > .property-cta[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.3 (foreground color: #a8894e, 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": "#a8894e",
                "bgColor": "#ffffff",
                "contrastRatio": 3.3,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"property-card\" data-type=\"luxury\" data-price=\"2400000\" data-location=\"Highland Park\">",
                  "target": [
                    "div[data-type=\"luxury\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"property-cta\">View Details \u2192</a>",
          "target": [
            "div[data-type=\"luxury\"] > .property-body > .property-cta[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.3 (foreground color: #a8894e, 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": "#a8894e",
                "bgColor": "#ffffff",
                "contrastRatio": 3.3,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"property-card\" data-type=\"townhouse\" data-price=\"380000\" data-location=\"Brookside\">",
                  "target": [
                    "div[data-type=\"townhouse\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"property-cta\">View Details \u2192</a>",
          "target": [
            "div[data-type=\"townhouse\"] > .property-body > .property-cta[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.3 (foreground color: #a8894e, 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": "#a8894e",
                "bgColor": "#ffffff",
                "contrastRatio": 3.3,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"property-card\" data-type=\"house\" data-price=\"890000\" data-location=\"Oakwood\">",
                  "target": [
                    "div[data-price=\"890000\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"property-cta\">View Details \u2192</a>",
          "target": [
            "div[data-price=\"890000\"] > .property-body > .property-cta[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.3 (foreground color: #a8894e, 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": "#a8894e",
                "bgColor": "#ffffff",
                "contrastRatio": 3.3,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"property-card\" data-type=\"condo\" data-price=\"310000\" data-location=\"Riverside\">",
                  "target": [
                    "div[data-price=\"310000\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"property-cta\">View Details \u2192</a>",
          "target": [
            "div[data-price=\"310000\"] > .property-body > .property-cta[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.3 (foreground color: #a8894e, 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": "#a8894e",
                "bgColor": "#f8f6f3",
                "contrastRatio": 3.06,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section-alt\" id=\"services\">",
                  "target": [
                    "#services"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a8894e, background color: #f8f6f3, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">What We Do</span>",
          "target": [
            "#services > .container > .section-header > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a8894e, background color: #f8f6f3, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6b7280",
                "bgColor": "#f8f6f3",
                "contrastRatio": 4.48,
                "fontSize": "12.6pt (16.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section-alt\" id=\"services\">",
                  "target": [
                    "#services"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #6b7280, background color: #f8f6f3, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Whether you're buying your first home, selling a cherished property, or exploring rental opportunities, our team provides end-to-end guidance with a personal touch.</p>",
          "target": [
            "#services > .container > .section-header > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #6b7280, background color: #f8f6f3, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8894e",
                "bgColor": "#ffffff",
                "contrastRatio": 3.3,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\" style=\"display:inline-block;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--color-accent-dark);margin-bottom:10px;\">Luxury Collection</span>",
          "target": [
            ".luxury-content > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8894e",
                "bgColor": "#f8f6f3",
                "contrastRatio": 3.06,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section-alt\" id=\"seller-guide\">",
                  "target": [
                    "#seller-guide"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a8894e, background color: #f8f6f3, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Seller Resources</span>",
          "target": [
            "#seller-guide > .container > .section-header > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a8894e, background color: #f8f6f3, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6b7280",
                "bgColor": "#f8f6f3",
                "contrastRatio": 4.48,
                "fontSize": "12.6pt (16.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section-alt\" id=\"seller-guide\">",
                  "target": [
                    "#seller-guide"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #6b7280, background color: #f8f6f3, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Selling a home is a significant decision. Our comprehensive guide walks you through every phase \u2014 from initial valuation to final closing \u2014 so you can sell with confidence.</p>",
          "target": [
            "#seller-guide > .container > .section-header > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #6b7280, background color: #f8f6f3, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8d5b5",
                "bgColor": "#ffffff",
                "contrastRatio": 1.43,
                "fontSize": "30.0pt (40px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"guide-card\">",
                  "target": [
                    ".guide-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.43 (foreground color: #e8d5b5, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"guide-number\">01</div>",
          "target": [
            ".guide-card:nth-child(1) > .guide-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.43 (foreground color: #e8d5b5, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8d5b5",
                "bgColor": "#ffffff",
                "contrastRatio": 1.43,
                "fontSize": "30.0pt (40px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"guide-card\">",
                  "target": [
                    ".guide-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.43 (foreground color: #e8d5b5, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"guide-number\">02</div>",
          "target": [
            ".guide-card:nth-child(2) > .guide-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.43 (foreground color: #e8d5b5, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8d5b5",
                "bgColor": "#ffffff",
                "contrastRatio": 1.43,
                "fontSize": "30.0pt (40px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"guide-card\">",
                  "target": [
                    ".guide-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.43 (foreground color: #e8d5b5, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"guide-number\">03</div>",
          "target": [
            ".guide-card:nth-child(3) > .guide-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.43 (foreground color: #e8d5b5, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8d5b5",
                "bgColor": "#ffffff",
                "contrastRatio": 1.43,
                "fontSize": "30.0pt (40px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"guide-card\">",
                  "target": [
                    ".guide-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.43 (foreground color: #e8d5b5, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"guide-number\">04</div>",
          "target": [
            ".guide-card:nth-child(4) > .guide-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.43 (foreground color: #e8d5b5, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8894e",
                "bgColor": "#ffffff",
                "contrastRatio": 3.3,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Client Stories</span>",
          "target": [
            "#testimonials > .container > .section-header > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8894e",
                "bgColor": "#ffffff",
                "contrastRatio": 3.3,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Common Questions</span>",
          "target": [
            "#faq > .container > .section-header > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.3 (foreground color: #a8894e, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6b7280",
                "bgColor": "#f8f6f3",
                "contrastRatio": 4.48,
                "fontSize": "12.6pt (16.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"cta-section\" id=\"contact\">",
                  "target": [
                    "#contact"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #6b7280, background color: #f8f6f3, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Whether you're buying, selling, or just exploring your options, our team is here to help. Schedule a consultation today.</p>",
          "target": [
            "#contact > .container > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #6b7280, background color: #f8f6f3, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 7464
      },
      {
        "y": 576,
        "height": 7464
      },
      {
        "y": 1152,
        "height": 7464
      },
      {
        "y": 1728,
        "height": 7464
      },
      {
        "y": 2304,
        "height": 7464
      },
      {
        "y": 2880,
        "height": 7464
      },
      {
        "y": 3456,
        "height": 7464
      },
      {
        "y": 4032,
        "height": 7464
      },
      {
        "y": 4608,
        "height": 7464
      },
      {
        "y": 5184,
        "height": 7464
      },
      {
        "y": 5760,
        "height": 7464
      },
      {
        "y": 6336,
        "height": 7464
      },
      {
        "y": 6744,
        "height": 7464
      }
    ],
    "scans": 14,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Real Estate" 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: "Real Estate"
- Description: Property listings, real estate agencies, home buying, rentals, and mortgage resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Real Estate" 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: "Sell", "Mortgages", "Rent".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Real Estate" category. Consider themes similar to: "Open Houses", "Luxury Homes", "Seller Guide".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "pre-approval", "escrow", "comparative market analysis".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Search Properties", "Schedule Tour", "Start Search".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Real Estate" sector. Ideas similar but not limited to: "neighborhood finder".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "seller advice", "neighborhood spotlights", "market trends".
-   **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.