/* ==========================================================================
   Clayton Cissell | REALTOR® — Design System
   Black / white / charcoal / gray. Architectural, editorial, restrained.
   ========================================================================== */

:root{
  --black:#0a0a0b;
  --ink:#141416;
  --charcoal:#242426;
  --gray-800:#3a3a3d;
  --gray-600:#5c5d61;
  --gray-500:#7c7d81;
  --gray-400:#a4a5a9;
  --gray-300:#c7c8cb;
  --gray-200:#dcdcde;
  --gray-100:#ececed;
  --off-white:#f6f5f3;
  --white:#ffffff;
  --line:#dddddd;
  --line-soft:#e9e9e9;

  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-serif:'Fraunces','Iowan Old Style',Georgia,'Times New Roman',serif;

  --container:1240px;
  --gutter:clamp(20px,5vw,64px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:16px}
svg{display:block}

h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:0;
}
p{margin:0}

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

/* -------------------- Utility type scale -------------------- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gray-600);
}
.eyebrow::before{
  content:'';
  width:28px;
  height:1px;
  background:var(--gray-500);
  flex:0 0 auto;
}
.eyebrow.on-dark{color:var(--gray-300)}
.eyebrow.on-dark::before{background:var(--gray-400)}

.index-mark{
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--gray-400);
}

.lede{
  font-size:clamp(17px,1.8vw,20px);
  color:var(--gray-600);
  line-height:1.65;
  max-width:56ch;
}
.on-dark .lede, .lede.on-dark{color:var(--gray-300)}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 28px;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid var(--black);
  border-radius:2px;
  white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--black);color:var(--white)}
.btn-primary:hover{background:var(--charcoal);border-color:var(--charcoal)}
.btn-outline{background:transparent;color:var(--black);border-color:var(--black)}
.btn-outline:hover{background:var(--black);color:var(--white)}
.btn-on-dark{border-color:var(--white);color:var(--white)}
.btn-on-dark:hover{background:var(--white);color:var(--black)}
.btn-on-dark.btn-primary{background:var(--white);color:var(--black)}
.btn-on-dark.btn-primary:hover{background:var(--gray-200);border-color:var(--gray-200)}
.btn-block{width:100%}
.btn-arrow{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(3px)}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.02em;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.text-link .btn-arrow{display:inline-block;transition:transform .25s var(--ease)}
.text-link:hover .btn-arrow{transform:translateX(3px)}

.cta-row{display:flex;flex-wrap:wrap;gap:14px}

/* -------------------- Header / Nav -------------------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:200;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.site-header .container{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(24px,2.4vw,44px);
  height:88px;
  max-width:1480px;
  padding-left:clamp(24px,3vw,52px);
  padding-right:clamp(24px,3vw,52px);
}
.site-brand-cluster{
  display:flex;
  align-items:center;
  gap:20px;
  min-width:0;
  flex:0 0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-serif);
  font-size:19px;
  letter-spacing:.01em;
  flex:0 0 auto;
}
.brand-mark{height:46px;width:auto;display:block}
.site-brand-affiliates{
  display:flex;
  align-items:center;
  gap:18px;
  border-left:1px solid #d6d6d6;
  padding-left:20px;
  min-width:0;
}
.site-brand-affiliate{display:block;width:auto;object-fit:contain;flex:0 0 auto}
.site-brand-affiliate.modern{height:38px;max-width:94px;border-radius:0}
.site-brand-affiliate.kw{height:27px;max-width:158px}
.brand small{
  display:block;
  font-family:var(--font-sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gray-500);
  margin-top:1px;
}
.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,1.55vw,30px);
  min-width:0;
}
.nav-links a{
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--gray-700,var(--ink));
  position:relative;
  padding:6px 0;
  white-space:nowrap;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:var(--black);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current="page"]{color:var(--black)}
.nav-cta{display:flex;align-items:center;justify-content:flex-end;gap:0}
.nav-cta > a.btn{white-space:nowrap;padding:11px 18px !important;font-size:13px}
.nav-phone{display:none}

.nav-toggle{
  display:none;
  width:42px;height:42px;
  border:1px solid var(--line);
  background:transparent;
  align-items:center;justify-content:center;
  border-radius:2px;
}
.nav-toggle span{
  display:block;width:18px;height:1.5px;background:var(--black);position:relative;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:18px;height:1.5px;background:var(--black);transition:transform .25s var(--ease);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.mobile-nav{
  position:fixed;
  inset:88px 0 0 0;
  background:var(--white);
  z-index:190;
  padding:36px var(--gutter) 40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
.mobile-nav-links{display:flex;flex-direction:column}
.mobile-nav-links a{
  font-family:var(--font-serif);
  font-size:clamp(30px,8vw,40px);
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.mobile-nav-foot{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.mobile-nav-foot a{font-size:15px;font-weight:600}

body.nav-open{overflow:hidden}

@media (max-width:1240px) and (min-width:1061px){
  .site-header .container{height:84px;gap:18px;padding-left:26px;padding-right:26px}
  .brand-mark{height:40px}
  .site-brand-cluster{gap:12px}
  .site-brand-affiliates{gap:10px;padding-left:12px}
  .site-brand-affiliate.modern{height:30px;max-width:74px}
  .site-brand-affiliate.kw{height:22px;max-width:128px}
  .nav-links{gap:16px}
  .nav-links a{font-size:13px}
  .nav-cta > a.btn{padding:10px 14px !important;font-size:12.5px}
  .mobile-nav{inset:84px 0 0 0}
}

@media (max-width:1060px){
  .site-header .container{
    display:flex;
    justify-content:space-between;
    height:82px;
    gap:24px;
  }
  .nav-links,.nav-cta > a.btn{display:none}
  .nav-toggle{display:flex}
  .brand-mark{height:42px}
  .site-brand-cluster{gap:14px}
  .site-brand-affiliates{gap:12px;padding-left:14px}
  .site-brand-affiliate.modern{height:32px;max-width:79px}
  .site-brand-affiliate.kw{height:23px;max-width:134px}
  .mobile-nav{inset:82px 0 0 0}
}

@media (max-width:640px){
  .site-header .container{height:72px;padding-left:18px;padding-right:18px;gap:12px}
  .brand-mark{height:34px}
  .site-brand-cluster{gap:8px}
  .site-brand-affiliates{gap:7px;padding-left:8px}
  .site-brand-affiliate.modern{height:23px;max-width:57px;border-radius:0}
  .site-brand-affiliate.kw{height:17px;max-width:99px}
  .nav-toggle{width:38px;height:38px;flex:0 0 38px}
  .mobile-nav{inset:72px 0 0 0}
}

/* -------------------- Hero -------------------- */
.hero{
  position:relative;
  background:var(--black);
  color:var(--white);
  padding:168px 0 96px;
  overflow:hidden;
}
.hero-photo{
  position:absolute;inset:0;
  background-image:url('../images/hero-bridge-desktop.jpg');
  background-size:cover;
  background-position:center 42%;
  filter:contrast(1.03) brightness(.98);
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(6,6,7,.85) 0%, rgba(6,6,7,.6) 30%, rgba(6,6,7,.32) 55%, rgba(6,6,7,.08) 100%),
    linear-gradient(0deg, rgba(6,6,7,.18) 0%, rgba(6,6,7,0) 20%);
}
@media (max-width:640px){
  .hero-photo{
    background-image:url('../images/hero-bridge-mobile.jpg');
    background-position:center 32%;
  }
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(6,6,7,.68) 0%, rgba(6,6,7,.34) 30%, rgba(6,6,7,.46) 62%, rgba(6,6,7,.8) 100%),
      linear-gradient(90deg, rgba(6,6,7,.4) 0%, rgba(6,6,7,.08) 70%);
  }
}
.hero-inner{position:relative;z-index:2}
.hero .eyebrow{margin-bottom:26px}
.hero h1{
  font-size:clamp(38px,6.4vw,74px);
  max-width:16ch;
  color:var(--white);
}
.hero h1 em{
  font-style:italic;
  color:var(--gray-400);
}
.hero .lede{
  margin-top:26px;
  color:var(--gray-300);
  max-width:52ch;
}
.hero .cta-row{margin-top:40px}
.hero-foot{
  margin-top:88px;
  padding-top:28px;
  max-width:560px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;
  flex-wrap:wrap;
  gap:28px 48px;
}
.hero-stat b{
  display:block;
  font-family:var(--font-serif);
  font-size:26px;
  font-weight:500;
  color:var(--white);
}
.hero-stat span{
  display:block;
  margin-top:4px;
  font-size:12.5px;
  color:var(--gray-400);
  letter-spacing:.03em;
}

