/* =========================================================
   VILLU REALTY — Design System
   Palette sampled from brand mark:
   Ink black #0E0D0C · White #FFFFFF · Champagne #DFCCAE
   Deep champagne #B99C6B · Stone #F5F3EF · Slate #5B5F66
   Type: Space Grotesk (display/headings) + Inter (body)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0E0D0C;
  --white:#FFFFFF;
  --champagne:#DFCCAE;
  --champagne-deep:#B99C6B;
  --stone:#F5F3EF;
  --slate:#5B5F66;
  --line:#26241F;
  --line-light:#E4E0D8;
  --max:1240px;
  --gutter:clamp(20px,5vw,64px);
  --serif:'Space Grotesk',sans-serif;
  --sans:'Inter',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;max-width:62ch;}
ul{margin:0;padding:0;}
li{list-style:none;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:1rem;}

:focus-visible{outline:2px solid var(--champagne-deep);outline-offset:3px;}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--ink);color:var(--white);
  padding:12px 18px;z-index:999;
}
.skip-link:focus{left:12px;top:12px;}

/* ---------- utility bar ---------- */
.utility-bar{
  background:var(--ink);
  color:var(--stone);
  font-size:.78rem;
  letter-spacing:.02em;
}
.utility-bar .wrap{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:8px;padding-bottom:8px;
  gap:16px;flex-wrap:wrap;
}
.utility-bar a{opacity:.85;transition:opacity .15s;}
.utility-bar a:hover{opacity:1;color:var(--champagne);}
.utility-links{display:flex;gap:20px;flex-wrap:wrap;}

/* ---------- header / nav ---------- */
.header-overlay{position:absolute;top:0;left:0;right:0;z-index:100;}
.header-overlay.is-fixed{position:fixed;}

.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line-light);
  box-shadow:0 1px 0 rgba(14,13,12,.03), 0 4px 16px rgba(14,13,12,.04);
  transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.brand-plate{display:inline-flex;align-items:center;}

/* transparent variant: floats over the hero photo until scrolled */
.site-header--transparent{
  position:static;background:transparent;border-bottom:1px solid transparent;box-shadow:none;
}
.site-header--transparent .nav-list a{color:#fff;}
.site-header--transparent .nav-cta{border-color:#fff;color:#fff;}
.site-header--transparent .nav-cta:hover{background:#fff;color:var(--ink);}
.site-header--transparent .nav-toggle span,
.site-header--transparent .nav-toggle span::before,
.site-header--transparent .nav-toggle span::after{background:#fff;}
.site-header--transparent .brand-plate{background:rgba(255,255,255,.94);padding:12px 46px;}
.site-header--transparent .nav-list.open a{color:var(--ink);} /* readable once the mobile menu opens on white */
.site-header--transparent .nav-list.open{background:var(--white);}
.utility-bar--transparent{background:transparent;border-bottom:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.92);}
.utility-bar--transparent a{color:#fff;}

/* once scrolled past the hero, the overlay becomes a normal solid header */
.header-overlay.is-fixed .site-header--transparent{
  background:var(--white);border-bottom:1px solid var(--line-light);
  box-shadow:0 1px 0 rgba(14,13,12,.03), 0 4px 16px rgba(14,13,12,.04);
}
.header-overlay.is-fixed .site-header--transparent .nav-list a{color:var(--ink);}
.header-overlay.is-fixed .site-header--transparent .nav-cta{border-color:var(--ink);color:var(--ink);}
.header-overlay.is-fixed .site-header--transparent .nav-cta:hover{background:var(--ink);color:var(--white);}
.header-overlay.is-fixed .site-header--transparent .nav-toggle span,
.header-overlay.is-fixed .site-header--transparent .nav-toggle span::before,
.header-overlay.is-fixed .site-header--transparent .nav-toggle span::after{background:var(--ink);}
.header-overlay.is-fixed .site-header--transparent .brand-plate{background:transparent;padding:0;}
.header-overlay.is-fixed .utility-bar--transparent{background:var(--ink);border-bottom:none;color:var(--stone);}
.header-overlay.is-fixed .utility-bar--transparent a{color:inherit;}

.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:12px;padding-bottom:12px;
  gap:24px;
}
.brand{display:flex;align-items:center;}
.brand img{height:75px;width:auto;display:block;}

.nav-list{display:flex;align-items:center;gap:2px;}
.nav-list a{
  display:inline-block;
  padding:10px 16px;
  font-size:.92rem;
  font-weight:500;
  position:relative;
}
.nav-list a::after{
  content:'';position:absolute;left:16px;right:16px;bottom:6px;height:2px;
  background:var(--champagne-deep);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.nav-list a:hover::after,
.nav-list a.active::after{transform:scaleX(1);}
.nav-list a.active{font-weight:600;}

.nav-cta{
  border:1px solid var(--ink);
  padding:9px 18px;
  font-size:.88rem;font-weight:600;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--ink);color:var(--white);}

.nav-toggle{
  display:none;
  background:none;border:none;
  width:32px;height:24px;position:relative;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:.2s;
}
.nav-toggle span{top:11px;}
.nav-toggle span::before{top:-9px;}
.nav-toggle span::after{top:9px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg);top:0;}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg);top:0;}

