/* ============================================================
   Mr. Homez — Homepage section rhythm & separation system.
   Guarantees consistent spacing, strict alternating backgrounds,
   and a crisp edge between every section (no "mixed" sections).
   ============================================================ */

/* 1. Consistent vertical rhythm for every content section */
.home-live,
.section.properties-section,
.section.why-section,
.section.how-section,
.section.areas-section,
.section.inquiry-section,
.section.testimonials-section,
.section.faq-section{
  padding-top:78px !important;
  padding-bottom:78px !important;
}

/* 2. Strict alternating backgrounds (no two adjacent the same) */
#featured-properties        { background:#ffffff !important; }
#featured-projects          { background:#f6f4ef !important; }
.section.properties-section { background:#ffffff !important; }
.section.why-section        { background:#f6f4ef !important; }
.section.how-section        { background:#ffffff !important; }
.section.areas-section      { background:#f6f4ef !important; }
.section.inquiry-section    { background:#fbf5e9 !important; }   /* warm accent for the lead CTA */
.section.testimonials-section{ background:#ffffff !important; }
.section.faq-section        { background:#f6f4ef !important; }

/* 3. Hairline separator between stacked light sections — crisp edge everywhere */
#featured-properties,
#featured-projects,
.section.properties-section,
.section.why-section,
.section.how-section,
.section.areas-section,
.section.inquiry-section,
.section.testimonials-section,
.section.faq-section{
  border-top:1px solid rgba(15,25,45,.07);
}
/* the usp-strip already sits under the navy stats bar — no line needed there */
.usp-strip{border-bottom:1px solid rgba(15,25,45,.06)}

/* 4. Uniform section header treatment for the live sections */
.home-live > .eyebrow{margin-bottom:10px}
.home-live > h2{margin-bottom:6px}
.home-live > .sub{margin-bottom:30px}

/* 5. Consistent container gutters */
.home-live{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}

/* 6. Explore-by-City image tiles (replaces the static area chips) */
.city-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:16px;margin-bottom:26px}
.city-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 22px;
  border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;
  background:#1a2740 var(--img) center/cover no-repeat;transition:transform .25s ease,box-shadow .25s ease}
.city-tile::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,18,32,.05) 20%,rgba(10,18,32,.78) 100%);transition:.25s}
.city-tile::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--img) center/cover no-repeat;
  transition:transform .6s ease}
.city-tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,18,32,.28)}
.city-tile:hover::after{transform:scale(1.06)}
.city-tile:hover::before{background:linear-gradient(180deg,rgba(10,18,32,.12) 10%,rgba(10,18,32,.84) 100%)}
.city-tile-lg{grid-column:span 2;grid-row:span 2}
.city-name{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;line-height:1.15;
  text-shadow:0 2px 12px rgba(0,0,0,.35)}
.city-tile-lg .city-name{font-size:2rem}
.city-count{font-size:.8rem;color:rgba(255,255,255,.82);margin-top:5px;font-weight:500;letter-spacing:.01em}
.city-go{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;opacity:0;transform:translateY(-4px);transition:.25s}
.city-tile:hover .city-go{opacity:1;transform:none;background:#e8c063;color:#1a2740;border-color:#e8c063}
@media(max-width:960px){.city-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:170px}}
@media(max-width:640px){.city-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:12px}
  .city-tile-lg{grid-column:span 2;grid-row:span 1}.city-tile-lg .city-name{font-size:1.5rem}}

/* 7. Live sections: premium "View all" pill + tighter header rhythm */
.home-live .more a{border-radius:40px;padding:12px 30px;font-weight:600;letter-spacing:.01em}

@media(max-width:640px){
  .home-live,
  .section.properties-section,.section.why-section,.section.how-section,
  .section.areas-section,.section.inquiry-section,.section.testimonials-section,
  .section.faq-section{padding-top:52px !important;padding-bottom:52px !important}
}