/* -------------------- Sections -------------------- */
.section{padding:96px 0}
.section-tight{padding:72px 0}
.section-dark{background:var(--black);color:var(--white)}
.section-off{background:var(--off-white)}
.section-border-top{border-top:1px solid var(--line-soft)}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:56px;
}
.section-head h2{font-size:clamp(28px,3.6vw,46px)}
.section-head .lede{margin-top:16px}
.section-head-max h2{max-width:14ch}

.section-dark .eyebrow{color:var(--gray-300)}
.section-dark .eyebrow::before{background:var(--gray-500)}
.section-dark h2{color:var(--white)}
.section-dark .lede{color:var(--gray-300)}

/* -------------------- What I help with -------------------- */
.pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.pillar{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:44px 36px;
  position:relative;
  transition:background .3s var(--ease);
}
.pillar:hover{background:var(--off-white)}
.pillar .index-mark{display:block;margin-bottom:28px}
.pillar h3{font-size:23px;margin-bottom:14px}
.pillar p{color:var(--gray-600);font-size:15px;line-height:1.7}
.pillar ul{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.pillar li{
  font-size:13.5px;
  color:var(--gray-700,var(--gray-600));
  padding-left:16px;
  position:relative;
}
.pillar li::before{
  content:'';
  position:absolute;left:0;top:8px;
  width:6px;height:1px;background:var(--gray-400);
}

/* -------------------- Selling options preview cards -------------------- */
.option-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.option-card{
  background:var(--white);
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  min-height:220px;
}
.option-card .index-mark{margin-bottom:20px;color:var(--gray-400)}
.option-card h3{font-size:19px;margin-bottom:10px}
.option-card p{font-size:14px;color:var(--gray-600);line-height:1.65;flex:1}
.option-card .tag{
  margin-top:18px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray-500);
}

