Nex AGI Nex N2.5 Mini – Real Estate

via Nex AGI · Generated

  • AIMAC Debt 10.30
  • Cost $0.004
  • Total Violations 33
  • HTML Size 91 KB
  • Em Dashes 23

Screenshot

View Nex AGI Nex N2.5 Mini Real Estate page View Live Page

Accessibility Issues Found

1 Critical 32 Serious

  • aria-required-children critical 1 instance

    Certain ARIA roles must contain particular children

    Example HTML <div class="filter-tabs reveal reveal-d1" role="tablist" aria-label="Listing filters"> <button class="ftab active" data-filter="all">All</b...
  • color-contrast serious 32 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="eyebrow">Curated Collection</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Havenridge Realty — Where Life Finds Its Address</title>
<meta name="description" content="Havenridge Realty helps buyers, sellers, and renters navigate the modern real estate market with data-driven guidance, transparent pricing, and white-glove service.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lato:wght@300;400;400;700&display=swap" rel="stylesheet">
<style>
/* ============================================================
   HAVENRIDGE REALTY — DESIGN SYSTEM
   ============================================================ */
:root{
  --ink:#151a22;
  --char:#1d2431;
  --char-2:#27303f;
  --cream:#f5f1e8;
  --paper:#fbf9f4;
  --gold:#c29a5b;
  --gold-2:#a97f42;
  --gold-soft:#e9dcc4;
  --line:rgba(21,26,34,.12);
  --muted:#5c6470;
  --white:#ffffff;
  --radius:14px;
  --shadow-sm:0 4px 18px rgba(21,26,34,.08);
  --shadow-md:0 14px 44px rgba(21,26,34,.14);
  --shadow-lg:0 30px 80px rgba(21,26,34,.22);
  --font-serif:"Playfair Display",Georgia,serif;
  --font-sans:"Lato",Helvetica,Arial,sans-serif;
  --header-h:84px;
  --ease:cubic-bezier(.22,.9,.28,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
::selection{background:var(--gold);color:var(--ink)}

/* Scroll progress */
#progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--gold-2),var(--gold));
  z-index:1001;transition:width .12s linear;
}

/* Typography helpers */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  font-weight:700;color:var(--gold-2);
}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--gold)}
.sec-title{
  font-family:var(--font-serif);
  font-size:clamp(30px,4.2vw,50px);
  line-height:1.14;font-weight:600;
  letter-spacing:-.01em;margin:16px 0 20px;
}
.sec-title em{font-style:italic;color:var(--gold-2);font-weight:500}
.sec-sub{color:var(--muted);max-width:620px;font-size:17px;font-weight:300}
.sec-head{margin-bottom:52px}
.sec-head.center{text-align:center}
.sec-head.center .sec-sub{margin:0 auto}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .eyebrow::after{content:"";width:38px;height:1px;background:var(--gold)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:all .35s var(--ease);white-space:nowrap;
}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 26px rgba(194,154,91,.38)}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 16px 34px rgba(194,154,91,.46)}
.btn-ghost{border:1px solid rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--char-2);transform:translateY(-2px)}
.btn-outline{border:1px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}.reveal-d4{transition-delay:.4s}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),height .4s var(--ease);
  color:#fff;
}
header.scrolled{
  height:72px;
  background:rgba(21,26,34,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 30px rgba(21,26,34,.25);
}
.header-inner{
  width:min(1280px,92%);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:172px;height:auto;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-name{font-family:var(--font-serif);font-size:19px;font-weight:600;letter-spacing:.02em}
.brand-tag{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
nav.main-nav{display:flex;align-items:center;gap:6px}
nav.main-nav a{
  position:relative;padding:10px 14px;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;opacity:.92;transition:opacity .3s;
}
nav.main-nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
nav.main-nav a:hover::after,nav.main-nav a.active::after{transform:scaleX(1)}
nav.main-nav a.active{color:var(--gold)}
.header-cta{display:flex;align-items:center;gap:14px}
.btn-header{padding:12px 24px}
.hamburger{display:none;width:44px;height:44px;position:relative;z-index:1102}
.hamburger span{
  position:absolute;left:10px;right:10px;height:2px;background:#fff;
  transition:all .35s var(--ease);
}
.hamburger span:nth-child(1){top:15px}
.hamburger span:nth-child(2){top:22px}
.hamburger span:nth-child(3){top:29px}
.hamburger.open span:nth-child(1){top:22px;transform:rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){top:22px;transform:rotate(-45deg)}

/* Mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:1100;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:0 10%;
  clip-path:circle(0 at calc(100% - 44px) 40px);
  transition:clip-path .7s var(--ease);visibility:hidden;
}
.mobile-menu.open{clip-path:circle(150% at calc(100% - 44px) 40px);visibility:visible}
.mobile-menu a{
  font-family:var(--font-serif);font-size:clamp(28px,7vw,42px);
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;align-items:center;color:#fff;
  transition:color .3s,padding-left .3s;
}
.mobile-menu a:hover{color:var(--gold);padding-left:12px}
.mobile-menu a small{font-family:var(--font-sans);font-size:11px;letter-spacing:.3em;color:var(--gold)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--ink);color:#fff;overflow:hidden;
}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,19,26,.94) 8%,rgba(15,19,26,.72) 42%,rgba(15,19,26,.34) 75%,rgba(15,19,26,.55) 100%);
}
.hero-content{
  position:relative;z-index:2;width:min(1280px,92%);margin:0 auto;
  padding:calc(var(--header-h) + 60px) 0 130px;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;font-weight:700;color:var(--gold);
}
.hero-eyebrow::before{content:"";width:44px;height:1px;background:var(--gold)}
.hero h1{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(42px,6.6vw,84px);line-height:1.06;
  letter-spacing:-.015em;max-width:13ch;margin:22px 0 24px;
}
.hero h1 em{font-style:italic;color:var(--gold);font-weight:400}
.hero p.lead{max-width:520px;font-size:18px;font-weight:300;color:rgba(255,255,255,.82)}
.hero-actions{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap}

/* Search widget */
.search-widget{
  position:relative;z-index:3;margin-top:56px;
  background:rgba(251,249,244,.97);border-radius:18px;
  box-shadow:var(--shadow-lg);color:var(--ink);
  overflow:hidden;
}
.sw-tabs{display:flex;border-bottom:1px solid var(--line)}
.sw-tab{
  flex:1;padding:18px 10px;font-size:13px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:all .3s;position:relative;
}
.sw-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease)}
.sw-tab.active{color:var(--ink)}
.sw-tab.active::after{transform:scaleX(1)}
.sw-body{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:0;align-items:stretch}
.sw-field{padding:20px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.sw-field label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold-2)}
.sw-field input,.sw-field select{
  border:none;outline:none;background:transparent;width:100%;
  font-family:var(--font-sans);font-size:16px;font-weight:400;color:var(--ink);
  padding:2px 0;appearance:none;
}
.sw-submit{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 38px;background:var(--ink);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:background .3s;
}
.sw-submit:hover{background:var(--gold-2)}
.sw-submit svg{transition:transform .3s var(--ease)}
.sw-submit:hover svg{transform:translateX(4px)}
.sw-note{
  padding:13px 24px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center;
}
.sw-note svg{flex-shrink:0}

/* Hero stats */
.hero-stats{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  width:min(1280px,92%);margin:0 auto;
  border-top:1px solid rgba(255,255,255,.18);
}
.hstat{padding:30px 26px;border-right:1px solid rgba(255,255,255,.12)}
.hstat:last-child{border-right:none}
.hstat b{font-family:var(--font-serif);font-size:clamp(26px,2.6vw,36px);font-weight:600;color:var(--gold);display:block;line-height:1.1}
.hstat span{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700}

/* Scroll cue */
.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.scroll-cue::after{content:"";width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.section{padding:110px 0}
.section.cream{background:var(--cream)}
.section.dark{background:var(--ink);color:#fff}
.container{width:min(1280px,92%);margin:0 auto}

/* ============================================================
   FEATURED LISTINGS
   ============================================================ */
.listings-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap}
.ftab{
  padding:11px 22px;border-radius:999px;border:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:all .3s;
}
.ftab:hover{border-color:var(--ink);color:var(--ink)}
.ftab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.listings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.lcard{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  display:flex;flex-direction:column;
}
.lcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.lcard.hide{display:none}
.lcard-img{position:relative;aspect-ratio:800/560;overflow:hidden}
.lcard-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2);transition:transform .8s var(--ease)}
.lcard:hover .lcard-img img{transform:scale(1.07)}
.lcard-badge{
  position:absolute;top:16px;left:16px;padding:7px 14px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);
}
.lcard-badge.alt{background:var(--ink);color:#fff}
.lcard-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.lcard-price{font-family:var(--font-serif);font-size:26px;font-weight:600;color:var(--gold-2)}
.lcard-address{font-size:15px;font-weight:700;margin:4px 0 12px}
.lcard-specs{display:flex;gap:18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.lcard-specs div{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted)}
.lcard-specs svg{color:var(--gold-2)}
.lcard-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);transition:color .3s,gap .3s;
}
.lcard-link:hover{color:var(--gold-2);gap:14px}
.listings-more{margin-top:48px;text-align:center}

/* ============================================================
   VALUE ESTIMATOR
   ============================================================ */
.estimator-wrap{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  background:var(--char);border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.est-controls{padding:52px 48px}
.est-controls h3{font-family:var(--font-serif);font-size:27px;font-weight:600;margin-bottom:6px}
.est-controls .est-sub{color:rgba(255,255,255,.6);font-size:14.5px;margin-bottom:34px;font-weight:300}
.est-field{margin-bottom:30px}
.est-field label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:14px;
}
.est-val{font-family:var(--font-serif);font-size:19px;color:var(--gold);letter-spacing:0;text-transform:none;font-weight:600}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) var(--fill,50%),rgba(255,255,255,.16) var(--fill,50%));
  outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--gold);border:4px solid #fff;cursor:grab;
  box-shadow:0 3px 10px rgba(0,0,0,.4);transition:transform .2s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);border:4px solid #fff;cursor:grab}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.seg button{
  padding:12px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.18);
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.65);transition:all .3s;
}
.seg button:hover{border-color:var(--gold);color:#fff}
.seg button.active{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.est-result{
  background:linear-gradient(160deg,var(--gold) 0%,var(--gold-2) 100%);
  color:var(--ink);padding:52px 48px;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.est-result::before{
  content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;
  border:1px solid rgba(21,26,34,.14);
}
.est-result::after{
  content:"";position:absolute;right:-30px;top:-30px;width:180px;height:180px;border-radius:50%;
  border:1px solid rgba(21,26,34,.12);
}
.est-result .er-label{font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;opacity:.72}
.est-number{
  font-family:var(--font-serif);font-size:clamp(44px,4.6vw,62px);font-weight:600;
  line-height:1.05;margin:12px 0 6px;letter-spacing:-.01em;
}
.est-range{font-size:15px;font-weight:700;opacity:.85;margin-bottom:22px}
.est-range span{font-weight:300;opacity:.8}
.est-disclaimer{font-size:12px;line-height:1.65;opacity:.72;font-weight:300;border-top:1px solid rgba(21,26,34,.2);padding-top:18px;margin-top:8px}

/* ============================================================
   MARKET INSIGHTS
   ============================================================ */
.market-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:60px}
.mstat{
  padding:34px 28px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  background:rgba(255,255,255,.03);transition:all .4s var(--ease);
}
.mstat:hover{background:rgba(255,255,255,.07);transform:translateY(-5px);border-color:var(--gold)}
.mstat b{font-family:var(--font-serif);font-size:clamp(32px,3vw,42px);font-weight:600;color:var(--gold);display:block;line-height:1.1}
.mstat span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700;display:block;margin-top:8px}
.market-chart{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;align-items:end}
.chart-col{display:flex;flex-direction:column;align-items:center;gap:12px}
.chart-bar{
  width:100%;max-width:74px;height:0;border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,var(--gold),rgba(194,154,91,.25));
  transition:height 1.2s var(--ease);position:relative;
}
.chart-col:nth-child(even) .chart-bar{background:linear-gradient(180deg,#4a5568,rgba(74,85,104,.25))}
.chart-val{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.75)}
.chart-lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:700}
.chart-note{margin-top:28px;font-size:13px;color:rgba(255,255,255,.5);font-weight:300;text-align:right}
.chart-note b{color:var(--gold);font-weight:700}