@media (max-width:920px){
  .nav-list{
    position:absolute;top:100%;left:0;right:0;
    background:var(--white);border-bottom:1px solid var(--line-light);
    flex-direction:column;align-items:stretch;
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .nav-list.open{max-height:520px;}
  .nav-list a{padding:14px var(--gutter);border-top:1px solid var(--line-light);}
  .nav-list a::after{display:none;}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;
  font-size:.92rem;font-weight:600;letter-spacing:.01em;
  border:1px solid var(--ink);
  transition:background .18s,color .18s,border-color .18s;
}
.btn-primary{background:var(--ink);color:var(--white);}
.btn-primary:hover{background:var(--champagne-deep);border-color:var(--champagne-deep);color:var(--ink);}
.btn-outline{background:transparent;color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--white);}
.btn-gold{background:var(--champagne);border-color:var(--champagne);color:var(--ink);}
.btn-gold:hover{background:var(--champagne-deep);border-color:var(--champagne-deep);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- hero banner (homepage only) ---------- */
.hero-banner{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  color:#fff;
  background-color:var(--ink);
  background-size:cover;
  background-position:center;
}
.hero-banner::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(14,13,12,.82) 0%, rgba(14,13,12,.55) 42%, rgba(14,13,12,.6) 70%, rgba(14,13,12,.88) 100%);
}
.hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:150px 20px 70px;}
.hero-inner .eyebrow{color:var(--champagne);font-size:.82rem;letter-spacing:.16em;font-weight:600;margin-bottom:16px;}
.hero-inner h1{color:#fff;font-size:clamp(2.3rem,5.2vw,3.7rem);max-width:18ch;margin:0 auto .5em;}
.hero-inner p.lead{color:rgba(255,255,255,.9);font-size:1.12rem;max-width:54ch;margin:0 auto;}

/* search widget */
.hero-search{
  position:relative;z-index:2;
  background:rgba(255,255,255,.98);
  padding:22px 24px 24px;
  max-width:920px;margin:34px auto 0;text-align:left;
}
.hero-search-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line-light);}
.hero-tab{
  padding:10px 20px;font-weight:600;font-size:.88rem;background:none;border:none;
  color:var(--slate);border-bottom:2px solid transparent;margin-bottom:-1px;
}
.hero-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--champagne-deep);}
.hero-search-form{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:12px;}
.hero-search-form select{
  width:100%;padding:13px 14px;border:1px solid var(--line-light);font-size:.9rem;
  background:var(--white);color:var(--ink);
}
.hero-search-form button{padding:13px 30px;white-space:nowrap;}
@media (max-width:820px){
  .hero-search-form{grid-template-columns:1fr 1fr;}
  .hero-search-form button{grid-column:1/-1;justify-content:center;}
}
@media (max-width:520px){
  .hero-search-form{grid-template-columns:1fr;}
}

.popular-searches{
  position:relative;z-index:2;margin-top:22px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.popular-searches span.label{color:rgba(255,255,255,.7);font-size:.82rem;align-self:center;margin-right:2px;}
.popular-searches a{
  border:1px solid rgba(255,255,255,.45);color:#fff;font-size:.82rem;padding:8px 16px;
  background:rgba(255,255,255,.08);transition:background .15s,border-color .15s;
}
.popular-searches a:hover{background:rgba(255,255,255,.2);border-color:#fff;}

/* ---------- page hero (interior pages, left aligned) ---------- */
.page-hero{
  padding:64px 0 56px;
  border-bottom:1px solid var(--line-light);
  background:var(--stone);
  text-align:center;
}
.page-hero .eyebrow{font-size:.78rem;letter-spacing:.14em;color:var(--champagne-deep);font-weight:600;margin-bottom:10px;}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);max-width:20ch;margin-left:auto;margin-right:auto;}
.page-hero p.lead{color:var(--slate);font-size:1.05rem;max-width:58ch;margin-left:auto;margin-right:auto;}