/* -------------------- Why work with Clayton -------------------- */
.feature-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:44px 56px;
}
.feature{display:flex;gap:22px}
.feature-num{
  font-family:var(--font-serif);
  font-size:15px;
  color:var(--gray-400);
  flex:0 0 auto;
  padding-top:2px;
}
.feature h3{font-size:19px;margin-bottom:10px}
.feature p{font-size:14.5px;color:var(--gray-600);line-height:1.7}

/* -------------------- Agent portrait (homepage + about) -------------------- */
.agent-portrait{position:relative}
.agent-portrait img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:top center;
  filter:contrast(1.05) brightness(1.02) saturate(1.05);
  display:block;
}
.agent-portrait-cred{
  margin-top:20px;
  font-size:13.5px;
  color:var(--gray-600);
  line-height:1.65;
  max-width:40ch;
}
.about-portrait img{
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:top center;
  filter:saturate(.8) contrast(1.04) brightness(1.01);
  display:block;
}
@media (max-width:980px){
  .agent-portrait img{aspect-ratio:16/10}
  .about-portrait img{aspect-ratio:4/5}
}

/* -------------------- Market stat strip -------------------- */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.16);
  border-left:1px solid rgba(255,255,255,.16);
  margin-top:56px;
}
.stat-cell{
  border-right:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
  padding:30px 26px;
}
.stat-cell b{
  display:block;
  font-family:var(--font-serif);
  font-size:clamp(30px,3vw,40px);
  font-weight:500;
  color:var(--white);
}
.stat-cell span{
  display:block;
  margin-top:8px;
  font-size:12.5px;
  color:var(--gray-400);
  line-height:1.5;
}
.stat-note{
  margin-top:20px;
  font-size:12.5px;
  color:var(--gray-500);
}

