/* ============================================================
   APARTMENTS INDEX - page-specific only. The design system,
   listing cards, filters and location tiles live in site.css
   ============================================================ */

/* A still banner rather than video: the home page already opens
   with motion, and this page's job is to get you to the list. */
.banner {
  position: relative;
  min-height: clamp(340px, 42vh, 460px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #0D1418;
  padding-block: clamp(7rem, 13vw, 10rem) clamp(2.25rem, 4vw, 3rem);
}

.banner-media { position: absolute; inset: 0; }

.banner-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.86) contrast(1.03) brightness(0.92);
}

.banner-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(9,20,26,.94) 0%, rgba(9,20,26,.70) 34%, rgba(9,20,26,.30) 70%, rgba(9,20,26,.38) 100%),
    linear-gradient(100deg, rgba(33,82,104,.60) 0%, rgba(33,82,104,.08) 64%);
}

.banner-inner { position: relative; }
.banner .label { color: rgba(255,255,255,.76); }

.banner h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.16;
  letter-spacing: 0;
  color: #FFFFFF;
  margin: 1.25rem 0 0;
  max-width: 22ch;
}

.banner p.lede {
  margin-top: 1.25rem;
  max-width: 54ch;
  font-size: 1.0625rem;
  color: rgba(255,255,255,.84);
}

/* ---- Closing enquiry band ---- */
.closer { background: var(--brand); color: #FFFFFF; }

.closer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.closer h2 { font-size: clamp(1.625rem, 3.2vw, 2.25rem); color: #FFFFFF; max-width: 20ch; }
.closer p { margin-top: 0.875rem; color: rgba(255,255,255,.82); max-width: 46ch; font-size: 0.9375rem; }
.closer .btn-light { flex: none; }