/* ---------- sections ---------- */
section{padding:20px 0;}
.section-tight{padding:48px 0;}
.section-border{border-bottom:1px solid var(--line-light);}
.section-dark{background:var(--ink);color:var(--stone);}
.section-dark h2,.section-dark h3{color:var(--white);}
.section-dark p{color:#C9C6BE;}
.section-stone{background:var(--white);}

.section-head{max-width:640px;margin:0 auto 44px;text-align:center;}
.section-head .eyebrow{font-size:.78rem;letter-spacing:.14em;color:var(--champagne-deep);font-weight:600;margin-bottom:10px;}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-left:auto;margin-right:auto;}

/* ---------- grids ---------- */
.grid{display:grid;gap:32px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;}
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

/* ---------- why-villu image cards (photo + content overlay) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.why-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.why-grid{grid-template-columns:1fr;}}
.why-card{
  position:relative;aspect-ratio:4/5;overflow:hidden;isolation:isolate;
  background:var(--ink);
}
.why-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.19,1,.22,1);
}
.why-card-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(14,13,12,.05) 0%, rgba(14,13,12,.2) 38%, rgba(14,13,12,.88) 100%);
}
.why-card-text{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 24px;
}
.why-card-num{
  font-family:var(--serif);font-weight:700;font-size:.82rem;color:var(--champagne);
  border:1px solid rgba(255,255,255,.55);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.why-card-text h3{color:#fff;font-size:1.12rem;margin-bottom:.4em;}
.why-card-text p{margin:0;color:rgba(255,255,255,.82);font-size:.92rem;line-height:1.5;}
.why-card-text p a{color:var(--champagne);text-decoration:underline;}
.why-card:hover img{transform:scale(1.06);}

/* ---------- process steps (buy page) ---------- */
.steps{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-light);}
.step{
  flex:1 1 180px;
  padding:28px 22px;
  border-right:1px solid var(--line-light);
  position:relative;
}
.step:last-child{border-right:none;}
.step .step-num{font-family:var(--serif);font-size:2rem;font-weight:700;color:var(--champagne);
  -webkit-text-stroke:1.4px var(--ink);color:transparent;margin-bottom:14px;display:block;}
.step h4{font-size:1rem;margin-bottom:.35em;}
.step p{font-size:.9rem;color:var(--slate);margin:0;}
@media (max-width:800px){
  .steps{flex-direction:column;}
  .step{border-right:none;border-bottom:1px solid var(--line-light);}
  .step:last-child{border-bottom:none;}
}

/* ---------- agent / team cards ---------- */
.agent-card{
  border:1px solid var(--line-light);
  display:flex;flex-direction:column;
}
.agent-photo{
  aspect-ratio:4/5;
  background:var(--stone);
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line-light);
  overflow:hidden;
}
.agent-photo img{width:100%;height:100%;object-fit:cover;}
.agent-initial{font-family:var(--serif);font-size:3.4rem;font-weight:700;color:var(--champagne-deep);}
.agent-body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column;}
.agent-body h3{font-size:1.15rem;margin-bottom:.15em;}
.agent-title{font-size:.85rem;color:var(--champagne-deep);font-weight:600;margin-bottom:10px;}
.agent-body p{font-size:.9rem;color:var(--slate);margin-bottom:14px;}
.agent-body .btn{margin-top:auto;align-self:flex-start;padding:10px 18px;font-size:.82rem;}

.broker-feature{
  display:grid;grid-template-columns:280px 1fr;gap:36px;
  border:1px solid var(--line-light);padding:32px;margin-bottom:44px;
}
@media (max-width:700px){.broker-feature{grid-template-columns:1fr;}}