/* -------------------- Featured listings -------------------- */
.listings-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:40px;
}
.listing-card{
  border:1px solid var(--line-soft);
  background:var(--white);
  display:flex;
  flex-direction:column;
}
.listing-photo{
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
  filter:contrast(1.04) saturate(1.05);
}
.listing-card.is-mine .listing-photo{filter:contrast(1.04) saturate(1.05)}
.listing-badge{
  display:inline-block;
  margin-bottom:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gray-500);
}

/* -------------------- Featured Lake Havasu Homes (interim teaser) -------------------- */
.featured-teaser{
  border:1px solid var(--line);
  background:var(--white);
  padding:56px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  margin-top:40px;
}
.featured-teaser h3{font-family:var(--font-serif);font-size:24px;max-width:32ch}
.featured-teaser p{color:var(--gray-600);font-size:15px;line-height:1.75;max-width:64ch}
.listing-body{padding:22px 24px 26px}
.listing-price{
  font-family:var(--font-serif);
  font-size:24px;
  font-weight:500;
}
.listing-address{
  margin-top:6px;
  font-size:14px;
  color:var(--gray-700);
}
.listing-meta{
  margin-top:4px;
  font-size:13px;
  color:var(--gray-500);
}
.listing-body .text-link{margin-top:14px;font-size:14px}

/* -------------------- Cards / generic -------------------- */
.card{
  border:1px solid var(--line);
  padding:34px;
  background:var(--white);
}

/* -------------------- Comparison table (Seller Strategy) -------------------- */
.compare-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:40px;
}
.compare-tab{
  padding:11px 20px;
  border:1px solid var(--line);
  background:var(--white);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.01em;
  border-radius:999px;
  color:var(--gray-600);
  transition:all .2s var(--ease);
}
.compare-tab:hover{border-color:var(--black);color:var(--black)}
.compare-tab.is-active{background:var(--black);border-color:var(--black);color:var(--white)}

.compare-table-wrap{overflow-x:auto;border:1px solid var(--line)}
table.compare-table{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
  font-size:13.5px;
}
.compare-table th,.compare-table td{
  padding:18px 20px;
  border-bottom:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
  text-align:left;
  vertical-align:top;
}
.compare-table th:last-child,.compare-table td:last-child{border-right:none}
.compare-table thead th{
  background:var(--off-white);
  font-family:var(--font-serif);
  font-size:16px;
  font-weight:500;
  position:sticky;top:0;
}
.compare-table thead th:first-child{background:var(--white)}
.compare-table tbody th{
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--gray-600);
  white-space:nowrap;
  background:var(--white);
}
.rating{display:flex;align-items:center;gap:8px}
.rating-bars{display:flex;gap:3px}
.rating-bar{width:14px;height:5px;background:var(--gray-200)}
.rating-bar.is-filled{background:var(--black)}
.rating-label{font-size:12px;color:var(--gray-500)}

.option-detail{
  border:1px solid var(--line);
  border-top:none;
  padding:44px;
  display:none;
}
.option-detail.is-active{display:block}
.option-detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px}
.option-detail h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:16px}
.option-detail p{color:var(--gray-600);font-size:15px;line-height:1.75;margin-bottom:16px}
.detail-list{display:flex;flex-direction:column;gap:14px}
.detail-list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
  font-size:13.5px;
}
.detail-list li b{font-weight:600}
.best-for{
  margin-top:22px;
  padding:20px 22px;
  background:var(--off-white);
  border-left:2px solid var(--black);
  font-size:13.5px;
  color:var(--gray-700,var(--ink));
  line-height:1.65;
}

/* -------------------- Process / steps -------------------- */
.step-list{border-top:1px solid var(--line)}
.step{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:32px;
  padding:32px 0;
  border-bottom:1px solid var(--line);
}
.step-num{
  font-family:var(--font-serif);
  font-size:20px;
  color:var(--gray-400);
}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--gray-600);line-height:1.7;max-width:60ch}

/* -------------------- Quote / callout -------------------- */
.callout{
  border:1px solid var(--line);
  padding:52px;
  position:relative;
}
.callout p{
  font-family:var(--font-serif);
  font-size:clamp(20px,2.4vw,28px);
  line-height:1.5;
  max-width:34ch;
}
.callout cite{
  display:block;
  margin-top:24px;
  font-style:normal;
  font-size:13px;
  color:var(--gray-500);
  font-family:var(--font-sans);
  font-weight:600;
}

