/* ============================================================
   MORDEN PROPERTY DEVELOPMENTS — hero + page-specific flourishes
   ============================================================ */

.mpd-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  background: var(--navy-950);
  overflow: hidden;
}

.mpd-hero-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

.mpd-hero-mark {
  width: clamp(90px, 12vw, 140px);
  height: auto;
  color: var(--cyan-400);
  filter: drop-shadow(0 0 26px var(--cyan-glow));
}

.mpd-hero-word {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.1;
  color: var(--white);
}

.mpd-hero-tagline {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cyan-300);
}
.mpd-hero-tagline .dot { color: var(--white-faint); margin: 0 12px; letter-spacing: 0; }

.mpd-hero-sub {
  max-width: 560px;
  font-size: 1.12rem;
  color: var(--white-soft);
  margin-top: 6px;
}

.mpd-scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-faint);
}
.mpd-scroll-cue .bar {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, var(--cyan-400), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mpd-scroll-cue .bar { animation: none; opacity: 0.6; }
}

/* ---------- Skyline strip (bottom of hero) ---------- */
.mpd-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  color: var(--navy-line-strong);
  opacity: 0.9;
  pointer-events: none;
}

/* ---------- Panels row (home) ---------- */
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 780px) {
  .panel-grid { grid-template-columns: 1fr; }
}

/* ---------- Page hero (non-home pages) ---------- */
.page-hero {
  position: relative;
  padding: clamp(150px, 16vw, 210px) 0 clamp(50px, 7vw, 90px);
  background: var(--navy-950);
  overflow: hidden;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  max-width: 760px;
  margin-top: 14px;
}
.page-hero p.lead {
  max-width: 560px;
  font-size: 1.1rem;
  color: var(--white-soft);
}

.section-alt {
  background: var(--navy-900);
  border-top: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
}

.contact-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 820px;
}
@media (max-width: 620px) {
  .contact-tiles { grid-template-columns: 1fr; }
}
.contact-tile {
  display: block;
  padding: 32px;
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-md);
  background: var(--navy-900);
  transition: border-color 0.25s ease, transform 0.25s var(--ease);
}
.contact-tile:hover { border-color: var(--cyan-400); transform: translateY(-3px); }
.contact-tile .value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cyan-300);
  margin-top: 10px;
}

/* ---------- Tenant dashboard ---------- */
.portal-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
  flex-wrap: wrap;
  gap: 12px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 820px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

.countdown-card { text-align: center; padding: 40px 24px; }
.countdown-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--cyan-300);
  font-weight: 700;
}
.countdown-due { color: var(--white-faint); font-size: 0.9rem; margin-top: 6px; }

.outstanding-banner {
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.35);
  margin-bottom: 28px;
}
.outstanding-amount { font-size: 1.6rem; font-weight: 700; color: #f87171; }
.outstanding-note { color: var(--white-soft); }

.payment-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--navy-line);
  font-size: 0.92rem;
}
.payment-row:first-child { border-top: none; }
.payment-status { color: var(--white-faint); }

.status-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-md);
  background: var(--navy-900);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.status-label { font-weight: 600; min-width: 130px; }
.status-pill {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-good { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.status-bad { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.status-neutral { background: rgba(250, 204, 21, 0.15); color: #facc15; }
.status-note { color: var(--white-faint); font-size: 0.85rem; }

.whatsapp-btn {
  background: #25d366;
  color: #06210f;
}
.whatsapp-btn:hover { background: #2ee878; }

.contact-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--navy-line);
  font-size: 0.92rem;
}
.contact-detail-row:first-child { border-top: none; }
.contact-detail-label { color: var(--white-faint); }