/* ---------- sponsoring broker split (image side / content side) ---------- */
.broker-media{
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.broker-media::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(223,204,174,.14), transparent 60%);
}
.broker-media .agent-initial{
  position:relative;z-index:1;
  font-family:var(--serif);font-weight:700;font-size:7rem;color:var(--champagne);
  border:1px solid rgba(223,204,174,.4);
  width:180px;height:180px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.broker-split .split-promo-content h2{max-width:none;font-size:clamp(1.6rem,2.8vw,2.2rem);}

/* ---------- agent detail page ---------- */
.agent-detail{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start;}
@media (max-width:820px){.agent-detail{grid-template-columns:1fr;}}
.agent-detail .agent-photo{aspect-ratio:4/5;}
.spec-list{border-top:1px solid var(--line-light);margin-top:20px;}
.spec-list li{
  display:flex;justify-content:space-between;gap:20px;
  padding:12px 0;border-bottom:1px solid var(--line-light);
  font-size:.92rem;
}
.spec-list li span:first-child{color:var(--slate);}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;}
.tag{
  border:1px solid var(--line-light);
  padding:6px 14px;font-size:.8rem;color:var(--ink);
}

/* ---------- forms ---------- */
.form-panel{border:1px solid var(--line-light);padding:36px;background:var(--white);}
.field{margin-bottom:20px;}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;border:1px solid var(--line-light);background:var(--white);
  font-size:.96rem;color:var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--champagne-deep);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:600px){.field-row{grid-template-columns:1fr;}}
.form-note{font-size:.82rem;color:var(--slate);margin-top:10px;}
.form-success{
  border:1px solid var(--champagne-deep);background:var(--stone);
  padding:18px 20px;font-size:.92rem;margin-bottom:20px;display:none;
}
.form-success.show{display:block;}

