/* ==========================================================================
   properties.css — styles unique to the properties page (properties.html)
   Depends on base.css for tokens, buttons, navs, footer internals, animations,
   the dark-hero layout, property cards, and the property accordion (§9).
   ========================================================================== */

:root {
  --gutter: 148px;   /* matches the interior-page gutter (about) */
}

/* Hero — generic wrappers are page-scoped because `.hero` / `.hero__nav`
   mean different things on the home page. The dark-hero internals
   (.hero-row, .img-row, etc.) are shared and live in base.css §9. */
/* White body below the straddling hero images. */
.body-wrap {
  position: relative;
  padding-top: 100px;
  background: var(--white);
}

/* Eyebrow spacing above section titles (home scopes this the same way). */
.eyebrow {
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* Footer box model (properties): full-bleed minus the 32px page frame. */
.footer {
  width: calc(100vw - 64px);
  margin: 100px 0 32px calc(50% - 50vw + 32px);
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gutter: 32px; }
  #sticky-nav ul,
  .hero__nav ul { gap: 24px; }
  .hero-row { flex-direction: column; align-items: flex-start; gap: 32px; }
  .prop-cards { flex-direction: column; }
  .footer__top { flex-direction: column; gap: 40px; }
  .footer__nav-cols { flex-wrap: wrap; gap: 32px; }
}

@media (max-width: 600px) {
  #sticky-nav ul,
  .hero__nav ul { gap: 14px; font-size: 14px; }
}