/* -------------------- Forms -------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--gray-600);
}
.field input,.field select,.field textarea{
  border:1px solid var(--line);
  border-radius:2px;
  padding:14px 16px;
  background:var(--white);
  color:var(--ink);
  transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--black);
}
.field textarea{resize:vertical;min-height:120px}
.form-note{margin-top:16px;font-size:12.5px;color:var(--gray-500);line-height:1.6}
.form-note a{text-decoration:underline;text-underline-offset:2px}
.form-status{margin-top:16px;font-size:13.5px;font-weight:600}
.form-status.is-success{color:#1a1a1a}
.form-status.is-error{color:#8a1f1f}
.section-dark .form-status.is-success{color:#e8e8e6}
.section-dark .form-status.is-error{color:#ff8f7a}
.section-dark .field input::placeholder,.section-dark .field textarea::placeholder{color:var(--gray-500)}
.section-dark .field select option{color:var(--ink);background:var(--white);}

/* -------------------- Contact strip -------------------- */
.contact-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.16);
}
.contact-item{
  padding:28px 26px;
  border-right:1px solid rgba(255,255,255,.16);
}
.contact-item:last-child{border-right:none}
.contact-item span{
  display:block;
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray-400);
  margin-bottom:10px;
}
.contact-item a,.contact-item p{font-size:15px;font-weight:500;color:var(--white)}

/* -------------------- Footer -------------------- */
.site-footer{background:var(--black);color:var(--gray-400)}
.footer-top{
  padding:76px 0 56px;
  display:grid;
  grid-template-columns:1.3fr .7fr .7fr .9fr;
  gap:40px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-brand{font-family:var(--font-serif);font-size:22px;color:var(--white);margin-bottom:16px}
.footer-col h4{
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gray-500);
  margin-bottom:18px;
  font-family:var(--font-sans);
  font-weight:600;
}
.footer-col ul{display:flex;flex-direction:column;gap:12px}
.footer-col a{font-size:14px;color:var(--gray-300)}
.footer-col a:hover{color:var(--white)}
.footer-logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:18px}
.footer-logos img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.85}
.footer-logos img.no-invert{filter:none;opacity:1;background:var(--white);padding:6px 10px;border-radius:2px;height:30px}
.footer-logos img.blend-dark{filter:none;opacity:1}
.footer-bottom{
  padding:28px 0 40px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  font-size:12.5px;
  color:var(--gray-500);
}
.footer-bottom a{color:var(--gray-400)}
.footer-bottom a:hover{color:var(--white)}
.footer-legal{max-width:760px;line-height:1.7}
.footer-legal-links{margin-bottom:8px}
.footer-legal-links a{color:var(--gray-400);font-size:12.5px}
.footer-legal-links a:hover{color:var(--white)}
.eho{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--gray-300)}
.eho svg{width:18px;height:18px}
.social-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.social-link{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  color:var(--gray-300);
  transition:all .2s var(--ease);
}
.social-link svg{width:17px;height:17px}
.social-link:hover{color:var(--white);border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.social-link:focus-visible{outline:2px solid var(--white);outline-offset:2px}

/* -------------------- Legal / long-form copy pages -------------------- */
.legal-copy h2{font-family:var(--font-serif);font-size:22px;margin-top:40px;margin-bottom:14px}
.legal-copy h2:first-child{margin-top:0}
.legal-copy p{font-size:15px;line-height:1.8;color:var(--gray-700,var(--ink));margin-bottom:4px}
.legal-copy a{text-decoration:underline;text-underline-offset:2px}

/* -------------------- Scroll reveal -------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}

/* Content must never be permanently invisible without JS, and motion
   must respect user preference. Both rules win by loading after the
   base [data-reveal] rule above. */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{transition:none !important;opacity:1 !important;transform:none !important}
  html{scroll-behavior:auto}
}

