OpenAI GPT 6.1 Terra Pro – Real Estate

via OpenAI · Generated

  • AIMAC Debt 4.44
  • Cost $0.13
  • Total Violations 13
  • HTML Size 33 KB
  • Em Dashes 4

Screenshot

View OpenAI GPT 6.1 Terra Pro Real Estate page View Live Page

Accessibility Issues Found

13 Serious

  • color-contrast serious 13 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="brand-tagline">Find a place to belong.</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Find a place to belong with Haven & Field. Explore homes, local expertise, and practical guidance for every move.">
  <meta name="theme-color" content="#183c35">
  <title>Haven &amp; Field | Find a place to belong</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root{--ink:#183c35;--ink-dark:#102d28;--cream:#f6f5ee;--paper:#fff;--muted:#65736d;--line:#dce3dc;--lime:#d7e9a4;--orange:#e9a478;--max:1300px}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:"DM Sans",sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}
    button,input,select{font:inherit}
    button,a,summary{touch-action:manipulation}
    button{cursor:pointer}
    :focus-visible{outline:3px solid #e69c6d;outline-offset:4px}
    .wrap{width:min(var(--max),calc(100% - 80px));margin:auto}
    .eyebrow{font-size:.73rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
    .section{padding:110px 0}
    h1,h2,h3,h4,p{margin-top:0}
    h1,h2,h3{font-family:Manrope,sans-serif;letter-spacing:-.045em;line-height:1.12}
    h2{font-size:clamp(2.4rem,4.2vw,4rem);margin-bottom:20px}
    h3{font-size:1.3rem}
    p{color:var(--muted)}
    .button{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:1px solid transparent;border-radius:4px;padding:15px 22px;background:var(--ink);color:#fff;font-size:.88rem;font-weight:700;transition:background .2s,transform .2s}
    .button:hover{background:#28594e;transform:translateY(-2px)}
    .button.light{background:var(--lime);color:var(--ink)}
    .button.light:hover{background:#e7f4c2}
    .button.outline{background:transparent;border-color:var(--ink);color:var(--ink)}
    .button.outline:hover{background:var(--ink);color:#fff}
    .arrow{font-size:1.15em;line-height:1}
    .topline{background:var(--ink-dark);color:#e8f1e7;font-size:.75rem;padding:8px 0}
    .topline .wrap{display:flex;justify-content:space-between;gap:20px}
    .topline a{text-decoration:underline;text-underline-offset:3px}
    .site-header{background:#fff;position:relative;z-index:5}
    .header-inner{min-height:91px;display:flex;align-items:center;gap:30px;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
    .brand img{width:42px;height:42px;border-radius:3px}
    .brand-name{display:block;font-family:Manrope,sans-serif;font-weight:800;font-size:1.18rem;letter-spacing:-.06em;line-height:1.1}
    .brand-tagline{display:block;font-size:.64rem;color:#718078;letter-spacing:.02em;margin-top:4px}
    .nav{display:flex;align-items:center;gap:25px;font-size:.83rem;font-weight:700}
    .nav a:not(.button):hover{color:#77944d}
    .nav .button{padding:12px 16px}
    .menu-button{display:none;background:none;border:1px solid var(--line);border-radius:4px;padding:9px 12px;color:var(--ink);font-weight:700}
    .hero{position:relative;min-height:650px;display:flex;align-items:center;background:#415b4c url("https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=2000&q=85") center 56%/cover no-repeat;color:#fff}
    .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,37,31,.85) 0%,rgba(13,43,35,.62) 46%,rgba(13,43,35,.08) 100%)}
    .hero-content{position:relative;padding:85px 0 140px;max-width:730px}
    .hero .eyebrow{color:#d6e9b0;display:flex;align-items:center;gap:10px}
    .hero .eyebrow:before{content:"";width:30px;height:1px;background:#d6e9b0}
    .hero h1{font-size:clamp(3.4rem,6.7vw,6.5rem);line-height:1.03;margin:24px 0}
    .hero p{color:#edf2eb;max-width:520px;font-size:1.08rem;line-height:1.75;margin-bottom:30px}
    .hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
    .text-link{font-size:.88rem;font-weight:700;display:inline-flex;gap:10px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:4px}
    .search-area{position:relative;margin-top:-64px;z-index:2}
    .search-box{background:#fff;box-shadow:0 18px 55px rgba(14,44,35,.12);padding:25px 28px;display:grid;grid-template-columns:1.55fr 1fr 1fr auto;align-items:end;gap:0}
    .field{padding:0 24px;border-right:1px solid var(--line)}
    .field:first-child{padding-left:0}
    .field label,.calc-field label{display:block;font-size:.71rem;text-transform:uppercase;font-weight:700;letter-spacing:.1em;margin-bottom:7px}
    .field input,.field select{border:0;background:transparent;color:#5b6c62;width:100%;padding:3px 0;outline:none;min-height:30px}
    .search-box .button{margin-left:24px;min-height:53px}
    .intro-strip{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center;padding:82px 0 10px}
    .intro-strip h2{font-size:clamp(2rem,3.3vw,3.2rem);margin:12px 0 0}
    .intro-strip p{margin:0;max-width:500px}
    .section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:38px}
    .section-heading h2{margin:10px 0 0}
    .section-heading p{max-width:440px;margin:0}
    .listings{padding-top:105px}
    .listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .listing-card{background:#fff;border:1px solid #e4e9e2;min-width:0}
    .listing-image{height:270px;position:relative;overflow:hidden}
    .listing-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
    .listing-card:hover .listing-image img{transform:scale(1.04)}
    .badge{position:absolute;left:16px;top:16px;background:#fff;padding:7px 11px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
    .listing-body{padding:24px}
    .listing-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
    .price{font-family:Manrope,sans-serif;font-weight:800;font-size:1.55rem;letter-spacing:-.04em}
    .listing-type{font-size:.72rem;color:var(--muted)}
    .listing-body h3{font-size:1.08rem;margin:12px 0 3px;letter-spacing:-.025em}
    .listing-body .location{font-size:.88rem;margin-bottom:18px}
    .facts{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:17px;font-size:.82rem;color:#53675d}
    .facts strong{color:var(--ink)}
    details.property-details{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
    details.property-details summary{list-style:none;cursor:pointer;font-size:.82rem;font-weight:700;display:flex;justify-content:space-between}
    details.property-details summary::-webkit-details-marker{display:none}
    details.property-details p{font-size:.83rem;margin:12px 0 0}
    .results-note{font-size:.85rem;margin:18px 0 0;color:var(--muted)}
    .no-results{padding:30px;background:#fff;grid-column:1/-1}
    .center-action{text-align:center;margin-top:38px}
    .story{background:#e9eee4}
    .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
    .story-image{position:relative;padding:0 38px 38px 0}
    .story-image img{width:100%;height:590px;object-fit:cover}
    .image-note{position:absolute;right:0;bottom:0;background:var(--ink);color:white;padding:23px 28px;max-width:230px}
    .image-note strong{font-family:Manrope,sans-serif;display:block;font-size:2rem;line-height:1.1}
    .image-note span{font-size:.78rem;color:#dce9da}
    .story-copy .eyebrow,.section-heading .eyebrow,.resources .eyebrow,.mortgage .eyebrow{color:#6c8553}
    .story-copy h2{margin-top:16px}
    .story-copy p{max-width:510px}
    .steps{margin:30px 0;display:grid;gap:18px}
    .step{display:grid;grid-template-columns:38px 1fr;gap:14px}
    .step-number{font-family:Manrope,sans-serif;font-weight:700;color:#8da575}
    .step h3{font-size:1rem;letter-spacing:0;margin:0 0 4px}
    .step p{font-size:.9rem;margin:0}
    .resources{background:#fff}
    .resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .resource-card{background:var(--cream);padding:30px;min-height:300px;display:flex;flex-direction:column;align-items:flex-start}
    .resource-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid #a9ba9d;border-radius:50%;font-family:Manrope,sans-serif;font-weight:700;margin-bottom:32px}
    .resource-card h3{margin-bottom:10px}
    .resource-card p{font-size:.92rem;flex:1}
    .mortgage{background:var(--ink-dark);color:#fff}
    .mortgage-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
    .mortgage .eyebrow{color:#c6dda4}
    .mortgage h2{margin-top:15px}
    .mortgage p{color:#c6d4cb;max-width:500px}
    .mortgage .text-link{color:#e2edc6;margin-top:10px}
    .calculator{background:#fff;color:var(--ink);padding:34px}
    .calculator h3{font-size:1.4rem;margin-bottom:5px}
    .calculator>p{color:var(--muted);font-size:.86rem}
    .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:24px 0}
    .calc-field input{width:100%;border:1px solid #d7e0d8;border-radius:3px;padding:12px;background:#fafbf9;color:var(--ink)}
    .estimate{background:#edf3e6;padding:20px;display:flex;justify-content:space-between;gap:20px;align-items:center}
    .estimate span{font-size:.8rem}
    .estimate strong{font-family:Manrope,sans-serif;font-size:1.8rem;letter-spacing:-.05em;white-space:nowrap}
    .disclaimer{font-size:.7rem!important;color:#75847b!important;line-height:1.5;margin:14px 0 0}
    .testimonial{background:#f6f5ee}
    .quote-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}
    .quote-grid h2{margin-top:15px}
    .quote-card{background:#fff;padding:45px}
    .stars{color:#9aa970;letter-spacing:.2em}
    blockquote{font-family:Manrope,sans-serif;font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.035em;line-height:1.5;margin:20px 0 28px}
    .quote-person{display:flex;align-items:center;gap:13px;font-size:.83rem}
    .quote-person img{width:45px;height:45px;border-radius:50%}
    .quote-person strong,.quote-person span{display:block}
    .quote-person span{color:var(--muted)}
    .cta-band{background:var(--lime);padding:65px 0}
    .cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta-band h2{font-size:clamp(2rem,3.3vw,3.2rem);margin:0 0 8px}
    .cta-band p{margin:0;color:#49604d}
    footer{background:#102d28;color:#fff;padding:75px 0 25px}
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:50px;padding-bottom:65px}
    footer .brand-tagline{color:#c5d5ca}
    footer p,footer li,footer a{color:#c5d5ca;font-size:.86rem}
    footer .brand-name{color:white;font-size:1.18rem}
    footer .brand{margin-bottom:20px}
    footer p{max-width:300px}
    footer h3{font-family:"DM Sans",sans-serif;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 20px}
    footer ul{list-style:none;padding:0;margin:0}
    footer li{margin-bottom:10px}
    footer a:hover{color:#fff;text-decoration:underline}
    .footer-bottom{border-top:1px solid #39554c;padding-top:22px;display:flex;justify-content:space-between;gap:20px;color:#aebfb4;font-size:.75rem}
    .footer-bottom a{font-size:.75rem;margin-left:20px}
    @media(max-width:1100px){.nav{gap:14px}.nav .button{display:none}.header-inner{gap:15px}.listing-image{height:220px}.story-grid,.mortgage-grid{gap:45px}}
    @media(max-width:800px){
      .wrap{width:min(100% - 40px,var(--max))}
      .section{padding:75px 0}
      .topline .wrap span:last-child{display:none}
      .header-inner{min-height:76px}
      .menu-button{display:block}
      .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:20px;box-shadow:0 15px 25px #1233;flex-direction:column;align-items:stretch;gap:0}
      .nav.open{display:flex}
      .nav a:not(.button){padding:10px 0}
      .nav .button{display:inline-flex;margin-top:10px}
      .hero{min-height:590px}
      .hero-content{padding:75px 0 135px}
      .search-box{grid-template-columns:1fr 1fr;gap:20px;padding:22px}
      .field,.field:first-child{padding:0;border:0}
      .search-box .button{margin:0}
      .intro-strip,.story-grid,.mortgage-grid,.quote-grid{grid-template-columns:1fr;gap:35px}
      .intro-strip{padding-top:65px}
      .listing-grid,.resource-grid{grid-template-columns:repeat(2,1fr)}
      .story-image img{height:440px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:35px}
      .section-heading{align-items:start;flex-direction:column;gap:12px}
    }
    @media(max-width:520px){
      .hero h1{font-size:3.3rem}
      .hero p{font-size:1rem}
      .search-box{grid-template-columns:1fr}
      .search-box .button{width:100%}
      .field{border-bottom:1px solid var(--line)!important;padding-bottom:10px!important}
      .listing-grid,.resource-grid{grid-template-columns:1fr}
      .listing-image{height:245px}
      .story-image img{height:370px}
      .calc-grid{grid-template-columns:1fr}
      .calculator,.quote-card{padding:25px}
      .estimate{align-items:start;flex-direction:column;gap:5px}
      .cta-band .wrap{align-items:start;flex-direction:column}
      .footer-grid{grid-template-columns:1fr 1fr}
      .footer-grid>div:first-child{grid-column:1/-1}
      .footer-bottom{flex-direction:column}
      .footer-bottom a{margin:0 20px 0 0}
    }
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
  </style>
</head>
<body>
  <div class="topline">
    <div class="wrap">
      <span>Thoughtful guidance for wherever life takes you.</span>
      <span>Have a question? <a href="tel:+15035550148">Call (503) 555-0148</a></span>
    </div>
  </div>

  <header class="site-header">
    <div class="wrap header-inner">
      <a class="brand" href="#top" aria-label="Haven and Field home">
        <img src="https://placehold.co/84x84/183c35/ffffff?text=H&font=playfair%20display" alt="">
        <span><span class="brand-name">haven &amp; field</span><span class="brand-tagline">Find a place to belong.</span></span>
      </a>
      <button class="menu-button" type="button" aria-expanded="false" aria-controls="primary-nav">Menu ☰</button>
      <nav class="nav" id="primary-nav" aria-label="Primary navigation">
        <a href="#listings">Buy</a>
        <a href="#resources">Sell</a>
        <a href="#resources">Rent</a>
        <a href="#mortgages">Mortgages</a>
        <a href="#resources">Resources</a>
        <a href="#about">About</a>
        <a class="button" href="#contact">Let's talk <span class="arrow">↗</span></a>
      </nav>
    </div>
  </header>

  <main id="top">
    <section class="hero" aria-labelledby="hero-title">
      <div class="wrap">
        <div class="hero-content">
          <div class="eyebrow">A more human way home</div>
          <h1 id="hero-title">Find a place<br>to belong.</h1>
          <p>More than a set of keys, home is where your next chapter begins. We'll help you find the right place—and feel good about every step along the way.</p>
          <div class="hero-actions">
            <a class="button light" href="#search">Explore homes <span class="arrow">↗</span></a>
            <a class="text-link" href="#about">Get to know us <span class="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>

    <div class="wrap search-area" id="search">
      <form class="search-box" id="property-search" aria-label="Search featured properties">
        <div class="field">
          <label for="location">Where to?</label>
          <input id="location" type="search" placeholder="City, neighborhood, or address">
        </div>
        <div class="field">
          <label for="property-type">Property type</label>
          <select id="property-type">
            <option value="">All property types</option>
            <option value="house">House</option>
            <option value="townhome">Townhome</option>
            <option value="condo">Condo</option>
          </select>
        </div>
        <div class="field">
          <label for="max-price">Maximum price</label>
          <select id="max-price">
            <option value="">Any price</option>
            <option value="600000">Up to $600,000</option>
            <option value="800000">Up to $800,000</option>
            <option value="1000000">Up to $1,000,000</option>
          </select>
        </div>
        <button class="button" type="submit">Search properties <span class="arrow">↗</span></button>
      </form>
    </div>

    <div class="wrap intro-strip">
      <div>
        <span class="eyebrow">Real estate, made personal</span>
        <h2>Good moves start with good people.</h2>
      </div>
      <p>Buying, selling, or simply dreaming about what's next? We bring local insight, clear advice, and a little more care to the process—so you can make your move with confidence.</p>
    </div>

    <section class="section listings" id="listings">
      <div class="wrap">
        <div class="section-heading">
          <div><span class="eyebrow">A few places we love</span><h2>Homes with a little more.</h2></div>
          <p>Thoughtfully selected spaces in neighborhoods worth knowing. Take a look around and imagine what life could look like here.</p>
        </div>
        <div class="listing-grid" id="listing-grid">
          <article class="listing-card" data-location="portland alberta 2841 ne mason street" data-type="house" data-price="825000">
            <div class="listing-image">
              <img src="https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?auto=format&fit=crop&w=900&q=80" alt="Modern home with a landscaped front garden" loading="lazy">
              <span class="badge">Just listed</span>
            </div>
            <div class="listing-body">
              <div class="listing-top"><span class="price">$825,000</span><span class="listing-type">Single-family home</span></div>
              <h3>2841 NE Mason Street</h3>
              <p class="location">Alberta Arts District · Portland, OR</p>
              <div class="facts"><span><strong>3</strong> beds</span><span><strong>2</strong> baths</span><span><strong>1,860</strong> sq ft</span></div>
              <details class="property-details"><summary>View details <span>↗</span></summary><p>A light-filled home with an open kitchen, private backyard, and easy access to neighborhood cafés. The listing price reflects the home's recent updates and sought-after location.</p><p><a class="text-link" href="mailto:hello@havenandfield.example?subject=2841%20NE%20Mason%20Street">Ask about this home →</a></p></details>
            </div>
          </article>
          <article class="listing-card" data-location="portland sellwood 612 se clatsop street" data-type="townhome" data-price="649000">
            <div class="listing-image">
              <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=900&q=80" alt="Bright contemporary living space with large windows" loading="lazy">
              <span class="badge">Open house</span>
            </div>
            <div class="listing-body">
              <div class="listing-top"><span class="price">$649,000</span><span class="listing-type">Townhome</span></div>
              <h3>612 SE Clatsop Street</h3>
              <p class="location">Sellwood-Moreland · Portland, OR</p>
              <div class="facts"><span><strong>3</strong> beds</span><span><strong>2.5</strong> baths</span><span><strong>1,540</strong> sq ft</span></div>
              <details class="property-details"><summary>View details <span>↗</span></summary><p>Comfortable, low-maintenance living near parks and local shops. Enjoy a generous main floor, an attached garage, and a quiet patio for slow mornings.</p><p><a class="text-link" href="mailto:hello@havenandfield.example?subject=612%20SE%20Clatsop%20Street">Ask about this home →</a></p></details>
            </div>
          </article>
          <article class="listing-card" data-location="portland northwest 1230 nw irving street" data-type="condo" data-price="535000">
            <div class="listing-image">
              <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=900&q=80" alt="Stylish, sunlit interior with modern finishes" loading="lazy">
              <span class="badge">New price</span>
            </div>
            <div class="listing-body">
              <div class="listing-top"><span class="price">$535,000</span><span class="listing-type">Condo</span></div>
              <h3>1230 NW Irving Street</h3>
              <p class="location">Northwest District · Portland, OR</p>
              <div class="facts"><span><strong>2</strong> beds</span><span><strong>2</strong> baths</span><span><strong>1,210</strong> sq ft</span></div>
              <details class="property-details"><summary>View details <span>↗</span></summary><p>A welcoming city retreat with tall windows, thoughtful finishes, and dining and transit nearby. Ask us for the HOA documents, monthly dues, and building details.</p><p><a class="text-link" href="mailto:hello@havenandfield.example?subject=1230%20NW%20Irving%20Street">Ask about this home →</a></p></details>
            </div>
          </article>
          <div class="no-results" id="no-results" hidden>No featured homes match those filters. Try a broader search or <a class="text-link" href="#contact">talk to our team</a>.</div>
        </div>
        <p class="results-note" id="results-note" aria-live="polite">Showing 3 featured homes. Listings shown are illustrative.</p>
        <div class="center-action"><a class="button outline" href="#search">Refine your search <span class="arrow">↗</span></a></div>
      </div>
    </section>

    <section class="section story" id="about">
      <div class="wrap story-grid">
        <div class="story-image">
          <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1000&q=80" alt="Warm, welcoming living room with natural light" loading="lazy">
          <div class="image-note"><strong>Local roots.</strong><span>Thoughtful advice for every new beginning.</span></div>
        </div>
        <div class="story-copy">
          <span class="eyebrow">A better way to move</span>
          <h2>Real expertise.<br>Really good humans.</h2>
          <p>At Haven &amp; Field, we believe the best real estate experience starts with listening. Our Portland-based team pairs neighborhood knowledge with a refreshingly straightforward approach, whether this is your first move or your fifth.</p>
          <p>We'll help you understand the details, weigh your options, and make decisions on your terms. No pressure, no jargon without an explanation—just a dedicated partner in your corner.</p>
          <div class="steps">
            <div class="step"><span class="step-number">01</span><div><h3>Start with your story</h3><p>Tell us what matters, from your ideal neighborhood to your must-have morning light.</p></div></div>
            <div class="step"><span class="step-number">02</span><div><h3>Make a plan together</h3><p>We'll match your goals with a practical strategy and honest market insight.</p></div></div>
            <div class="step"><span class="step-number">03</span><div><h3>Move with confidence</h3><p>From the first showing to closing day, we're here for the details and the big decisions.</p></div></div>
          </div>
          <a class="button" href="#contact">Meet your next move <span class="arrow">↗</span></a>
        </div>
      </div>
    </section>

    <section class="section resources" id="resources">
      <div class="wrap">
        <div class="section-heading">
          <div><span class="eyebrow">Knowledge is a good foundation</span><h2>Here for every chapter.</h2></div>
          <p>A little clarity goes a long way. Explore the essentials, then lean on us when you're ready for a more personal conversation.</p>
        </div>
        <div class="resource-grid">
          <article class="resource-card">
            <div class="resource-icon">01</div>
            <h3>Buying a home</h3>
            <p>From getting pre-approved to making a competitive offer, we'll help you understand the process. Learn what inspections, earnest money, title insurance, and escrow mean for your purchase.</p>
            <a class="text-link" href="#mortgages">Explore buyer resources <span>↗</span></a>
          </article>
          <article class="resource-card">
            <div class="resource-icon">02</div>
            <h3>Selling with confidence</h3>
            <p>The right listing price is part art, part market analysis. We'll help you prepare your home, compare recent sales, review offers, and navigate the path from accepted offer to closing.</p>
            <a class="text-link" href="mailto:hello@havenandfield.example?subject=Seller%20guide%20request">Request our seller guide <span>↗</span></a>
          </article>
          <article class="resource-card">
            <div class="resource-icon">03</div>
            <h3>Finding a rental</h3>
            <p>Not ready to buy? Let's find a rental that fits your life. We can help you think through location, lease terms, deposits, and the details that make a place feel like yours.</p>
            <a class="text-link" href="mailto:hello@havenandfield.example?subject=Rental%20inquiry">Talk about rentals <span>↗</span></a>
          </article>
        </div>
      </div>
    </section>

    <section class="section mortgage" id="mortgages">
      <div class="wrap mortgage-grid">
        <div>
          <span class="eyebrow">Let's talk numbers</span>
          <h2>A clearer picture of what's possible.</h2>
          <p>A home is a big decision, but the financing doesn't have to feel overwhelming. Start with a simple estimate, then connect with a lending professional to explore your budget, down payment, and loan options.</p>
          <p>Pre-approval can help you understand your buying power and show sellers you're ready to move. We'll connect you with a trusted local lender when you're ready.</p>
          <a class="text-link" href="mailto:hello@havenandfield.example?subject=Mortgage%20pre-approval%20introduction">Get pre-approved <span>↗</span></a>
        </div>
        <div class="calculator">
          <h3>Estimate your monthly payment</h3>
          <p>Adjust the numbers to find a starting point.</p>
          <form id="mortgage-form">
            <div class="calc-grid">
              <div class="calc-field"><label for="home-price">Home price ($)</label><input id="home-price" type="number" min="0" step="1000" value="650000" required></div>
              <div class="calc-field"><label for="down-payment">Down payment ($)</label><input id="down-payment" type="number" min="0" step="1000" value="130000" required></div>
              <div class="calc-field"><label for="interest">Interest rate (%)</label><input id="interest" type="number" min="0" max="30" step="0.01" value="6.5" required></div>
              <div class="calc-field"><label for="loan-term">Loan term (years)</label><input id="loan-term" type="number" min="1" max="50" step="1" value="30" required></div>
            </div>
            <div class="estimate" aria-live="polite"><span>Estimated principal &amp; interest</span><strong id="payment">$3,287 / mo</strong></div>
            <p class="disclaimer">For illustration only; not a loan offer or pre-approval. Estimate excludes property taxes, insurance, HOA fees, and mortgage insurance. Actual terms and payments will vary.</p>
          </form>
        </div>
      </div>
    </section>

    <section class="section testimonial">
      <div class="wrap quote-grid">
        <div><span class="eyebrow">Kind words, real stories</span><h2>Good company on the way home.</h2><p>Every move is personal. We're grateful to be part of the stories that unfold along the way.</p></div>
        <div class="quote-card">
          <div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
          <blockquote>“They made the whole process feel manageable, even when we had a hundred questions. We never felt rushed—and we ended up somewhere that truly feels like us.”</blockquote>
          <div class="quote-person"><img src="https://i.pravatar.cc/90?u=havenclient" alt="" loading="lazy"><div><strong>Emily &amp; Jordan</strong><span>First-time buyers in Portland</span></div></div>
        </div>
      </div>
    </section>

    <section class="cta-band" id="contact">
      <div class="wrap">
        <div><h2>Where to next?</h2><p>Tell us what you're dreaming about. We'll take it from there, together.</p></div>
        <a class="button" href="mailto:hello@havenandfield.example">Start a conversation <span class="arrow">↗</span></a>
      </div>
    </section>
  </main>

  <footer>
    <div class="wrap">
      <div class="footer-grid">
        <div>
          <a class="brand" href="#top"><img src="https://placehold.co/84x84/d7e9a4/183c35?text=H&font=playfair%20display" alt=""><span><span class="brand-name">haven &amp; field</span><span class="brand-tagline">Find a place to belong.</span></span></a>
          <p>Real estate is about more than property. It's about people, possibilities, and finding a place that feels like home.</p>
        </div>
        <div><h3>Explore</h3><ul><li><a href="#listings">Buy a home</a></li><li><a href="#resources">Sell a home</a></li><li><a href="#resources">Rentals</a></li><li><a href="#mortgages">Mortgages</a></li></ul></div>
        <div><h3>Get to know us</h3><ul><li><a href="#about">Our approach</a></li><li><a href="#resources">Resources</a></li><li><a href="#contact">Contact</a></li><li><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">Instagram ↗</a></li><li><a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">Facebook ↗</a></li></ul></div>
        <div><h3>Say hello</h3><ul><li>1234 NW Everett Street<br>Portland, OR 97209</li><li><a href="tel:+15035550148">(503) 555-0148</a></li><li><a href="mailto:hello@havenandfield.example">hello@havenandfield.example</a></li><li>Monday–Friday, 9am–5pm</li></ul></div>
      </div>
      <div class="footer-bottom">
        <span>© 2026 Haven &amp; Field. All rights reserved. Equal Housing Opportunity.</span>
        <span><a href="mailto:hello@havenandfield.example?subject=Privacy%20inquiry">Privacy</a><a href="mailto:hello@havenandfield.example?subject=Terms%20inquiry">Terms</a></span>
      </div>
    </div>
  </footer>

  <script>
    const menuButton = document.querySelector('.menu-button');
    const nav = document.querySelector('#primary-nav');
    menuButton.addEventListener('click', () => {
      const open = menuButton.getAttribute('aria-expanded') === 'true';
      menuButton.setAttribute('aria-expanded', String(!open));
      nav.classList.toggle('open', !open);
    });
    nav.addEventListener('click', event => {
      if (event.target.closest('a')) {
        nav.classList.remove('open');
        menuButton.setAttribute('aria-expanded', 'false');
      }
    });

    const searchForm = document.querySelector('#property-search');
    const cards = [...document.querySelectorAll('.listing-card')];
    searchForm.addEventListener('submit', event => {
      event.preventDefault();
      const location = document.querySelector('#location').value.trim().toLowerCase();
      const type = document.querySelector('#property-type').value;
      const maxPrice = Number(document.querySelector('#max-price').value) || Infinity;
      let count = 0;
      cards.forEach(card => {
        const matches = (!location || card.dataset.location.includes(location)) &&
          (!type || card.dataset.type === type) && Number(card.dataset.price) <= maxPrice;
        card.hidden = !matches;
        if (matches) count++;
      });
      document.querySelector('#no-results').hidden = count !== 0;
      document.querySelector('#results-note').textContent = `Showing ${count} featured ${count === 1 ? 'home' : 'homes'}. Listings shown are illustrative.`;
      document.querySelector('#listings').scrollIntoView({behavior: 'smooth'});
    });

    const mortgageForm = document.querySelector('#mortgage-form');
    function calculatePayment() {
      const price = Number(document.querySelector('#home-price').value);
      const down = Number(document.querySelector('#down-payment').value);
      const rate = Number(document.querySelector('#interest').value);
      const years = Number(document.querySelector('#loan-term').value);
      const output = document.querySelector('#payment');
      if (!mortgageForm.checkValidity() || down > price || years <= 0) {
        output.textContent = 'Check your inputs';
        return;
      }
      const principal = price - down;
      const monthlyRate = rate / 100 / 12;
      const months = years * 12;
      const payment = monthlyRate === 0 ? principal / months :
        principal * monthlyRate / (1 - Math.pow(1 + monthlyRate, -months));
      output.textContent = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD', maximumFractionDigits: 0}).format(payment) + ' / mo';
    }
    mortgageForm.addEventListener('input', calculatePayment);
    mortgageForm.addEventListener('submit', event => event.preventDefault());
    calculatePayment();
  </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-12T10:17:13.578Z",
  "url": "https://benchmark.aimac.invalid/cbe39dfc9600d25328c94b1aaaafd15cd4ff9fece06dcb82079bd493c739de97.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Haven and Field home\">",
          "target": [
            "a[aria-label=\"Haven and Field home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Haven and Field home\">",
          "target": [
            "a[aria-label=\"Haven and Field home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Haven and Field home\">",
          "target": [
            "a[aria-label=\"Haven and Field home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Haven and Field home\">",
          "target": [
            "a[aria-label=\"Haven and Field home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Haven and Field home\">",
          "target": [
            "a[aria-label=\"Haven and Field home\"]"
          ]
        }
      ]
    },
    {
      "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=\"button\" type=\"submit\">Search properties <span class=\"arrow\">\u2197</span></button>",
          "target": [
            "button[type=\"submit\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 id=\"hero-title\">Find a place<br>to belong.</h1>",
                  "target": [
                    "#hero-title"
                  ]
                },
                {
                  "html": "<h2>Good moves start with good people.</h2>",
                  "target": [
                    ".intro-strip > div > h2"
                  ]
                },
                {
                  "html": "<h2>Homes with a little more.</h2>",
                  "target": [
                    "#listings > .wrap > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>2841 NE Mason Street</h3>",
                  "target": [
                    "article[data-type=\"house\"] > .listing-body > h3"
                  ]
                },
                {
                  "html": "<h3>612 SE Clatsop Street</h3>",
                  "target": [
                    "article[data-type=\"townhome\"] > .listing-body > h3"
                  ]
                },
                {
                  "html": "<h3>1230 NW Irving Street</h3>",
                  "target": [
                    "article[data-type=\"condo\"] > .listing-body > h3"
                  ]
                },
                {
                  "html": "<h2>Real expertise.<br>Really good humans.</h2>",
                  "target": [
                    ".story-copy > h2"
                  ]
                },
                {
                  "html": "<h3>Start with your story</h3>",
                  "target": [
                    ".step:nth-child(1) > div > h3"
                  ]
                },
                {
                  "html": "<h3>Make a plan together</h3>",
                  "target": [
                    ".step:nth-child(2) > div > h3"
                  ]
                },
                {
                  "html": "<h3>Move with confidence</h3>",
                  "target": [
                    ".step:nth-child(3) > div > h3"
                  ]
                },
                {
                  "html": "<h2>Here for every chapter.</h2>",
                  "target": [
                    "#resources > .wrap > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>Buying a home</h3>",
                  "target": [
                    ".resource-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Selling with confidence</h3>",
                  "target": [
                    ".resource-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Finding a rental</h3>",
                  "target": [
                    ".resource-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>A clearer picture of what's possible.</h2>",
                  "target": [
                    ".mortgage-grid > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h3>Estimate your monthly payment</h3>",
                  "target": [
                    ".calculator > h3"
                  ]
                },
                {
                  "html": "<h2>Good company on the way home.</h2>",
                  "target": [
                    ".quote-grid > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h2>Where to next?</h2>",
                  "target": [
                    "#contact > .wrap > div > h2"
                  ]
                },
                {
                  "html": "<h3>Explore</h3>",
                  "target": [
                    ".footer-grid > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Get to know us</h3>",
                  "target": [
                    "div:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Say hello</h3>",
                  "target": [
                    "div:nth-child(4) > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8f1e7",
                "bgColor": "#102d28",
                "contrastRatio": 12.72,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 12.72"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span>Thoughtful guidance for wherever life takes you.</span>",
          "target": [
            ".wrap > span:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "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": "primary-nav",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"nav\" id=\"primary-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "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=\"location\">Where to?</label>",
                  "target": [
                    "label[for=\"location\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"location\" type=\"search\" placeholder=\"City, neighborhood, or address\">",
          "target": [
            "#location"
          ]
        }
      ]
    },
    {
      "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"
            },
            {
              "id": "presentational-role",
              "data": {
                "role": "presentation"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were overridden with role=\"presentation\""
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/84x84/183c35/ffffff?text=H&amp;font=playfair%20display\" alt=\"\">",
          "target": [
            "a[aria-label=\"Haven and Field home\"] > img[alt=\"\"]"
          ]
        }
      ]
    },
    {
      "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": "Where to?"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"location\">Where to?</label>",
                  "target": [
                    "label[for=\"location\"]"
                  ]
                }
              ],
              "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 id=\"location\" type=\"search\" placeholder=\"City, neighborhood, or address\">",
          "target": [
            "#location"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"story-copy\">",
                  "target": [
                    ".story-copy"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"button\" href=\"#contact\">Meet your next move <span class=\"arrow\">\u2197</span></a>",
          "target": [
            ".story-copy > .button[href$=\"#contact\"]"
          ]
        }
      ]
    },
    {
      "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=\"tel:+15035550148\">Call (503) 555-0148</a>",
          "target": [
            "span:nth-child(2) > a[href=\"tel:+15035550148\"]"
          ]
        }
      ]
    },
    {
      "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><li><a href=\"#listings\">Buy a home</a></li><li><a href=\"#resources\">Sell a home</a></li><li><a href=\"#resources\">Rentals</a></li><li><a href=\"#mortgages\">Mortgages</a></li></ul>",
          "target": [
            "div:nth-child(2) > ul"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#listings\">Buy a home</a></li>",
          "target": [
            "div:nth-child(2) > ul > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
          "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": "<option value=\"\">All property types</option>",
          "target": [
            "#property-type > option[value=\"\"]"
          ]
        }
      ]
    },
    {
      "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=\"property-type\">Property type</label>",
                  "target": [
                    "label[for=\"property-type\"]"
                  ]
                }
              ],
              "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=\"property-type\">\n            <option value=\"\">All property types</option>\n            <option value=\"house\">House</option>\n            <option value=\"townhome\">Townhome</option>\n            <option value=\"condo\">Condo</option>\n          </select>",
          "target": [
            "#property-type"
          ]
        }
      ]
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>View details <span>\u2197</span></summary>",
          "target": [
            "article[data-type=\"house\"] > .listing-body > details > summary"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 163.5,
                "height": 42
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (163.5px by 42px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Haven and Field home\">",
          "target": [
            "a[aria-label=\"Haven and Field home\"]"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"stars\" aria-label=\"5 out of 5 stars\">\u2605\u2605\u2605\u2605\u2605</div>",
          "target": [
            ".stars"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fontSize": "8.8pt (11.68px)",
                "fontWeight": "bold",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "4.5:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" aria-labelledby=\"hero-title\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"eyebrow\">A more human way home</div>",
          "target": [
            ".hero-content > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo element"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#718078",
                "bgColor": "#ffffff",
                "contrastRatio": 4.14,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"site-header\">",
                  "target": [
                    "header"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.14 (foreground color: #718078, background color: #ffffff, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"brand-tagline\">Find a place to belong.</span>",
          "target": [
            "a[aria-label=\"Haven and Field home\"] > span > .brand-tagline"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.14 (foreground color: #718078, background color: #ffffff, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6c8553",
                "bgColor": "#f6f5ee",
                "contrastRatio": 3.75,
                "fontSize": "8.8pt (11.68px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.75 (foreground color: #6c8553, background color: #f6f5ee, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">A few places we love</span>",
          "target": [
            "#listings > .wrap > .section-heading > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.75 (foreground color: #6c8553, background color: #f6f5ee, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6c8553",
                "bgColor": "#e9eee4",
                "contrastRatio": 3.48,
                "fontSize": "8.8pt (11.68px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section story\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.48 (foreground color: #6c8553, background color: #e9eee4, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">A better way to move</span>",
          "target": [
            ".story-copy > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.48 (foreground color: #6c8553, background color: #e9eee4, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65736d",
                "bgColor": "#e9eee4",
                "contrastRatio": 4.21,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section story\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.21 (foreground color: #65736d, background color: #e9eee4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>At Haven &amp; Field, we believe the best real estate experience starts with listening. Our Portland-based team pairs neighborhood knowledge with a refreshingly straightforward approach, whether this is your first move or your fifth.</p>",
          "target": [
            ".story-copy > p:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.21 (foreground color: #65736d, background color: #e9eee4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65736d",
                "bgColor": "#e9eee4",
                "contrastRatio": 4.21,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section story\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.21 (foreground color: #65736d, background color: #e9eee4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>We'll help you understand the details, weigh your options, and make decisions on your terms. No pressure, no jargon without an explanation\u2014just a dedicated partner in your corner.</p>",
          "target": [
            ".story-copy > p:nth-child(4)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.21 (foreground color: #65736d, background color: #e9eee4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8da575",
                "bgColor": "#e9eee4",
                "contrastRatio": 2.29,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section story\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.29 (foreground color: #8da575, background color: #e9eee4, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"step-number\">01</span>",
          "target": [
            ".step:nth-child(1) > .step-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.29 (foreground color: #8da575, background color: #e9eee4, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65736d",
                "bgColor": "#e9eee4",
                "contrastRatio": 4.21,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section story\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.21 (foreground color: #65736d, background color: #e9eee4, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Tell us what matters, from your ideal neighborhood to your must-have morning light.</p>",
          "target": [
            ".step:nth-child(1) > div > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.21 (foreground color: #65736d, background color: #e9eee4, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8da575",
                "bgColor": "#e9eee4",
                "contrastRatio": 2.29,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section story\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.29 (foreground color: #8da575, background color: #e9eee4, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"step-number\">02</span>",
          "target": [
            ".step:nth-child(2) > .step-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.29 (foreground color: #8da575, background color: #e9eee4, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65736d",
                "bgColor": "#e9eee4",
                "contrastRatio": 4.21,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section story\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.21 (foreground color: #65736d, background color: #e9eee4, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>We'll match your goals with a practical strategy and honest market insight.</p>",
          "target": [
            ".step:nth-child(2) > div > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.21 (foreground color: #65736d, background color: #e9eee4, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8da575",
                "bgColor": "#e9eee4",
                "contrastRatio": 2.29,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section story\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.29 (foreground color: #8da575, background color: #e9eee4, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"step-number\">03</span>",
          "target": [
            ".step:nth-child(3) > .step-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.29 (foreground color: #8da575, background color: #e9eee4, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65736d",
                "bgColor": "#e9eee4",
                "contrastRatio": 4.21,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section story\" id=\"about\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.21 (foreground color: #65736d, background color: #e9eee4, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>From the first showing to closing day, we're here for the details and the big decisions.</p>",
          "target": [
            ".step:nth-child(3) > div > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.21 (foreground color: #65736d, background color: #e9eee4, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6c8553",
                "bgColor": "#ffffff",
                "contrastRatio": 4.1,
                "fontSize": "8.8pt (11.68px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section resources\" id=\"resources\">",
                  "target": [
                    "#resources"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.1 (foreground color: #6c8553, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Knowledge is a good foundation</span>",
          "target": [
            "#resources > .wrap > .section-heading > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.1 (foreground color: #6c8553, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#75847b",
                "bgColor": "#ffffff",
                "contrastRatio": 3.93,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calculator\">",
                  "target": [
                    ".calculator"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.93 (foreground color: #75847b, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"disclaimer\">For illustration only; not a loan offer or pre-approval. Estimate excludes property taxes, insurance, HOA fees, and mortgage insurance. Actual terms and payments will vary.</p>",
          "target": [
            ".disclaimer"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.93 (foreground color: #75847b, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 5517
      },
      {
        "y": 576,
        "height": 5517
      },
      {
        "y": 1152,
        "height": 5517
      },
      {
        "y": 1728,
        "height": 5517
      },
      {
        "y": 2304,
        "height": 5517
      },
      {
        "y": 2880,
        "height": 5517
      },
      {
        "y": 3456,
        "height": 5517
      },
      {
        "y": 4032,
        "height": 5517
      },
      {
        "y": 4608,
        "height": 5517
      },
      {
        "y": 4797,
        "height": 5517
      }
    ],
    "scans": 11,
    "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: "Buy", "Mortgages", "About".
-   **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: "Seller Guide", "Featured Listings", "Buyer Resources".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "listing price", "title insurance", "escrow".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Get Pre-Approved", "Search Properties", "View Details".
-   **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: "property comparison".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "neighborhood spotlights", "market trends", "seller advice".
-   **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.