/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { min-height: 100vh; }

/* ── Navbar ── */
#nav { background: transparent; }
#nav.scrolled {
  background: rgba(250, 246, 241, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(61, 34, 22, 0.06);
}
.nav-inner { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* ── Hero shapes ── */
.hero-shape { position: absolute; pointer-events: none; }
.shape-circle-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(232,85,42,0.08) 0%, transparent 70%);
  top: -80px; left: -160px;
  border-radius: 50%;
}
.shape-circle-2 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(232,85,42,0.06) 0%, transparent 70%);
  bottom: 60px; right: 38%;
  border-radius: 50%;
}
.shape-rect-1 {
  width: 120px; height: 120px;
  background: rgba(232,85,42,0.07);
  border-radius: 24px;
  top: 28%; left: 55%;
  transform: rotate(25deg);
}
.shape-diamond {
  width: 80px; height: 80px;
  background: rgba(218,173,83,0.12);
  border-radius: 16px;
  top: 22%; left: 48%;
  transform: rotate(45deg);
}
.shape-stripe {
  width: 200px; height: 6px;
  background: linear-gradient(90deg, rgba(232,85,42,0.15), rgba(218,173,83,0.15));
  border-radius: 3px;
  bottom: 22%; left: 52%;
  transform: rotate(-12deg);
}

/* ── Floating stat cards ── */
.stat-card {
  background: white;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 24px rgba(61,34,22,0.08), 0 1px 3px rgba(61,34,22,0.05);
  border: 1px solid rgba(61,34,22,0.06);
  min-width: 140px;
}
.card-1 { animation: float-slow 5s ease-in-out infinite; }
.card-2 { animation: float-med 4.5s ease-in-out infinite 0.5s; }
.card-3 { animation: float-slow 5.5s ease-in-out infinite 1s; }

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes float-med {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ── Scroll indicator dot ── */
.scroll-dot { animation: scroll-bounce 1.5s ease-in-out infinite; }
@keyframes scroll-bounce {
  0%, 100% { top: 0; }
  50% { top: calc(100% - 8px); }
}

/* ── Service cards ── */
.service-card { perspective: 800px; }
.service-card > div {
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.service-card:hover > div {
  transform: translateY(-4px);
}

/* ── Neighborhood cards ── */
.neighborhood-card { overflow: hidden; }

/* ── Scroll reveal (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Fallback: always visible if JS is off or reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ── Mobile menu ── */
.mobile-link { display: block; }

/* ── Utility ── */
@media (max-width: 767px) {
  .stat-card { min-width: 120px; padding: 0.85rem 1rem; }
}