/* -------------------- Page hero (interior pages) -------------------- */
.page-hero{
  background:var(--black);
  color:var(--white);
  padding:156px 0 72px;
  position:relative;
  overflow:hidden;
}
.page-hero h1{font-size:clamp(34px,5.2vw,58px);max-width:18ch}
.page-hero .lede{margin-top:20px}
.page-hero-photo{
  position:absolute;inset:0;
  background-image:url('../images/page-banner-desktop.jpg');
  background-size:cover;
  background-position:50% 55%;
  filter:contrast(1.02) brightness(.97);
}
.page-hero-photo.pos-sell{background-position:38% 52%}
.page-hero-photo.pos-buy{background-position:50% 50%}
.page-hero-photo.pos-about{background-position:64% 56%}
.page-hero-photo.pos-contact{background-position:46% 60%}
.page-hero-photo.pos-search{background-position:56% 48%}
.page-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(6,6,7,.82) 0%, rgba(6,6,7,.58) 28%, rgba(6,6,7,.3) 55%, rgba(6,6,7,.1) 100%),
    linear-gradient(0deg, rgba(6,6,7,.22) 0%, rgba(6,6,7,0) 24%);
}
@media (max-width:640px){
  .page-hero-photo{
    background-image:url('../images/page-banner-mobile.jpg');
    background-position:center 58%;
  }
  .page-hero-photo.pos-sell,.page-hero-photo.pos-buy,.page-hero-photo.pos-about,.page-hero-photo.pos-contact,.page-hero-photo.pos-search{
    background-position:center 58%;
  }
  .page-hero-scrim{
    background:
      linear-gradient(180deg, rgba(6,6,7,.62) 0%, rgba(6,6,7,.32) 30%, rgba(6,6,7,.42) 62%, rgba(6,6,7,.78) 100%),
      linear-gradient(90deg, rgba(6,6,7,.36) 0%, rgba(6,6,7,.08) 70%);
  }
}
.breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--gray-400);
  margin-bottom:24px;
}
.breadcrumb a{color:var(--gray-400)}
.breadcrumb a:hover{color:var(--white)}

/* -------------------- Misc components -------------------- */
.divider{height:1px;background:var(--line);margin:0}
.tag-pill{
  display:inline-block;
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--gray-600);
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.two-col.reverse{direction:rtl}
.two-col.reverse > *{direction:ltr}

.accordion-item{border-bottom:1px solid var(--line)}
.accordion-trigger{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:26px 0;
  background:none;
  border:none;
  text-align:left;
  font-family:var(--font-serif);
  font-size:19px;
}
.accordion-trigger .plus{
  flex:0 0 auto;
  width:22px;height:22px;
  position:relative;
}
.accordion-trigger .plus::before,.accordion-trigger .plus::after{
  content:'';position:absolute;background:var(--black);transition:transform .3s var(--ease);
}
.accordion-trigger .plus::before{left:0;top:50%;width:100%;height:1.5px;transform:translateY(-50%)}
.accordion-trigger .plus::after{top:0;left:50%;width:1.5px;height:100%;transform:translateX(-50%)}
.accordion-item.is-open .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0}
.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s var(--ease);
}
.accordion-panel-inner{padding-bottom:26px;font-size:14.5px;color:var(--gray-600);line-height:1.75;max-width:70ch}

