/* ============================================================
   Michael Walker Realty & Auction — public IDX site
   Clean modern look (Montserrat / Roboto), brand red + near-black.
   ============================================================ */
:root{
  --red:#d02128; --red-2:#e0242c; --red-dark:#a5161c;
  --ink:#2b2b2b; --ink-2:#4a4a4a; --head-ink:#333;
  --muted:#7a7d82; --line:#e4e5e8; --bg:#ffffff; --bg-soft:#f6f6f7;
  --shadow:0 6px 22px rgba(20,22,26,.09); --shadow-lg:0 18px 46px rgba(20,22,26,.18);
  --radius:6px;
  --sans:'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --head:'Montserrat', 'Roboto', Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:var(--head);font-weight:500;line-height:1.2;margin:0 0 .4em;color:var(--head-ink);letter-spacing:.005em;}
.container{max-width:1240px;margin:0 auto;padding:0 24px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--head);font-weight:600;font-size:13.5px;text-transform:uppercase;letter-spacing:.06em;padding:13px 26px;border-radius:4px;border:1.5px solid transparent;cursor:pointer;transition:background .15s, box-shadow .15s;white-space:nowrap;}
.btn-red{background:var(--red);color:#fff;} .btn-red:hover{background:var(--red-dark);}
.btn-dark{background:var(--ink);color:#fff;} .btn-dark:hover{background:#000;}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink);} .btn-ghost:hover{border-color:var(--ink);}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:700;color:var(--red);font-family:var(--head);}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,.04);}
.site-header .container{display:flex;align-items:center;gap:22px;height:80px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand img{height:56px;width:auto;}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:34px;}
.nav-links a{font-family:var(--head);font-weight:500;font-size:15px;color:#3a3a3a;transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--red);}
.header-right{display:flex;align-items:center;gap:20px;margin-left:auto;}
.header-right .hr-link{font-family:var(--head);font-size:14px;color:#555;font-weight:500;}
.header-right .hr-link:hover{color:var(--red);}
.header-phone{font-family:var(--head);font-weight:700;color:var(--ink);white-space:nowrap;font-size:15px;}
.header-phone i{color:var(--red);margin-right:6px;}
.menu-toggle{display:none;background:none;border:none;font-size:22px;color:var(--ink);cursor:pointer;}
@media(max-width:1080px){ .nav-links,.header-phone,.header-right .hr-link{display:none;} .menu-toggle{display:block;margin-left:auto;}
  .nav-links.open{display:flex;position:absolute;top:80px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:16px 24px;gap:16px;box-shadow:var(--shadow);margin-left:0;} }

/* ---------- Hero ---------- */
.hero{position:relative;min-height:600px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:#333 center/cover no-repeat;}
.hero::after{content:"";position:absolute;inset:0;background:rgba(20,22,26,.34);}
.hero .container{position:relative;z-index:2;padding:70px 24px;width:100%;}
.hero h1{color:#fff;font-family:var(--head);font-weight:300;font-size:clamp(34px,5vw,60px);letter-spacing:.01em;margin:0 0 10px;text-shadow:0 2px 18px rgba(0,0,0,.3);}
.hero .sub{font-size:18px;color:rgba(255,255,255,.95);margin:0 0 26px;font-weight:300;}
/* flat search bar */
.qsearch{display:flex;align-items:stretch;max-width:940px;margin:0 auto;background:#fff;border-radius:3px 0 0 3px;box-shadow:0 14px 40px rgba(0,0,0,.25);}
.qsearch .qs-field{display:flex;align-items:center;gap:8px;padding:0 18px;border-right:1px solid #e6e6e6;}
.qsearch .qs-field:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px;}
.qsearch .qs-field.grow{flex:1;}
.qsearch .qs-field i{color:var(--muted);font-size:14px;}
.qsearch input,.qsearch select{border:none;outline:none;font-family:var(--sans);font-size:15px;color:var(--ink);width:100%;background:transparent;height:62px;cursor:pointer;}
.qsearch .qs-field.grow input{cursor:text;}
.qsearch .qs-btn{background:var(--red);color:#fff;border:none;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;padding:0 44px 0 34px;margin-right:-20px;cursor:pointer;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%);transition:background .15s;white-space:nowrap;}
.qsearch .qs-btn:hover{background:var(--red-dark);}
@media(max-width:720px){ .qsearch{flex-direction:column;border-radius:3px;} .qsearch .qs-field{border-right:none;border-bottom:1px solid #e6e6e6;} .qsearch .qs-btn{clip-path:none;padding:16px;margin-right:0;} }

/* ---------- Home-value band ---------- */
.hv-band{background:var(--bg-soft);border-bottom:1px solid var(--line);}
.hv-band .container{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;padding:16px 24px;font-size:16px;color:var(--ink-2);}
.hv-band b{color:var(--ink);font-weight:700;}
.hv-band .btn{padding:11px 22px;}

/* ---------- Section scaffold ---------- */
.section{padding:70px 0;}
.section.soft{background:var(--bg-soft);}
.section.dark{background:#232527;color:#fff;}
.sec-head{text-align:center;max-width:720px;margin:0 auto 40px;}
.sec-head h2{font-family:var(--head);font-weight:400;font-size:clamp(26px,3.2vw,38px);color:var(--head-ink);}
.sec-head p{color:var(--muted);font-size:16px;margin:.5em 0 0;}
.section.dark .sec-head h2{color:#fff;} .section.dark .sec-head p{color:rgba(255,255,255,.7);}

/* ---------- Explore tabs (underline style) ---------- */
.ftabs{display:flex;justify-content:center;gap:36px;margin-bottom:36px;flex-wrap:wrap;border-bottom:1px solid var(--line);}
.ftab{background:none;border:none;border-bottom:2px solid transparent;color:#777;font-family:var(--head);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding:0 2px 14px;cursor:pointer;transition:color .14s;margin-bottom:-1px;}
.ftab:hover{color:var(--ink);}
.ftab.active{color:var(--red);border-bottom-color:var(--red);}

/* ---------- Property cards ---------- */
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .18s, transform .18s;cursor:pointer;display:flex;flex-direction:column;}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
.pcard .ph{position:relative;aspect-ratio:16/11;background:#eef0f3 center/cover no-repeat;}
.pcard .badge{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 11px;border-radius:3px;font-family:var(--head);}
.pcard .badge.pending{background:#e08a00;}.pcard .badge.sold{background:#111;}.pcard .badge.coming_soon{background:#1f6fd6;}.pcard .badge.contingent{background:#6d28d9;}
.pcard .cams{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;padding:3px 9px;border-radius:3px;}
.pcard .pb{padding:15px 17px 17px;display:flex;flex-direction:column;gap:5px;}
.pcard .price{font-family:var(--head);font-size:22px;font-weight:700;color:var(--ink);}
.pcard .facts{display:flex;gap:14px;font-size:13.5px;color:var(--ink-2);}
.pcard .facts b{font-weight:700;}
.pcard .addr{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcard .city{font-size:13px;color:var(--muted);}
.viewall{text-align:center;margin-top:38px;}

/* ---------- Communities ---------- */
.chood{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;}
.ctile{position:relative;border-radius:6px;overflow:hidden;height:210px;cursor:pointer;display:block;background:#222 center/cover no-repeat;}
.ctile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.66));transition:background .2s;}
.ctile:hover::after{background:linear-gradient(180deg,rgba(208,33,40,.18),rgba(0,0,0,.7));}
.ctile .ci{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;color:#fff;}
.ctile .ci .cn{font-family:var(--head);font-size:21px;font-weight:600;}
.ctile .ci .cc{font-size:13px;opacity:.92;}

/* ---------- Market at a glance ---------- */
.market-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;text-align:center;}
.mstat .n{font-family:var(--head);font-size:44px;font-weight:300;color:#fff;line-height:1;}
.mstat .n .u{font-size:20px;color:var(--red-2);}
.mstat .l{color:rgba(255,255,255,.72);font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-top:8px;font-family:var(--head);}
.market-note{text-align:center;margin-top:34px;color:rgba(255,255,255,.8);}

/* ---------- Content block ---------- */
.content-2col{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;}
@media(max-width:840px){.content-2col{grid-template-columns:1fr;}}
.content-2col img{border-radius:8px;box-shadow:var(--shadow);}
.content-2col p{color:var(--ink-2);font-size:16px;line-height:1.8;}

/* ---------- Dark CTA banner ---------- */
.dark-cta{background:var(--red);color:#fff;}
.dark-cta .container{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:46px 24px;}
.dark-cta h2{color:#fff;font-family:var(--head);font-weight:400;font-size:30px;margin:0;}
.dark-cta p{color:rgba(255,255,255,.92);margin:.4em 0 0;max-width:560px;}
.dark-cta .btn{background:#fff;color:var(--red-dark);border-color:#fff;}
.dark-cta .btn:hover{background:#1b1b1b;color:#fff;border-color:#1b1b1b;}

/* ---------- Cards / forms ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.form-row{display:flex;gap:12px;flex-wrap:wrap;}
.field{flex:1;min-width:150px;display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2);font-family:var(--head);}
.field input,.field select,.field textarea{padding:12px 13px;border:1.5px solid var(--line);border-radius:5px;font-family:var(--sans);font-size:15px;outline:none;transition:border-color .15s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);}
.hp{position:absolute;left:-9999px;}
.toast-ok{background:#ecfdf3;border:1px solid #abefc6;color:#067647;padding:14px 16px;border-radius:6px;font-weight:600;}

/* ---------- Footer ---------- */
.site-footer{background:#232527;color:#c3c6cb;padding:58px 0 26px;}
.site-footer h4{color:#fff;font-family:var(--head);font-size:13px;text-transform:uppercase;letter-spacing:.09em;margin:0 0 16px;font-weight:600;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px;}
.site-footer a{color:#c3c6cb;font-size:14.5px;line-height:2;} .site-footer a:hover{color:#fff;}
/* Nav links in the link columns are written back-to-back in the markup, so they
   must stack — left inline they run together as one unreadable blob. */
.footer-grid > div > a{display:block;}
/* Long unbroken labels (the phone number, the email address) must wrap rather
   than push their column wide. */
.footer-grid > div{min-width:0;}
.site-footer a,.site-footer p,.site-footer span{overflow-wrap:break-word;}
/* The mark is a full-colour badge (black ring, red field, white monogram), so
   knocking it out to solid white erased it. Keep it as-is on a light chip —
   its black outer lettering has no contrast against the dark footer otherwise. */
.footer-brand img{height:62px;width:auto;margin-bottom:14px;background:#fff;border-radius:50%;padding:4px;}
.footer-social a{display:inline-flex;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);align-items:center;justify-content:center;margin-right:8px;transition:background .15s;}
.footer-social a:hover{background:var(--red);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:22px;font-size:13px;color:#868a90;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:30px;}.dark-cta .container{padding:34px 24px;}}
/* Two columns leave only ~140px each at phone widths, which wraps every nav
   label onto two lines — one column reads far better below 560px. */
@media(max-width:560px){.site-footer{padding:44px 0 22px;}.footer-grid{grid-template-columns:1fr;gap:26px;}.footer-bottom{margin-top:30px;justify-content:flex-start;}}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(14,15,18,.62);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;overflow:auto;}
.modal.open{display:flex;}
.modal-box{background:#fff;border-radius:8px;width:min(460px,100%);box-shadow:var(--shadow-lg);overflow:hidden;position:relative;}
.modal-box .mh{background:var(--ink);color:#fff;padding:24px;}
.modal-box .mh h3{color:#fff;margin:0;font-size:22px;font-weight:500;}
.modal-box .mh p{margin:6px 0 0;color:rgba(255,255,255,.75);font-size:14px;}
.modal-box .mb{padding:24px;}
.modal-close{position:absolute;top:16px;right:18px;background:rgba(255,255,255,.16);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:17px;cursor:pointer;}

/* ---------- Floating call widget ---------- */
.callwidget{position:fixed;right:22px;bottom:22px;z-index:400;}
.callwidget a{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;font-family:var(--head);font-weight:700;padding:14px 22px;border-radius:999px;box-shadow:0 10px 28px rgba(208,33,40,.4);font-size:15px;}
.callwidget a:hover{background:var(--red-dark);}
@media(max-width:600px){.callwidget a span{display:none;} .callwidget a{padding:16px;border-radius:50%;}}

/* ---------- Search page toolbar ---------- */
.search-toolbar{background:#fff;border-bottom:1px solid var(--line);}
.search-toolbar .container{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 24px;}
.search-toolbar input,.search-toolbar select{padding:10px 12px;border:1.5px solid var(--line);border-radius:5px;font-size:14px;font-family:var(--sans);}
.search-toolbar .grow{flex:1;min-width:200px;}

/* ============================================================
   Polish layer — motion, micro-interactions, loading states.
   ============================================================ */
:root{ --ease:cubic-bezier(.22,.61,.36,1); }
::selection{background:var(--red);color:#fff;}
html{scroll-behavior:smooth;}
section[id],div[id]{scroll-margin-top:96px;}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(208,33,40,.09);}

/* Header elevation on scroll */
.site-header{transition:box-shadow .25s var(--ease);}
.site-header.scrolled{box-shadow:0 3px 16px rgba(0,0,0,.09);}

/* Buttons — lift + press */
.btn{transition:background .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.99);}
.btn-red:hover{box-shadow:0 8px 22px rgba(208,33,40,.30);}
.btn i{transition:transform .18s var(--ease);}
.btn:hover i.fa-arrow-right{transform:translateX(3px);}

/* Property cards — image zoom layer (badge/cams stay put) */
.pcard .ph{overflow:hidden;}
.ph-img{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;transition:transform .55s var(--ease);}
.pcard:hover .ph-img{transform:scale(1.05);}
.pcard .badge,.pcard .cams{z-index:2;}
.pcard{transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);}
.pcard:hover{border-color:transparent;}
.pcard .price{transition:color .18s;}
.pcard:hover .price{color:var(--red);}

/* Community tiles — zoom layer */
.ctile{overflow:hidden;}
.ct-img{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;transition:transform .6s var(--ease);}
.ctile:hover .ct-img{transform:scale(1.06);}
.ctile::after{z-index:1;}
.ctile .ci{z-index:2;}

/* Explore tabs — smoother underline */
.ftab{transition:color .16s var(--ease),border-color .3s var(--ease);}

/* Footer links */
.site-footer a{transition:color .16s,padding-left .16s;}
.footer-grid > div a:hover{padding-left:3px;}

/* Skeleton loading */
.sk{position:relative;overflow:hidden;background:#eceef1;border-radius:6px;}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:skm 1.25s infinite;}
@keyframes skm{100%{transform:translateX(100%);}}
.skc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.skc .skc-ph{aspect-ratio:16/11;border-radius:0;}
.skc .skc-b{padding:15px 17px 17px;display:flex;flex-direction:column;gap:9px;}
.skc .skc-l{height:13px;}
@media(prefers-reduced-motion:reduce){ .sk::after{animation:none;} }

/* Scroll reveal — gated on html.rv-on so content is never hidden without JS */
html.rv-on .rv{opacity:0;transform:translateY(16px);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:var(--rvd,0ms);}
html.rv-on .rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){ html.rv-on .rv{opacity:1;transform:none;transition:none;} }

/* Market stats — stable digits for count-up */
.mstat .n{font-variant-numeric:tabular-nums;}

/* Mobile-only nav items (sign-up/phone inside hamburger menu) */
.nav-mobile-only{display:none !important;}
@media(max-width:1080px){ .nav-links.open .nav-mobile-only{display:flex !important;color:var(--red);font-weight:600;} }