/* ---------- info list (contact page) ---------- */
.info-list li{
  display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-light);
}
.info-list .label{font-weight:600;min-width:110px;font-size:.9rem;}
.info-list .value{color:var(--slate);font-size:.9rem;}
.map-frame{border:1px solid var(--line-light);height:320px;width:100%;}
.map-frame iframe{width:100%;height:100%;border:0;}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--ink);color:var(--white);
  padding:64px 0;text-align:center;
}
.cta-band h2{color:var(--white);}
.cta-band p{color:#C9C6BE;margin-left:auto;margin-right:auto;}
.cta-band .btn-row{justify-content:center;margin-top:22px;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#C9C6BE;padding-top:64px;}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:44px;border-bottom:1px solid #2A2822;
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{color:var(--white);font-size:.85rem;letter-spacing:.06em;margin-bottom:16px;}
.footer-grid li{margin-bottom:10px;font-size:.88rem;}
.footer-grid a:hover{color:var(--champagne);}
.footer-brand img{height:124px;margin-bottom:3px;background:var(--white);padding:4px 20px;display:inline-block;}
.footer-brand p{font-size:.85rem;color:#9C998F;max-width:34ch;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding:24px 0;font-size:.78rem;color:#8A876F;
}
.footer-bottom a:hover{color:var(--champagne);}

/* ---------- misc ---------- */
.divider{height:1px;background:var(--line-light);border:0;margin:0;}
.eyebrow{font-size:.78rem;letter-spacing:.14em;color:var(--champagne-deep);font-weight:600;}
.center{text-align:center;}
.mt-0{margin-top:0;}

/* ---------- redirect page ---------- */
.redirect-screen{
  min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 20px;
}
.redirect-screen img{height:64px;margin-bottom:24px;}
.spinner{
  width:28px;height:28px;border:2px solid var(--line-light);border-top-color:var(--champagne-deep);
  border-radius:50%;animation:spin 1s linear infinite;margin:20px auto 0;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- agent portal ---------- */
.portal-shell{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start;}
@media (max-width:960px){.portal-shell{grid-template-columns:1fr;}}
.portal-block{margin-bottom:52px;}
.portal-block h2{font-size:1.4rem;}
.resource-table{width:100%;border-collapse:collapse;font-size:.92rem;}
.resource-table th{
  text-align:left;font-size:.78rem;letter-spacing:.06em;color:var(--slate);
  border-bottom:1px solid var(--line-light);padding:10px 12px;
}
.resource-table td{padding:12px;border-bottom:1px solid var(--line-light);}
.resource-table tr:hover td{background:var(--stone);}
.link-list li{border-bottom:1px solid var(--line-light);}
.link-list a{display:flex;justify-content:space-between;padding:12px 4px;font-size:.92rem;}
.link-list a:hover{color:var(--champagne-deep);}
.doc-panel{border:1px solid var(--line-light);padding:24px;position:sticky;top:96px;}
.doc-panel h3{font-size:1rem;margin-bottom:16px;}
.doc-panel li{margin-bottom:10px;}
.doc-panel a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1px solid var(--line-light);font-size:.86rem;
}
.doc-panel a:hover{border-color:var(--champagne-deep);color:var(--champagne-deep);}
.policy-strip{
  display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-light);margin-bottom:52px;
}
.policy-strip div{
  flex:1 1 160px;padding:22px;text-align:center;border-right:1px solid var(--line-light);
}
.policy-strip div:last-child{border-right:none;}
.policy-strip strong{display:block;font-family:var(--serif);font-size:1.15rem;margin-bottom:4px;}
.policy-strip span{font-size:.8rem;color:var(--slate);}
@media (max-width:700px){.policy-strip div{border-right:none;border-bottom:1px solid var(--line-light);}}

.login-gate{
  max-width:420px;margin:0 auto;border:1px solid var(--line-light);padding:40px 36px;
}
.login-gate h1{font-size:1.5rem;text-align:center;}
.login-gate p{text-align:center;color:var(--slate);font-size:.92rem;margin:0 auto 24px;}
.login-error{color:#B3261E;font-size:.85rem;display:none;margin-top:-8px;margin-bottom:14px;}
.login-error.show{display:block;}
#portal-content{display:none;}
#portal-content.show{display:block;}

/* ---------- 404-style pages / small helpers ---------- */
.badge{
  display:inline-block;border:1px solid var(--champagne-deep);color:var(--champagne-deep);
  font-size:.75rem;font-weight:600;padding:4px 10px;letter-spacing:.04em;
}

/* =========================================================
   PHASE 2 — advanced components
   Filters, listings, calculators, accordions, stats,
   testimonials, neighborhoods, tabs, back-to-top.
   ========================================================= */

/* ---------- sample-data badge (honesty label on mock listings) ---------- */
.sample-badge{
  position:absolute;top:12px;left:12px;
  background:var(--ink);color:var(--champagne);
  font-size:.68rem;font-weight:700;letter-spacing:.08em;
  padding:5px 10px;z-index:2;
}
.notice-strip{
  border:1px dashed var(--line-light);background:var(--stone);
  padding:14px 18px;font-size:.84rem;color:var(--slate);margin-bottom:32px;
}
.notice-strip strong{color:var(--ink);}

/* ---------- stat band ---------- */
.stat-band{border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{
  padding:36px 24px;text-align:center;border-right:1px solid var(--line-light);
}
.stat:last-child{border-right:none;}
.stat .stat-num{
  font-family:var(--serif);font-weight:700;font-size:2.1rem;color:var(--ink);
  display:block;
}
.stat .stat-num span{color:var(--champagne-deep);}
.stat .stat-label{font-size:.82rem;color:var(--slate);margin-top:4px;display:block;}
@media (max-width:800px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  .stat{border-bottom:1px solid var(--line-light);}
}

/* ---------- filter bar ---------- */
.filter-bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:end;
  border:1px solid var(--line-light);padding:22px;margin-bottom:32px;background:var(--white);
}
.filter-field{display:flex;flex-direction:column;gap:6px;min-width:140px;flex:1;}
.filter-field label{font-size:.76rem;font-weight:600;letter-spacing:.03em;color:var(--slate);}
.filter-field select,.filter-field input{
  padding:10px 12px;border:1px solid var(--line-light);font-size:.9rem;background:var(--white);
}
.filter-actions{display:flex;gap:10px;}
.filter-results{font-size:.88rem;color:var(--slate);margin-bottom:20px;}
.filter-results strong{color:var(--ink);}

/* ---------- listing cards ---------- */
.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media (max-width:980px){.listing-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.listing-grid{grid-template-columns:1fr;}}
.listing-card{border:1px solid var(--line-light);display:flex;flex-direction:column;background:var(--white);}
.listing-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--line-light);background:var(--stone);}
.listing-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.listing-card:hover .listing-photo img{transform:scale(1.04);}
.listing-status{
  position:absolute;top:12px;right:12px;background:var(--white);border:1px solid var(--line-light);
  font-size:.7rem;font-weight:700;letter-spacing:.05em;padding:5px 10px;
}
.listing-price{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(0deg,rgba(14,13,12,.85),transparent);
  color:var(--white);padding:28px 16px 12px;font-family:var(--serif);font-weight:700;font-size:1.3rem;
}
.listing-body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column;}
.listing-body h3{font-size:1.02rem;margin-bottom:.2em;}
.listing-address{font-size:.84rem;color:var(--slate);margin-bottom:12px;}
.listing-specs{display:flex;gap:16px;font-size:.84rem;color:var(--ink);margin-bottom:14px;border-top:1px solid var(--line-light);padding-top:12px;}
.listing-specs span strong{display:block;font-family:var(--serif);font-size:1rem;}
.listing-body .btn{margin-top:auto;font-size:.8rem;padding:10px 16px;}
.listing-empty{
  border:1px dashed var(--line-light);padding:60px 30px;text-align:center;color:var(--slate);grid-column:1/-1;
}