.badge-row{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.badge-row img{height:38px;width:auto}

/* -------------------- Responsive -------------------- */
@media (max-width:980px){
  .pillar-grid,.option-grid{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .listings-grid{grid-template-columns:1fr}
  .contact-strip{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px 24px}
  .two-col,.option-detail-grid{grid-template-columns:1fr;gap:32px}
  .form-grid{grid-template-columns:1fr}
  .section-head{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (max-width:640px){
  .hero{padding:132px 0 64px}
  .section{padding:72px 0}
  .stat-strip,.contact-strip{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .compare-tabs{gap:8px}
  .callout{padding:34px 26px}
  .option-detail{padding:28px 22px}
  .hero-foot{gap:24px 36px}
  .priority-picker{gap:8px}
  .priority-chip{padding:9px 14px;font-size:12.5px}
}

/* -------------------- Tab / panel transition polish -------------------- */
.option-detail.is-active{animation:panel-fade-in .38s var(--ease)}
@keyframes panel-fade-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.accordion-panel-inner{animation:panel-fade-in .3s var(--ease)}

/* -------------------- Mobile touch feedback -------------------- */
@media (hover:none){
  .btn:active,.compare-tab:active,.priority-chip:active,.card:active,
  .option-card:active,.accordion-trigger:active,.nav-toggle:active{
    transform:scale(.97);
    transition:transform .12s var(--ease);
  }
}

/* -------------------- Seller Priority Explorer -------------------- */
.priority-picker{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:36px 0 8px;
}
.priority-chip{
  padding:11px 20px;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  color:var(--gray-600);
  transition:all .2s var(--ease);
}
.priority-chip:hover{border-color:var(--black);color:var(--black)}
.priority-chip.is-active{background:var(--black);border-color:var(--black);color:var(--white)}
.priority-chip.is-active::before{content:'✓ ';}

.priority-empty{margin-top:28px}
.priority-results{margin-top:40px;padding-top:36px;border-top:1px solid var(--line)}
.priority-results[hidden]{display:none}
.priority-results-label{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gray-600);
  margin-bottom:22px;
}
.priority-results-list{display:flex;flex-direction:column;gap:14px}
.priority-result-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  padding:20px 24px;
  border:1px solid var(--line);
  background:var(--white);
  transition:border-color .2s var(--ease);
}
.priority-result-card.is-top{border-color:var(--black);background:var(--off-white)}
.priority-result-rank{
  font-family:var(--font-serif);
  font-size:22px;
  color:var(--gray-400);
  min-width:28px;
}
.priority-result-card.is-top .priority-result-rank{color:var(--black)}
.priority-result-card h3{font-size:17px;margin-bottom:4px}
.priority-result-card h3 a{border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.priority-result-card h3 a:hover{border-color:var(--black)}
.priority-result-card p{font-size:13px;color:var(--gray-600);margin:0;line-height:1.6}
.priority-result-match{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width:88px;
}
.priority-result-match span{font-size:11.5px;color:var(--gray-500);white-space:nowrap}
.priority-score-track{width:72px;height:4px;background:var(--gray-200)}
.priority-score-bar{height:100%;background:var(--black);transition:width .4s var(--ease)}
.priority-disclaimer{
  margin-top:24px;
  font-size:12.5px;
  color:var(--gray-500);
  line-height:1.7;
  max-width:70ch;
}
@media (max-width:640px){
  .priority-result-card{grid-template-columns:auto 1fr;row-gap:10px}
  .priority-result-match{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-start}
  .priority-score-track{width:100px}
}

/* -------------------- Benefits / trade-offs / questions lists -------------------- */
.mini-list-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px}
.mini-list-head{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:12px;
  display:block;
}
.mini-list-positive .mini-list-head{color:var(--ink)}
.mini-list-negative .mini-list-head{color:var(--gray-600)}
.mini-list{display:flex;flex-direction:column;gap:9px}
.mini-list li{
  font-size:13.5px;
  color:var(--gray-600);
  line-height:1.55;
  padding-left:20px;
  position:relative;
}
.mini-list-positive li::before{
  content:'+';
  position:absolute;left:0;top:0;
  font-weight:700;
  color:var(--black);
}
.mini-list-negative li::before{
  content:'\2212';
  position:absolute;left:0;top:0;
  font-weight:700;
  color:var(--gray-500);
}
.questions-list{
  margin-top:24px;
  padding:20px 22px;
  background:var(--off-white);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.questions-list-head{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gray-600);
  margin-bottom:2px;
  display:block;
}
.questions-list li{
  font-size:13.5px;
  color:var(--ink);
  line-height:1.55;
  padding-left:18px;
  position:relative;
}
.questions-list li::before{
  content:'?';
  position:absolute;left:0;top:0;
  font-weight:700;
  color:var(--gray-400);
  font-family:var(--font-serif);
}
@media (max-width:640px){
  .mini-list-grid{grid-template-columns:1fr;gap:18px}
}

/* -------------------- Market pulse: last-updated indicator -------------------- */
.market-updated{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:var(--gray-400);
  margin-bottom:22px;
  letter-spacing:.02em;
}
.market-updated .dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#5fbf6f;
  flex:0 0 auto;
}
@media (prefers-reduced-motion: reduce){
  .option-detail.is-active,.accordion-panel-inner{animation:none}
}

/* -------------------- Area Guides (hub + city pages) -------------------- */
.page-hero-illustration{position:absolute;inset:0;overflow:hidden;background:var(--black);}
.page-hero-illustration svg{display:block;width:100%;height:100%;}

.area-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.area-card{background:var(--white);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:background .2s var(--ease);}
.area-card:hover{background:var(--off-white);}
.area-card-photo{aspect-ratio:4/3;background-size:cover;background-position:center;filter:contrast(1.04) saturate(1.05);}
.area-card-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1;}
.area-card-body .index-mark{margin-bottom:14px;color:var(--gray-400);}
.area-card-body h3{font-family:var(--font-serif);font-size:19px;margin-bottom:8px;}
.area-card-body p{font-size:13.5px;color:var(--gray-600);line-height:1.65;flex:1;}
.area-card-county{
  margin-top:16px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--gray-500);
}
.photo-credit{font-size:11px;color:var(--gray-500);margin-top:10px;}
@media (max-width:900px){
  .area-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .area-grid{grid-template-columns:1fr}
}

