Xiaomi MiMo V2.6 Pro – Real Estate
via GMICloud · Generated
- AIMAC Debt 14.33
- Cost $0.03
- Total Violations 45
- HTML Size 105 KB
- Em Dashes 31
Screenshot
View Live Page
Accessibility Issues Found
2 Critical 43 Serious
-
color-contrast serious 43 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<div class="brand-tag">Find Your True North</div> -
label critical 2 instances
Form elements must have labels
Example HTML
<input type="range" id="homePriceRange" min="150000" max="2500000" step="5000" value="525000" style="--pct: 15.957446808510639%;">
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>Northmark Realty — Find Your True North in Every Address</title>
<meta name="description" content="Northmark Realty is a full-service residential brokerage helping buyers, sellers, and investors navigate the market with data, craft, and care. Property search, seller guidance, mortgage resources, and open house scheduling." />
<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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--ink:#10222b;
--ink-soft:#1c3543;
--cream:#faf6f0;
--paper:#ffffff;
--sand:#f0e7da;
--line:#e2d8c9;
--clay:#b0522e;
--clay-dark:#8c3f22;
--gold:#c08b45;
--muted:#67787f;
--green:#2f6b52;
--shadow-sm:0 2px 8px rgba(16,34,43,.07);
--shadow-md:0 14px 40px rgba(16,34,43,.10);
--shadow-lg:0 30px 70px rgba(16,34,43,.16);
--radius:14px;
--radius-lg:22px;
--maxw:1220px;
--ff-display:'Fraunces', Georgia, 'Times New Roman', serif;
--ff-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:110px;}
body{
margin:0;
font-family:var(--ff-body);
color:var(--ink);
background:var(--cream);
line-height:1.65;
font-size:16.5px;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,h5{font-family:var(--ff-display);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em;color:var(--ink);}
h1{font-size:clamp(2.65rem,6vw,4.65rem);font-weight:600;}
h2{font-size:clamp(2.05rem,4vw,3.15rem);}
h3{font-size:clamp(1.28rem,2vw,1.62rem);}
h4{font-size:1.08rem;font-family:var(--ff-body);font-weight:600;letter-spacing:0;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
.wrap{width:min(100% - 2.6rem, var(--maxw));margin-inline:auto;}
.eyebrow{
display:inline-flex;align-items:center;gap:.55rem;
font-size:.72rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
color:var(--clay);margin-bottom:1.05rem;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--clay);display:block;}
.eyebrow.light{color:#e9c99b;}
.eyebrow.light::before{background:#e9c99b;}
.lede{font-size:1.12rem;color:var(--muted);max-width:62ch;}
.section{padding:clamp(4.2rem,8vw,7.2rem) 0;}
.section-head{max-width:720px;margin-bottom:3.1rem;}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head.center .eyebrow{justify-content:center;}
.section-head.center .lede{margin-inline:auto;}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
padding:.95rem 1.75rem;border-radius:100px;font-weight:600;font-size:.945rem;
border:1.5px solid transparent;transition:.28s cubic-bezier(.2,.7,.3,1);
letter-spacing:.005em;white-space:nowrap;
}
.btn-primary{background:var(--clay);color:#fff;box-shadow:0 10px 24px rgba(176,82,46,.28);}
.btn-primary:hover{background:var(--clay-dark);transform:translateY(-2px);box-shadow:0 16px 32px rgba(176,82,46,.32);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:var(--ink-soft);transform:translateY(-2px);}
.btn-outline{border-color:rgba(16,34,43,.22);color:var(--ink);background:transparent;}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:#fff;transform:translateY(-2px);}
.btn-ghost-light{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(6px);}
.btn-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px);}
.btn-sm{padding:.68rem 1.25rem;font-size:.855rem;}
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--clay);font-size:.93rem;}
.link-arrow svg{transition:transform .3s;}
.link-arrow:hover svg{transform:translateX(5px);}
/* ---------- Header ---------- */
.topbar{
background:var(--ink);color:#d6dde1;font-size:.815rem;
padding:.55rem 0;letter-spacing:.015em;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;}
.topbar-left{display:flex;gap:1.6rem;flex-wrap:wrap;}
.topbar-left span{display:inline-flex;align-items:center;gap:.45rem;}
.topbar a:hover{color:#fff;}
.topbar-right{display:flex;gap:1.35rem;}
.topbar-right a{color:#e9c99b;font-weight:500;}
header.site{
position:sticky;top:0;z-index:80;
background:rgba(250,246,240,.92);
backdrop-filter:saturate(150%) blur(14px);
border-bottom:1px solid var(--line);
transition:box-shadow .35s, padding .35s;
}
header.site.scrolled{box-shadow:0 10px 34px rgba(16,34,43,.09);}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:1.05rem 0;transition:padding .35s;}
header.site.scrolled .nav-row{padding:.72rem 0;}
.brand{display:flex;align-items:center;gap:.85rem;}
.brand-mark{
width:52px;height:52px;border-radius:13px;overflow:hidden;flex:none;
box-shadow:0 6px 18px rgba(16,34,43,.18);
}
.brand-name{font-family:var(--ff-display);font-size:1.42rem;font-weight:600;letter-spacing:-.02em;line-height:1.05;}
.brand-tag{font-size:.665rem;letter-spacing:.235em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:.16rem;}
nav.main{display:flex;align-items:center;gap:.28rem;}
nav.main a{
padding:.62rem .82rem;border-radius:8px;font-size:.905rem;font-weight:500;color:var(--ink-soft);
position:relative;transition:.22s;
}
nav.main a::after{
content:"";position:absolute;left:.82rem;right:.82rem;bottom:.34rem;height:1.6px;
background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
nav.main a:hover{color:var(--ink);}
nav.main a:hover::after{transform:scaleX(1);}
.nav-actions{display:flex;align-items:center;gap:.75rem;}
.phone-cta{display:flex;flex-direction:column;line-height:1.15;text-align:right;}
.phone-cta small{font-size:.675rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.phone-cta strong{font-size:1.02rem;font-family:var(--ff-display);color:var(--ink);font-weight:600;}
.burger{
display:none;width:46px;height:46px;border-radius:11px;border:1.5px solid var(--line);
background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger span{width:20px;height:2px;background:var(--ink);display:block;transition:.3s;}
.mobile-menu{
display:none;flex-direction:column;gap:.15rem;padding:0 0 1.1rem;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:.82rem .2rem;border-bottom:1px solid var(--line);font-weight:500;}
/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);}
.hero-media{position:absolute;inset:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.52;}
.hero-media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(16,34,43,.95) 0%,rgba(16,34,43,.82) 42%,rgba(16,34,43,.28) 100%);
}
.hero-inner{position:relative;z-index:2;padding:clamp(4.4rem,9vw,7.6rem) 0 clamp(3.4rem,7vw,5.4rem);}
.hero-copy{max-width:660px;color:#fff;}
.hero-copy h1{color:#fff;}
.hero-copy h1 em{font-style:italic;color:#e9c99b;}
.hero-copy .lede{color:rgba(255,255,255,.84);font-size:clamp(1.05rem,1.7vw,1.24rem);}
.hero-cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2.15rem;}
.hero-badges{display:flex;gap:1.9rem;flex-wrap:wrap;margin-top:2.7rem;}
.hero-badge strong{display:block;font-family:var(--ff-display);font-size:1.95rem;color:#fff;line-height:1;}
.hero-badge span{font-size:.795rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:500;}
/* Search panel */
.search-panel{
position:relative;z-index:3;margin-top:-1px;
background:var(--paper);border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);padding:1.65rem;
}
.search-tabs{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.25rem;}
.search-tabs button{
border:1px solid var(--line);background:transparent;color:var(--ink-soft);
padding:.55rem 1.15rem;border-radius:100px;font-size:.865rem;font-weight:600;transition:.24s;
}
.search-tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.search-grid{
display:grid;grid-template-columns:1.55fr 1.1fr 1.1fr 1fr auto;gap:.85rem;align-items:end;
}
.field label{display:block;font-size:.715rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:.42rem;}
.field input,.field select{
width:100%;padding:.85rem .95rem;border-radius:11px;border:1.5px solid var(--line);
background:#fdfbf8;font-family:inherit;font-size:.935rem;color:var(--ink);transition:.22s;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--clay);background:#fff;box-shadow:0 0 0 3px rgba(176,82,46,.12);}
.search-note{margin-top:.95rem;font-size:.845rem;color:var(--muted);display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;}
.chip{
background:var(--sand);border-radius:100px;padding:.28rem .8rem;font-size:.785rem;font-weight:600;color:var(--ink-soft);
transition:.22s;border:1px solid transparent;
}
.chip:hover{background:var(--clay);color:#fff;}
/* ---------- Marquee strip / trust ---------- */
.trust-strip{background:var(--sand);padding:1.55rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.trust-row{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center;}
.trust-item{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--ink-soft);font-weight:500;}
.trust-item .dot{width:34px;height:34px;border-radius:50%;background:var(--paper);display:grid;place-items:center;box-shadow:var(--shadow-sm);flex:none;}
/* ---------- Listings ---------- */
.listings{background:var(--cream);}
.listings-top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;}
.filter-row{display:flex;gap:.5rem;flex-wrap:wrap;}
.filter-row button{
padding:.58rem 1.18rem;border-radius:100px;border:1.5px solid var(--line);background:#fff;
font-size:.865rem;font-weight:600;color:var(--ink-soft);transition:.25s;
}
.filter-row button.active,.filter-row button:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:2.6rem;}
.listing-card{
background:var(--paper);border-radius:var(--radius-lg);overflow:hidden;
box-shadow:var(--shadow-sm);border:1px solid rgba(226,216,201,.72);
transition:transform .42s cubic-bezier(.2,.7,.3,1), box-shadow .42s;display:flex;flex-direction:column;
}
.listing-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);}
.listing-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand);}
.listing-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.listing-card:hover .listing-img img{transform:scale(1.07);}
.tag{
position:absolute;top:.95rem;left:.95rem;background:rgba(255,255,255,.94);
padding:.34rem .82rem;border-radius:100px;font-size:.715rem;font-weight:700;
letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
}
.tag.hot{background:var(--clay);color:#fff;}
.tag.sold{background:var(--ink);color:#fff;}
.save-btn{
position:absolute;top:.95rem;right:.95rem;width:37px;height:37px;border-radius:50%;
background:rgba(255,255,255,.92);border:none;display:grid;place-items:center;transition:.25s;
}
.save-btn:hover{background:var(--clay);transform:scale(1.1);}
.save-btn:hover svg{stroke:#fff;}
.listing-body{padding:1.35rem 1.45rem 1.55rem;display:flex;flex-direction:column;flex:1;}
.listing-price{font-family:var(--ff-display);font-size:1.72rem;font-weight:600;letter-spacing:-.02em;line-height:1;}
.listing-price .est{font-family:var(--ff-body);font-size:.795rem;font-weight:500;color:var(--muted);letter-spacing:0;}
.listing-addr{font-size:.955rem;font-weight:600;margin:.55rem 0 .16rem;}
.listing-city{font-size:.865rem;color:var(--muted);margin-bottom:.95rem;}
.listing-specs{
display:flex;gap:.42rem;flex-wrap:wrap;padding-top:.95rem;margin-top:auto;
border-top:1px solid var(--line);font-size:.815rem;color:var(--ink-soft);font-weight:500;
}
.listing-specs span{display:inline-flex;align-items:center;gap:.34rem;}
.listing-specs i{width:3.5px;height:3.5px;border-radius:50%;background:var(--line);display:block;}
.listings-foot{margin-top:2.75rem;text-align:center;}
.listings-foot p{color:var(--muted);font-size:.945rem;max-width:640px;margin:0 auto 1.5rem;}
/* ---------- Value / how it works ---------- */
.process{background:var(--ink);color:#e5eaec;position:relative;overflow:hidden;}
.process::before{
content:"";position:absolute;width:640px;height:640px;border-radius:50%;
background:radial-gradient(circle,rgba(192,139,69,.22),transparent 68%);top:-220px;right:-180px;
}
.process h2{color:#fff;}
.process .lede{color:rgba(255,255,255,.72);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.35rem;position:relative;}
.step{
background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
border-radius:var(--radius);padding:1.85rem 1.6rem;transition:.38s;
}
.step:hover{background:rgba(255,255,255,.105);transform:translateY(-6px);}
.step-num{
font-family:var(--ff-display);font-size:.92rem;color:#e9c99b;border:1.5px solid rgba(233,201,155,.5);
width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin-bottom:1.15rem;
}
.step h3{color:#fff;font-size:1.16rem;}
.step p{color:rgba(255,255,255,.66);font-size:.925rem;line-height:1.72;}
/* ---------- Seller guide + sidebar ---------- */
.seller{background:var(--paper);}
.split{display:grid;grid-template-columns:1.62fr 1fr;gap:3.4rem;align-items:start;}
.guide-steps{counter-reset:gs;margin-top:2.25rem;}
.guide-item{
display:grid;grid-template-columns:auto 1fr;gap:1.45rem;padding:1.7rem 0;border-top:1px solid var(--line);
}
.guide-item:last-child{border-bottom:1px solid var(--line);}
.guide-num{
counter-increment:gs;font-family:var(--ff-display);font-size:1.12rem;font-weight:600;color:var(--clay);
width:46px;height:46px;border-radius:12px;background:#fbf1ea;display:grid;place-items:center;flex:none;
}
.guide-num::before{content:"0" counter(gs);}
.guide-item h3{font-size:1.245rem;margin-bottom:.42rem;}
.guide-item p{color:var(--muted);font-size:.975rem;line-height:1.78;}
.guide-figure{margin-top:2.35rem;border-radius:var(--radius-lg);overflow:hidden;position:relative;}
.guide-figure img{width:100%;height:340px;object-fit:cover;}
.guide-figure figcaption{
position:absolute;left:0;right:0;bottom:0;padding:1.35rem 1.6rem;
background:linear-gradient(transparent,rgba(16,34,43,.88));color:#fff;font-size:.895rem;
}
aside .widget{
background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);
padding:1.65rem;margin-bottom:1.35rem;
}
aside .widget h3{font-size:1.14rem;margin-bottom:.35rem;}
aside .widget .sub{font-size:.865rem;color:var(--muted);margin-bottom:1.35rem;}
.metric{display:flex;justify-content:space-between;align-items:baseline;padding:.72rem 0;border-bottom:1px dashed var(--line);}
.metric:last-of-type{border-bottom:none;}
.metric .k{font-size:.885rem;color:var(--muted);}
.metric .v{font-family:var(--ff-display);font-size:1.135rem;font-weight:600;}
.metric .v.up{color:var(--green);}
.metric .v.down{color:var(--clay);}
.bars{display:flex;align-items:flex-end;gap:.55rem;height:110px;margin:1.25rem 0 .75rem;}
.bar{flex:1;background:linear-gradient(180deg,var(--clay),#d4895f);border-radius:6px 6px 3px 3px;position:relative;transition:height .8s cubic-bezier(.2,.7,.3,1);}
.bar span{position:absolute;bottom:-1.55rem;left:0;right:0;text-align:center;font-size:.685rem;color:var(--muted);}
.bar.hi{background:linear-gradient(180deg,var(--ink),#2c4d5d);}
.tip-list{list-style:none;padding:0;margin:0;}
.tip-list li{
display:flex;gap:.72rem;padding:.72rem 0;border-bottom:1px dashed var(--line);font-size:.905rem;line-height:1.62;color:var(--ink-soft);
}
.tip-list li:last-child{border-bottom:none;}
.tip-list .tick{
width:21px;height:21px;border-radius:50%;background:var(--green);color:#fff;flex:none;
display:grid;place-items:center;font-size:.72rem;margin-top:.2rem;
}
.widget-dark{background:var(--ink);color:#fff;border-color:var(--ink);}
.widget-dark h3{color:#fff;}
.widget-dark p{color:rgba(255,255,255,.7);font-size:.925rem;}
.widget-dark .btn{width:100%;margin-top:1.15rem;}
/* ---------- Mortgage calculator ---------- */
.finance{background:var(--sand);}
.calc-card{
background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
display:grid;grid-template-columns:1.12fr .88fr;overflow:hidden;
}
.calc-inputs{padding:clamp(1.85rem,3.4vw,2.85rem);}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem 1.35rem;margin-top:1.65rem;}
.calc-grid .full{grid-column:1/-1;}
.range-wrap{margin-top:.62rem;}
input[type=range]{
width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:100px;
background:linear-gradient(90deg,var(--clay) var(--pct,50%),var(--line) var(--pct,50%));outline:none;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;width:21px;height:21px;border-radius:50%;background:#fff;
border:3px solid var(--clay);cursor:pointer;box-shadow:0 3px 9px rgba(16,34,43,.2);
}
input[type=range]::-moz-range-thumb{
width:21px;height:21px;border-radius:50%;background:#fff;border:3px solid var(--clay);cursor:pointer;
}
.range-meta{display:flex;justify-content:space-between;font-size:.755rem;color:var(--muted);margin-top:.42rem;}
.toggle-row{display:flex;gap:.55rem;flex-wrap:wrap;}
.toggle-row button{
flex:1;min-width:82px;padding:.62rem .55rem;border-radius:10px;border:1.5px solid var(--line);
background:#fdfbf8;font-size:.855rem;font-weight:600;color:var(--ink-soft);transition:.24s;
}
.toggle-row button.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.calc-results{
background:var(--ink);color:#fff;padding:clamp(1.85rem,3.4vw,2.85rem);
display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.calc-results::before{
content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-140px;bottom:-160px;
background:radial-gradient(circle,rgba(192,139,69,.3),transparent 70%);
}
.result-label{font-size:.735rem;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.58);font-weight:600;}
.result-amount{font-family:var(--ff-display);font-size:clamp(2.65rem,5vw,3.65rem);line-height:1;letter-spacing:-.03em;margin:.45rem 0 .15rem;}
.result-amount small{font-family:var(--ff-body);font-size:.985rem;font-weight:500;color:rgba(255,255,255,.6);letter-spacing:0;}
.result-sub{font-size:.885rem;color:rgba(255,255,255,.62);margin-bottom:1.85rem;}
.breakdown{position:relative;z-index:2;}
.bd-row{display:flex;justify-content:space-between;align-items:center;padding:.62rem 0;font-size:.925rem;}
.bd-row .lbl{display:flex;align-items:center;gap:.62rem;color:rgba(255,255,255,.78);}
.bd-row .swatch{width:11px;height:11px;border-radius:3.5px;flex:none;}
.bd-row .val{font-weight:600;}
.bd-bar{height:9px;border-radius:100px;overflow:hidden;display:flex;background:rgba(255,255,255,.14);margin:.85rem 0 1.45rem;}
.bd-bar div{height:100%;transition:width .55s cubic-bezier(.2,.7,.3,1);}
.result-facts{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:1.55rem;}
.fact{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:.85rem .95rem;}
.fact small{display:block;font-size:.705rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.22rem;}
.fact strong{font-family:var(--ff-display);font-size:1.195rem;font-weight:600;}
.calc-disclaimer{font-size:.775rem;color:rgba(255,255,255,.5);margin-top:1.45rem;line-height:1.6;}
.loan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.35rem;margin-top:3.35rem;}
.loan-card{
background:var(--paper);border-radius:var(--radius);padding:1.75rem 1.55rem;
border:1px solid var(--line);transition:.36s;position:relative;overflow:hidden;
}
.loan-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.loan-icon{
width:46px;height:46px;border-radius:12px;background:#fbf1ea;display:grid;place-items:center;
color:var(--clay);margin-bottom:1.15rem;
}
.loan-card h4{font-family:var(--ff-display);font-size:1.19rem;font-weight:600;letter-spacing:-.012em;}
.loan-card p{font-size:.905rem;color:var(--muted);line-height:1.72;}
.loan-rate{
display:inline-flex;align-items:baseline;gap:.35rem;margin-top:.95rem;padding:.42rem .82rem;
background:var(--cream);border-radius:100px;font-size:.795rem;font-weight:600;color:var(--ink-soft);
}
.loan-rate b{font-family:var(--ff-display);font-size:1.02rem;color:var(--clay);}
/* ---------- Scheduler / engagement ---------- */
.scheduler{background:var(--paper);}
.sched-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3.4rem;align-items:center;}
.sched-visual{position:relative;}
.sched-visual .main-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.sched-visual .main-img img{width:100%;height:520px;object-fit:cover;}
.float-card{
position:absolute;background:var(--paper);border-radius:var(--radius);padding:1.15rem 1.35rem;
box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.95rem;
}
.float-card.one{left:-1.85rem;top:2.65rem;}
.float-card.two{right:-1.65rem;bottom:2.35rem;}
.float-card img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;}
.float-card strong{display:block;font-size:.945rem;}
.float-card span{font-size:.795rem;color:var(--muted);}
.float-card .pill{background:#eaf4ef;color:var(--green);font-size:.715rem;font-weight:700;padding:.22rem .62rem;border-radius:100px;letter-spacing:.07em;text-transform:uppercase;}
.sched-form{
background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);
padding:clamp(1.75rem,3vw,2.55rem);margin-top:1.95rem;
}
.day-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.62rem;}
.day-btn{
padding:.78rem .35rem;border-radius:12px;border:1.5px solid var(--line);background:#fff;
text-align:center;transition:.24s;
}
.day-btn small{display:block;font-size:.685rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.day-btn strong{display:block;font-family:var(--ff-display);font-size:1.35rem;font-weight:600;line-height:1.2;}
.day-btn:hover{border-color:var(--clay);}
.day-btn.active{background:var(--ink);border-color:var(--ink);color:#fff;}
.day-btn.active small{color:rgba(255,255,255,.62);}
.time-row{display:flex;gap:.55rem;flex-wrap:wrap;}
.time-btn{
padding:.55rem 1.02rem;border-radius:100px;border:1.5px solid var(--line);background:#fff;
font-size:.855rem;font-weight:600;color:var(--ink-soft);transition:.22s;
}
.time-btn:hover{border-color:var(--clay);color:var(--clay);}
.time-btn.active{background:var(--clay);border-color:var(--clay);color:#fff;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.95rem;}
.form-msg{
display:none;margin-top:1.05rem;padding:.95rem 1.15rem;border-radius:11px;
background:#eaf4ef;color:var(--green);font-size:.905rem;font-weight:500;border:1px solid #cfe4d8;
}
.form-msg.show{display:block;animation:pop .45s cubic-bezier(.2,.8,.3,1);}
@keyframes pop{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* ---------- Testimonials ---------- */
.testimonials{background:var(--cream);}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7rem;}
.quote-card{
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
padding:2.15rem 1.95rem;display:flex;flex-direction:column;transition:.36s;
}
.quote-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);}
.quote-card.featured{background:var(--ink);border-color:var(--ink);color:#fff;}
.quote-card.featured h3,.quote-card.featured .name{color:#fff;}
.quote-card.featured .role{color:rgba(255,255,255,.6);}
.quote-card.featured p{color:rgba(255,255,255,.82);}
.stars{color:var(--gold);letter-spacing:.16em;font-size:.935rem;margin-bottom:1.15rem;}
.quote-card p{font-size:1.005rem;line-height:1.8;color:var(--ink-soft);}
.quote-person{display:flex;align-items:center;gap:.92rem;margin-top:1.75rem;padding-top:1.45rem;border-top:1px solid var(--line);}
.quote-card.featured .quote-person{border-color:rgba(255,255,255,.16);}
.quote-person img{width:50px;height:50px;border-radius:50%;object-fit:cover;}
.quote-person .name{font-weight:600;font-size:.955rem;line-height:1.3;}
.quote-person .role{font-size:.815rem;color:var(--muted);}
/* ---------- FAQ ---------- */
.faq{background:var(--paper);}
.faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:3.6rem;align-items:start;}
details{
border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.95rem;background:var(--cream);
transition:.3s;overflow:hidden;
}
details[open]{background:#fff;box-shadow:var(--shadow-sm);border-color:#d9cbb8;}
summary{
list-style:none;cursor:pointer;padding:1.42rem 1.55rem;font-weight:600;font-size:1.045rem;
display:flex;justify-content:space-between;align-items:center;gap:1.25rem;
}
summary::-webkit-details-marker{display:none;}
summary .plus{
width:29px;height:29px;border-radius:50%;background:var(--sand);color:var(--clay);flex:none;
display:grid;place-items:center;font-size:1.24rem;line-height:1;transition:transform .32s, background .32s;
}
details[open] summary .plus{transform:rotate(45deg);background:var(--clay);color:#fff;}
details .faq-body{padding:0 1.55rem 1.62rem;color:var(--muted);font-size:.965rem;line-height:1.82;}
.faq-aside{
background:var(--sand);border-radius:var(--radius-lg);padding:2.15rem;position:sticky;top:130px;
border:1px solid var(--line);
}
.faq-aside h3{font-size:1.42rem;}
.faq-aside p{color:var(--muted);font-size:.955rem;}
.agent-mini{display:flex;align-items:center;gap:.92rem;margin:1.55rem 0;padding:1.05rem;background:#fff;border-radius:var(--radius);}
.agent-mini img{width:56px;height:56px;border-radius:50%;object-fit:cover;}
.agent-mini strong{display:block;font-size:.985rem;}
.agent-mini span{font-size:.825rem;color:var(--muted);}
.faq-aside .btn{width:100%;}
/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink);}
.cta-band img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;
}
.cta-inner{
position:relative;z-index:2;padding:clamp(3.8rem,7vw,6.15rem) 0;color:#fff;
display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center;
}
.cta-inner h2{color:#fff;font-size:clamp(2.15rem,4.4vw,3.35rem);}
.cta-inner p{color:rgba(255,255,255,.8);font-size:1.075rem;max-width:56ch;}
.cta-actions{display:flex;flex-direction:column;gap:.85rem;}
.cta-actions .btn{width:100%;}
.cta-note{font-size:.815rem;color:rgba(255,255,255,.58);text-align:center;margin-top:.35rem;}
/* ---------- Footer ---------- */
footer.site{background:#0b1a22;color:#b9c6cc;padding:clamp(3.6rem,6vw,5.35rem) 0 0;font-size:.925rem;}
.foot-grid{display:grid;grid-template-columns:1.65fr 1fr 1fr 1.15fr;gap:2.75rem;}
.foot-brand .brand-name{color:#fff;font-size:1.55rem;}
.foot-brand .brand-tag{color:rgba(255,255,255,.5);}
.foot-brand p{margin-top:1.35rem;color:rgba(255,255,255,.62);line-height:1.85;max-width:38ch;}
.foot-contact{margin-top:1.55rem;display:flex;flex-direction:column;gap:.72rem;}
.foot-contact a,.foot-contact span{display:flex;gap:.68rem;align-items:flex-start;color:rgba(255,255,255,.78);}
.foot-contact a:hover{color:#fff;}
.foot-col h4{
color:#fff;font-size:.745rem;letter-spacing:.19em;text-transform:uppercase;font-weight:600;margin-bottom:1.35rem;
}
.foot-col ul{list-style:none;padding:0;margin:0;}
.foot-col li{margin-bottom:.72rem;}
.foot-col a{color:rgba(255,255,255,.62);transition:.22s;}
.foot-col a:hover{color:#fff;padding-left:5px;}
.socials{display:flex;gap:.68rem;margin-top:.35rem;}
.socials a{
width:41px;height:41px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
display:grid;place-items:center;transition:.26s;
}
.socials a:hover{background:var(--clay);border-color:var(--clay);transform:translateY(-3px);}
.newsletter{display:flex;gap:.55rem;margin-top:1.05rem;}
.newsletter input{
flex:1;min-width:0;padding:.78rem .95rem;border-radius:100px;border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.07);color:#fff;font-family:inherit;font-size:.875rem;
}
.newsletter input::placeholder{color:rgba(255,255,255,.45);}
.newsletter input:focus{outline:none;border-color:var(--clay);background:rgba(255,255,255,.12);}
.foot-bottom{
margin-top:3.75rem;padding:1.65rem 0;border-top:1px solid rgba(255,255,255,.11);
display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
font-size:.835rem;color:rgba(255,255,255,.5);
}
.foot-legal{display:flex;gap:1.55rem;flex-wrap:wrap;}
.foot-legal a:hover{color:#fff;}
.equal-housing{
display:flex;align-items:center;gap:.68rem;font-size:.785rem;line-height:1.5;
color:rgba(255,255,255,.5);max-width:330px;
}
/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none;}
html{scroll-behavior:auto;}
*{animation:none !important;transition-duration:.01ms !important;}
}
/* ---------- Responsive ---------- */
@media (max-width:1120px){
nav.main{display:none;}
.phone-cta{display:none;}
.burger{display:flex;}
.search-grid{grid-template-columns:1fr 1fr;}
.search-grid .btn{width:100%;}
.steps{grid-template-columns:repeat(2,1fr);}
.loan-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:980px){
.listing-grid{grid-template-columns:repeat(2,1fr);}
.split,.faq-grid,.sched-grid,.cta-inner{grid-template-columns:1fr;}
.calc-card{grid-template-columns:1fr;}
.quote-grid{grid-template-columns:1fr;}
.faq-aside{position:static;}
.sched-visual .main-img img{height:390px;}
.float-card.one{left:1rem;}
.float-card.two{right:1rem;}
.foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
body{font-size:16px;}
.topbar-left span:nth-child(n+2){display:none;}
.brand-mark{width:45px;height:45px;}
.brand-name{font-size:1.22rem;}
.search-grid{grid-template-columns:1fr;}
.listing-grid,.steps,.loan-grid,.foot-grid,.calc-grid,.form-row,.result-facts,.day-row{grid-template-columns:1fr;}
.day-row{grid-template-columns:repeat(3,1fr);}
.hero-badges{gap:1.35rem;}
.hero-badge strong{font-size:1.55rem;}
.nav-actions .btn{display:none;}
.float-card{position:static;margin-top:1rem;box-shadow:var(--shadow-sm);}
.cta-actions{margin-top:1.45rem;}
.foot-bottom{flex-direction:column;}
}
</style>
</head>
<body>
<!-- ================= TOP BAR ================= -->
<div class="topbar">
<div class="wrap">
<div class="topbar-left">
<span>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#e9c99b" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
(207) 555-0184
</span>
<span>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#e9c99b" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 6-10 7L2 6"/></svg>
hello@northmarkrealty.com
</span>
<span>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#e9c99b" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
118 Harbor Row, Suite 400 · Portland, ME
</span>
</div>
<div class="topbar-right">
<a href="#mortgage">Mortgage Calculator</a>
<a href="#sell">Free Home Valuation</a>
<a href="#contact">Client Login</a>
</div>
</div>
</div>
<!-- ================= HEADER ================= -->
<header class="site" id="siteHeader">
<div class="wrap">
<div class="nav-row">
<a class="brand" href="#top" aria-label="Northmark Realty home">
<div class="brand-mark">
<img src="https://placehold.co/120x120/10222b/e9c99b?text=NR&font=playfair%20display&font-size=52" alt="Northmark Realty logo placeholder" width="52" height="52">
</div>
<div>
<div class="brand-name">Northmark Realty</div>
<div class="brand-tag">Find Your True North</div>
</div>
</a>
<nav class="main" aria-label="Primary navigation">
<a href="#search">Property Search</a>
<a href="#listings">Featured Listings</a>
<a href="#buyers">Buyer's Guide</a>
<a href="#sell">Seller's Guide</a>
<a href="#mortgage">Mortgage</a>
<a href="#open-house">Open Houses</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<div class="nav-actions">
<div class="phone-cta">
<small>Talk to an advisor</small>
<strong>(207) 555-0184</strong>
</div>
<a href="#mortgage" class="btn btn-primary btn-sm">Get Pre-Approved</a>
<button class="burger" id="burger" aria-label="Toggle navigation menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<a href="#search">Property Search</a>
<a href="#listings">Featured Listings</a>
<a href="#buyers">Buyer's Guide</a>
<a href="#sell">Seller's Guide</a>
<a href="#mortgage">Mortgage Options</a>
<a href="#open-house">Schedule a Tour</a>
<a href="#about">About Us</a>
<a href="#faq">FAQ</a>
<a href="#contact">Contact</a>
<a href="#mortgage" class="btn btn-primary" style="margin-top:.9rem;">Get Pre-Approved</a>
</div>
</div>
</header>
<!-- ================= HERO ================= -->
<section class="hero" id="top">
<div class="hero-media">
<img src="https://picsum.photos/seed/northmark-hero-home/1920/1120" alt="Contemporary coastal home at golden hour" />
</div>
<div class="wrap hero-inner">
<div class="hero-copy reveal">
<div class="eyebrow light">Coastal & Metro Residential Brokerage · Est. 2009</div>
<h1>Every address has a story.<br><em>Let's find yours.</em></h1>
<p class="lede">
Northmark Realty pairs neighborhood-level market intelligence with genuinely human guidance —
whether you're buying your first condo, selling a multi-generational home, or building a
rental portfolio across New England. No pressure, no jargon, no surprises at the closing table.
</p>
<div class="hero-cta">
<a href="#search" class="btn btn-primary">Start Your Search
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a href="#open-house" class="btn btn-ghost-light">Schedule a Private Tour</a>
</div>
<div class="hero-badges">
<div class="hero-badge"><strong>$1.4B+</strong><span>Closed Volume</span></div>
<div class="hero-badge"><strong>2,180</strong><span>Families Served</span></div>
<div class="hero-badge"><strong>18 days</strong><span>Avg. Time on Market</span></div>
<div class="hero-badge"><strong>4.9 / 5</strong><span>Client Rating</span></div>
</div>
</div>
</div>
</section>
<!-- ================= SEARCH PANEL ================= -->
<section class="wrap" id="search" style="margin-top:-3.4rem;position:relative;z-index:5;">
<div class="search-panel reveal">
<div class="search-tabs" role="tablist" aria-label="Listing intent">
<button class="active" role="tab" aria-selected="true">Buy</button>
<button role="tab" aria-selected="false">Rent</button>
<button role="tab" aria-selected="false">Recently Sold</button>
<button role="tab" aria-selected="false">Land & Lots</button>
<button role="tab" aria-selected="false">Investment</button>
</div>
<form class="search-grid" id="searchForm" novalidate>
<div class="field">
<label for="loc">City, Neighborhood or ZIP</label>
<input type="text" id="loc" placeholder="e.g. Cape Elizabeth, Munjoy Hill, 04101" />
</div>
<div class="field">
<label for="ptype">Property Type</label>
<select id="ptype">
<option>Any Property Type</option>
<option>Single-Family Home</option>
<option>Condominium</option>
<option>Townhouse</option>
<option>Multi-Family (2–4 Units)</option>
<option>New Construction</option>
<option>Waterfront / Water View</option>
</select>
</div>
<div class="field">
<label for="price">Price Range</label>
<select id="price">
<option>Any Price</option>
<option>Up to $400,000</option>
<option>$400,000 – $650,000</option>
<option>$650,000 – $900,000</option>
<option>$900,000 – $1.5M</option>
<option>$1.5M+</option>
</select>
</div>
<div class="field">
<label for="beds">Bedrooms</label>
<select id="beds">
<option>Any</option>
<option>1+</option>
<option>2+</option>
<option>3+</option>
<option>4+</option>
<option>5+</option>
</select>
</div>
<button class="btn btn-dark" type="submit" style="height:51px;">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/></svg>
Start Search
</button>
</form>
<div class="search-note">
<strong style="color:var(--ink);">Popular right now:</strong>
<button class="chip" type="button">Waterfront under $900K</button>
<button class="chip" type="button">Portland lofts</button>
<button class="chip" type="button">New construction</button>
<button class="chip" type="button">In-law suites</button>
<button class="chip" type="button">Walkable to downtown</button>
</div>
</div>
</section>
<!-- ================= TRUST STRIP ================= -->
<div class="trust-strip">
<div class="wrap trust-row">
<div class="trust-item"><span class="dot">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#b0522e" stroke-width="2"><path d="M12 2 3 7v6c0 5 3.8 8.4 9 9 5.2-.6 9-4 9-9V7z"/><path d="m9 12 2 2 4-4"/></svg>
</span>Accredited Buyer's Representatives (ABR®)</div>
<div class="trust-item"><span class="dot">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#b0522e" stroke-width="2"><path d="M3 21h18M5 21V8l7-5 7 5v13"/><path d="M9 21v-6h6v6"/></svg>
</span>Luxury Portfolio International Affiliate</div>
<div class="trust-item"><span class="dot">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#b0522e" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
</span>Same-Day Showing Availability</div>
<div class="trust-item"><span class="dot">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#b0522e" stroke-width="2"><path d="m12 2 2.9 6.3 6.6.7-4.9 4.5 1.4 6.6L12 16.8 6 20.1l1.4-6.6L2.5 9l6.6-.7z"/></svg>
</span>Ranked #1 Independent Brokerage in Cumberland County</div>
</div>
</div>
<!-- ================= FEATURED LISTINGS ================= -->
<section class="section listings" id="listings">
<div class="wrap">
<div class="listings-top">
<div class="section-head reveal" style="margin-bottom:0;">
<div class="eyebrow">Featured Listings</div>
<h2>Homes that are worth<br>getting excited about.</h2>
<p class="lede">
Every property on this page has been walked, photographed, and vetted by a Northmark advisor.
We publish honest condition notes, accurate days-on-market data, and full disclosure packages
up front — so the home you fall in love with online is the same one you'll tour in person.
</p>
</div>
<div class="filter-row reveal" id="filterRow">
<button class="active" data-filter="all">All Listings</button>
<button data-filter="new">New This Week</button>
<button data-filter="luxury">Luxury</button>
<button data-filter="value">Best Value</button>
</div>
</div>
<div class="listing-grid" id="listingGrid">
<article class="listing-card reveal" data-cat="luxury new">
<div class="listing-img">
<img src="https://picsum.photos/seed/northmark-listing-1/800/600" alt="Shingle-style coastal home with wraparound porch">
<span class="tag hot">New Listing</span>
<button class="save-btn" aria-label="Save listing">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#10222b" stroke-width="2"><path d="M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 0 0-7.1 7.1l8.8 8.8 8.8-8.8a5 5 0 0 0 0-7.1z"/></svg>
</button>
</div>
<div class="listing-body">
<div class="listing-price">$1,285,000 <span class="est">· Est. $6,410/mo</span></div>
<div class="listing-addr">42 Tidewater Lane</div>
<div class="listing-city">Cape Elizabeth, ME 04107 · Shore Acres</div>
<div class="listing-specs">
<span>4 Beds</span><i></i>
<span>3.5 Baths</span><i></i>
<span>3,240 Sq Ft</span><i></i>
<span>0.62 Acre</span>
</div>
</div>
</article>
<article class="listing-card reveal" data-cat="value">
<div class="listing-img">
<img src="https://picsum.photos/seed/northmark-listing-2/800/600" alt="Renovated brick townhouse on a tree-lined street">
<span class="tag">Open Sunday</span>
<button class="save-btn" aria-label="Save listing">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#10222b" stroke-width="2"><path d="M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 0 0-7.1 7.1l8.8 8.8 8.8-8.8a5 5 0 0 0 0-7.1z"/></svg>
</button>
</div>
<div class="listing-body">
<div class="listing-price">$539,000 <span class="est">· Est. $3,120/mo</span></div>
<div class="listing-addr">17 Wilmot Street, Unit 3</div>
<div class="listing-city">Portland, ME 04101 · West End</div>
<div class="listing-specs">
<span>2 Beds</span><i></i>
<span>2 Baths</span><i></i>
<span>1,410 Sq Ft</span><i></i>
<span>HOA $285</span>
</div>
</div>
</article>
<article class="listing-card reveal" data-cat="new">
<div class="listing-img">
<img src="https://picsum.photos/seed/northmark-listing-3/800/600" alt="Modern farmhouse exterior with black window frames">
<span class="tag hot">New Listing</span>
<button class="save-btn" aria-label="Save listing">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#10222b" stroke-width="2"><path d="M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 0 0-7.1 7.1l8.8 8.8 8.8-8.8a5 5 0 0 0 0-7.1z"/></svg>
</button>
</div>
<div class="listing-body">
<div class="listing-price">$748,500 <span class="est">· Est. $4,090/mo</span></div>
<div class="listing-addr">908 Sawyer Ridge Road</div>
<div class="listing-city">Falmouth, ME 04105 · West Falmouth</div>
<div class="listing-specs">
<span>3 Beds</span><i></i>
<span>2.5 Baths</span><i></i>
<span>2,380 Sq Ft</span><i></i>
<span>1.1 Acres</span>
</div>
</div>
</article>
<article class="listing-card reveal" data-cat="luxury">
<div class="listing-img">
<img src="https://picsum.photos/seed/northmark-listing-4/800/600" alt="Waterfront property with private dock">
<span class="tag">Waterfront</span>
<button class="save-btn" aria-label="Save listing">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#10222b" stroke-width="2"><path d="M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 0 0-7.1 7.1l8.8 8.8 8.8-8.8a5 5 0 0 0 0-7.1z"/></svg>
</button>
</div>
<div class="listing-body">
<div class="listing-price">$2,150,000 <span class="est">· Est. $11,120/mo</span></div>
<div class="listing-addr">5 Driftwood Point</div>
<div class="listing-city">Cumberland Foreside, ME 04110</div>
<div class="listing-specs">
<span>5 Beds</span><i></i>
<span>4 Baths</span><i></i>
<span>4,720 Sq Ft</span><i></i>
<span>Private Dock</span>
</div>
</div>
</article>
<article class="listing-card reveal" data-cat="value">
<div class="listing-img">
<img src="https://picsum.photos/seed/northmark-listing-5/800/600" alt="Craftsman bungalow with landscaped front yard">
<span class="tag sold">Sold in 9 Days</span>
<button class="save-btn" aria-label="Save listing">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#10222b" stroke-width="2"><path d="M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 0 0-7.1 7.1l8.8 8.8 8.8-8.8a5 5 0 0 0 0-7.1z"/></svg>
</button>
</div>
<div class="listing-body">
<div class="listing-price">$425,000 <span class="est">· Sold for 103% of list</span></div>
<div class="listing-addr">311 Pine Avenue</div>
<div class="listing-city">South Portland, ME 04106 · Knightville</div>
<div class="listing-specs">
<span>3 Beds</span><i></i>
<span>1.5 Baths</span><i></i>
<span>1,690 Sq Ft</span><i></i>
<span>Detached Garage</span>
</div>
</div>
</article>
<article class="listing-card reveal" data-cat="new value">
<div class="listing-img">
<img src="https://picsum.photos/seed/northmark-listing-6/800/600" alt="Bright condo building with large windows">
<span class="tag">Price Improved</span>
<button class="save-btn" aria-label="Save listing">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#10222b" stroke-width="2"><path d="M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 0 0-7.1 7.1l8.8 8.8 8.8-8.8a5 5 0 0 0 0-7.1z"/></svg>
</button>
</div>
<div class="listing-body">
<div class="listing-price">$389,900 <span class="est">· Est. $2,340/mo</span></div>
<div class="listing-addr">64 High Street, Unit 502</div>
<div class="listing-city">Portland, ME 04101 · Arts District</div>
<div class="listing-specs">
<span>1 Bed</span><i></i>
<span>1 Bath</span><i></i>
<span>910 Sq Ft</span><i></i>
<span>Rooftop Deck</span>
</div>
</div>
</article>
</div>
<div class="listings-foot">
<p>
Inventory refreshes every 15 minutes from the Maine Listings MLS. Create a free account to save
searches, receive instant alerts when a matching property hits the market, and see sold comparables
for any address in our coverage area.
</p>
<div style="display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;">
<a href="#search" class="btn btn-primary">View All 428 Listings</a>
<a href="#open-house" class="btn btn-outline">Create Free Account</a>
</div>
</div>
</div>
</section>
<!-- ================= BUYER PROCESS ================= -->
<section class="section process" id="buyers">
<div class="wrap">
<div class="section-head reveal">
<div class="eyebrow light">The Buyer's Roadmap</div>
<h2>A clear path from<br>"just browsing" to keys in hand.</h2>
<p class="lede">
Buying a home involves roughly 30 professionals, 15 signatures, and at least one moment of
confusion — unless you have a plan. Here's how we structure the process so you always know
what's happening, what's next, and what it will cost.
</p>
</div>
<div class="steps">
<div class="step reveal">
<div class="step-num">01</div>
<h3>Discovery & Pre-Approval</h3>
<p>
We start with a 30-minute strategy call to define your budget, timeline, and non-negotiables.
Then we introduce you to two or three vetted lenders so you can compare loan estimates side by
side and secure a full underwritten pre-approval — the strongest offer you can write in a
competitive market.
</p>
</div>
<div class="step reveal">
<div class="step-num">02</div>
<h3>Curated Search & Tours</h3>
<p>
Rather than blasting you with every MLS match, your advisor builds a shortlist of eight to twelve
homes that genuinely fit, complete with commute times, tax history, flood zones, and school data.
We tour in focused batches so you can compare properties while your impressions are fresh.
</p>
</div>
<div class="step reveal">
<div class="step-num">03</div>
<h3>Offer, Earnest Money & Negotiation</h3>
<p>
When you find the one, we run a comparative market analysis within the hour and structure an offer
around your leverage: contingencies, closing date flexibility, escalation language, and a reasonable
earnest money deposit that signals commitment without overexposing you.
</p>
</div>
<div class="step reveal">
<div class="step-num">04</div>
<h3>Inspection to Closing</h3>
<p>
We coordinate the home inspection, negotiate repairs or credits, review the title commitment and
title insurance binder, and walk you through the closing disclosure line by line three days before
you sign. Then we hand you the keys — and stay available long after the moving truck leaves.
</p>
</div>
</div>
<div style="margin-top:3.25rem;display:flex;gap:.95rem;flex-wrap:wrap;" class="reveal">
<a href="#open-house" class="btn btn-primary">Book a Buyer Consultation</a>
<a href="#faq" class="btn btn-ghost-light">Read the Full Buyer FAQ</a>
</div>
</div>
</section>
<!-- ================= SELLER GUIDE + SIDEBAR ================= -->
<section class="section seller" id="sell">
<div class="wrap">
<div class="split">
<div>
<div class="section-head reveal" style="margin-bottom:0;">
<div class="eyebrow">Seller's Guide</div>
<h2>Positioned, priced,<br>and sold with intention.</h2>
<p class="lede">
The first 21 days on market generate roughly 70% of your buyer traffic. That's why we treat
preparation and pricing as strategy work, not guesswork. Below is the exact sequence we follow
for every listing — refined across more than 2,000 transactions since 2009.
</p>
</div>
<div class="guide-steps">
<div class="guide-item reveal">
<div class="guide-num"></div>
<div>
<h3>Comparative Market Analysis & Pricing Strategy</h3>
<p>
We pull closed, pending, and active comparables within a half-mile radius, adjusting for
square footage, lot size, condition, and recent renovations. Your written comparative market
analysis includes three pricing scenarios — a conservative list price, a market-value price,
and an aspirational price with the trade-offs clearly explained. In our experience, accurate
day-one pricing nets sellers 3–5% more than overpricing and reducing later.
</p>
</div>
</div>
<div class="guide-item reveal">
<div class="guide-num"></div>
<div>
<h3>Pre-Market Preparation & Staging</h3>
<p>
Our preparation audit covers deferred maintenance, curb appeal, and the small repairs that
disproportionately affect appraisal and inspection outcomes. Northmark covers professional
staging for occupied homes up to 2,400 square feet, plus architectural photography, a
twilight exterior set, a 3D Matterport tour, and a floor plan — all at our expense, with no
upfront cost or markup.
</p>
</div>
</div>
<div class="guide-item reveal">
<div class="guide-num"></div>
<div>
<h3>Launch, Showings & Offer Management</h3>
<p>
Listing day includes broker outreach to the 180 active agents in our network, a coordinated
email campaign, syndication to 900+ real estate portals, and a weekend open house schedule.
Every offer is presented with net-proceeds modeling so you're comparing apples to apples —
earnest money strength, financing type, appraisal gap coverage, and closing timeline all
matter as much as the headline number.
</p>
</div>
</div>
<div class="guide-item reveal">
<div class="guide-num"></div>
<div>
<h3>Under Contract: Inspection, Appraisal & Title</h3>
<p>
Once we're under contract, we manage the home inspection response, appraisal access, and the
title search. We'll explain your title insurance obligations, review the seller's closing
disclosure for accuracy, and coordinate payoff letters, lien releases, and prorated property
taxes with the settlement agent. Roughly 96% of our listings close on the original contract
terms.
</p>
</div>
</div>
<div class="guide-item reveal">
<div class="guide-num"></div>
<div>
<h3>Closing & Beyond</h3>
<p>
Final walk-through, key transfer, and utility switchover are scheduled well ahead of settlement.
After closing, you retain access to our vendor network, annual home value reviews, and a
lifetime of straightforward advice — whether you need a roofer next spring or want to
understand how a proposed zoning change might affect your property's value.
</p>
</div>
</div>
</div>
<figure class="guide-figure reveal">
<img src="https://picsum.photos/seed/northmark-staging/1200/700" alt="Professionally staged living room prepared for listing photography">
<figcaption>
Every Northmark listing includes complimentary professional staging and photography — homes
with our full marketing package sell for an average of 4.2% above comparable unstaged listings.
</figcaption>
</figure>
</div>
<!-- SIDEBAR -->
<aside>
<div class="widget reveal">
<h3>Market Snapshot</h3>
<p class="sub">Cumberland County · Updated October 2025</p>
<div class="metric">
<span class="k">Median sale price</span>
<span class="v up">$512,400</span>
</div>
<div class="metric">
<span class="k">Year-over-year change</span>
<span class="v up">+4.8%</span>
</div>
<div class="metric">
<span class="k">Avg. days on market</span>
<span class="v down">24 days</span>
</div>
<div class="metric">
<span class="k">Sale-to-list ratio</span>
<span class="v up">99.1%</span>
</div>
<div class="metric">
<span class="k">Months of supply</span>
<span class="v">2.1 mo</span>
</div>
<div class="bars" aria-hidden="true">
<div class="bar" style="height:46%"><span>May</span></div>
<div class="bar" style="height:58%"><span>Jun</span></div>
<div class="bar" style="height:72%"><span>Jul</span></div>
<div class="bar hi" style="height:100%"><span>Aug</span></div>
<div class="bar" style="height:81%"><span>Sep</span></div>
<div class="bar" style="height:64%"><span>Oct</span></div>
</div>
<p style="font-size:.815rem;color:var(--muted);margin-top:1.75rem;line-height:1.68;">
Monthly closed sales volume, 2025. Peak activity remains in late summer, though buyer demand
continues through the fall window with noticeably less competition per listing.
</p>
</div>
<div class="widget reveal">
<h3>Seller Prep Checklist</h3>
<p class="sub">High-impact, low-cost improvements we recommend most</p>
<ul class="tip-list">
<li><span class="tick">✓</span><span>Deep clean, declutter, and depersonalize before the first photographer arrives.</span></li>
<li><span class="tick">✓</span><span>Refresh interior paint in warm neutrals — consistently the highest ROI update.</span></li>
<li><span class="tick">✓</span><span>Service the HVAC and gather maintenance records for the disclosure package.</span></li>
<li><span class="tick">✓</span><span>Improve curb appeal with trimmed plantings, new mulch, and a clean entry door.</span></li>
<li><span class="tick">✓</span><span>Pre-order a pre-listing inspection to control the repair negotiation on your terms.</span></li>
</ul>
</div>
<div class="widget widget-dark reveal">
<h3>What's Your Home Worth?</h3>
<p>
Request a complimentary, no-obligation valuation. We combine live MLS data with on-site
condition assessment — not an automated estimate that can't see your renovated kitchen.
</p>
<a href="#contact" class="btn btn-primary">Get My Free Valuation</a>
</div>
<div class="widget reveal">
<h3>Just Listed Near You</h3>
<p class="sub">New to market in the last 7 days</p>
<ul class="tip-list">
<li><span class="tick" style="background:var(--clay);">1</span><span><strong>18 Bramble Way</strong> · $489,000 · 3 bd / 2 ba · Scarborough</span></li>
<li><span class="tick" style="background:var(--clay);">2</span><span><strong>220 Ocean House Rd</strong> · $899,000 · 4 bd / 3 ba · Cape Elizabeth</span></li>
<li><span class="tick" style="background:var(--clay);">3</span><span><strong>7 Ledger Lane #2</strong> · $364,500 · 2 bd / 1 ba · Portland</span></li>
<li><span class="tick" style="background:var(--clay);">4</span><span><strong>640 Woodville Rd</strong> · $612,000 · 3 bd / 2.5 ba · Falmouth</span></li>
</ul>
<a href="#listings" class="link-arrow" style="margin-top:1.1rem;">See all new listings
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
</div>
</aside>
</div>
</div>
</section>
<!-- ================= MORTGAGE / FINANCE ================= -->
<section class="section finance" id="mortgage">
<div class="wrap">
<div class="section-head center reveal">
<div class="eyebrow">Mortgage Options & Affordability</div>
<h2>Know your number before you tour.</h2>
<p class="lede">
Nothing derails a home search faster than discovering your budget was built on a shaky estimate.
Use the calculator below for a realistic monthly payment — including principal, interest, property
taxes, homeowners insurance, PMI, and HOA dues — then connect with a lender for a full pre-approval.
</p>
</div>
<div class="calc-card reveal">
<div class="calc-inputs">
<h3 style="font-size:1.55rem;margin-bottom:.35rem;">Payment Calculator</h3>
<p style="color:var(--muted);font-size:.955rem;">
Adjust any field to see your estimated payment update instantly. Rates shown are illustrative
market averages for well-qualified borrowers.
</p>
<div class="calc-grid">
<div class="field">
<label for="homePrice">Home Price</label>
<input type="number" id="homePrice" value="525000" min="50000" step="5000" />
<div class="range-wrap">
<input type="range" id="homePriceRange" min="150000" max="2500000" step="5000" value="525000" />
<div class="range-meta"><span>$150K</span><span>$2.5M</span></div>
</div>
</div>
<div class="field">
<label for="downPayment">Down Payment</label>
<input type="number" id="downPayment" value="105000" min="0" step="2500" />
<div class="range-wrap">
<input type="range" id="downPct" min="0" max="60" step="1" value="20" />
<div class="range-meta"><span>0%</span><span id="downPctLabel">20% down</span></div>
</div>
</div>
<div class="field">
<label for="interestRate">Interest Rate (%)</label>
<input type="number" id="interestRate" value="6.25" min="0.5" max="12" step="0.05" />
</div>
<div class="field">
<label for="loanTerm">Loan Term</label>
<select id="loanTerm">
<option value="30" selected>30-Year Fixed</option>
<option value="20">20-Year Fixed</option>
<option value="15">15-Year Fixed</option>
<option value="10">10-Year Fixed</option>
</select>
</div>
<div class="field">
<label for="taxRate">Property Tax Rate (%/yr)</label>
<input type="number" id="taxRate" value="1.15" min="0" max="5" step="0.05" />
</div>
<div class="field">
<label for="insurance">Homeowners Insurance ($/yr)</label>
<input type="number" id="insurance" value="1650" min="0" step="50" />
</div>
<div class="field">
<label for="hoa">HOA Dues ($/mo)</label>
<input type="number" id="hoa" value="0" min="0" step="25" />
</div>
<div class="field">
<label>Include PMI?</label>
<div class="toggle-row" id="pmiToggle">
<button type="button" class="active" data-pmi="auto">Auto</button>
<button type="button" data-pmi="on">Include</button>
<button type="button" data-pmi="off">Exclude</button>
</div>
</div>
</div>
</div>
<div class="calc-results">
<div class="result-label">Estimated Monthly Payment</div>
<div class="result-amount" id="monthlyTotal">$3,524<small>/mo</small></div>
<div class="result-sub" id="loanSummary">$420,000 loan amount · 30-year fixed at 6.25%</div>
<div class="breakdown">
<div class="bd-bar" aria-hidden="true">
<div id="barPI" style="width:70%;background:#e9c99b;"></div>
<div id="barTax" style="width:18%;background:#c08b45;"></div>
<div id="barIns" style="width:7%;background:#b0522e;"></div>
<div id="barOther" style="width:5%;background:#7ba291;"></div>
</div>
<div class="bd-row">
<span class="lbl"><span class="swatch" style="background:#e9c99b;"></span>Principal & Interest</span>
<span class="val" id="valPI">$2,587</span>
</div>
<div class="bd-row">
<span class="lbl"><span class="swatch" style="background:#c08b45;"></span>Property Taxes</span>
<span class="val" id="valTax">$503</span>
</div>
<div class="bd-row">
<span class="lbl"><span class="swatch" style="background:#b0522e;"></span>Homeowners Insurance</span>
<span class="val" id="valIns">$138</span>
</div>
<div class="bd-row">
<span class="lbl"><span class="swatch" style="background:#7ba291;"></span>PMI & HOA</span>
<span class="val" id="valOther">$296</span>
</div>
</div>
<div class="result-facts">
<div class="fact">
<small>Loan Amount</small>
<strong id="factLoan">$420,000</strong>
</div>
<div class="fact">
<small>Total Interest</small>
<strong id="factInterest">$511,320</strong>
</div>
<div class="fact">
<small>Total of Payments</small>
<strong id="factTotal">$931,320</strong>
</div>
<div class="fact">
<small>Recommended Income</small>
<strong id="factIncome">$126,000</strong>
</div>
</div>
<p class="calc-disclaimer">
Estimates are for illustrative purposes only and do not constitute a loan offer or commitment.
Actual rates, terms, taxes, and insurance premiums vary by borrower profile, property, and lender.
</p>
<a href="#contact" class="btn btn-primary" style="margin-top:.75rem;width:100%;">Get Pre-Approved Today</a>
</div>
</div>
<div class="loan-grid">
<div class="loan-card reveal">
<div class="loan-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V9l7-5 7 5v12"/><path d="M9 21v-6h6v6"/></svg>
</div>
<h4>Conventional 30-Year Fixed</h4>
<p>
The industry workhorse: predictable payments, no upfront mortgage insurance with 20% down, and
flexible terms for primary residences, second homes, and investment properties alike.
</p>
<div class="loan-rate">Rates from <b>6.125%</b> APR</div>
</div>
<div class="loan-card reveal">
<div class="loan-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 3 7v6c0 5 3.8 8.4 9 9 5.2-.6 9-4 9-9V7z"/><path d="m9 12 2 2 4-4"/></svg>
</div>
<h4>FHA & First-Time Buyer</h4>
<p>
Down payments as low as 3.5% with more forgiving credit thresholds, ideal for first-time buyers
building equity while establishing a stronger borrowing profile.
</p>
<div class="loan-rate">Rates from <b>5.875%</b> APR</div>
</div>
<div class="loan-card reveal">
<div class="loan-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M8.5 9.5h5a2 2 0 0 1 0 4h-3a2 2 0 0 0 0 4h5"/></svg>
</div>
<h4>Jumbo & Portfolio Loans</h4>
<p>
Financing above conforming limits for luxury and waterfront acquisitions, with interest-only and
asset-depletion structures available for high-net-worth borrowers.
</p>
<div class="loan-rate">Rates from <b>6.490%</b> APR</div>
</div>
<div class="loan-card reveal">
<div class="loan-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 12V8H6a2 2 0 0 1 0-4h12v4"/><path d="M4 6v12a2 2 0 0 0 2 2h14v-4"/><circle cx="18" cy="14" r="1.6"/></svg>
</div>
<h4>VA & Rural Development</h4>
<p>
Zero-down options with no monthly mortgage insurance for eligible veterans and service members,
plus USDA rural development financing for qualifying communities.
</p>
<div class="loan-rate">Rates from <b>5.625%</b> APR</div>
</div>
</div>
</div>
</section>
<!-- ================= OPEN HOUSE SCHEDULER ================= -->
<section class="section scheduler" id="open-house">
<div class="wrap">
<div class="sched-grid">
<div class="sched-visual reveal">
<div class="main-img">
<img src="https://picsum.photos/seed/northmark-tour/1000/1150" alt="Real estate advisor touring a bright home interior with clients">
</div>
<div class="float-card one">
<img src="https://i.pravatar.cc/120?u=northmark-advisor-dana" alt="Advisor Dana Whitfield">
<div>
<strong>Dana Whitfield</strong>
<span>Senior Advisor · ABR®, SRES®</span>
</div>
</div>
<div class="float-card two">
<div>
<span class="pill">Available today</span>
<strong style="margin-top:.35rem;">Average response: 42 min</strong>
<span>Evening & weekend tours welcome</span>
</div>
</div>
</div>
<div>
<div class="section-head reveal" style="margin-bottom:1.35rem;">
<div class="eyebrow">Open House Scheduler</div>
<h2>Book a private tour<br>in under sixty seconds.</h2>
<p class="lede">
Tell us when you'd like to see a home — or several — and we'll coordinate access, pull the
disclosure package and tax history in advance, and meet you at the property. Choose a
self-guided walk-through, a private advisor tour, or join a scheduled open house this weekend.
</p>
</div>
<form class="sched-form reveal" id="tourForm" novalidate>
<h4 style="margin-bottom:.85rem;">1 · Select a day</h4>
<div class="day-row" id="dayRow">
<button type="button" class="day-btn active"><small>Thu</small><strong>16</strong></button>
<button type="button" class="day-btn"><small>Fri</small><strong>17</strong></button>
<button type="button" class="day-btn"><small>Sat</small><strong>18</strong></button>
<button type="button" class="day-btn"><small>Sun</small><strong>19</strong></button>
<button type="button" class="day-btn"><small>Mon</small><strong>20</strong></button>
</div>
<h4 style="margin:1.55rem 0 .85rem;">2 · Select a time</h4>
<div class="time-row" id="timeRow">
<button type="button" class="time-btn">9:00 AM</button>
<button type="button" class="time-btn">10:30 AM</button>
<button type="button" class="time-btn active">12:00 PM</button>
<button type="button" class="time-btn">1:30 PM</button>
<button type="button" class="time-btn">3:00 PM</button>
<button type="button" class="time-btn">4:30 PM</button>
<button type="button" class="time-btn">6:00 PM</button>
</div>
<h4 style="margin:1.55rem 0 .85rem;">3 · Your details</h4>
<div class="form-row">
<div class="field">
<label for="tourName">Full Name</label>
<input type="text" id="tourName" placeholder="Jordan Ellery" required />
</div>
<div class="field">
<label for="tourEmail">Email Address</label>
<input type="email" id="tourEmail" placeholder="jordan@email.com" required />
</div>
</div>
<div class="form-row" style="margin-top:.95rem;">
<div class="field">
<label for="tourPhone">Phone (optional)</label>
<input type="tel" id="tourPhone" placeholder="(207) 555-0142" />
</div>
<div class="field">
<label for="tourType">Tour Type</label>
<select id="tourType">
<option>Private advisor tour</option>
<option>Self-guided tour</option>
<option>Scheduled open house</option>
<option>Virtual video walkthrough</option>
</select>
</div>
</div>
<div class="field" style="margin-top:.95rem;">
<label for="tourProperty">Property or Neighborhood of Interest</label>
<input type="text" id="tourProperty" placeholder="e.g. 42 Tidewater Lane, or “walkable to the Old Port”" />
</div>
<button type="submit" class="btn btn-primary" style="width:100%;margin-top:1.35rem;">
Confirm My Tour
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>
<div class="form-msg" id="tourMsg" role="status" aria-live="polite"></div>
<p style="font-size:.815rem;color:var(--muted);margin-top:.95rem;">
No obligation and no sales pressure. We'll confirm within one business hour by text or email.
</p>
</form>
</div>
</div>
</div>
</section>
<!-- ================= TESTIMONIALS ================= -->
<section class="section testimonials" id="about">
<div class="wrap">
<div class="section-head center reveal">
<div class="eyebrow">Client Stories</div>
<h2>People remember how<br>the process made them feel.</h2>
<p class="lede">
We measure success by more than closing volume. These are clients who trusted us with major
financial decisions — and came back to us for the next one.
</p>
</div>
<div class="quote-grid">
<div class="quote-card reveal">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<p>
"We were first-time buyers convinced we'd be priced out of anything decent. Our advisor never
pushed us toward a house that didn't fit — she actually talked us out of two. When we finally
found the right one, she structured an offer with an appraisal gap clause that won it against
four competing bids without us overpaying a dime."
</p>
<div class="quote-person">
<img src="https://i.pravatar.cc/120?u=northmark-client-marisol" alt="Marisol Reyes">
<div>
<div class="name">Marisol & Devin Reyes</div>
<div class="role">First-time buyers · Knightville</div>
</div>
</div>
</div>
<div class="quote-card featured reveal">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<p>
"I've sold four homes over twenty years and this was, without question, the best experience.
The comparative market analysis was rigorous, the staging was beautiful, and Northmark's
negotiation on inspection repairs saved us nearly $11,000. We closed in 27 days and netted
$23,000 over asking."
</p>
<div class="quote-person">
<img src="https://i.pravatar.cc/120?u=northmark-client-hargrove" alt="Catherine Hargrove">
<div>
<div class="name">Catherine Hargrove</div>
<div class="role">Seller · Cape Elizabeth</div>
</div>
</div>
</div>
<div class="quote-card reveal">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<p>
"As an out-of-state investor, I needed someone I could trust to walk properties, evaluate rent
comps, and flag issues I couldn't see from 1,200 miles away. Northmark now manages acquisitions
across three of my properties. Their underwriting assumptions have been accurate to within 3%
on every one."
</p>
<div class="quote-person">
<img src="https://i.pravatar.cc/120?u=northmark-client-okafor" alt="Daniel Okafor">
<div>
<div class="name">Daniel Okafor</div>
<div class="role">Investor · Multi-family portfolio</div>
</div>
</div>
</div>
</div>
<div style="margin-top:3.35rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.35rem;" class="reveal">
<div style="text-align:center;padding:1.75rem 1.15rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);">
<div style="font-family:var(--ff-display);font-size:2.35rem;font-weight:600;color:var(--clay);line-height:1;">96.4%</div>
<div style="font-size:.855rem;color:var(--muted);margin-top:.42rem;">Listings closing on original contract terms</div>
</div>
<div style="text-align:center;padding:1.75rem 1.15rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);">
<div style="font-family:var(--ff-display);font-size:2.35rem;font-weight:600;color:var(--clay);line-height:1;">99.2%</div>
<div style="font-size:.855rem;color:var(--muted);margin-top:.42rem;">Average sale-to-list price ratio</div>
</div>
<div style="text-align:center;padding:1.75rem 1.15rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);">
<div style="font-family:var(--ff-display);font-size:2.35rem;font-weight:600;color:var(--clay);line-height:1;">42 min</div>
<div style="font-size:.855rem;color:var(--muted);margin-top:.42rem;">Average response time to inquiries</div>
</div>
<div style="text-align:center;padding:1.75rem 1.15rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);">
<div style="font-family:var(--ff-display);font-size:2.35rem;font-weight:600;color:var(--clay);line-height:1;">17 yrs</div>
<div style="font-size:.855rem;color:var(--muted);margin-top:.42rem;">Average advisor experience in market</div>
</div>
</div>
</div>
</section>
<!-- ================= FAQ ================= -->
<section class="section faq" id="faq">
<div class="wrap">
<div class="faq-grid">
<div>
<div class="section-head reveal" style="margin-bottom:1.75rem;">
<div class="eyebrow">Questions, Answered</div>
<h2>The things clients<br>ask us most.</h2>
<p class="lede">
Real estate transactions are full of unfamiliar terms and one-shot decisions. Here are
straightforward answers to the questions we hear in almost every first consultation.
</p>
</div>
<div class="faq-aside reveal">
<h3>Still have a question?</h3>
<p>
Our advisors answer questions from people who aren't clients yet every single day. There's no
cost, no obligation, and no follow-up unless you ask for it.
</p>
<div class="agent-mini">
<img src="https://i.pravatar.cc/120?u=northmark-advisor-tobias" alt="Advisor Tobias Mercer">
<div>
<strong>Tobias Mercer</strong>
<span>Managing Broker · 19 years in market</span>
</div>
</div>
<a href="#contact" class="btn btn-primary">Ask an Advisor</a>
<a href="#contact" class="btn btn-outline" style="margin-top:.65rem;">Call (207) 555-0184</a>
</div>
</div>
<div class="reveal">
<details open>
<summary>How much do I really need for a down payment? <span class="plus">+</span></summary>
<div class="faq-body">
It depends entirely on the loan program. Conventional loans can go as low as 3% down for
first-time buyers, FHA requires 3.5%, and VA loans for eligible service members require no
down payment at all. The traditional 20% down still offers real advantages: you avoid private
mortgage insurance (PMI), your monthly payment is lower, and sellers often view your offer as
more financially secure. That said, a well-documented pre-approval with 5% down frequently
beats a cash-thin offer with 20% down, because underwriting strength matters more than the
percentage in competitive situations.
</div>
</details>
<details>
<summary>What's the difference between pre-qualification and pre-approval? <span class="plus">+</span></summary>
<div class="faq-body">
Pre-qualification is an informal estimate based on information you self-report — it takes
minutes and carries little weight with sellers. Pre-approval means a lender has verified your
income, assets, and credit through underwriting and issued a conditional commitment letter.
In multiple-offer scenarios, we require a full underwritten pre-approval before we write, and
we include that letter plus proof of funds for your earnest money deposit with every offer
package.
</div>
</details>
<details>
<summary>What are closing costs, and how much should I budget? <span class="plus">+</span></summary>
<div class="faq-body">
Closing costs typically run 2–5% of the purchase price and include lender origination fees,
appraisal, home inspection, title search and title insurance, recording fees, prepaid property
taxes, and prepaid homeowners insurance. On a $500,000 purchase, budget roughly $10,000 to
$25,000 depending on your lender and municipality. Buyers receive a Loan Estimate within three
days of applying and a Closing Disclosure at least three business days before settlement — we
review both with you line by line so nothing is a surprise.
</div>
</details>
<details>
<summary>What does title insurance actually protect me from? <span class="plus">+</span></summary>
<div class="faq-body">
A title search uncovers recorded issues with ownership history — unreleased liens, boundary
disputes, missing heirs, clerical errors, or unpaid judgments. Title insurance protects you
financially if a covered defect surfaces after closing and someone else claims an interest in
the property. There are two policies: an owner's policy protecting you (a one-time premium paid
at closing) and a lender's policy protecting the mortgage holder, which is required. We
strongly recommend the owner's policy even when it isn't mandatory.
</div>
</details>
<details>
<summary>How long does it take to buy a home, start to finish? <span class="plus">+</span></summary>
<div class="faq-body">
For most buyers, the search takes 4 to 10 weeks, and the contract-to-closing period takes 30 to
45 days for a financed purchase — cash transactions can close in as little as 10 to 14 days.
Appraisal turnaround and underwriting timelines are usually the pacing factors. Getting
pre-approved before you tour compresses the entire timeline significantly and keeps you from
losing a home to a buyer who was simply ready sooner.
</div>
</details>
<details>
<summary>What is earnest money, and can I lose it? <span class="plus">+</span></summary>
<div class="faq-body">
Earnest money is a good-faith deposit — typically 1–3% of the purchase price — submitted with
your offer to show the seller you're serious. It's held by a neutral escrow agent and applied
toward your down payment or closing costs at settlement. You can lose it only if you withdraw
from the contract outside of your negotiated contingencies. With properly written inspection,
financing, and appraisal contingencies, your deposit is protected while your due diligence is
underway.
</div>
</details>
<details>
<summary>Do I really need a home inspection on new construction? <span class="plus">+</span></summary>
<div class="faq-body">
Yes — and ideally three: a pre-pour/foundation inspection, a pre-drywall inspection, and a
final walk-through inspection before closing. New homes are assembled by multiple subcontractors
working on tight schedules, and defects in framing, flashing, grading, or mechanical rough-in
are far cheaper to correct before they're covered up. We coordinate independent inspectors for
every transaction regardless of the property's age.
</div>
</details>
</div>
</div>
</div>
</section>
<!-- ================= CTA BAND ================= -->
<section class="cta-band" id="contact">
<img src="https://picsum.photos/seed/northmark-cta-neighborhood/1920/900" alt="Aerial view of a coastal residential neighborhood">
<div class="wrap cta-inner">
<div class="reveal">
<div class="eyebrow light">Let's Talk</div>
<h2>Ready when you are —<br>whether that's today or next year.</h2>
<p>
Tell us what you're considering and we'll respond with a clear, honest assessment of your options:
realistic pricing, likely timelines, and the trade-offs worth thinking through. No automated
funnels, no drip campaigns — just a conversation with a local advisor who knows your neighborhood.
</p>
<div style="display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.95rem;">
<a href="tel:+12075550184" class="btn btn-primary">Call (207) 555-0184</a>
<a href="mailto:hello@northmarkrealty.com" class="btn btn-ghost-light">Email Our Team</a>
</div>
</div>
<div class="cta-actions reveal">
<a href="#search" class="btn btn-primary">Start Property Search</a>
<a href="#mortgage" class="btn btn-ghost-light">Calculate My Payment</a>
<a href="#open-house" class="btn btn-ghost-light">Schedule a Tour</a>
<a href="#sell" class="btn btn-ghost-light">Request Free Valuation</a>
<div class="cta-note">Typical response time: under 60 minutes during business hours.</div>
</div>
</div>
</section>
<!-- ================= FOOTER ================= -->
<footer class="site">
<div class="wrap">
<div class="foot-grid">
<div class="foot-brand">
<a class="brand" href="#top" style="align-items:flex-start;">
<div class="brand-mark" style="width:56px;height:56px;">
<img src="https://placehold.co/120x120/10222b/e9c99b?text=NR&font=playfair%20display&font-size=52" alt="Northmark Realty logo placeholder" width="56" height="56">
</div>
<div>
<div class="brand-name">Northmark Realty</div>
<div class="brand-tag">Find Your True North in Every Address</div>
</div>
</a>
<p>
An independent residential brokerage serving Greater Portland, the Casco Bay islands, and
southern Maine since 2009. Data-driven pricing, honest counsel, and representation that puts
your interests first — from first showing to final signature.
</p>
<div class="foot-contact">
<a href="https://maps.google.com/?q=118+Harbor+Row+Portland+ME" target="_blank" rel="noopener">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#e9c99b" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span>118 Harbor Row, Suite 400<br>Portland, ME 04101</span>
</a>
<a href="tel:+12075550184">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#e9c99b" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
<span>(207) 555-0184 · Mon–Sat, 8am–7pm</span>
</a>
<a href="mailto:hello@northmarkrealty.com">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#e9c99b" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 6-10 7L2 6"/></svg>
<span>hello@northmarkrealty.com</span>
</a>
</div>
</div>
<div class="foot-col">
<h4>Explore</h4>
<ul>
<li><a href="#search">Property Search</a></li>
<li><a href="#listings">Featured Listings</a></li>
<li><a href="#listings">New Construction</a></li>
<li><a href="#listings">Waterfront Homes</a></li>
<li><a href="#open-house">Open House Schedule</a></li>
<li><a href="#listings">Recently Sold</a></li>
<li><a href="#search">Rental Properties</a></li>
</ul>
</div>
<div class="foot-col">
<h4>Resources</h4>
<ul>
<li><a href="#buyers">Buyer's Guide</a></li>
<li><a href="#sell">Seller's Guide</a></li>
<li><a href="#mortgage">Mortgage Calculator</a></li>
<li><a href="#mortgage">Get Pre-Approved</a></li>
<li><a href="#faq">Title & Closing FAQ</a></li>
<li><a href="#sell">Home Valuation</a></li>
<li><a href="#about">Market Reports</a></li>
</ul>
</div>
<div class="foot-col">
<h4>Stay in the Know</h4>
<p style="color:rgba(255,255,255,.62);line-height:1.8;margin-bottom:.35rem;">
Monthly market intelligence, new listings before they hit the portals, and practical advice for
owners and buyers. No spam — unsubscribe anytime.
</p>
<form class="newsletter" id="newsletterForm">
<input type="email" id="newsletterEmail" placeholder="Your email address" aria-label="Email address" required>
<button class="btn btn-primary btn-sm" type="submit">Join</button>
</form>
<div class="form-msg" id="newsletterMsg" role="status" aria-live="polite" style="background:rgba(47,107,82,.18);color:#a9dcc4;border-color:rgba(169,220,196,.3);"></div>
<div class="socials" style="margin-top:1.65rem;">
<a href="#" aria-label="Facebook">
<svg width="17" height="17" viewBox="0 0 24 24" fill="#fff"><path d="M14 8.5V6.8c0-.7.5-.9.8-.9H16V3.2h-2.2c-2.4 0-2.9 1.8-2.9 2.9v2.4H9v2.8h1.9V21h3.1v-9.7h2.2l.3-2.8z"/></svg>
</a>
<a href="#" aria-label="Instagram">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="3.8"/><circle cx="17.2" cy="6.8" r="1" fill="#fff" stroke="none"/></svg>
</a>
<a href="#" aria-label="LinkedIn">
<svg width="17" height="17" viewBox="0 0 24 24" fill="#fff"><path d="M6.2 8.8H3.4V21h2.8zM4.8 3.4a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4zM21 13.6c0-3.3-1.8-4.9-4.2-4.9-1.9 0-2.8 1.1-3.2 1.8V8.8H10.8V21h2.8v-6.5c0-1.4.9-2.2 1.9-2.2s1.8.7 1.8 2.2V21H21z"/></svg>
</a>
<a href="#" aria-label="YouTube">
<svg width="17" height="17" viewBox="0 0 24 24" fill="#fff"><path d="M22 8.2a2.9 2.9 0 0 0-2-2C18.2 5.7 12 5.7 12 5.7s-6.2 0-8 .5a2.9 2.9 0 0 0-2 2A30 30 0 0 0 1.6 12 30 30 0 0 0 2 15.8a2.9 2.9 0 0 0 2 2c1.8.5 8 .5 8 .5s6.2 0 8-.5a2.9 2.9 0 0 0 2-2 30 30 0 0 0 .4-3.8 30 30 0 0 0-.4-3.8zM9.9 15.2V8.8l5.4 3.2z"/></svg>
</a>
</div>
</div>
</div>
<div class="foot-bottom">
<div>
<div style="color:rgba(255,255,255,.7);margin-bottom:.65rem;">
© 2025 Northmark Realty Group, LLC. All rights reserved. · Maine Brokerage License #RE-100294
</div>
<div class="equal-housing">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="1.7"><path d="M3 21h18M5 21V10l7-5 7 5v11"/><path d="M9 21v-7h6v7"/></svg>
Equal Housing Opportunity. Northmark Realty is committed to the letter and spirit of U.S. policy
for equal opportunity in housing. Information deemed reliable but not guaranteed.
</div>
</div>
<div class="foot-legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Use</a>
<a href="#">Accessibility</a>
<a href="#">Fair Housing Notice</a>
<a href="#">DMCA</a>
<a href="#">Sitemap</a>
</div>
</div>
</div>
</footer>
<script>
(function () {
'use strict';
/* ---------- Sticky header ---------- */
var header = document.getElementById('siteHeader');
function onScroll() {
if (window.scrollY > 40) header.classList.add('scrolled');
else header.classList.remove('scrolled');
}
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
/* ---------- Mobile menu ---------- */
var burger = document.getElementById('burger');
var mobileMenu = document.getElementById('mobileMenu');
burger.addEventListener('click', function () {
var open = mobileMenu.classList.toggle('open');
burger.setAttribute('aria-expanded', open ? 'true' : 'false');
});
mobileMenu.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function () {
mobileMenu.classList.remove('open');
burger.setAttribute('aria-expanded', 'false');
});
});
/* ---------- Reveal on scroll ---------- */
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var revealEls = document.querySelectorAll('.reveal');
if (reduced || !('IntersectionObserver' in window)) {
revealEls.forEach(function (el) { el.classList.add('in'); });
} else {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry, i) {
if (entry.isIntersecting) {
var el = entry.target;
setTimeout(function () { el.classList.add('in'); }, Math.min(i * 70, 320));
io.unobserve(el);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
revealEls.forEach(function (el) { io.observe(el); });
}
/* ---------- Search tabs ---------- */
document.querySelectorAll('.search-tabs button').forEach(function (btn) {
btn.addEventListener('click', function () {
document.querySelectorAll('.search-tabs button').forEach(function (b) {
b.classList.remove('active');
b.setAttribute('aria-selected', 'false');
});
btn.classList.add('active');
btn.setAttribute('aria-selected', 'true');
});
});
var searchForm = document.getElementById('searchForm');
searchForm.addEventListener('submit', function (e) {
e.preventDefault();
var loc = document.getElementById('loc');
var grid = document.getElementById('listingGrid');
if (!loc.value.trim()) {
loc.focus();
loc.style.borderColor = '#b0522e';
setTimeout(function () { loc.style.borderColor = ''; }, 1800);
return;
}
document.getElementById('listings').scrollIntoView({ behavior: reduced ? 'auto' : 'smooth' });
});
document.querySelectorAll('.chip').forEach(function (chip) {
chip.addEventListener('click', function () {
document.getElementById('loc').value = chip.textContent.trim();
});
});
/* ---------- Listing filters ---------- */
var filterBtns = document.querySelectorAll('#filterRow button');
var cards = document.querySelectorAll('#listingGrid .listing-card');
filterBtns.forEach(function (btn) {
btn.addEventListener('click', function () {
filterBtns.forEach(function (b) { b.classList.remove('active'); });
btn.classList.add('active');
var f = btn.getAttribute('data-filter');
cards.forEach(function (card) {
var match = f === 'all' || card.getAttribute('data-cat').indexOf(f) !== -1;
card.style.display = match ? 'flex' : 'none';
});
});
});
document.querySelectorAll('.save-btn').forEach(function (btn) {
btn.addEventListener('click', function () {
var svg = btn.querySelector('svg path');
var filled = btn.getAttribute('data-saved') === 'true';
btn.setAttribute('data-saved', filled ? 'false' : 'true');
svg.setAttribute('fill', filled ? 'none' : '#b0522e');
svg.setAttribute('stroke', filled ? '#10222b' : '#b0522e');
});
});
/* ---------- Mortgage calculator ---------- */
var priceEl = document.getElementById('homePrice');
var priceRange = document.getElementById('homePriceRange');
var downEl = document.getElementById('downPayment');
var downRange = document.getElementById('downPct');
var downPctLabel = document.getElementById('downPctLabel');
var rateEl = document.getElementById('interestRate');
var termEl = document.getElementById('loanTerm');
var taxEl = document.getElementById('taxRate');
var insEl = document.getElementById('insurance');
var hoaEl = document.getElementById('hoa');
var pmiMode = 'auto';
var fmt0 = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
var fmtFull = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
function setRangeFill(range) {
var min = parseFloat(range.min), max = parseFloat(range.max), val = parseFloat(range.value);
var pct = ((val - min) / (max - min)) * 100;
range.style.setProperty('--pct', pct + '%');
}
function calc() {
var price = Math.max(0, parseFloat(priceEl.value) || 0);
var down = Math.min(price, Math.max(0, parseFloat(downEl.value) || 0));
var rate = Math.max(0, parseFloat(rateEl.value) || 0);
var years = parseInt(termEl.value, 10) || 30;
var taxRate = Math.max(0, parseFloat(taxEl.value) || 0);
var insurance = Math.max(0, parseFloat(insEl.value) || 0);
var hoa = Math.max(0, parseFloat(hoaEl.value) || 0);
var loan = Math.max(0, price - down);
var r = rate / 100 / 12;
var n = years * 12;
var pi = 0;
if (loan > 0) {
pi = r > 0 ? loan * (r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1) : loan / n;
}
var monthlyTax = (price * (taxRate / 100)) / 12;
var monthlyIns = insurance / 12;
var ltv = price > 0 ? (loan / price) * 100 : 0;
var pmiMonthly = (pmiMode === 'on' || (pmiMode === 'auto' && ltv > 80)) ? (loan * 0.0055) / 12 : 0;
var other = pmiMonthly + hoa;
var total = pi + monthlyTax + monthlyIns + other;
document.getElementById('monthlyTotal').innerHTML = fmt0.format(Math.round(total)) + '<small>/mo</small>';
document.getElementById('loanSummary').textContent =
fmt0.format(Math.round(loan)) + ' loan amount · ' + years + '-year fixed at ' + rate.toFixed(3) + '%';
document.getElementById('valPI').textContent = fmt0.format(Math.round(pi));
document.getElementById('valTax').textContent = fmt0.format(Math.round(monthlyTax));
document.getElementById('valIns').textContent = fmt0.format(Math.round(monthlyIns));
document.getElementById('valOther').textContent = fmt0.format(Math.round(other));
var totalPaid = pi * n;
var totalInterest = Math.max(0, totalPaid - loan);
document.getElementById('factLoan').textContent = fmt0.format(Math.round(loan));
document.getElementById('factInterest').textContent = fmt0.format(Math.round(totalInterest));
document.getElementById('factTotal').textContent = fmt0.format(Math.round(totalPaid + (monthlyTax + monthlyIns + other) * n));
document.getElementById('factIncome').textContent = fmt0.format(Math.round((total * 12) / 0.28));
var denom = total || 1;
document.getElementById('barPI').style.width = ((pi / denom) * 100).toFixed(1) + '%';
document.getElementById('barTax').style.width = ((monthlyTax / denom) * 100).toFixed(1) + '%';
document.getElementById('barIns').style.width = ((monthlyIns / denom) * 100).toFixed(1) + '%';
document.getElementById('barOther').style.width = ((other / denom) * 100).toFixed(1) + '%';
var pctDown = price > 0 ? Math.round((down / price) * 100) : 0;
downPctLabel.textContent = pctDown + '% down';
}
function syncDownFromPct() {
var price = Math.max(0, parseFloat(priceEl.value) || 0);
var pct = parseFloat(downRange.value) || 0;
downEl.value = Math.round(price * pct / 100);
setRangeFill(downRange);
calc();
}
priceEl.addEventListener('input', function () {
priceRange.value = Math.min(2500000, Math.max(150000, parseFloat(priceEl.value) || 150000));
setRangeFill(priceRange);
syncDownFromPct();
});
priceRange.addEventListener('input', function () {
priceEl.value = priceRange.value;
setRangeFill(priceRange);
syncDownFromPct();
});
downRange.addEventListener('input', syncDownFromPct);
downEl.addEventListener('input', function () {
var price = Math.max(0, parseFloat(priceEl.value) || 0);
if (price > 0) {
downRange.value = Math.min(60, Math.round(((parseFloat(downEl.value) || 0) / price) * 100));
setRangeFill(downRange);
}
calc();
});
[rateEl, termEl, taxEl, insEl, hoaEl].forEach(function (el) {
el.addEventListener('input', calc);
el.addEventListener('change', calc);
});
document.querySelectorAll('#pmiToggle button').forEach(function (btn) {
btn.addEventListener('click', function () {
document.querySelectorAll('#pmiToggle button').forEach(function (b) { b.classList.remove('active'); });
btn.classList.add('active');
pmiMode = btn.getAttribute('data-pmi');
calc();
});
});
setRangeFill(priceRange);
setRangeFill(downRange);
calc();
/* ---------- Tour scheduler ---------- */
function singleSelect(containerId, selector) {
var container = document.getElementById(containerId);
container.addEventListener('click', function (e) {
var btn = e.target.closest(selector);
if (!btn) return;
container.querySelectorAll(selector).forEach(function (b) { b.classList.remove('active'); });
btn.classList.add('active');
});
}
singleSelect('dayRow', '.day-btn');
singleSelect('timeRow', '.time-btn');
var tourForm = document.getElementById('tourForm');
var tourMsg = document.getElementById('tourMsg');
tourForm.addEventListener('submit', function (e) {
e.preventDefault();
var name = document.getElementById('tourName').value.trim();
var email = document.getElementById('tourEmail').value.trim();
if (!name || !email || email.indexOf('@') === -1) {
tourMsg.textContent = 'Please enter your name and a valid email address so we can confirm your tour.';
tourMsg.style.background = '#fdeee7';
tourMsg.style.color = '#b0522e';
tourMsg.style.borderColor = '#f0d3c4';
tourMsg.classList.add('show');
return;
}
var day = document.querySelector('#dayRow .day-btn.active');
var time = document.querySelector('#timeRow .time-btn.active');
var type = document.getElementById('tourType').value;
var dayLabel = day ? day.querySelector('small').textContent + ' ' + day.querySelector('strong').textContent : 'the selected date';
var timeLabel = time ? time.textContent : 'the selected time';
tourMsg.innerHTML = '<strong>Thank you, ' + name.split(' ')[0] + '.</strong> Your ' + type.toLowerCase() +
' is requested for <strong>' + dayLabel + ' at ' + timeLabel + '</strong>. A Northmark advisor will confirm within one business hour at ' + email + '.';
tourMsg.style.background = '#eaf4ef';
tourMsg.style.color = '#2f6b52';
tourMsg.style.borderColor = '#cfe4d8';
tourMsg.classList.add('show');
tourForm.reset();
});
/* ---------- Newsletter ---------- */
var newsletterForm = document.getElementById('newsletterForm');
var newsletterMsg = document.getElementById('newsletterMsg');
newsletterForm.addEventListener('submit', function (e) {
e.preventDefault();
var email = document.getElementById('newsletterEmail').value.trim();
if (!email || email.indexOf('@') === -1) {
newsletterMsg.textContent = 'Please enter a valid email address.';
newsletterMsg.style.background = 'rgba(176,82,46,.18)';
newsletterMsg.style.color = '#eab597';
newsletterMsg.style.borderColor = 'rgba(234,181,151,.3)';
newsletterMsg.classList.add('show');
return;
}
newsletterMsg.textContent = 'You\'re subscribed. Watch your inbox for our next market report.';
newsletterMsg.style.background = 'rgba(47,107,82,.18)';
newsletterMsg.style.color = '#a9dcc4';
newsletterMsg.style.borderColor = 'rgba(169,220,196,.3)';
newsletterMsg.classList.add('show');
newsletterForm.reset();
});
/* ---------- FAQ single-open behavior ---------- */
var faqDetails = document.querySelectorAll('#faq details');
faqDetails.forEach(function (detail) {
detail.addEventListener('toggle', function () {
if (detail.open) {
faqDetails.forEach(function (other) {
if (other !== detail) other.open = false;
});
}
});
});
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:06:29.415Z",
"url": "https://benchmark.aimac.invalid/7d881315e5a15b3cb4b69b2657298e78459bc3555c32610bef2c0d3121b1856f.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-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": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Northmark Realty home\">",
"target": [
"a[aria-label=\"Northmark Realty home\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Northmark Realty home\">",
"target": [
"a[aria-label=\"Northmark Realty home\"]"
]
}
]
},
{
"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=\"search-tabs\" role=\"tablist\" aria-label=\"Listing intent\">",
"target": [
".search-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-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": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<div class=\"bars\" aria-hidden=\"true\">",
"target": [
".bars"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Northmark Realty home\">",
"target": [
"a[aria-label=\"Northmark Realty home\"]"
]
}
]
},
{
"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=\"search-tabs\" role=\"tablist\" aria-label=\"Listing intent\">",
"target": [
".search-tabs"
]
}
]
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-children",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA children are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"search-tabs\" role=\"tablist\" aria-label=\"Listing intent\">",
"target": [
".search-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=\"active\" role=\"tab\" aria-selected=\"true\">Buy</button>",
"target": [
".active[role=\"tab\"]"
]
}
]
},
{
"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=\"search-tabs\" role=\"tablist\" aria-label=\"Listing intent\">",
"target": [
".search-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 class=\"brand\" href=\"#top\" aria-label=\"Northmark Realty home\">",
"target": [
"a[aria-label=\"Northmark Realty home\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Northmark Realty home\">",
"target": [
"a[aria-label=\"Northmark Realty home\"]"
]
}
]
},
{
"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": "<section class=\"wrap\" id=\"search\" style=\"margin-top:-3.4rem;position:relative;z-index:5;\">",
"target": [
"#search"
]
}
]
},
{
"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=\"active\" role=\"tab\" aria-selected=\"true\">Buy</button>",
"target": [
".active[role=\"tab\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1>Every address has a story.<br><em>Let's find yours.</em></h1>",
"target": [
"h1"
]
},
{
"html": "<h2>Homes that are worth<br>getting excited about.</h2>",
"target": [
".listings-top > .section-head.reveal > h2"
]
},
{
"html": "<h2>A clear path from<br>\"just browsing\" to keys in hand.</h2>",
"target": [
"#buyers > .wrap > .section-head.reveal > h2"
]
},
{
"html": "<h3>Discovery & Pre-Approval</h3>",
"target": [
".step.reveal:nth-child(1) > h3"
]
},
{
"html": "<h3>Curated Search & Tours</h3>",
"target": [
".step.reveal:nth-child(2) > h3"
]
},
{
"html": "<h3>Offer, Earnest Money & Negotiation</h3>",
"target": [
".step.reveal:nth-child(3) > h3"
]
},
{
"html": "<h3>Inspection to Closing</h3>",
"target": [
".step.reveal:nth-child(4) > h3"
]
},
{
"html": "<h2>Positioned, priced,<br>and sold with intention.</h2>",
"target": [
".split > div > .section-head.reveal > h2"
]
},
{
"html": "<h3>Comparative Market Analysis & Pricing Strategy</h3>",
"target": [
".guide-item.reveal:nth-child(1) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Pre-Market Preparation & Staging</h3>",
"target": [
".guide-item.reveal:nth-child(2) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Launch, Showings & Offer Management</h3>",
"target": [
".guide-item.reveal:nth-child(3) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Under Contract: Inspection, Appraisal & Title</h3>",
"target": [
".guide-item.reveal:nth-child(4) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Closing & Beyond</h3>",
"target": [
".guide-item.reveal:nth-child(5) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Market Snapshot</h3>",
"target": [
".widget.reveal:nth-child(1) > h3"
]
},
{
"html": "<h3>Seller Prep Checklist</h3>",
"target": [
".widget.reveal:nth-child(2) > h3"
]
},
{
"html": "<h3>What's Your Home Worth?</h3>",
"target": [
".widget-dark > h3"
]
},
{
"html": "<h3>Just Listed Near You</h3>",
"target": [
".widget.reveal:nth-child(4) > h3"
]
},
{
"html": "<h2>Know your number before you tour.</h2>",
"target": [
"#mortgage > .wrap > .center.section-head.reveal > h2"
]
},
{
"html": "<h3 style=\"font-size:1.55rem;margin-bottom:.35rem;\">Payment Calculator</h3>",
"target": [
".calc-inputs > h3"
]
},
{
"html": "<h4>Conventional 30-Year Fixed</h4>",
"target": [
".loan-card.reveal:nth-child(1) > h4"
]
},
{
"html": "<h4>FHA & First-Time Buyer</h4>",
"target": [
".loan-card.reveal:nth-child(2) > h4"
]
},
{
"html": "<h4>Jumbo & Portfolio Loans</h4>",
"target": [
".loan-card.reveal:nth-child(3) > h4"
]
},
{
"html": "<h4>VA & Rural Development</h4>",
"target": [
".loan-card.reveal:nth-child(4) > h4"
]
},
{
"html": "<h2>Book a private tour<br>in under sixty seconds.</h2>",
"target": [
"div:nth-child(2) > .section-head.reveal > h2"
]
},
{
"html": "<h4 style=\"margin-bottom:.85rem;\">1 \u00b7 Select a day</h4>",
"target": [
"#tourForm > h4:nth-child(1)"
]
},
{
"html": "<h4 style=\"margin:1.55rem 0 .85rem;\">2 \u00b7 Select a time</h4>",
"target": [
"h4:nth-child(3)"
]
},
{
"html": "<h4 style=\"margin:1.55rem 0 .85rem;\">3 \u00b7 Your details</h4>",
"target": [
"h4:nth-child(5)"
]
},
{
"html": "<h2>People remember how<br>the process made them feel.</h2>",
"target": [
"#about > .wrap > .center.section-head.reveal > h2"
]
},
{
"html": "<h2>The things clients<br>ask us most.</h2>",
"target": [
".faq-grid > div:nth-child(1) > .section-head.reveal > h2"
]
},
{
"html": "<h3>Still have a question?</h3>",
"target": [
".faq-aside > h3"
]
},
{
"html": "<h2>Ready when you are \u2014<br>whether that's today or next year.</h2>",
"target": [
".cta-inner > .reveal:nth-child(1) > h2"
]
},
{
"html": "<h4>Explore</h4>",
"target": [
".foot-col:nth-child(2) > h4"
]
},
{
"html": "<h4>Resources</h4>",
"target": [
".foot-col:nth-child(3) > h4"
]
},
{
"html": "<h4>Stay in the Know</h4>",
"target": [
".foot-col:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d6dde1",
"bgColor": "#10222b",
"contrastRatio": 11.89,
"fontSize": "9.8pt (13.04px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 11.89"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span>",
"target": [
".topbar-left > span:nth-child(1)"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "loc",
"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=\"loc\" placeholder=\"e.g. Cape Elizabeth, Munjoy Hill, 04101\">",
"target": [
"#loc"
]
}
]
},
{
"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=\"loc\">City, Neighborhood or ZIP</label>",
"target": [
"label[for=\"loc\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"text\" id=\"loc\" placeholder=\"e.g. Cape Elizabeth, Munjoy Hill, 04101\">",
"target": [
"#loc"
]
}
]
},
{
"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/120x120/10222b/e9c99b?text=NR&font=playfair%20display&font-size=52\" alt=\"Northmark Realty logo placeholder\" width=\"52\" height=\"52\">",
"target": [
"img[width=\"52\"]"
]
}
]
},
{
"id": "label",
"impact": "critical",
"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=\"loc\">City, Neighborhood or ZIP</label>",
"target": [
"label[for=\"loc\"]"
]
}
],
"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=\"loc\" placeholder=\"e.g. Cape Elizabeth, Munjoy Hill, 04101\">",
"target": [
"#loc"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#mortgage\">Mortgage Calculator</a>",
"target": [
".topbar-right > a[href$=\"#mortgage\"]"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"tip-list\">",
"target": [
".widget.reveal:nth-child(2) > .tip-list"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><span class=\"tick\">\u2713</span><span>Deep clean, declutter, and depersonalize before the first photographer arrives.</span></li>",
"target": [
".widget.reveal:nth-child(2) > .tip-list > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/120x120/10222b/e9c99b?text=NR&font=playfair%20display&font-size=52\" alt=\"Northmark Realty logo placeholder\" width=\"52\" height=\"52\">",
"target": [
"img[width=\"52\"]"
]
}
]
},
{
"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=\"ptype\">Property Type</label>",
"target": [
"label[for=\"ptype\"]"
]
}
],
"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=\"ptype\">",
"target": [
"#ptype"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary>How much do I really need for a down payment? <span class=\"plus\">+</span></summary>",
"target": [
"details[open=\"\"] > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-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=\"#mortgage\">Mortgage Calculator</a>",
"target": [
".topbar-right > a[href$=\"#mortgage\"]"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"stars\" aria-label=\"5 out of 5 stars\">\u2605\u2605\u2605\u2605\u2605</div>",
"target": [
".quote-card.reveal:nth-child(1) > .stars[aria-label=\"5 out of 5 stars\"]"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "8.6pt (11.52px)",
"fontWeight": "normal",
"messageKey": "imgNode",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<img src=\"https://picsum.photos/seed/northmark-hero-home/1920/1120\" alt=\"Contemporary coastal home at golden hour\">",
"target": [
".hero-media > img"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined because element contains an image node"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"eyebrow light\">Coastal & Metro Residential Brokerage \u00b7 Est. 2009</div>",
"target": [
".hero-copy > .light.eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because element contains an image node"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.0pt (10.64px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.0pt (10.64px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"brand-tag\">Find Your True North</div>",
"target": [
"a[aria-label=\"Northmark Realty home\"] > div:nth-child(2) > .brand-tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.0pt (10.64px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.1pt (10.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.1pt (10.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<small>Talk to an advisor</small>",
"target": [
".phone-cta > small"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.1pt (10.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "11.3pt (15.12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section listings\" id=\"listings\">",
"target": [
"#listings"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 11.3pt (15.12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>\n Inventory refreshes every 15 minutes from the Maine Listings MLS. Create a free account to save\n searches, receive instant alerts when a matching property hits the market, and see sold comparables\n for any address in our coverage area.\n </p>",
"target": [
".listings-foot > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 11.3pt (15.12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "13.4pt (17.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section listings\" id=\"listings\">",
"target": [
"#listings"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lede\">",
"target": [
".in.section-head.reveal > .lede"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "13.4pt (17.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section listings\" id=\"listings\">",
"target": [
"#listings"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lede\">",
"target": [
".section-head.in.reveal > .lede"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "13.4pt (17.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section listings\" id=\"listings\">",
"target": [
"#listings"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lede\">",
"target": [
".listings-top > .section-head.in.reveal > .lede"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.4pt (13.84px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"sub\">Cumberland County \u00b7 Updated October 2025</p>",
"target": [
".widget.in.reveal > .sub"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.6pt (14.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.6pt (14.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"k\">Median sale price</span>",
"target": [
".metric:nth-child(3) > .k"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.6pt (14.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.6pt (14.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.6pt (14.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"k\">Year-over-year change</span>",
"target": [
".metric:nth-child(4) > .k"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.6pt (14.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.6pt (14.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.6pt (14.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"k\">Avg. days on market</span>",
"target": [
".metric:nth-child(5) > .k"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.6pt (14.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.6pt (14.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.6pt (14.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"k\">Sale-to-list ratio</span>",
"target": [
".metric:nth-child(6) > .k"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.6pt (14.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.6pt (14.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.6pt (14.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"k\">Months of supply</span>",
"target": [
".metric:nth-child(7) > .k"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.6pt (14.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.2pt (10.96px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>May</span>",
"target": [
".bar:nth-child(1) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.2pt (10.96px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Jun</span>",
"target": [
".bar:nth-child(2) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.2pt (10.96px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Jul</span>",
"target": [
".bar:nth-child(3) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.2pt (10.96px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Aug</span>",
"target": [
".hi > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.2pt (10.96px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Sep</span>",
"target": [
".bar:nth-child(5) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.2pt (10.96px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Oct</span>",
"target": [
".bar:nth-child(6) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.2pt (10.96px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "9.8pt (13.04px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 9.8pt (13.04px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p style=\"font-size:.815rem;color:var(--muted);margin-top:1.75rem;line-height:1.68;\">\n Monthly closed sales volume, 2025. Peak activity remains in late summer, though buyer demand\n continues through the fall window with noticeably less competition per listing.\n </p>",
"target": [
"p:nth-child(9)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 9.8pt (13.04px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.4pt (13.84px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"sub\">Cumberland County \u00b7 Updated October 2025</p>",
"target": [
".widget.in.reveal:nth-child(1) > .sub"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.4pt (13.84px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"sub\">High-impact, low-cost improvements we recommend most</p>",
"target": [
".widget.in.reveal:nth-child(2) > .sub"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#faf6f0",
"contrastRatio": 1.07,
"fontSize": "13.7pt (18.24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget widget-dark reveal in\">",
"target": [
".widget-dark"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.07 (foreground color: #ffffff, background color: #faf6f0, font size: 13.7pt (18.24px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3>What's Your Home Worth?</h3>",
"target": [
".widget-dark > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.07 (foreground color: #ffffff, background color: #faf6f0, font size: 13.7pt (18.24px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#faf6f0",
"contrastRatio": 1.07,
"fontSize": "11.1pt (14.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget widget-dark reveal in\">",
"target": [
".widget-dark"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.07 (foreground color: #ffffff, background color: #faf6f0, font size: 11.1pt (14.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>\n Request a complimentary, no-obligation valuation. We combine live MLS data with on-site\n condition assessment \u2014 not an automated estimate that can't see your renovated kitchen.\n </p>",
"target": [
".widget-dark > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.07 (foreground color: #ffffff, background color: #faf6f0, font size: 11.1pt (14.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.4pt (13.84px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.in.reveal:nth-child(4)"
]
},
{
"html": "<section class=\"section seller\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"sub\">New to market in the last 7 days</p>",
"target": [
".widget.in.reveal:nth-child(4) > .sub"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b0522e",
"bgColor": "#f0e7da",
"contrastRatio": 4.19,
"fontSize": "8.6pt (11.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section finance\" id=\"mortgage\">",
"target": [
"#mortgage"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.19 (foreground color: #b0522e, background color: #f0e7da, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"eyebrow\">Mortgage Options & Affordability</div>",
"target": [
".center.section-head.in > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.19 (foreground color: #b0522e, background color: #f0e7da, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#f0e7da",
"contrastRatio": 3.75,
"fontSize": "13.4pt (17.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section finance\" id=\"mortgage\">",
"target": [
"#mortgage"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.75 (foreground color: #67787f, background color: #f0e7da, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lede\">",
"target": [
".center.section-head.in > .lede"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.75 (foreground color: #67787f, background color: #f0e7da, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.6pt (11.44px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<form class=\"sched-form reveal in\" id=\"tourForm\" novalidate=\"\">",
"target": [
"#tourForm"
]
},
{
"html": "<section class=\"section scheduler\" id=\"open-house\">",
"target": [
"#open-house"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.6pt (11.44px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label for=\"tourName\">Full Name</label>",
"target": [
"label[for=\"tourName\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.6pt (11.44px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.6pt (11.44px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<form class=\"sched-form reveal in\" id=\"tourForm\" novalidate=\"\">",
"target": [
"#tourForm"
]
},
{
"html": "<section class=\"section scheduler\" id=\"open-house\">",
"target": [
"#open-house"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.6pt (11.44px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label for=\"tourEmail\">Email Address</label>",
"target": [
"label[for=\"tourEmail\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.6pt (11.44px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.6pt (11.44px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<form class=\"sched-form reveal in\" id=\"tourForm\" novalidate=\"\">",
"target": [
"#tourForm"
]
},
{
"html": "<section class=\"section scheduler\" id=\"open-house\">",
"target": [
"#open-house"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.6pt (11.44px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label for=\"tourPhone\">Phone (optional)</label>",
"target": [
"label[for=\"tourPhone\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.6pt (11.44px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.6pt (11.44px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<form class=\"sched-form reveal in\" id=\"tourForm\" novalidate=\"\">",
"target": [
"#tourForm"
]
},
{
"html": "<section class=\"section scheduler\" id=\"open-house\">",
"target": [
"#open-house"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.6pt (11.44px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label for=\"tourType\">Tour Type</label>",
"target": [
"label[for=\"tourType\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.6pt (11.44px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "8.6pt (11.44px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<form class=\"sched-form reveal in\" id=\"tourForm\" novalidate=\"\">",
"target": [
"#tourForm"
]
},
{
"html": "<section class=\"section scheduler\" id=\"open-house\">",
"target": [
"#open-house"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.6pt (11.44px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label for=\"tourProperty\">Property or Neighborhood of Interest</label>",
"target": [
"label[for=\"tourProperty\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 8.6pt (11.44px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "9.8pt (13.04px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<form class=\"sched-form reveal in\" id=\"tourForm\" novalidate=\"\">",
"target": [
"#tourForm"
]
},
{
"html": "<section class=\"section scheduler\" id=\"open-house\">",
"target": [
"#open-house"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 9.8pt (13.04px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p style=\"font-size:.815rem;color:var(--muted);margin-top:.95rem;\">\n No obligation and no sales pressure. We'll confirm within one business hour by text or email.\n </p>",
"target": [
"#tourForm > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 9.8pt (13.04px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b0522e",
"bgColor": "#f0e7da",
"contrastRatio": 4.19,
"fontSize": "8.6pt (11.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section finance\" id=\"mortgage\">",
"target": [
"#mortgage"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.19 (foreground color: #b0522e, background color: #f0e7da, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"eyebrow\">Mortgage Options & Affordability</div>",
"target": [
"#mortgage > .wrap > .center.section-head.in > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.19 (foreground color: #b0522e, background color: #f0e7da, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#f0e7da",
"contrastRatio": 3.75,
"fontSize": "13.4pt (17.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section finance\" id=\"mortgage\">",
"target": [
"#mortgage"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.75 (foreground color: #67787f, background color: #f0e7da, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lede\">",
"target": [
"#mortgage > .wrap > .center.section-head.in > .lede"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.75 (foreground color: #67787f, background color: #f0e7da, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "13.4pt (17.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section testimonials\" id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lede\">\n We measure success by more than closing volume. These are clients who trusted us with major\n financial decisions \u2014 and came back to us for the next one.\n </p>",
"target": [
"#about > .wrap > .center.section-head.in > .lede"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#f0e7da",
"contrastRatio": 3.75,
"fontSize": "11.5pt (15.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-aside reveal in\">",
"target": [
".faq-aside"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.75 (foreground color: #67787f, background color: #f0e7da, font size: 11.5pt (15.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>\n Our advisors answer questions from people who aren't clients yet every single day. There's no\n cost, no obligation, and no follow-up unless you ask for it.\n </p>",
"target": [
".faq-aside > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.75 (foreground color: #67787f, background color: #f0e7da, font size: 11.5pt (15.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "13.4pt (17.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section listings\" id=\"listings\">",
"target": [
"#listings"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lede\">",
"target": [
".listings-top > .section-head.reveal.in > .lede"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.4pt (13.84px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.reveal.in:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"sub\">Cumberland County \u00b7 Updated October 2025</p>",
"target": [
".widget.reveal.in:nth-child(1) > .sub"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.4pt (13.84px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.reveal.in:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"sub\">High-impact, low-cost improvements we recommend most</p>",
"target": [
".widget.reveal.in:nth-child(2) > .sub"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "10.4pt (13.84px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget reveal in\">",
"target": [
".widget.reveal.in:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"sub\">New to market in the last 7 days</p>",
"target": [
".widget.reveal.in:nth-child(4) > .sub"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 10.4pt (13.84px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b0522e",
"bgColor": "#f0e7da",
"contrastRatio": 4.19,
"fontSize": "8.6pt (11.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section finance\" id=\"mortgage\">",
"target": [
"#mortgage"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.19 (foreground color: #b0522e, background color: #f0e7da, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"eyebrow\">Mortgage Options & Affordability</div>",
"target": [
"#mortgage > .wrap > .center.section-head.reveal > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.19 (foreground color: #b0522e, background color: #f0e7da, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#f0e7da",
"contrastRatio": 3.75,
"fontSize": "13.4pt (17.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section finance\" id=\"mortgage\">",
"target": [
"#mortgage"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.75 (foreground color: #67787f, background color: #f0e7da, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lede\">",
"target": [
"#mortgage > .wrap > .center.section-head.reveal > .lede"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.75 (foreground color: #67787f, background color: #f0e7da, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#67787f",
"bgColor": "#faf6f0",
"contrastRatio": 4.26,
"fontSize": "13.4pt (17.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section testimonials\" id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lede\">\n We measure success by more than closing volume. These are clients who trusted us with major\n financial decisions \u2014 and came back to us for the next one.\n </p>",
"target": [
"#about > .wrap > .center.section-head.reveal > .lede"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #67787f, background color: #faf6f0, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "label",
"impact": "critical",
"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": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input type=\"range\" id=\"homePriceRange\" min=\"150000\" max=\"2500000\" step=\"5000\" value=\"525000\" style=\"--pct: 15.957446808510639%;\">",
"target": [
"#homePriceRange"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input type=\"range\" id=\"downPct\" min=\"0\" max=\"60\" step=\"1\" value=\"20\" style=\"--pct: 33.33333333333333%;\">",
"target": [
"#downPct"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 13118
},
{
"y": 565,
"height": 13108
},
{
"y": 1141,
"height": 13108
},
{
"y": 1717,
"height": 13108
},
{
"y": 2293,
"height": 13108
},
{
"y": 2869,
"height": 13108
},
{
"y": 3445,
"height": 13108
},
{
"y": 4021,
"height": 13108
},
{
"y": 4597,
"height": 13108
},
{
"y": 5173,
"height": 13108
},
{
"y": 5749,
"height": 13108
},
{
"y": 6325,
"height": 13108
},
{
"y": 6901,
"height": 13108
},
{
"y": 7477,
"height": 13108
},
{
"y": 8053,
"height": 13108
},
{
"y": 8629,
"height": 13108
},
{
"y": 9205,
"height": 13108
},
{
"y": 9781,
"height": 13108
},
{
"y": 10357,
"height": 13108
},
{
"y": 10933,
"height": 13108
},
{
"y": 11509,
"height": 13108
},
{
"y": 12085,
"height": 13108
},
{
"y": 12388,
"height": 13108
}
],
"scans": 24,
"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: "Property Search", "About", "Contact".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Real Estate" category. Consider themes similar to: "Seller Guide", "Featured Listings", "Mortgage Options".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "title insurance", "comparative market analysis", "earnest money".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Calculate Payment", "Get Pre-Approved", "Start Search".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Real Estate" sector. Ideas similar but not limited to: "open house scheduler".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "market trends", "new listings", "buyer tips".
- **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.