/* ---------- calculator panels ---------- */
.calc-panel{border:1px solid var(--line-light);padding:32px;background:var(--white);}
.calc-panel h3{font-size:1.1rem;}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media (max-width:520px){.calc-row{grid-template-columns:1fr;}}
.calc-field label{display:flex;justify-content:space-between;font-size:.82rem;font-weight:600;margin-bottom:6px;}
.calc-field label output{font-weight:700;color:var(--champagne-deep);}
.calc-field input[type="range"]{width:100%;accent-color:var(--champagne-deep);}
.calc-field input[type="number"],.calc-field select{
  width:100%;padding:10px 12px;border:1px solid var(--line-light);font-size:.9rem;
}
.calc-result{
  border-top:1px solid var(--line-light);margin-top:18px;padding-top:20px;
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;
}
.calc-result .result-label{font-size:.85rem;color:var(--slate);}
.calc-result .result-num{font-family:var(--serif);font-weight:700;font-size:2rem;}
.calc-result .result-num span{color:var(--champagne-deep);}
.calc-breakdown{margin-top:14px;font-size:.82rem;color:var(--slate);}
.calc-breakdown div{display:flex;justify-content:space-between;padding:4px 0;}
.calc-disclaimer{font-size:.78rem;color:var(--slate);margin-top:16px;}

/* ---------- accordion (FAQ) ---------- */
.accordion{border-top:1px solid var(--line-light);}
.accordion-item{border-bottom:1px solid var(--line-light);}
.accordion-trigger{
  width:100%;text-align:left;background:none;border:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 4px;font-size:1rem;font-weight:600;font-family:var(--sans);color:var(--ink);
}
.accordion-trigger .plus{
  font-family:var(--serif);font-size:1.3rem;color:var(--champagne-deep);flex-shrink:0;
  transition:transform .2s ease;
}
.accordion-trigger[aria-expanded="true"] .plus{transform:rotate(45deg);}
.accordion-panel{
  max-height:0;overflow:hidden;transition:max-height .25s ease;
}
.accordion-panel p{padding:0 4px 20px;color:var(--slate);font-size:.94rem;max-width:70ch;}

/* ---------- testimonials ---------- */
.testimonial-track{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media (max-width:900px){.testimonial-track{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.testimonial-track{grid-template-columns:1fr;}}
.testimonial{border:1px solid var(--line-light);padding:28px;background:var(--white);}
.testimonial .stars{color:var(--champagne-deep);letter-spacing:2px;margin-bottom:14px;font-size:.9rem;}
.testimonial p{font-size:.95rem;color:var(--ink);margin-bottom:16px;}
.testimonial cite{font-style:normal;font-size:.82rem;color:var(--slate);font-weight:600;}

/* ---------- neighborhoods / area search grid ---------- */
.area-section{padding:25px 0 25px;border-bottom:1px solid var(--line-light);}
.area-section-head{max-width:var(--max);margin:0 auto 40px;padding:0 var(--gutter);text-align:center;}
.area-section-head h2{margin:0 auto;max-width:34ch;}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink);}
@media (max-width:900px){.area-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.area-grid{grid-template-columns:1fr;}}
.area-card{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  isolation:isolate;background:var(--ink);
}
.area-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.19,1,.22,1),filter .8s ease;
  filter:saturate(1.02);
}
.area-card-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(14,13,12,.06) 0%, rgba(14,13,12,.16) 45%, rgba(14,13,12,.72) 100%);
  transition:background .5s ease;
}
.area-card-text{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;text-align:center;
  padding:0 20px 34px;
}
.area-card-name{
  font-family:var(--serif);color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);
  letter-spacing:.01em;line-height:1.15;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.area-card-cta{
  margin-top:10px;color:rgba(255,255,255,.88);font-size:.74rem;
  letter-spacing:.22em;font-weight:600;
  padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.55);
  transition:border-color .3s ease,color .3s ease;
}
.area-card:hover img{transform:scale(1.06);}
.area-card:hover .area-card-overlay{background:linear-gradient(180deg, rgba(14,13,12,.02) 0%, rgba(14,13,12,.1) 40%, rgba(14,13,12,.82) 100%);}
.area-card:hover .area-card-cta{border-color:var(--champagne);color:var(--champagne);}