/* -------------------- Property-lifestyle explorer (homepage) -------------------- */
.lifestyle-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.lifestyle-card{
  background:var(--white);
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  min-height:210px;
  transition:background .25s var(--ease);
}
.lifestyle-card:hover{background:var(--off-white)}
.lifestyle-icon{
  width:40px;height:40px;
  margin-bottom:22px;
  color:var(--black);
}
.lifestyle-icon svg{width:100%;height:100%;display:block}
.lifestyle-card h3{font-size:18px;margin-bottom:8px}
.lifestyle-card p{font-size:13.5px;color:var(--gray-600);line-height:1.6;flex:1}
.lifestyle-card .text-link{margin-top:18px;font-size:13px}
@media (max-width:900px){.lifestyle-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.lifestyle-grid{grid-template-columns:1fr}}

/* -------------------- Follow / social preview cards (homepage) -------------------- */
.social-follow-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
  margin-top:36px;
}
.social-follow-card{
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  padding:26px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  text-decoration:none;
  color:var(--gray-200);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.social-follow-card:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
.social-follow-card svg{width:26px;height:26px}
.social-follow-card span{font-size:12.5px;font-weight:600;letter-spacing:.02em}
@media (max-width:900px){.social-follow-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.social-follow-grid{grid-template-columns:repeat(2,1fr)}}

/* -------------------- Market Pulse mockup illustration -------------------- */
.market-mockup{
  border:1px solid rgba(255,255,255,.16);
  border-radius:4px;
  padding:28px 30px 22px;
  background:rgba(255,255,255,.02);
}
.market-mockup-bars{display:flex;align-items:flex-end;gap:14px;height:110px}
.market-mockup-bars .bar{flex:1;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.14));border-radius:2px 2px 0 0}
.market-mockup-caption{margin-top:16px;font-size:11.5px;color:var(--gray-500);letter-spacing:.03em}

/* Optional advertising measurement controls */
.ad-privacy-panel{position:fixed;z-index:10000;bottom:16px;left:16px;right:16px;max-width:620px;margin:auto;padding:18px;background:#fff;color:#222;border:1px solid #bbb;border-radius:12px;box-shadow:0 6px 30px #0003;font:14px/1.5 Arial,sans-serif}
.ad-privacy-panel[hidden]{display:none!important}.ad-privacy-panel p{margin:0 0 12px}.ad-privacy-panel a{color:#222;text-decoration:underline}.ad-privacy-panel>div{display:flex;gap:12px}.ad-privacy-panel button{background:#fff;color:#222;border:1px solid #333;border-radius:6px;padding:10px 20px;cursor:pointer;font:inherit;min-height:44px}.ad-privacy-panel button:focus-visible,.ad-privacy-link:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}.ad-privacy-link{display:inline-block;margin:8px;padding:4px;background:transparent;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}