/* ============================================================
   PROCESS
   ============================================================ */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:step}
.pstep{
  position:relative;padding:38px 28px;background:#fff;border-radius:var(--radius);
  border:1px solid var(--line);transition:all .4s var(--ease);overflow:hidden;
}
.pstep::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:18px;right:22px;
  font-family:var(--font-serif);font-size:52px;font-weight:600;
  color:var(--cream);line-height:1;transition:color .4s;
}
.pstep:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--gold-soft)}
.pstep:hover::before{color:var(--gold-soft)}
.pstep h4{font-family:var(--font-serif);font-size:20px;font-weight:600;margin:26px 0 10px}
.pstep p{font-size:14.5px;color:var(--muted);font-weight:300}
.pstep .picon{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);color:var(--gold-2);transition:all .4s var(--ease);
}
.pstep:hover .picon{background:var(--ink);color:var(--gold)}

/* ============================================================
   AGENTS
   ============================================================ */
.agents-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.acard{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);text-align:center;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.acard:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.acard-photo{position:relative;overflow:hidden;aspect-ratio:1/1.05}
.acard-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3);transition:filter .5s,transform .8s var(--ease)}
.acard:hover .acard-photo img{filter:grayscale(0);transform:scale(1.05)}
.acard-role{
  position:absolute;bottom:0;left:0;right:0;padding:16px;
  background:linear-gradient(transparent,rgba(21,26,34,.92));
  color:#fff;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
}
.acard-body{padding:28px 26px 30px}
.acard-name{font-family:var(--font-serif);font-size:23px;font-weight:600}
.acard-cert{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);font-weight:700;margin:4px 0 14px}
.acard-bio{font-size:14px;color:var(--muted);font-weight:300;margin-bottom:18px}
.acard-stats{display:flex;justify-content:center;gap:26px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.acard-stats div{text-align:center}
.acard-stats b{font-family:var(--font-serif);font-size:21px;color:var(--gold-2);display:block;line-height:1.1}
.acard-stats span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.acard-contact{display:flex;justify-content:center;gap:10px}
.icon-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);transition:all .3s;
}
.icon-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.tcard{
  background:#fff;border-radius:var(--radius);padding:38px 32px;
  box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.tcard .qmark{
  font-family:var(--font-serif);font-size:74px;line-height:.6;color:var(--gold);
  opacity:.5;margin-bottom:18px;
}
.tcard p{font-size:15.5px;font-weight:300;color:#3a4150;flex:1}
.tcard-foot{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.tcard-foot img{width:52px;height:52px;border-radius:50%;object-fit:cover;filter:grayscale(.2)}
.tcard-foot b{font-size:14.5px;display:block}
.tcard-foot span{font-size:12px;color:var(--muted);letter-spacing:.06em}
.stars{color:var(--gold);letter-spacing:2px;font-size:13px;margin-top:2px}

/* ============================================================
   RESOURCES
   ============================================================ */
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.rcard{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.rcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.rcard-img{aspect-ratio:600/380;overflow:hidden}
.rcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.rcard:hover .rcard-img img{transform:scale(1.08)}
.rcard-body{padding:24px;display:flex;flex-direction:column;flex:1}
.rcard-type{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--gold-2)}
.rcard h4{font-family:var(--font-serif);font-size:19px;font-weight:600;margin:8px 0 8px}
.rcard p{font-size:13.5px;color:var(--muted);font-weight:300;flex:1}
.rcard-btn{
  margin-top:18px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:3px;transition:all .3s;
}
.rcard-btn:hover{color:var(--gold-2);gap:13px}

/* FAQ */
.faq-wrap{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line);background:transparent;transition:background .3s}
.faq-item.open{background:#fff;box-shadow:var(--shadow-sm)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 6px;text-align:left;
  font-family:var(--font-serif);font-size:19px;font-weight:600;color:var(--ink);
  transition:color .3s;
}
.faq-item.open .faq-q{color:var(--gold-2)}
.faq-q .fx{
  width:36px;height:36px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:all .4s var(--ease);
}
.faq-item.open .fx{background:var(--gold);border-color:var(--gold);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{padding:0 6px 28px;color:var(--muted);font-weight:300;font-size:15px;max-width:70ch}

/* CTA banner */
.cta-banner{
  position:relative;overflow:hidden;border-radius:22px;
  padding:80px 8%;text-align:center;color:#fff;
  background:linear-gradient(120deg,var(--char) 0%,var(--char-2) 60%,#31405a 100%);
}
.cta-banner::before{
  content:"";position:absolute;left:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;
  border:1px solid rgba(194,154,91,.3);
}
.cta-banner::after{
  content:"";position:absolute;right:-90px;top:-140px;width:340px;height:340px;border-radius:50%;
  border:1px solid rgba(194,154,91,.22);
}
.cta-banner h2{font-family:var(--font-serif);font-size:clamp(30px,4vw,48px);font-weight:600;margin-bottom:16px}
.cta-banner h2 em{font-style:italic;color:var(--gold);font-weight:500}
.cta-banner p{max-width:520px;margin:0 auto 34px;color:rgba(255,255,255,.72);font-weight:300}
.cta-banner .btn{position:relative;z-index:2}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:rgba(255,255,255,.72);padding:84px 0 0}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:48px;padding-bottom:60px}
.f-brand img{width:170px;margin-bottom:18px}
.f-brand p{font-size:14px;font-weight:300;max-width:340px;margin-bottom:24px}
.socials{display:flex;gap:10px}
.socials a{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;color:rgba(255,255,255,.75);transition:all .3s;
}
.socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-3px)}
.f-col h5{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;font-weight:700}
.f-col ul li{margin-bottom:12px}
.f-col a{font-size:14px;font-weight:300;transition:color .3s,padding-left .3s}
.f-col a:hover{color:var(--gold);padding-left:6px}
.f-contact li{display:flex;gap:12px;margin-bottom:16px;font-size:14px;font-weight:300;align-items:flex-start}
.f-contact svg{flex-shrink:0;color:var(--gold);margin-top:3px}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:24px 0;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:13px;font-weight:300;
}
.f-bottom-links{display:flex;gap:26px}
.f-bottom-links a{transition:color .3s}
.f-bottom-links a:hover{color:var(--gold)}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:1200;background:rgba(15,19,26,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{
  width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:var(--paper);border-radius:20px;box-shadow:var(--shadow-lg);
  transform:translateY(30px) scale(.97);transition:transform .45s var(--ease);
}
.modal-overlay.open .modal{transform:none}
.modal-head{
  padding:32px 36px 26px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  background:var(--ink);color:#fff;border-radius:20px 20px 0 0;
}
.modal-head h3{font-family:var(--font-serif);font-size:25px;font-weight:600}
.modal-head p{font-size:13px;color:rgba(255,255,255,.6);font-weight:300;margin-top:4px}
.modal-close{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;transition:all .3s;flex-shrink:0}
.modal-close:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:rotate(90deg)}
.modal-body{padding:34px 36px 38px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-field{margin-bottom:18px}
.f-field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold-2);margin-bottom:7px}
.f-field input,.f-field select,.f-field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  background:#fff;font-family:var(--font-sans);font-size:15px;color:var(--ink);
  outline:none;transition:border-color .3s,box-shadow .3s;
}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,154,91,.16)}
.f-field textarea{resize:vertical;min-height:96px}
.f-error{font-size:12.5px;color:#b0413e;margin-top:6px;display:none}
.f-field.invalid input,.f-field.invalid textarea{border-color:#b0413e}
.f-field.invalid .f-error{display:block}
.modal-success{text-align:center;padding:20px 0 8px;display:none}
.modal-success .check{
  width:76px;height:76px;border-radius:50%;background:var(--gold);
  display:grid;place-items:center;margin:0 auto 22px;
  animation:pop .6s var(--ease);
}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.modal-success h4{font-family:var(--font-serif);font-size:24px;font-weight:600;margin-bottom:10px}
.modal-success p{font-size:14.5px;color:var(--muted);font-weight:300;max-width:360px;margin:0 auto}

/* Back to top */
#toTop{
  position:fixed;right:26px;bottom:26px;z-index:900;
  width:50px;height:50px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:all .4s var(--ease);
}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{background:var(--gold);color:var(--ink)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .listings-grid{grid-template-columns:repeat(2,1fr)}
  .agents-grid,.t-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .res-grid{grid-template-columns:repeat(2,1fr)}
  .market-grid{grid-template-columns:repeat(2,1fr)}
  .market-chart{grid-template-columns:repeat(3,1fr);gap:30px}
  .estimator-wrap{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  nav.main-nav{display:none}
  .hamburger{display:block}
  .btn-header{display:none}
  .sw-body{grid-template-columns:1fr 1fr}
  .sw-field{border-bottom:1px solid var(--line)}
  .sw-submit{grid-column:1/-1;padding:18px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hstat:nth-child(2){border-right:none}
  .hstat{border-bottom:1px solid rgba(255,255,255,.12)}
}
@media(max-width:640px){
  .section{padding:76px 0}
  .listings-grid,.agents-grid,.t-grid,.process-grid,.res-grid,.market-grid,.market-chart{grid-template-columns:1fr}
  .market-chart{align-items:start}
  .chart-bar{max-width:100%}
  .est-controls,.est-result{padding:36px 26px}
  .f-grid{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .hero-content{padding-bottom:100px}
  .sw-body{grid-template-columns:1fr}
  .sw-field{border-right:none}
  .modal-head,.modal-body{padding-left:24px;padding-right:24px}
  .brand img{width:140px}
  .brand-tag{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
</style>
</head>
<body>

<div id="progress"></div>

<!-- ================= HEADER ================= -->
<header id="header">
  <div class="header-inner">
    <a href="#home" class="brand" aria-label="Havenridge Realty home">
      <img src="https://placehold.co/190x76/151a22/c29a5b?text=HR&font=playfair+display" alt="Havenridge Realty logo">
      <span class="brand-text">
        <span class="brand-name">Havenridge Realty</span>
        <span class="brand-tag">Where Life Finds Its Address</span>
      </span>
    </a>
    <nav class="main-nav" aria-label="Primary navigation">
      <a href="#home" class="active">Home</a>
      <a href="#buy">Buy</a>
      <a href="#rent">Rent</a>
      <a href="#sell">Sell</a>
      <a href="#resources">Resources</a>
      <a href="#agents">Agents</a>
      <a href="#contact">Contact</a>
    </nav>
    <div class="header-cta">
      <button class="btn btn-gold btn-header" data-open-modal>Contact Agent</button>
      <button class="hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>
</header>

<!-- Mobile menu -->
<div class="mobile-menu" id="mobileMenu">
  <a href="#home">Home <small>01</small></a>
  <a href="#buy">Buy <small>02</small></a>
  <a href="#rent">Rent <small>03</small></a>
  <a href="#sell">Sell <small>04</small></a>
  <a href="#resources">Resources <small>05</small></a>
  <a href="#agents">Agents <small>06</small></a>
  <a href="#" data-open-modal>Contact <small>07</small></a>
</div>

<main>
<!-- ================= HERO ================= -->
<section class="hero" id="home">
  <div class="hero-bg">
    <img src="https://picsum.photos/id/1036/1920/1080?grayscale" alt="Modern coastal home at dusk">
  </div>
  <div class="hero-content">
    <span class="hero-eyebrow">Charleston · Hilton Head · The Lowcountry</span>
    <h1>Find the address that <em>feels like home.</em></h1>
    <p class="lead">Havenridge Realty pairs data-driven market intelligence with white-glove, human service — guiding buyers, sellers, and renters through every decision, from first tour to final signature.</p>
    <div class="hero-actions">
      <button class="btn btn-gold" data-open-modal>Schedule a Tour
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </button>
      <a href="#estimate" class="btn btn-ghost">Estimate My Home's Value</a>
    </div>

    <!-- Search widget -->
    <div class="search-widget reveal">
      <div class="sw-tabs" role="tablist" aria-label="Search mode">
        <button class="sw-tab active" data-mode="buy" role="tab">Buy</button>
        <button class="sw-tab" data-mode="rent" role="tab">Rent</button>
        <button class="sw-tab" data-mode="sell" role="tab">Sell</button>
      </div>
      <div class="sw-body">
        <div class="sw-field">
          <label for="swLocation">Location</label>
          <input type="text" id="swLocation" placeholder="City, neighborhood, or ZIP code">
        </div>
        <div class="sw-field">
          <label for="swType">Property Type</label>
          <select id="swType">
            <option>Single Family</option>
            <option>Condo / Townhome</option>
            <option>Luxury Estate</option>
            <option>Waterfront</option>
            <option>Land / Lot</option>
          </select>
        </div>
        <div class="sw-field">
          <label for="swPrice" id="swPriceLabel">Max Price</label>
          <select id="swPrice">
            <option>$250K – $500K</option>
            <option>$500K – $850K</option>
            <option>$850K – $1.5M</option>
            <option>$1.5M+</option>
            <option>Any Price</option>
          </select>
        </div>
        <button class="sw-submit" id="swSubmit">
          <span id="swSubmitText">Search Homes</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        </button>
      </div>
      <div class="sw-note">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#a97f42" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        <span id="swNote">Showing 214 homes for sale across the Lowcountry. New listings added daily.</span>
      </div>
    </div>
  </div>

  <div class="hero-stats reveal reveal-d2">
    <div class="hstat"><b data-count="1240">0</b><span>Homes Sold</span></div>
    <div class="hstat"><b data-count="486" data-suffix="M">$0</b><span>Sales Volume</span></div>
    <div class="hstat"><b data-count="18">0</b><span>Days on Market</span></div>
    <div class="hstat"><b data-count="98" data-suffix="%">0</b><span>List-to-Sale Ratio</span></div>
  </div>

  <div class="scroll-cue">Scroll</div>
</section>

<!-- ================= FEATURED LISTINGS ================= -->
<section class="section cream" id="buy">
  <div class="container">
    <div class="listings-toolbar">
      <div class="sec-head reveal" style="margin-bottom:0">
        <span class="eyebrow">Curated Collection</span>
        <h2 class="sec-title">Featured <em>properties</em></h2>
        <p class="sec-sub">Every listing is vetted by our team for condition, pricing accuracy, and neighborhood fit. Browse our latest homes for sale and rent, or let an agent build a private shortlist around your exact criteria.</p>
      </div>
      <div class="filter-tabs reveal reveal-d1" role="tablist" aria-label="Listing filters">
        <button class="ftab active" data-filter="all">All</button>
        <button class="ftab" data-filter="sale">For Sale</button>
        <button class="ftab" data-filter="rent">For Rent</button>
      </div>
    </div>

    <div class="listings-grid" id="listingsGrid">
      <!-- Card 1 -->
      <article class="lcard reveal" data-type="sale">
        <div class="lcard-img">
          <img src="https://picsum.photos/id/1029/800/560?grayscale" alt="The Ashbury Loft, modern downtown residence" loading="lazy">
          <span class="lcard-badge">Open House Sat</span>
        </div>
        <div class="lcard-body">
          <div class="lcard-price">$1,245,000</div>
          <div class="lcard-address">The Ashbury Loft · 88 Meeting Street, Charleston</div>
          <div class="lcard-specs">
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10.5L12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>3 Bed</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3v18M6 8h12a0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 0 0 0 1 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0"/></svg>2.5 Bath</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>2,140 Sq Ft</div>
          </div>
          <a href="#" class="lcard-link" data-tour="The Ashbury Loft">Schedule Tour
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </article>

      <!-- Card 2 -->
      <article class="lcard reveal reveal-d1" data-type="sale">
        <div class="lcard-img">
          <img src="https://picsum.photos/id/1048/800/560?grayscale" alt="48 Willow Creek, craftsman home" loading="lazy">
          <span class="lcard-badge alt">New Listing</span>
        </div>
        <div class="lcard-body">
          <div class="lcard-price">$875,000</div>
          <div class="lcard-address">48 Willow Creek · Mount Pleasant</div>
          <div class="lcard-specs">
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10.5L12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>4 Bed</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3v18M6 8h12a0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 0 0 0 1 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0"/></svg>3 Bath</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>2,860 Sq Ft</div>
          </div>
          <a href="#" class="lcard-link" data-tour="48 Willow Creek">Schedule Tour
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </article>

      <!-- Card 3 -->
      <article class="lcard reveal reveal-d2" data-type="rent">
        <div class="lcard-img">
          <img src="https://picsum.photos/id/1060/800/560?grayscale" alt="The Marlowe Townhome, waterfront rental" loading="lazy">
          <span class="lcard-badge">Price Reduction</span>
        </div>
        <div class="lcard-body">
          <div class="lcard-price">$3,400 / mo</div>
          <div class="lcard-address">The Marlowe Townhome · 214 Queen Street</div>
          <div class="lcard-specs">
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10.5L12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>2 Bed</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3v18M6 8h12a0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 0 0 0 1 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0"/></svg>2 Bath</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>1,480 Sq Ft</div>
          </div>
          <a href="#" class="lcard-link" data-tour="The Marlowe Townhome">Schedule Tour
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </article>

      <!-- Card 4 -->
      <article class="lcard reveal" data-type="sale">
        <div class="lcard-img">
          <img src="https://picsum.photos/id/1080/800/560?grayscale" alt="17 Harbor View, luxury estate" loading="lazy">
          <span class="lcard-badge alt">Luxury</span>
        </div>
        <div class="lcard-body">
          <div class="lcard-price">$2,150,000</div>
          <div class="lcard-address">17 Harbor View · Seabrook Island</div>
          <div class="lcard-specs">
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10.5L12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>5 Bed</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3v18M6 8h12a0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 0 0 0 1 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0"/></svg>4 Bath</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>4,320 Sq Ft</div>
          </div>
          <a href="#" class="lcard-link" data-tour="17 Harbor View">Schedule Tour
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </article>

      <!-- Card 5 -->
      <article class="lcard reveal reveal-d1" data-type="rent">
        <div class="lcard-img">
          <img src="https://picsum.photos/id/1035/800/560?grayscale" alt="229 Juniper Lane, garden cottage rental" loading="lazy">
          <span class="lcard-badge">Pet Friendly</span>
        </div>
        <div class="lcard-body">
          <div class="lcard-price">$2,250 / mo</div>
          <div class="lcard-address">229 Juniper Lane · Daniel Island</div>
          <div class="lcard-specs">
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10.5L12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>2 Bed</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3v18M6 8h12a0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 0 0 0 1 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0"/></svg>1 Bath</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>1,120 Sq Ft</div>
          </div>
          <a href="#" class="lcard-link" data-tour="229 Juniper Lane">Schedule Tour
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </article>

      <!-- Card 6 -->
      <article class="lcard reveal reveal-d2" data-type="rent">
        <div class="lcard-img">
          <img src="https://picsum.photos/id/1061/800/560?grayscale" alt="The Foundry Studio, converted loft rental" loading="lazy">
          <span class="lcard-badge alt">Available Now</span>
        </div>
        <div class="lcard-body">
          <div class="lcard-price">$1,895 / mo</div>
          <div class="lcard-address">The Foundry Studio · 12 Cannon Street</div>
          <div class="lcard-specs">
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10.5L12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>1 Bed</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3v18M6 8h12a0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 0 0 0 1 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0"/></svg>1 Bath</div>
            <div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>780 Sq Ft</div>
          </div>
          <a href="#" class="lcard-link" data-tour="The Foundry Studio">Schedule Tour
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </article>
    </div>

    <div class="listings-more reveal">
      <button class="btn btn-outline" id="loadMoreBtn">View 208 More Listings
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M6 13l6 6 6-6"/></svg>
      </button>
    </div>
  </div>
</section>

<!-- ================= VALUE ESTIMATOR ================= -->
<section class="section dark" id="estimate">
  <div class="container">
    <div class="sec-head center reveal">
      <span class="eyebrow">Seller Intelligence</span>
      <h2 class="sec-title">What is your home <em>worth today?</em></h2>
      <p class="sec-sub">Our estimator blends live market trends, property condition, and hyperlocal neighborhood data into a preliminary valuation range — refined further by a full comparative market analysis from your agent.</p>
    </div>

    <div class="estimator-wrap reveal reveal-d1">
      <div class="est-controls">
        <h3>Home Value Estimator</h3>
        <p class="est-sub">Slide the controls to tailor your estimate. No email required — results update instantly.</p>

        <div class="est-field">
          <label for="estValue">Current estimated value <span class="est-val" id="valHome">$650,000</span></label>
          <input type="range" id="estValue" min="200000" max="1500000" step="5000" value="650000">
        </div>

        <div class="est-field">
          <label>Property condition</label>
          <div class="seg" id="estCondition">
            <button data-mult="0.92">Poor</button>
            <button data-mult="1.02">Fair</button>
            <button data-mult="1.08" class="active">Good</button>
            <button data-mult="1.15">Excellent</button>
          </div>
        </div>

        <div class="est-field">
          <label for="estLoc">Location score <span class="est-val" id="valLoc">7 / 10</span></label>
          <input type="range" id="estLoc" min="1" max="10" step="1" value="7">
        </div>

        <div class="est-field" style="margin-bottom:0">
          <label for="estTrend">Local market trend <span class="est-val" id="valTrend">+2.5%</span></label>
          <input type="range" id="estTrend" min="-4" max="8" step="0.5" value="2.5">
        </div>
      </div>

      <div class="est-result">
        <span class="er-label">Estimated Market Value</span>
        <div class="est-number" id="estOut">$0</div>
        <div class="est-range">Likely range <span id="estRange">—</span></div>
        <p class="est-disclaimer">This estimate is for informational purposes only and does not constitute a formal appraisal or comparative market analysis. A professional valuation requires an on-site review of the property disclosure history, upgrades, and current comparable sales.</p>
      </div>
    </div>
  </div>
</section>

<!-- ================= MARKET INSIGHTS ================= -->
<section class="section dark" style="padding-top:0" id="market">
  <div class="container">
    <div class="sec-head reveal">
      <span class="eyebrow">Market Intelligence</span>
      <h2 class="sec-title" style="color:#fff">The Lowcountry, <em>by the numbers</em></h2>
      <p class="sec-sub">Our analysts track price-per-square-foot, inventory, and absorption rates across every neighborhood we serve, so our clients make decisions on evidence — not anecdotes.</p>
    </div>

    <div class="market-grid">
      <div class="mstat reveal"><b data-count="312">$0</b><span>Avg. Price / Sq Ft</span></div>
      <div class="mstat reveal reveal-d1"><b data-count="18">0</b><span>Days on Market</span></div>
      <div class="mstat reveal reveal-d2"><b data-count="98" data-suffix="%">0</b><span>List-to-Sale Ratio</span></div>
      <div class="mstat reveal reveal-d3"><b data-count="6.4" data-decimals="1" data-prefix="$" data-suffix="K">0</b><span>Avg. Equity Gain / Client</span></div>
    </div>

    <div class="market-chart reveal reveal-d1" id="chart">
      <div class="chart-col"><div class="chart-bar" data-h="52"></div><div class="chart-val">$298K</div><div class="chart-lab">Jan</div></div>
      <div class="chart-col"><div class="chart-bar" data-h="58"></div><div class="chart-val">$312K</div><div class="chart-lab">Feb</div></div>
      <div class="chart-col"><div class="chart-bar" data-h="55"></div><div class="chart-val">$305K</div><div class="chart-lab">Mar</div></div>
      <div class="chart-col"><div class="chart-bar" data-h="66"></div><div class="chart-val">$335K</div><div class="chart-lab">Apr</div></div>
      <div class="chart-col"><div class="chart-bar" data-h="74"></div><div class="chart-val">$358K</div><div class="chart-lab">May</div></div>
      <div class="chart-col"><div class="chart-bar" data-h="84"></div><div class="chart-val">$389K</div><div class="chart-lab">Jun</div></div>
    </div>
    <p class="chart-note">Median closed price per square foot, trailing six months. <b>+30.5% year over year</b> — a balanced market favoring well-prepared sellers.</p>
  </div>
</section>

<!-- ================= PROCESS ================= -->
<section class="section cream" id="process">
  <div class="container">
    <div class="sec-head center reveal">
      <span class="eyebrow">The Havenridge Method</span>
      <h2 class="sec-title">A proven path, <em>from first call to keys</em></h2>
      <p class="sec-sub">Buying or selling real estate is the largest financial decision most people ever make. Our five-step process keeps you informed, protected, and never rushed.</p>
    </div>

    <div class="process-grid">
      <div class="pstep reveal">
        <div class="picon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></div>
        <h4>Discover</h4>
        <p>A complimentary consultation to understand your timeline, financing position, and non-negotiables — whether you're buying, selling, or doing both.</p>
      </div>
      <div class="pstep reveal reveal-d1">
        <div class="picon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 20l-5.5-5.5M9 20l5.5-5.5M9 20V4M9 4h11"/></svg></div>
        <h4>Analyze</h4>
        <p>Sellers receive a rigorous comparative market analysis. Buyers get neighborhood trend reports, HOA reviews, and disclosure document audits.</p>
      </div>
      <div class="pstep reveal reveal-d2">
        <div class="picon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3l2.5 5.5L20 9.5l-4 4 1 5.5-5-2.5-5 2.5 1-5.5-4-4 5.5-1z"/></svg></div>
        <h4>Position</h4>
        <p>Professional staging guidance, pre-listing inspections, and strategic pricing architecture to maximize exposure and offer strength.</p>
      </div>
      <div class="pstep reveal reveal-d3">
        <div class="picon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 21s-7-4.6-7-10a7 7 0 0 1 14 0c0 5.4-7 10-7 10z"/><circle cx="12" cy="11" r="2.5"/></svg></div>
        <h4>Negotiate</h4>
        <p>Offer strategy, inspection repair credits, appraisal gaps, and closing-cost concessions — negotiated firmly on your behalf at every turn.</p>
      </div>
    </div>
  </div>
</section>

<!-- ================= AGENTS ================= -->
<section class="section" id="agents">
  <div class="container">
    <div class="sec-head center reveal">
      <span class="eyebrow">Our Team</span>
      <h2 class="sec-title">Agents who know <em>every street</em></h2>
      <p class="sec-sub">Havenridge agents are full-time, locally rooted professionals with deep ties to lenders, inspectors, title companies, and neighborhood boards across the Lowcountry.</p>
    </div>

    <div class="agents-grid">
      <article class="acard reveal">
        <div class="acard-photo">
          <img src="https://i.pravatar.cc/600?u=maria.santos" alt="Maria Santos, Senior Listing Agent" loading="lazy">
          <div class="acard-role">Senior Listing Agent</div>
        </div>
        <div class="acard-body">
          <h3 class="acard-name">Maria Santos</h3>
          <div class="acard-cert">Broker Associate · 19 yrs</div>
          <p class="acard-bio">Specializes in historic Charleston homes and luxury waterfront estates. Former president of the Charleston REALTORS® board; certified in luxury home marketing.</p>
          <div class="acard-stats">
            <div><b data-count="312">0</b><span>Listings</span></div>
            <div><b data-count="99" data-suffix="%">0</b><span>Top 1%</span></div>
          </div>
          <div class="acard-contact">
            <button class="icon-btn" data-open-modal aria-label="Call Maria Santos"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.4 2.1L8.1 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.6 2z"/></svg></button>
            <button class="icon-btn" data-open-modal aria-label="Email Maria Santos"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 6L2 7"/></svg></button>
          </div>
        </div>
      </article>

      <article class="acard reveal reveal-d1">
        <div class="acard-photo">
          <img src="https://i.pravatar.cc/600?u=david.okafor" alt="David Okafor, Buyer's Agent" loading="lazy">
          <div class="acard-role">Buyer's Agent</div>
        </div>
        <div class="acard-body">
          <h3 class="acard-name">David Okafor</h3>
          <div class="acard-cert">Realtor® · 11 yrs</div>
          <p class="acard-bio">Helps first-generation buyers navigate financing, closing costs, and inspection negotiations. Known for calm, data-first guidance through competitive offer seasons.</p>
          <div class="acard-stats">
            <div><b data-count="186">0</b><span>Buyers Helped</span></div>
            <div><b data-count="97" data-suffix="%">0</b><span>Win Rate</span></div>
          </div>
          <div class="acard-contact">
            <button class="icon-btn" data-open-modal aria-label="Call David Okafor"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.4 2.1L8.1 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.6 2z"/></svg></button>
            <button class="icon-btn" data-open-modal aria-label="Email David Okafor"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 6L2 7"/></svg></button>
          </div>
        </div>
      </article>

      <article class="acard reveal reveal-d2">
        <div class="acard-photo">
          <img src="https://i.pravatar.cc/600?u=elena.vasquez" alt="Elena Vasquez, Rental & Relocation Specialist" loading="lazy">
          <div class="acard-role">Rental & Relocation</div>
        </div>
        <div class="acard-body">
          <h3 class="acard-name">Elena Vasquez</h3>
          <div class="acard-cert">Realtor® · 14 yrs</div>
          <p class="acard-bio">Leads our corporate relocation and rental portfolio services, matching executives and growing families with neighborhoods, schools, and commute realities.</p>
          <div class="acard-stats">
            <div><b data-count="420">0</b><span>Leases Closed</span></div>
            <div><b data-count="58">0</b><span>Cities Served</span></div>
          </div>
          <div class="acard-contact">
            <button class="icon-btn" data-open-modal aria-label="Call Elena Vasquez"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.4 2.1L8.1 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.6 2z"/></svg></button>
            <button class="icon-btn" data-open-modal aria-label="Email Elena Vasquez"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 6L2 7"/></svg></button>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ================= TESTIMONIALS ================= -->
<section class="section cream" id="testimonials">
  <div class="container">
    <div class="sec-head center reveal">
      <span class="eyebrow">Client Stories</span>
      <h2 class="sec-title">Trusted on <em>both sides</em> of the table</h2>
    </div>

    <div class="t-grid">
      <article class="tcard reveal">
        <div class="qmark">"</div>
        <p>Our agent's comparative market analysis was the difference between a rushed offer and a winning one. She spotted a zoning issue in the property disclosure that saved us $40,000 at the negotiation table.</p>
        <div class="tcard-foot">
          <img src="https://i.pravatar.cc/120?u=thomas.reed" alt="Portrait of James & Priya" loading="lazy">
          <div>
            <b>James & Priya R.</b>
            <div class="stars">★★★★★</div>
            <span>Bought · Mount Pleasant, 2024</span>
          </div>
        </div>
      </article>
      <article class="tcard reveal reveal-d1">
        <div class="qmark">"</div>
        <p>We sold our waterfront home in nine days, above asking, with five offers. The pre-listing inspection and staging plan Maria built were worth every dollar. The closing process itself was completely stress-free.</p>
        <div class="tcard-foot">
          <img src="https://i.pravatar.cc/120?u=carol.manning" alt="Portrait of the Mannings" loading="lazy">
          <div>
            <b>The Mannings</b>
            <div class="stars">★★★★★</div>
            <span>Sold · Seabrook Island, 2024</span>
          </div>
        </div>
      </article>
      <article class="tcard reveal reveal-d2">
        <div class="qmark">"</div>
        <p>As a first-time renter relocating for work, I needed someone to explain leases, utilities, and neighborhoods in plain English. Elena did all of that — and found me a pet-friendly townhome two blocks from my office.</p>
        <div class="tcard-foot">
          <img src="https://i.pravatar.cc/120?u=sophie.lam" alt="Portrait of Sophie" loading="lazy">
          <div>
            <b>Sophie L.</b>
            <div class="stars">★★★★★</div>
            <span>Rented · Charleston, 2025</span>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ================= RESOURCES + FAQ ================= -->
<section class="section" id="resources">
  <div class="container">
    <div class="sec-head reveal">
      <span class="eyebrow">Knowledge Center</span>
      <h2 class="sec-title">Resources for your <em>next move</em></h2>
      <p class="sec-sub">Practical guides written by our agents and in-house attorneys — covering the details most people only learn about during their first transaction.</p>
    </div>

    <div class="res-grid">
      <article class="rcard reveal">
        <div class="rcard-img"><img src="https://placehold.co/600x380/f5f1e8/c29a5b?text=Buyer%27s+Guide&font=lora" alt="Buyer's guide cover" loading="lazy"></div>
        <div class="rcard-body">
          <span class="rcard-type">Guide · 28 Pages</span>
          <h4>The First-Time Buyer's Handbook</h4>
          <p>From pre-approval to appraisal gaps: a complete walkthrough of the buying journey, including what to budget beyond the down payment.</p>
          <button class="rcard-btn" data-resource="The First-Time Buyer's Handbook">Get the Guide
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
        </div>
      </article>
      <article class="rcard reveal reveal-d1">
        <div class="rcard-img"><img src="https://placehold.co/600x380/1d2431/c29a5b?text=Seller%27s+Checklist&font=lora" alt="Seller's checklist cover" loading="lazy"></div>
        <div class="rcard-body">
          <span class="rcard-type">Checklist · 16 Pages</span>
          <h4>The Seller's Preparation Checklist</h4>
          <p>Repairs, disclosures, staging priorities, and pricing strategy — the exact sequence our top agents follow to sell homes faster and cleaner.</p>
          <button class="rcard-btn" data-resource="The Seller's Preparation Checklist">Get the Checklist
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
        </div>
      </article>
      <article class="rcard reveal reveal-d2">
        <div class="rcard-img"><img src="https://placehold.co/600x380/27303f/c29a5b?text=Closing+Costs&font=lora" alt="Closing costs guide cover" loading="lazy"></div>
        <div class="rcard-body">
          <span class="rcard-type">Explainer · 12 Pages</span>
          <h4>Closing Costs, Decoded</h4>
          <p>Understand escrow, title insurance, lender fees, transfer taxes, and prepaids — and learn which costs are genuinely negotiable.</p>
          <button class="rcard-btn" data-resource="Closing Costs, Decoded">Download Now
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
        </div>
      </article>
      <article class="rcard reveal reveal-d3">
        <div class="rcard-img"><img src="https://placehold.co/600x380/e9dcc4/151a22?text=Moving+Handbook&font=lora" alt="Moving handbook cover" loading="lazy"></div>
        <div class="rcard-body">
          <span class="rcard-type">Toolkit · 20 Pages</span>
          <h4>The Lowcountry Moving Handbook</h4>
          <p>Flood-zone considerations, insurance nuances, utility transfers, and a room-by-room moving timeline vetted by local inspectors.</p>
          <button class="rcard-btn" data-resource="The Lowcountry Moving Handbook">Download Toolkit
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
        </div>
      </article>
    </div>

    <!-- FAQ -->
    <div style="margin-top:110px">
      <div class="sec-head center reveal" style="margin-bottom:48px">
        <span class="eyebrow">Common Questions</span>
        <h2 class="sec-title">Answers, <em>before you ask</em></h2>
      </div>
      <div class="faq-wrap reveal reveal-d1">
        <div class="faq-item">
          <button class="faq-q">How does the home value estimator work?
            <span class="fx"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></span>
          </button>
          <div class="faq-a"><p>Our estimator starts with your home's current estimated value and adjusts it for three factors: property condition, neighborhood location score, and the direction of the local market. The result is a preliminary range — typically within five percent of final market value. For a defensible number, schedule a comparative market analysis, where an agent reviews recent closed comparables, your property disclosure history, and any upgrades or deferred maintenance.</p></div>
        </div>
        <div class="faq-item">
          <button class="faq-q">What should I budget for closing costs?
            <span class="fx"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></span>
          </button>
          <div class="faq-a"><p>Buyers typically budget between 2% and 5% of the purchase price for closing costs, including lender fees, appraisal, title insurance, escrow reserves, and transfer taxes. Sellers usually pay 6% to 8% of the sale price when a commission is involved, plus prorated taxes and any agreed-upon buyer concessions. Every line item is negotiable to a degree — our agents review the Loan Estimate and Closing Disclosure with clients line by line before signing.</p></div>
        </div>
        <div class="faq-item">
          <button class="faq-q">How long does the home buying process take?
            <span class="fx"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></span>
          </button>
          <div class="faq-a"><p>From offer acceptance to closing, most transactions take 30 to 45 days. The timeline depends on financing (cash deals can close in two weeks), the appraisal, inspection negotiations, and title work. Our average client closes in 33 days, and we build a milestone calendar at the start so you always know what to expect next.</p></div>
        </div>
        <div class="faq-item">
          <button class="faq-q">Do you represent renters, or only buyers and sellers?
            <span class="fx"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></span>
          </button>
          <div class="faq-a"><p>Both. Our rental division manages over 420 properties and represents tenants at no cost — landlords pay the commission. We screen applications, review lease terms, and coordinate move-in inspections with photo documentation so security deposits are never a surprise at move-out.</p></div>
        </div>
        <div class="faq-item">
          <button class="faq-q">How do I prepare my home to sell for the most money?
            <span class="fx"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></span>
          </button>
          <div class="faq-a"><p>Three things move the needle: curb appeal, neutral photography-ready staging, and pricing strategy. Homes priced correctly in the first two weeks attract the most buyers while interest is highest. We also recommend a pre-listing inspection — knowing your property disclosure issues upfront lets you price with confidence instead of discovering problems during a buyer's inspection.</p></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ================= CTA BANNER ================= -->
<section class="section" style="padding-top:0">
  <div class="container">
    <div class="cta-banner reveal">
      <h2>Ready to make your <em>next move?</em></h2>
      <p>Tell us where you are in the journey — buying, selling, renting, or just curious. A licensed Havenridge agent will reach out within one business hour.</p>
      <button class="btn btn-gold" data-open-modal>Schedule a Consultation
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </button>
    </div>
  </div>
</section>
</main>

<!-- ================= FOOTER ================= -->
<footer id="contact">
  <div class="container">
    <div class="f-grid">
      <div class="f-brand">
        <img src="https://placehold.co/190x76/151a22/c29a5b?text=HR&font=playfair+display" alt="Havenridge Realty logo">
        <p>Where Life Finds Its Address. Havenridge Realty is an independently owned full-service brokerage serving Charleston, Mount Pleasant, Daniel Island, and Hilton Head since 2006.</p>
        <div class="socials">
          <a href="#" aria-label="Instagram"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4.5"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></a>
          <a href="#" aria-label="Facebook"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></a>
          <a href="#" aria-label="LinkedIn"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/><path d="M10 21v-7a4 4 0 0 1 8 0v7M10 9h.01M18 21v-4a4 4 0 0 0-8 0"/></svg></a>
          <a href="#" aria-label="Pinterest"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M9 21l3-9M10 9c-1 0-2 .8-2 2 0 1.5 1 2.5 2.5 2.5S13 12 13 10.5 12 8 10 8zM10 8l1-2.5"/></svg></a>
        </div>
      </div>
      <div class="f-col">
        <h5>Explore</h5>
        <ul>
          <li><a href="#buy">Homes for Sale</a></li>
          <li><a href="#rent">Homes for Rent</a></li>
          <li><a href="#estimate">Home Value Estimator</a></li>
          <li><a href="#market">Market Insights</a></li>
          <li><a href="#agents">Our Agents</a></li>
          <li><a href="#resources">Resource Library</a></li>
        </ul>
      </div>
      <div class="f-col">
        <h5>Services</h5>
        <ul>
          <li><a href="#buy">Buyer Representation</a></li>
          <li><a href="#sell">Seller Representation</a></li>
          <li><a href="#rent">Rental Management</a></li>
          <li><a href="#process">Relocation Services</a></li>
          <li><a href="#process">Comparative Market Analysis</a></li>
          <li><a href="#estimate">Private Property Valuation</a></li>
        </ul>
      </div>
      <div class="f-col">
        <h5>Contact</h5>
        <ul class="f-contact">
          <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 21s-7-4.6-7-10a7 7 0 0 1 14 0c0 5.4-7 10-7 10z"/><circle cx="12" cy="11" r="2.5"/></svg><span>1248 Meridian Avenue, Suite 300<br>Charleston, SC 29401</span></li>
          <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.4 2.1L8.1 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.6 2z"/></svg><a href="tel:+18435550184">(843) 555-0184</a></li>
          <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 6L2 7"/></svg><a href="mailto:hello@havenridgerealty.com">hello@havenridgerealty.com</a></li>
          <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg><span>Mon – Fri, 8:30am – 6:00pm<br>Sat, 9:00am – 4:00pm</span></li>
        </ul>
      </div>
    </div>
    <div class="f-bottom">
      <span>© <span id="year">2025</span> Havenridge Realty Group. All rights reserved. Licensed in South Carolina · Broker of Record: M. Santos, CRX</span>
      <div class="f-bottom-links">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Service</a>
        <a href="#">Fair Housing</a>
      </div>
    </div>
  </div>
</footer>

<!-- ================= CONTACT MODAL ================= -->
<div class="modal-overlay" id="modalOverlay" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <div class="modal">
    <div class="modal-head">
      <div>
        <h3 id="modalTitle">Let's talk real estate</h3>
        <p>Fill out the form below and a licensed agent will respond within one business hour.</p>
      </div>
      <button class="modal-close" id="modalClose" aria-label="Close dialog">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
      </button>
    </div>
    <div class="modal-body">
      <form id="contactForm" novalidate>
        <div class="f-row">
          <div class="f-field">
            <label for="fName">Full Name *</label>
            <input type="text" id="fName" placeholder="Jordan Avery" autocomplete="name">
            <span class="f-error">Please enter your name.</span>
          </div>
          <div class="f-field">
            <label for="fPhone">Phone *</label>
            <input type="tel" id="fPhone" placeholder="(843) 555-0100" autocomplete="tel">
            <span class="f-error">Please enter a valid phone number.</span>
          </div>
        </div>
        <div class="f-field">
          <label for="fEmail">Email *</label>
          <input type="email" id="fEmail" placeholder="you@example.com" autocomplete="email">
          <span class="f-error">Please enter a valid email address.</span>
        </div>
        <div class="f-row">
          <div class="f-field">
            <label for="fIntent">I'm interested in</label>
            <select id="fIntent">
              <option>Buying a home</option>
              <option>Selling my home</option>
              <option>Finding a rental</option>
              <option>Home value estimate</option>
              <option>Just browsing</option>
            </select>
          </div>
          <div class="f-field">
            <label for="fAgent">Preferred agent</label>
            <select id="fAgent">
              <option>Any available agent</option>
              <option>Maria Santos</option>
              <option>David Okafor</option>
              <option>Elena Vasquez</option>
            </select>
          </div>
        </div>
        <div class="f-field">
          <label for="fMessage">Message</label>
          <textarea id="fMessage" placeholder="Tell us about your timeline, budget, or questions..."></textarea>
        </div>
        <button type="submit" class="btn btn-gold" style="width:100%;justify-content:center">Send Message
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"/></svg>
        </button>
      </form>
      <div class="modal-success" id="modalSuccess">
        <div class="check"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#151a22" stroke-width="2.4"><path d="M20 6L9 17l-5-5"/></svg></div>
        <h4>Message received</h4>
        <p>Thank you — a Havenridge agent will reach out shortly. In the meantime, feel free to call us at (843) 555-0184.</p>
      </div>
    </div>
  </div>
</div>

<button id="toTop" aria-label="Back to top">
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M6 11l6-6 6 6"/></svg>
</button>

<script>
(function(){
  "use strict";

  /* ---------- Footer year ---------- */
  document.getElementById('year').textContent = new Date().getFullYear();

  /* ---------- Scroll progress + header state ---------- */
  const header = document.getElementById('header');
  const progress = document.getElementById('progress');
  const toTop = document.getElementById('toTop');
  function onScroll(){
    const y = window.scrollY;
    header.classList.toggle('scrolled', y > 40);
    const h = document.documentElement.scrollHeight - window.innerHeight;
    progress.style.width = (h > 0 ? (y / h) * 100 : 0) + '%';
    toTop.classList.toggle('show', y > 700);
  }
  window.addEventListener('scroll', onScroll, {passive:true});
  onScroll();
  toTop.addEventListener('click', () => window.scrollTo({top:0, behavior:'smooth'}));

  /* ---------- Mobile menu ---------- */
  const hamburger = document.getElementById('hamburger');
  const mobileMenu = document.getElementById('mobileMenu');
  function toggleMenu(force){
    const open = force !== undefined ? force : !mobileMenu.classList.contains('open');
    mobileMenu.classList.toggle('open', open);
    hamburger.classList.toggle('open', open);
    hamburger.setAttribute('aria-expanded', open);
    document.body.style.overflow = open ? 'hidden' : '';
  }
  hamburger.addEventListener('click', () => toggleMenu());
  mobileMenu.querySelectorAll('a').forEach(a => a.addEventListener('click', () => toggleMenu(false)));

  /* ---------- Reveal on scroll ---------- */
  const revealIO = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting){ e.target.classList.add('in'); revealIO.unobserve(e.target); }
    });
  }, {threshold:.12, rootMargin:'0px 0px -40px 0px'});
  document.querySelectorAll('.reveal').forEach(el => revealIO.observe(el));

  /* ---------- Animated counters ---------- */
  function animateCount(el){
    const target = parseFloat(el.dataset.count);
    const decimals = parseInt(el.dataset.decimals || '0', 10);
    const prefix = el.dataset.prefix || '';
    const suffix = el.dataset.suffix || '';
    const dur = 1800;
    const start = performance.now();
    function tick(now){
      const p = Math.min((now - start) / dur, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      const val = target * eased;
      el.textContent = prefix + (decimals ? val.toFixed(decimals) : Math.round(val).toLocaleString('en-US')) + suffix;
      if (p < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }
  const countIO = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting){ animateCount(e.target); countIO.unobserve(e.target); }
    });
  }, {threshold:.5});
  document.querySelectorAll('[data-count]').forEach(el => countIO.observe(el));

  /* ---------- Hero search tabs ---------- */
  const swTabs = document.querySelectorAll('.sw-tab');
  const swSubmitText = document.getElementById('swSubmitText');
  const swNote = document.getElementById('swNote');
  const priceLabel = document.getElementById('swPriceLabel');
  const swPrice = document.getElementById('swPrice');
  const swType = document.getElementById('swType');
  const noteText = {
    buy:  'Showing 214 homes for sale across the Lowcountry. New listings added daily.',
    rent: 'Showing 46 homes for rent across the Lowcountry. Applications reviewed within 24 hours.',
    sell: 'Curious about your home\u2019s value? Run our free estimator or request a private valuation.'
  };
  const typeOptions = {
    buy:  ['Single Family','Condo / Townhome','Luxury Estate','Waterfront','Land / Lot'],
    rent: ['Single Family','Condo / Townhome','Apartment','Waterfront']
  };
  const submitText = {buy:'Search Homes', rent:'Find Rentals', sell:'Request Valuation'};
  swTabs.forEach(tab => tab.addEventListener('click', () => {
    swTabs.forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
    const mode = tab.dataset.mode;
    swSubmitText.textContent = submitText[mode];
    swNote.textContent = noteText[mode];
    if (mode === 'sell'){
      priceLabel.textContent = 'Estimated Home Value';
      swPrice.innerHTML = '<option>$250K – $500K</option><option>$500K – $850K</option><option>$850K – $1.5M</option><option>$1.5M+</option>';
      swType.innerHTML = typeOptions.buy.join('');
      setTimeout(() => {
        document.getElementById('estimate').scrollIntoView({behavior:'smooth'});
      }, 150);
    } else {
      priceLabel.textContent = mode === 'rent' ? 'Max Monthly Rent' : 'Max Price';
      swPrice.innerHTML = mode === 'rent'
        ? '<option>$1,500 – $2,500</option><option>$2,500 – $4,000</option><option>$4,000+</option><option>Any Price</option>'
        : '<option>$250K – $500K</option><option>$500K – $850K</option><option>$850K – $1.5M</option><option>$1.5M+</option><option>Any Price</option>';
      swType.innerHTML = typeOptions[mode].join('');
    }
  }));
  document.getElementById('swSubmit').addEventListener('click', () => {
    const mode = document.querySelector('.sw-tab.active').dataset.mode;
    if (mode === 'sell'){
      document.getElementById('estimate').scrollIntoView({behavior:'smooth'});
      return;
    }
    const loc = document.getElementById('swLocation').value.trim();
    const msg = loc
      ? 'Searching ' + (mode === 'rent' ? 'rentals' : 'homes') + ' near "' + loc + '" — showing matched listings below.'
      : 'Showing all ' + (mode === 'rent' ? 'rental' : 'for-sale') + ' listings below.';
    swNote.textContent = msg;
    document.getElementById('buy').scrollIntoView({behavior:'smooth'});
    applyFilter(mode === 'rent' ? 'rent' : 'sale');
  });

  /* ---------- Listing filters ---------- */
  const ftabs = document.querySelectorAll('.ftab');
  const lcards = document.querySelectorAll('.lcard');
  function applyFilter(f){
    ftabs.forEach(t => t.classList.toggle('active', t.dataset.filter === f));
    lcards.forEach(card => card.classList.toggle('hide', f !== 'all' && card.dataset.type !== f));
  }
  ftabs.forEach(t => t.addEventListener('click', () => applyFilter(t.dataset.filter)));
  document.getElementById('loadMoreBtn').addEventListener('click', function(){
    this.innerHTML = 'All 214 listings are shown — refine your search above';
    this.style.pointerEvents = 'none';
    this.style.opacity = '.6';
  });

  /* ---------- Value estimator ---------- */
  const estValue = document.getElementById('estValue');
  const estLoc = document.getElementById('estLoc');
  const estTrend = document.getElementById('estTrend');
  const estOut = document.getElementById('estOut');
  const estRange = document.getElementById('estRange');
  const valHome = document.getElementById('valHome');
  const valLoc = document.getElementById('valLoc');
  const valTrend = document.getElementById('valTrend');
  let conditionMult = 1.08;
  let estAnim = null;

  function fillRange(input){
    const pct = ((input.value - input.min) / (input.max - input.min)) * 100;
    input.style.setProperty('--fill', pct + '%');
  }
  function formatMoney(n){ return '$' + Math.round(n).toLocaleString('en-US'); }
  function computeEstimate(){
    const base = parseFloat(estValue.value);
    const loc = parseFloat(estLoc.value);
    const trend = parseFloat(estTrend.value);
    const locMult = 0.92 + ((loc - 1) / 9) * 0.16;
    const trendMult = 1 + (trend / 100);
    return Math.round((base * conditionMult * locMult * trendMult) / 1000) * 1000;
  }
  function animateEstimate(){
    const target = computeEstimate();
    if (estAnim) cancelAnimationFrame(estAnim);
    const start = performance.now();
    const dur = 700;
    function tick(now){
      const p = Math.min((now - start) / dur, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      estOut.textContent = formatMoney(target * eased);
      if (p < 1) estAnim = requestAnimationFrame(tick);
    }
    estAnim = requestAnimationFrame(tick);
    const low = Math.round(target * .95 / 1000) * 1000;
    const high = Math.round(target * 1.05 / 1000) * 1000;
    estRange.textContent = formatMoney(low) + ' – ' + formatMoney(high);
  }
  function updateEstimator(){
    fillRange(estValue); fillRange(estLoc); fillRange(estTrend);
    valHome.textContent = formatMoney(parseFloat(estValue.value));
    valLoc.textContent = estLoc.value + ' / 10';
    const t = parseFloat(estTrend.value);
    valTrend.textContent = (t >= 0 ? '+' : '') + t.toFixed(1) + '%';
    animateEstimate();
  }
  [estValue, estLoc, estTrend].forEach(el => el.addEventListener('input', updateEstimator));
  document.getElementById('estCondition').querySelectorAll('button').forEach(btn => {
    btn.addEventListener('click', () => {
      document.getElementById('estCondition').querySelectorAll('button').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      conditionMult = parseFloat(btn.dataset.mult);
      animateEstimate();
    });
  });
  updateEstimator();

  /* ---------- Market chart bars ---------- */
  const chartIO = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting){
        e.target.querySelectorAll('.chart-bar').forEach((bar, i) => {
          setTimeout(() => { bar.style.height = bar.dataset.h + '%'; }, i * 120);
        });
        chartIO.disconnect();
      }
    });
  }, {threshold:.3});
  chartIO.observe(document.getElementById('chart'));

  /* ---------- FAQ accordion ---------- */
  document.querySelectorAll('.faq-item').forEach(item => {
    const q = item.querySelector('.faq-q');
    const a = item.querySelector('.faq-a');
    q.addEventListener('click', () => {
      const isOpen = item.classList.contains('open');
      document.querySelectorAll('.faq-item.open').forEach(o => {
        o.classList.remove('open');
        o.querySelector('.faq-a').style.maxHeight = '0px';
      });
      if (!isOpen){
        item.classList.add('open');
        a.style.maxHeight = a.scrollHeight + 'px';
      }
    });
  });

  /* ---------- Contact modal ---------- */
  const overlay = document.getElementById('modalOverlay');
  const modalForm = document.getElementById('contactForm');
  const modalSuccess = document.getElementById('modalSuccess');
  const modalTitle = document.getElementById('modalTitle');
  let lastFocus = null;

  function openModal(prefill){
    lastFocus = document.activeElement;
    overlay.classList.add('open');
    document.body.style.overflow = 'hidden';
    modalForm.style.display = '';
    modalSuccess.style.display = 'none';
    modalForm.reset();
    if (prefill){
      modalTitle.textContent = prefill.title;
      document.getElementById('fMessage').value = prefill.message;
    }
    setTimeout(() => document.getElementById('fName').focus(), 350);
  }
  function closeModal(){
    overlay.classList.remove('open');
    document.body.style.overflow = '';
    if (lastFocus) lastFocus.focus();
  }
  document.querySelectorAll('[data-open-modal]').forEach(b => {
    b.addEventListener('click', (e) => { e.preventDefault(); toggleMenu(false); openModal(); });
  });
  document.querySelectorAll('[data-tour]').forEach(b => {
    b.addEventListener('click', (e) => {
      e.preventDefault();
      openModal({
        title: 'Schedule a tour — ' + b.dataset.tour,
        message: 'I\u2019d like to schedule a private tour of this property. Please send me available times.'
      });
    });
  });
  document.querySelectorAll('[data-resource]').forEach(b => {
    b.addEventListener('click', (e) => {
      e.preventDefault();
      openModal({
        title: 'Download: ' + b.dataset.resource,
        message: 'Please send me the "' + b.dataset.resource + '" guide. I\u2019d also like to be contacted by an agent.'
      });
    });
  });
  document.getElementById('modalClose').addEventListener('click', closeModal);
  overlay.addEventListener('click', (e) => { if (e.target === overlay) closeModal(); });
  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && overlay.classList.contains('open')) closeModal(); });

  /* ---------- Form validation & submit ---------- */
  modalForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const name = document.getElementById('fName');
    const phone = document.getElementById('fPhone');
    const email = document.getElementById('fEmail');
    let valid = true;
    function check(input, ok){
      input.closest('.f-field').classList.toggle('invalid', !ok);
      if (!ok) valid = false;
    }
    check(name, name.value.trim().length >= 2);
    check(phone, /^[\d\s()+\-.]{10,}$/.test(phone.value.trim()));
    check(email, /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.value.trim()));
    if (!valid) return;
    modalForm.style.display = 'none';
    modalSuccess.style.display = 'block';
    setTimeout(() => {
      closeModal();
      modalForm.style.display = '';
      modalSuccess.style.display = 'none';
    }, 3600);
  });
  ['fName','fPhone','fEmail'].forEach(id => {
    document.getElementById(id).addEventListener('input', e => {
      e.target.closest('.f-field').classList.remove('invalid');
    });
  });

  /* ---------- Active nav highlighting ---------- */
  const navLinks = document.querySelectorAll('nav.main-nav a');
  const sectionMap = {};
  navLinks.forEach(a => {
    const id = a.getAttribute('href');
    if (id && id.startsWith('#')) sectionMap[id.slice(1)] = a;
  });
  const navIO = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting){
        navLinks.forEach(a => a.classList.remove('active'));
        const link = sectionMap[e.target.id];
        if (link) link.classList.add('active');
      }
    });
  }, {rootMargin:'-40% 0px -55% 0px'});
  ['home','buy','estimate','market','agents','resources','contact'].forEach(id => {
    const el = document.getElementById(id);
    if (el) navIO.observe(el);
  });
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:55:59.813Z",
  "url": "https://benchmark.aimac.invalid/7ae16be8abf40a7a815d19cde21baa9bb4e9a194f4ac624a95bae541760e05d8.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-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-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a href=\"#home\" class=\"brand\" aria-label=\"Havenridge Realty home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#home\" class=\"brand\" aria-label=\"Havenridge Realty home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"sw-tabs\" role=\"tablist\" aria-label=\"Search mode\">\n        <button class=\"sw-tab active\" data-mode=\"buy\" role=\"tab\">Buy</button>\n        <button class=\"sw-tab\" data-mode=\"rent\" role=\"tab\">Rent</button>\n        <button class=\"sw-tab\" data-mode=\"sell\" role=\"tab\">Sell</button>\n      </div>",
          "target": [
            ".sw-tabs"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a href=\"#home\" class=\"brand\" aria-label=\"Havenridge Realty home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"sw-tabs\" role=\"tablist\" aria-label=\"Search mode\">\n        <button class=\"sw-tab active\" data-mode=\"buy\" role=\"tab\">Buy</button>\n        <button class=\"sw-tab\" data-mode=\"rent\" role=\"tab\">Rent</button>\n        <button class=\"sw-tab\" data-mode=\"sell\" role=\"tab\">Sell</button>\n      </div>",
          "target": [
            ".sw-tabs"
          ]
        }
      ]
    },
    {
      "id": "aria-required-children",
      "impact": "critical",
      "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": [
        {
          "any": [
            {
              "id": "aria-required-children",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Required ARIA children are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"sw-tabs\" role=\"tablist\" aria-label=\"Search mode\">\n        <button class=\"sw-tab active\" data-mode=\"buy\" role=\"tab\">Buy</button>\n        <button class=\"sw-tab\" data-mode=\"rent\" role=\"tab\">Rent</button>\n        <button class=\"sw-tab\" data-mode=\"sell\" role=\"tab\">Sell</button>\n      </div>",
          "target": [
            ".sw-tabs"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-required-parent",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Required ARIA parent role present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"sw-tab active\" data-mode=\"buy\" role=\"tab\">Buy</button>",
          "target": [
            "button[data-mode=\"buy\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"sw-tabs\" role=\"tablist\" aria-label=\"Search mode\">\n        <button class=\"sw-tab active\" data-mode=\"buy\" role=\"tab\">Buy</button>\n        <button class=\"sw-tab\" data-mode=\"rent\" role=\"tab\">Rent</button>\n        <button class=\"sw-tab\" data-mode=\"sell\" role=\"tab\">Sell</button>\n      </div>",
          "target": [
            ".sw-tabs"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#home\" class=\"brand\" aria-label=\"Havenridge Realty home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#home\" class=\"brand\" aria-label=\"Havenridge Realty home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div id=\"progress\" style=\"width: 0%;\"></div>",
          "target": [
            "#progress"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"btn btn-gold btn-header\" data-open-modal=\"\">Contact Agent</button>",
          "target": [
            ".btn-header"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1>Find the address that <em>feels like home.</em></h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">Featured <em>properties</em></h2>",
                  "target": [
                    ".listings-toolbar > .sec-head.reveal > .sec-title"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">What is your home <em>worth today?</em></h2>",
                  "target": [
                    "#estimate > .container > .center.sec-head.reveal > .sec-title"
                  ]
                },
                {
                  "html": "<h3>Home Value Estimator</h3>",
                  "target": [
                    ".est-controls > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\" style=\"color:#fff\">The Lowcountry, <em>by the numbers</em></h2>",
                  "target": [
                    "#market > .container > .sec-head.reveal > .sec-title"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">A proven path, <em>from first call to keys</em></h2>",
                  "target": [
                    "#process > .container > .center.sec-head.reveal > .sec-title"
                  ]
                },
                {
                  "html": "<h4>Discover</h4>",
                  "target": [
                    ".pstep.reveal:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4>Analyze</h4>",
                  "target": [
                    ".pstep.reveal-d1.reveal > h4"
                  ]
                },
                {
                  "html": "<h4>Position</h4>",
                  "target": [
                    ".pstep.reveal-d2.reveal > h4"
                  ]
                },
                {
                  "html": "<h4>Negotiate</h4>",
                  "target": [
                    ".reveal-d3.pstep.reveal > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">Agents who know <em>every street</em></h2>",
                  "target": [
                    "#agents > .container > .center.sec-head.reveal > .sec-title"
                  ]
                },
                {
                  "html": "<h3 class=\"acard-name\">Maria Santos</h3>",
                  "target": [
                    ".acard:nth-child(1) > .acard-body > .acard-name"
                  ]
                },
                {
                  "html": "<h3 class=\"acard-name\">David Okafor</h3>",
                  "target": [
                    ".acard.reveal-d1 > .acard-body > .acard-name"
                  ]
                },
                {
                  "html": "<h3 class=\"acard-name\">Elena Vasquez</h3>",
                  "target": [
                    ".acard.reveal-d2 > .acard-body > .acard-name"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">Trusted on <em>both sides</em> of the table</h2>",
                  "target": [
                    "#testimonials > .container > .center.sec-head.reveal > .sec-title"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">Resources for your <em>next move</em></h2>",
                  "target": [
                    "#resources > .container > .sec-head.reveal > .sec-title"
                  ]
                },
                {
                  "html": "<h4>The First-Time Buyer's Handbook</h4>",
                  "target": [
                    ".rcard:nth-child(1) > .rcard-body > h4"
                  ]
                },
                {
                  "html": "<h4>The Seller's Preparation Checklist</h4>",
                  "target": [
                    ".rcard.reveal-d1 > .rcard-body > h4"
                  ]
                },
                {
                  "html": "<h4>Closing Costs, Decoded</h4>",
                  "target": [
                    ".rcard.reveal-d2 > .rcard-body > h4"
                  ]
                },
                {
                  "html": "<h4>The Lowcountry Moving Handbook</h4>",
                  "target": [
                    ".reveal-d3.rcard > .rcard-body > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">Answers, <em>before you ask</em></h2>",
                  "target": [
                    "div:nth-child(3) > .center.sec-head.reveal > .sec-title"
                  ]
                },
                {
                  "html": "<h2>Ready to make your <em>next move?</em></h2>",
                  "target": [
                    ".cta-banner > h2"
                  ]
                },
                {
                  "html": "<h5>Explore</h5>",
                  "target": [
                    ".f-col:nth-child(2) > h5"
                  ]
                },
                {
                  "html": "<h5>Services</h5>",
                  "target": [
                    ".f-col:nth-child(3) > h5"
                  ]
                },
                {
                  "html": "<h5>Contact</h5>",
                  "target": [
                    ".f-col:nth-child(4) > h5"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main>",
                  "target": [
                    "main"
                  ]
                }
              ],
              "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": "#151a22",
                "bgColor": "#c29a5b",
                "contrastRatio": 6.7,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 6.7"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"btn btn-gold btn-header\" data-open-modal=\"\">Contact Agent</button>",
          "target": [
            ".btn-header"
          ]
        }
      ]
    },
    {
      "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": "swLocation",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<input type=\"text\" id=\"swLocation\" placeholder=\"City, neighborhood, or ZIP code\">",
          "target": [
            "#swLocation"
          ]
        }
      ]
    },
    {
      "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=\"swLocation\">Location</label>",
                  "target": [
                    "label[for=\"swLocation\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"swLocation\" placeholder=\"City, neighborhood, or ZIP code\">",
          "target": [
            "#swLocation"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/190x76/151a22/c29a5b?text=HR&amp;font=playfair+display\" alt=\"Havenridge Realty logo\">",
          "target": [
            ".brand > img[alt=\"Havenridge Realty logo\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"swLocation\">Location</label>",
                  "target": [
                    "label[for=\"swLocation\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"swLocation\" placeholder=\"City, neighborhood, or ZIP code\">",
          "target": [
            "#swLocation"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#home\" class=\"brand\" aria-label=\"Havenridge Realty home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul>",
          "target": [
            ".f-col: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=\"#buy\">Homes for Sale</a></li>",
          "target": [
            ".f-col: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.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/190x76/151a22/c29a5b?text=HR&amp;font=playfair+display\" alt=\"Havenridge Realty logo\">",
          "target": [
            ".brand > img[alt=\"Havenridge Realty logo\"]"
          ]
        }
      ]
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"swType\">Property Type</label>",
                  "target": [
                    "label[for=\"swType\"]"
                  ]
                }
              ],
              "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=\"swType\">\n            <option>Single Family</option>\n            <option>Condo / Townhome</option>\n            <option>Luxury Estate</option>\n            <option>Waterfront</option>\n            <option>Land / Lot</option>\n          </select>",
          "target": [
            "#swType"
          ]
        }
      ]
    },
    {
      "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": 322.8,
                "height": 73.8
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (322.8px by 73.8px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#home\" class=\"brand\" aria-label=\"Havenridge Realty home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "14.3pt (19px)",
                "fontWeight": "normal",
                "messageKey": "imgNode",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<img src=\"https://picsum.photos/id/1036/1920/1080?grayscale\" alt=\"Modern coastal home at dusk\">",
                  "target": [
                    "img[alt=\"Modern coastal home at dusk\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined because element contains an image node"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"brand-name\">Havenridge Realty</span>",
          "target": [
            ".brand-name"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because element contains an image node"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "aria-required-children",
      "impact": "critical",
      "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": [
        {
          "any": [
            {
              "id": "aria-required-children",
              "data": {
                "messageKey": "unallowed",
                "values": "button[tabindex]"
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"ftab active\" data-filter=\"all\">All</button>",
                  "target": [
                    "button[data-filter=\"all\"]"
                  ]
                },
                {
                  "html": "<button class=\"ftab\" data-filter=\"sale\">For Sale</button>",
                  "target": [
                    "button[data-filter=\"sale\"]"
                  ]
                },
                {
                  "html": "<button class=\"ftab\" data-filter=\"rent\">For Rent</button>",
                  "target": [
                    "button[data-filter=\"rent\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has children which are not allowed: button[tabindex]"
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<div class=\"filter-tabs reveal reveal-d1\" role=\"tablist\" aria-label=\"Listing filters\">\n        <button class=\"ftab active\" data-filter=\"all\">All</button>\n        <button class=\"ftab\" data-filter=\"sale\">For Sale</button>\n        <button class=\"ftab\" data-filter=\"rent\">For Rent</button>\n      </div>",
          "target": [
            ".filter-tabs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has children which are not allowed: button[tabindex]"
        }
      ]
    },
    {
      "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": "#a97f42",
                "bgColor": "#f5f1e8",
                "contrastRatio": 3.21,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section cream\" id=\"buy\">",
                  "target": [
                    "#buy"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Curated Collection</span>",
          "target": [
            ".in.sec-head.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#f5f1e8",
                "contrastRatio": 3.21,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section cream\" id=\"buy\">",
                  "target": [
                    "#buy"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Curated Collection</span>",
          "target": [
            ".sec-head.in.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#f5f1e8",
                "contrastRatio": 3.21,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section cream\" id=\"buy\">",
                  "target": [
                    "#buy"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Curated Collection</span>",
          "target": [
            ".listings-toolbar > .sec-head.in.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c6470",
                "bgColor": "#151a22",
                "contrastRatio": 2.91,
                "fontSize": "12.8pt (17px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section dark\" id=\"estimate\">",
                  "target": [
                    "#estimate"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.91 (foreground color: #5c6470, background color: #151a22, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"sec-sub\">Our estimator blends live market trends, property condition, and hyperlocal neighborhood data into a preliminary valuation range \u2014 refined further by a full comparative market analysis from your agent.</p>",
          "target": [
            ".center.sec-head.in > .sec-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.91 (foreground color: #5c6470, background color: #151a22, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c6470",
                "bgColor": "#151a22",
                "contrastRatio": 2.91,
                "fontSize": "12.8pt (17px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section dark\" style=\"padding-top:0\" id=\"market\">",
                  "target": [
                    "#market"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.91 (foreground color: #5c6470, background color: #151a22, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"sec-sub\">Our analysts track price-per-square-foot, inventory, and absorption rates across every neighborhood we serve, so our clients make decisions on evidence \u2014 not anecdotes.</p>",
          "target": [
            "#market > .container > .sec-head.in.reveal > .sec-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.91 (foreground color: #5c6470, background color: #151a22, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c6470",
                "bgColor": "#151a22",
                "contrastRatio": 2.91,
                "fontSize": "12.8pt (17px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section dark\" id=\"estimate\">",
                  "target": [
                    "#estimate"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.91 (foreground color: #5c6470, background color: #151a22, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"sec-sub\">Our estimator blends live market trends, property condition, and hyperlocal neighborhood data into a preliminary valuation range \u2014 refined further by a full comparative market analysis from your agent.</p>",
          "target": [
            "#estimate > .container > .center.sec-head.in > .sec-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.91 (foreground color: #5c6470, background color: #151a22, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#73767a",
                "bgColor": "#151a22",
                "contrastRatio": 3.82,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section dark\" style=\"padding-top:0\" id=\"market\">",
                  "target": [
                    "#market"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"chart-lab\">Jan</div>",
          "target": [
            ".chart-col:nth-child(1) > .chart-lab"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#73767a",
                "bgColor": "#151a22",
                "contrastRatio": 3.82,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section dark\" style=\"padding-top:0\" id=\"market\">",
                  "target": [
                    "#market"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"chart-lab\">Feb</div>",
          "target": [
            ".chart-col:nth-child(2) > .chart-lab"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#73767a",
                "bgColor": "#151a22",
                "contrastRatio": 3.82,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section dark\" style=\"padding-top:0\" id=\"market\">",
                  "target": [
                    "#market"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"chart-lab\">Mar</div>",
          "target": [
            ".chart-col:nth-child(3) > .chart-lab"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#73767a",
                "bgColor": "#151a22",
                "contrastRatio": 3.82,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section dark\" style=\"padding-top:0\" id=\"market\">",
                  "target": [
                    "#market"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"chart-lab\">Apr</div>",
          "target": [
            ".chart-col:nth-child(4) > .chart-lab"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#73767a",
                "bgColor": "#151a22",
                "contrastRatio": 3.82,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section dark\" style=\"padding-top:0\" id=\"market\">",
                  "target": [
                    "#market"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"chart-lab\">May</div>",
          "target": [
            ".chart-col:nth-child(5) > .chart-lab"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#73767a",
                "bgColor": "#151a22",
                "contrastRatio": 3.82,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section dark\" style=\"padding-top:0\" id=\"market\">",
                  "target": [
                    "#market"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"chart-lab\">Jun</div>",
          "target": [
            ".chart-col:nth-child(6) > .chart-lab"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.82 (foreground color: #73767a, background color: #151a22, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#f5f1e8",
                "contrastRatio": 3.21,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section cream\" id=\"process\">",
                  "target": [
                    "#process"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">The Havenridge Method</span>",
          "target": [
            "#process > .container > .center.sec-head.in > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#fbf9f4",
                "contrastRatio": 3.44,
                "fontSize": "9.0pt (12px)",
                "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.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Our Team</span>",
          "target": [
            "#agents > .container > .center.sec-head.in > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#ffffff",
                "contrastRatio": 3.61,
                "fontSize": "8.6pt (11.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"acard reveal in\">",
                  "target": [
                    ".acard:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 8.6pt (11.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"acard-cert\">Broker Associate \u00b7 19 yrs</div>",
          "target": [
            ".acard:nth-child(1) > .acard-body > .acard-cert"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 8.6pt (11.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#ffffff",
                "contrastRatio": 3.61,
                "fontSize": "8.6pt (11.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"acard reveal reveal-d1 in\">",
                  "target": [
                    ".acard.reveal-d1"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 8.6pt (11.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"acard-cert\">Realtor\u00ae \u00b7 11 yrs</div>",
          "target": [
            ".acard.reveal-d1 > .acard-body > .acard-cert"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 8.6pt (11.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#ffffff",
                "contrastRatio": 3.61,
                "fontSize": "8.6pt (11.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"acard reveal reveal-d2 in\">",
                  "target": [
                    ".acard.reveal-d2"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 8.6pt (11.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"acard-cert\">Realtor\u00ae \u00b7 14 yrs</div>",
          "target": [
            ".acard.reveal-d2 > .acard-body > .acard-cert"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 8.6pt (11.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#f5f1e8",
                "contrastRatio": 3.21,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section cream\" id=\"testimonials\">",
                  "target": [
                    "#testimonials"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Client Stories</span>",
          "target": [
            "#testimonials > .container > .center.sec-head.in > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#fbf9f4",
                "contrastRatio": 3.44,
                "fontSize": "9.0pt (12px)",
                "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.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Knowledge Center</span>",
          "target": [
            "#resources > .container > .sec-head.in.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#ffffff",
                "contrastRatio": 3.61,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"rcard reveal in\">",
                  "target": [
                    ".rcard:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"rcard-type\">Guide \u00b7 28 Pages</span>",
          "target": [
            ".rcard:nth-child(1) > .rcard-body > .rcard-type"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#ffffff",
                "contrastRatio": 3.61,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"rcard reveal reveal-d1 in\">",
                  "target": [
                    ".rcard.reveal-d1"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"rcard-type\">Checklist \u00b7 16 Pages</span>",
          "target": [
            ".rcard.reveal-d1 > .rcard-body > .rcard-type"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#ffffff",
                "contrastRatio": 3.61,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"rcard reveal reveal-d2 in\">",
                  "target": [
                    ".rcard.reveal-d2"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"rcard-type\">Explainer \u00b7 12 Pages</span>",
          "target": [
            ".rcard.reveal-d2 > .rcard-body > .rcard-type"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#ffffff",
                "contrastRatio": 3.61,
                "fontSize": "7.9pt (10.5px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"rcard reveal reveal-d3 in\">",
                  "target": [
                    ".reveal-d3.rcard"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"rcard-type\">Toolkit \u00b7 20 Pages</span>",
          "target": [
            ".reveal-d3.rcard > .rcard-body > .rcard-type"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.61 (foreground color: #a97f42, background color: #ffffff, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#fbf9f4",
                "contrastRatio": 3.44,
                "fontSize": "9.0pt (12px)",
                "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.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Common Questions</span>",
          "target": [
            "div:nth-child(3) > .center.sec-head.in > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#f5f1e8",
                "contrastRatio": 3.21,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section cream\" id=\"buy\">",
                  "target": [
                    "#buy"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Curated Collection</span>",
          "target": [
            ".listings-toolbar > .sec-head.reveal.in > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c6470",
                "bgColor": "#151a22",
                "contrastRatio": 2.91,
                "fontSize": "12.8pt (17px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section dark\" id=\"estimate\">",
                  "target": [
                    "#estimate"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.91 (foreground color: #5c6470, background color: #151a22, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"sec-sub\">Our estimator blends live market trends, property condition, and hyperlocal neighborhood data into a preliminary valuation range \u2014 refined further by a full comparative market analysis from your agent.</p>",
          "target": [
            "#estimate > .container > .center.sec-head.reveal > .sec-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.91 (foreground color: #5c6470, background color: #151a22, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c6470",
                "bgColor": "#151a22",
                "contrastRatio": 2.91,
                "fontSize": "12.8pt (17px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section dark\" style=\"padding-top:0\" id=\"market\">",
                  "target": [
                    "#market"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.91 (foreground color: #5c6470, background color: #151a22, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"sec-sub\">Our analysts track price-per-square-foot, inventory, and absorption rates across every neighborhood we serve, so our clients make decisions on evidence \u2014 not anecdotes.</p>",
          "target": [
            "#market > .container > .sec-head.reveal.in > .sec-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.91 (foreground color: #5c6470, background color: #151a22, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#f5f1e8",
                "contrastRatio": 3.21,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section cream\" id=\"process\">",
                  "target": [
                    "#process"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">The Havenridge Method</span>",
          "target": [
            "#process > .container > .center.sec-head.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#fbf9f4",
                "contrastRatio": 3.44,
                "fontSize": "9.0pt (12px)",
                "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.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Our Team</span>",
          "target": [
            "#agents > .container > .center.sec-head.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#f5f1e8",
                "contrastRatio": 3.21,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section cream\" id=\"testimonials\">",
                  "target": [
                    "#testimonials"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Client Stories</span>",
          "target": [
            "#testimonials > .container > .center.sec-head.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.21 (foreground color: #a97f42, background color: #f5f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#fbf9f4",
                "contrastRatio": 3.44,
                "fontSize": "9.0pt (12px)",
                "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.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Knowledge Center</span>",
          "target": [
            "#resources > .container > .sec-head.reveal.in > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a97f42",
                "bgColor": "#fbf9f4",
                "contrastRatio": 3.44,
                "fontSize": "9.0pt (12px)",
                "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.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Common Questions</span>",
          "target": [
            "div:nth-child(3) > .center.sec-head.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #a97f42, background color: #fbf9f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 9842
      },
      {
        "y": 576,
        "height": 9842
      },
      {
        "y": 1152,
        "height": 9842
      },
      {
        "y": 1728,
        "height": 9842
      },
      {
        "y": 2304,
        "height": 9842
      },
      {
        "y": 2880,
        "height": 9842
      },
      {
        "y": 3456,
        "height": 9842
      },
      {
        "y": 4032,
        "height": 9842
      },
      {
        "y": 4608,
        "height": 9842
      },
      {
        "y": 5184,
        "height": 9842
      },
      {
        "y": 5760,
        "height": 9842
      },
      {
        "y": 6336,
        "height": 9842
      },
      {
        "y": 6912,
        "height": 9842
      },
      {
        "y": 7488,
        "height": 9842
      },
      {
        "y": 8064,
        "height": 9842
      },
      {
        "y": 8640,
        "height": 9842
      },
      {
        "y": 9122,
        "height": 9842
      }
    ],
    "scans": 18,
    "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: "Resources", "Rent", "Sell".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Real Estate" category. Consider themes similar to: "Open Houses", "Market Analysis", "Buyer Resources".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "comparative market analysis", "closing costs", "property disclosure".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Schedule Tour", "Save Search", "Contact Agent".
-   **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: "home value estimator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "featured agents", "price reductions", "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.