/* ---------- split promo (image + content, alternating) ---------- */
.split-promo{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.split-promo-media{position:relative;overflow:hidden;min-height:360px;}
.split-promo-media img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;}
.split-promo-content{
  display:flex;flex-direction:column;justify-content:center;
  padding:64px clamp(28px,6vw,96px);background:var(--stone);
}
.split-promo-content .eyebrow{color:var(--champagne-deep);}
.split-promo-content h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.15;margin-bottom:20px;max-width:14ch;}
.split-promo-content p{color:var(--slate);font-size:1.02rem;line-height:1.6;max-width:46ch;margin-bottom:30px;}
.split-promo-content .btn{align-self:flex-start;}
.split-promo--light .split-promo-content{background:var(--white);}
@media (max-width:900px){
  .split-promo{grid-template-columns:1fr;}
  .split-promo-media{min-height:300px;order:-1;}
  .split-promo-content{padding:48px var(--gutter);}
}

/* ---------- insights / blog preview ---------- */
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media (max-width:900px){.insight-grid{grid-template-columns:1fr;}}
.insight-card{border:1px solid var(--line-light);}
.insight-photo{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line-light);}
.insight-photo img{width:100%;height:100%;object-fit:cover;}
.insight-body{padding:20px 22px 24px;}
.insight-tag{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--champagne-deep);}
.insight-body h3{font-size:1.05rem;margin:.4em 0;}
.insight-body p{font-size:.88rem;color:var(--slate);margin-bottom:14px;}
.insight-body a{font-size:.84rem;font-weight:600;}
.insight-body a:hover{color:var(--champagne-deep);}

/* ---------- tabs (agent portal) ---------- */
.tab-bar{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line-light);margin-bottom:36px;}
.tab-btn{
  padding:12px 20px;font-size:.88rem;font-weight:600;background:none;border:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--slate);
}
.tab-btn[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--champagne-deep);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- checklist ---------- */
.checklist{border:1px solid var(--line-light);}
.checklist li{
  display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-bottom:1px solid var(--line-light);
}
.checklist li:last-child{border-bottom:none;}
.checklist input[type="checkbox"]{margin-top:3px;width:16px;height:16px;accent-color:var(--champagne-deep);}
.checklist .check-body strong{display:block;font-size:.94rem;margin-bottom:2px;}
.checklist .check-body span{font-size:.84rem;color:var(--slate);}
.checklist label.done strong,.checklist label.done span{text-decoration:line-through;opacity:.55;}

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed;right:22px;bottom:22px;z-index:80;
  width:46px;height:46px;border:1px solid var(--ink);background:var(--white);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease;
}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top:hover{background:var(--ink);color:var(--white);}

/* ---------- newsletter ---------- */
.newsletter{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.newsletter input{
  flex:1;min-width:180px;padding:11px 14px;border:1px solid #3A382F;background:transparent;color:var(--white);
}
.newsletter input::placeholder{color:#8A876F;}
.newsletter button{
  padding:11px 20px;background:var(--champagne);border:1px solid var(--champagne);color:var(--ink);font-weight:600;font-size:.86rem;
}
.newsletter button:hover{background:var(--champagne-deep);border-color:var(--champagne-deep);}
.newsletter-note{font-size:.76rem;color:#8A876F;margin-top:8px;}

/* ---------- scroll reveal (single, restrained) ----------
   Content is ALWAYS fully opaque and readable — this only ever
   animates a small position shift, never visibility. That means
   a full-page screenshot, print, slow/blocked script, or a
   screen reader never sees "missing" content, only a static
   final position if the animation never ran. */
[data-reveal].reveal-pending{transform:translateY(14px);transition:transform .5s ease;}
[data-reveal].reveal-pending.in-view{transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  [data-reveal].reveal-pending{transform:none;transition:none;}
}

/* ---------- 404 ---------- */
.error-screen{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;}
.error-screen .error-code{font-family:var(--serif);font-size:5rem;font-weight:700;color:var(--champagne);-webkit-text-stroke:2px var(--ink);}