/* ════════════════════════════════════════════════
   FIVEHAUS.COM.MY — Master Stylesheet
   Direction C: Verdigris & Brass
   Slate #0B1014 · Teal #4A8C7E · Brass #C9A96E · Ivory #EEF0F0
   ════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Jost:wght@200;300;400;500;600&display=swap');

:root {
  --void:         #0B1014;
  --deep:         #16242C;
  --surface:      #1D2F38;
  --surface-hi:   #243845;
  --teal:         #4A8C7E;
  --teal-hi:      #5BA898;
  --teal-dim:     rgba(74,140,126,0.12);
  --teal-glow:    rgba(74,140,126,0.06);
  --brass:        #C9A96E;
  --brass-dim:    rgba(201,169,110,0.15);
  --brass-hi:     #DFC080;
  --ivory:        #EEF0F0;
  --ivory-70:     rgba(238,240,240,0.7);
  --ivory-40:     rgba(238,240,240,0.4);
  --ivory-15:     rgba(238,240,240,0.15);
  --ivory-06:     rgba(238,240,240,0.06);
  --ivory-03:     rgba(238,240,240,0.03);
  --gap:          1.5rem;
  --radius:       2px;
  --transition:   0.4s cubic-bezier(0.4,0,0.2,1);
  --serif:        'Cormorant Garamond', Georgia, serif;
  --sans:         'Jost', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--void);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }

/* ── GRAIN OVERLAY ── */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9000; opacity:0.45;
}

/* ── CONTAINER ── */
.container { max-width:1380px; margin:0 auto; padding:0 2.5rem; }

/* ══════════════════════════════════
   NAVIGATION
══════════════════════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:1.4rem 3rem;
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(to bottom, rgba(11,16,20,0.95) 0%, rgba(11,16,20,0) 100%);
  backdrop-filter: blur(4px);
  transition: background var(--transition), padding var(--transition);
  border-bottom: 1px solid transparent;
}
#navbar.scrolled {
  background: rgba(11,16,20,0.97);
  padding:1rem 3rem;
  border-bottom-color: rgba(74,140,126,0.12);
}

.logo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--ivory);
  position: relative;
}
.logo-dot { color: var(--teal); }

.nav-links { display:flex; gap:2.5rem; list-style:none; align-items:center; }
.nav-links a {
  font-family: var(--sans);
  color: var(--ivory-70);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color var(--transition);
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom:-3px; left:0;
  width:0; height:1px;
  background: var(--teal);
  transition: width var(--transition);
}
.nav-links a:hover { color: var(--ivory); }
.nav-links a:hover::after { width:100%; }
.nav-links a.active { color: var(--teal); }
.nav-links a.active::after { width:100%; }

.nav-cta {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--void) !important;
  background: var(--teal);
  padding: 0.55rem 1.4rem;
  transition: background var(--transition), color var(--transition) !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { background: var(--teal-hi) !important; color: var(--void) !important; }

.nav-toggle {
  display:none; color:var(--ivory);
  width:28px; height:20px;
  flex-direction:column; justify-content:space-between;
  padding:0; background:none; border:none;
}
.nav-toggle span {
  display:block; width:100%; height:1px;
  background:var(--ivory); transition:all var(--transition);
}

/* ══════════════════════════════════
   HERO — HOMEPAGE
══════════════════════════════════ */
.hero {
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-end;
  position:relative; overflow:hidden;
  padding:0 0 7rem;
}

.hero-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(11,16,20,0.92) 0%, rgba(11,16,20,0.5) 60%, rgba(11,16,20,0.2) 100%),
    linear-gradient(to top, rgba(11,16,20,0.85) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 75% 50%, rgba(22,36,44,0.7) 0%, transparent 70%);
  z-index:1;
}

/* Geometric grid overlay */
.hero-grid {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(74,140,126,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,140,126,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 90% at 70% 50%, black 20%, transparent 80%);
}

.hero-img {
  position:absolute; inset:0; z-index:0;
}
.hero-img img {
  width:100%; height:100%; object-fit:cover;
  filter: saturate(0.7) contrast(1.05);
}

.hero-content {
  position:relative; z-index:2;
  padding:0 3rem 0 3rem;
  max-width: 820px;
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.8rem;
  display: flex; align-items: center; gap:1rem;
  opacity:0; animation: fadeUp 0.9s ease 0.3s forwards;
}
.hero-eyebrow::before {
  content:'';
  display:block; width:36px; height:1px;
  background: var(--teal);
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(3.8rem, 8vw, 7.5rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin-bottom: 1.2rem;
  opacity:0; animation: fadeUp 0.9s ease 0.5s forwards;
}
.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--ivory-70);
}
.hero-title .accent { color: var(--teal); }

.hero-sub {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ivory-70);
  max-width: 480px;
  margin-bottom: 2.8rem;
  opacity:0; animation: fadeUp 0.9s ease 0.7s forwards;
}

.hero-actions {
  display:flex; gap:1.2rem; align-items:center;
  opacity:0; animation: fadeUp 0.9s ease 0.9s forwards;
}

.hero-scroll {
  position:absolute; bottom:2.5rem; right:3rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  opacity:0; animation:fadeIn 1s ease 1.6s forwards;
}
.hero-scroll span {
  font-size:0.6rem; letter-spacing:0.25em;
  text-transform:uppercase; color:var(--ivory-40);
  writing-mode:vertical-rl;
}
.hero-scroll-line {
  width:1px; height:52px;
  background:linear-gradient(to bottom, var(--teal), transparent);
  animation:pulse 3s ease-in-out infinite;
}

/* ══════════════════════════════════
   BUTTONS
══════════════════════════════════ */
.btn-primary {
  display:inline-flex; align-items:center; gap:0.9rem;
  padding:1rem 2.4rem;
  background: var(--teal);
  color: var(--void);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position:relative; overflow:hidden;
  transition: background var(--transition);
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:var(--teal-hi);
  transform:translateX(-100%);
  transition:transform var(--transition);
}
.btn-primary:hover::before { transform:translateX(0); }
.btn-primary span { position:relative; z-index:1; }

.btn-outline {
  display:inline-flex; align-items:center; gap:0.8rem;
  padding:0.95rem 2.2rem;
  border: 1px solid rgba(238,240,240,0.2);
  color: var(--ivory-70);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.btn-outline:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-glow);
}

.btn-brass {
  display:inline-flex; align-items:center; gap:0.8rem;
  padding:0.95rem 2.2rem;
  border: 1px solid var(--brass);
  color: var(--brass);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all var(--transition);
}
.btn-brass:hover {
  background: var(--brass);
  color: var(--void);
}

/* ══════════════════════════════════
   STATS STRIP
══════════════════════════════════ */
.stats-strip {
  display:flex; justify-content:center;
  border-top: 1px solid rgba(74,140,126,0.15);
  border-bottom: 1px solid rgba(74,140,126,0.15);
  background: var(--deep);
  padding: 0;
}
.stat {
  flex:1; text-align:center;
  padding: 2.2rem 1rem;
  border-right: 1px solid rgba(74,140,126,0.1);
  position:relative;
}
.stat:last-child { border-right:none; }
.stat-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 300;
  color: var(--brass);
  line-height:1; display:block;
  margin-bottom:0.3rem;
}
.stat-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-40);
}

/* ══════════════════════════════════
   SECTION HEADERS
══════════════════════════════════ */
.section-header { margin-bottom:4rem; }
.section-header.centered { text-align:center; }
.eyebrow {
  display:flex; align-items:center; gap:0.8rem;
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content:''; display:block;
  width:24px; height:1px;
  background:var(--teal);
}
.section-header.centered .eyebrow { justify-content:center; }
.section-header.centered .eyebrow::before { display:none; }

.section-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--ivory);
}
.section-title em {
  font-style:italic;
  color: var(--ivory-70);
}

/* ══════════════════════════════════
   FEATURED PROPERTIES SECTION
══════════════════════════════════ */
.section-featured { padding:7rem 0; }

.featured-grid {
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap:2px;
  margin-bottom:3rem;
}

.prop-card {
  position:relative; overflow:hidden;
  display:block;
  background:var(--surface);
  cursor:pointer;
}
.prop-card--hero { grid-row:span 2; min-height:620px; }
.prop-card--sm   { min-height:280px; }

.prop-img-wrap {
  position:absolute; inset:0;
}
.prop-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition: transform 0.8s ease, filter 0.8s ease;
  filter: saturate(0.75);
}
.prop-card:hover .prop-img-wrap img {
  transform:scale(1.04);
  filter: saturate(0.9);
}

.prop-placeholder {
  position:absolute; inset:0;
  display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:0.8rem;
  background:var(--surface);
}
.prop-placeholder.show { display:flex; }
.prop-placeholder-district {
  font-family:var(--sans); font-size:0.65rem;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal);
}

/* Card overlay gradient */
.prop-overlay {
  position:absolute; inset:0;
  background: linear-gradient(
    to top,
    rgba(11,16,20,0.97) 0%,
    rgba(11,16,20,0.6) 35%,
    rgba(11,16,20,0.1) 65%,
    transparent 100%
  );
  transition: opacity var(--transition);
}
.prop-card:hover .prop-overlay {
  background: linear-gradient(
    to top,
    rgba(11,16,20,0.98) 0%,
    rgba(11,16,20,0.75) 45%,
    rgba(11,16,20,0.2) 70%,
    transparent 100%
  );
}

.prop-body {
  position:absolute; bottom:0; left:0; right:0;
  padding:2rem;
  z-index:2;
}
.prop-card--sm .prop-body { padding:1.4rem 1.6rem; }

.prop-tags { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.8rem; }
.prop-tag {
  font-family:var(--sans); font-size:0.6rem;
  font-weight:400; letter-spacing:0.18em; text-transform:uppercase;
  padding:0.25rem 0.7rem;
  border: 1px solid rgba(74,140,126,0.5);
  color:var(--teal);
}
.prop-tag--brass {
  border-color:rgba(201,169,110,0.4);
  color:var(--brass);
}
.prop-tag--new {
  background:var(--teal); color:var(--void);
  border-color:var(--teal);
}

.prop-district {
  font-family:var(--sans); font-size:0.65rem;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal); margin-bottom:0.4rem;
}
.prop-title {
  font-family:var(--serif); font-size:1.9rem;
  font-weight:300; line-height:1.15;
  color:var(--ivory); margin-bottom:0.5rem;
}
.prop-card--sm .prop-title { font-size:1.35rem; }
.prop-short {
  font-family:var(--sans); font-size:0.8rem;
  font-weight:300; color:var(--ivory-70);
  line-height:1.6; margin-bottom:1rem;
  display:none;
}
.prop-card--hero .prop-short { display:block; }

.prop-meta {
  display:flex; align-items:center;
  justify-content:space-between;
  padding-top:1rem;
  border-top:1px solid rgba(238,240,240,0.1);
}
.prop-price {
  font-family:var(--serif); font-size:1.4rem;
  font-weight:400; color:var(--brass);
}
.prop-card--sm .prop-price { font-size:1.1rem; }
.prop-view {
  font-family:var(--sans); font-size:0.65rem;
  font-weight:400; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ivory-40);
  display:flex; align-items:center; gap:0.5rem;
  transition:color var(--transition);
}
.prop-view::after {
  content:'→';
  transition:transform var(--transition);
}
.prop-card:hover .prop-view {
  color:var(--teal);
}
.prop-card:hover .prop-view::after { transform:translateX(4px); }

/* ══════════════════════════════════
   TYPE CARDS
══════════════════════════════════ */
.section-types { padding:5rem 0; background:var(--deep); }

.types-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2px;
}
.type-card {
  padding:3rem 2.5rem;
  background:var(--surface);
  border:1px solid transparent;
  transition:all var(--transition);
  display:block;
  position:relative; overflow:hidden;
}
.type-card::before {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:2px;
  background: var(--teal);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--transition);
}
.type-card:hover { background:var(--surface-hi); border-color:rgba(74,140,126,0.15); }
.type-card:hover::before { transform:scaleX(1); }

.type-count {
  font-family:var(--serif); font-size:4rem; font-weight:300;
  color:var(--teal); opacity:0.25;
  line-height:1; margin-bottom:1.5rem;
  transition:opacity var(--transition);
}
.type-card:hover .type-count { opacity:0.45; }
.type-name {
  font-family:var(--serif); font-size:1.6rem; font-weight:300;
  color:var(--ivory); margin-bottom:0.8rem;
}
.type-desc {
  font-family:var(--sans); font-size:0.82rem; font-weight:300;
  color:var(--ivory-70); line-height:1.75;
  margin-bottom:1.5rem;
}
.type-link {
  font-family:var(--sans); font-size:0.65rem; font-weight:400;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal);
  display:flex; align-items:center; gap:0.5rem;
}
.type-link::after { content:'→'; transition:transform var(--transition); }
.type-card:hover .type-link::after { transform:translateX(4px); }

/* ══════════════════════════════════
   WHY FIVEHAUS
══════════════════════════════════ */
.section-why { padding:7rem 0; }
.why-inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:6rem; align-items:start;
}
.why-content { }
.why-text {
  font-family:var(--sans); font-size:0.9rem;
  font-weight:300; line-height:1.9;
  color:var(--ivory-70); margin:1.5rem 0 2.5rem;
}
.why-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:rgba(74,140,126,0.1);
  border:1px solid rgba(74,140,126,0.1);
}
.why-item {
  padding:1.8rem;
  background:var(--void);
}
.why-num {
  font-family:var(--serif); font-size:0.85rem; font-weight:300;
  color:var(--teal); margin-bottom:0.8rem; display:block;
}
.why-name {
  font-family:var(--serif); font-size:1.15rem; font-weight:400;
  color:var(--ivory); margin-bottom:0.6rem;
}
.why-desc {
  font-family:var(--sans); font-size:0.78rem; font-weight:300;
  color:var(--ivory-40); line-height:1.7;
}

/* ══════════════════════════════════
   CTA BAND
══════════════════════════════════ */
.section-cta {
  padding:6rem 0;
  background:var(--deep);
  border-top:1px solid rgba(74,140,126,0.12);
  border-bottom:1px solid rgba(74,140,126,0.12);
  text-align:center;
  position:relative; overflow:hidden;
}
.section-cta::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 50% 50%, rgba(74,140,126,0.05) 0%, transparent 70%);
  pointer-events:none;
}
.cta-inner { position:relative; z-index:1; }
.cta-title {
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:300; line-height:1.2;
  color:var(--ivory); margin-bottom:1rem;
}
.cta-title em { font-style:italic; color:var(--teal); }
.cta-sub {
  font-family:var(--sans); font-size:0.85rem;
  font-weight:300; color:var(--ivory-70);
  margin-bottom:2.5rem; max-width:480px; margin-left:auto; margin-right:auto;
}
.cta-contacts {
  display:flex; align-items:center; justify-content:center;
  gap:3rem; flex-wrap:wrap;
}
.cta-contact-item {
  display:flex; flex-direction:column; gap:0.3rem;
  align-items:center;
}
.cta-contact-label {
  font-family:var(--sans); font-size:0.62rem;
  letter-spacing:0.25em; text-transform:uppercase;
  color:var(--teal);
}
.cta-contact-val {
  font-family:var(--serif); font-size:1.1rem;
  font-weight:400; color:var(--ivory);
  transition:color var(--transition);
}
.cta-contact-item:hover .cta-contact-val { color:var(--brass); }

/* ══════════════════════════════════
   GALLERY PAGE HERO
══════════════════════════════════ */
.page-hero {
  min-height:38vh;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-end;
  position:relative;
  padding:8rem 3rem 3.5rem;
  overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 100% at 20% 60%, rgba(22,36,44,0.95) 0%, rgba(11,16,20,0.8) 60%, rgba(11,16,20,0.6) 100%),
    linear-gradient(to bottom, rgba(11,16,20,0.6) 0%, rgba(11,16,20,0.3) 100%);
}
.page-hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(74,140,126,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,140,126,0.03) 1px, transparent 1px);
  background-size:60px 60px;
}
.page-hero-content { position:relative; z-index:2; }
.page-title {
  font-family:var(--serif);
  font-size:clamp(2.5rem,6vw,5rem);
  font-weight:300; line-height:1;
  color:var(--ivory);
}
.page-title em { font-style:italic; color:var(--ivory-70); }
.page-desc {
  font-family:var(--sans); font-size:0.88rem;
  font-weight:300; color:var(--ivory-70);
  margin-top:0.8rem; max-width:480px;
}

/* ══════════════════════════════════
   FILTER BAR
══════════════════════════════════ */
.filter-bar {
  position:sticky; top:66px; z-index:100;
  background:rgba(11,16,20,0.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(74,140,126,0.12);
  padding:0;
}
.filter-inner {
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 2.5rem;
  gap:1rem;
}
.filter-btns { display:flex; gap:0; }
.filter-btn {
  font-family:var(--sans); font-size:0.68rem;
  font-weight:400; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ivory-40); padding:1.1rem 1.4rem;
  background:none; border:none; cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all var(--transition);
}
.filter-btn:hover { color:var(--ivory-70); }
.filter-btn.active { color:var(--teal); border-bottom-color:var(--teal); }

.filter-count {
  font-family:var(--sans); font-size:0.65rem;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ivory-40);
  white-space:nowrap;
}

/* ══════════════════════════════════
   LISTINGS GRID
══════════════════════════════════ */
.listings-section { padding:3rem 0 6rem; }

.listings-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}

.listing-card {
  display:block; position:relative;
  overflow:hidden; background:var(--surface);
  border:1px solid transparent;
  transition:border-color var(--transition);
}
.listing-card:hover { border-color:rgba(74,140,126,0.2); }

.listing-img-wrap {
  position:relative; overflow:hidden;
  aspect-ratio:4/3;
}
.listing-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.7s ease, filter 0.7s ease;
  filter:saturate(0.7);
}
.listing-card:hover .listing-img-wrap img {
  transform:scale(1.05);
  filter:saturate(0.9);
}

.listing-badge {
  position:absolute; top:1rem; left:1rem;
  font-family:var(--sans); font-size:0.58rem;
  font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  padding:0.3rem 0.8rem;
  background:var(--teal); color:var(--void);
}
.listing-badge--construction {
  background:var(--brass); color:var(--void);
}

.listing-body {
  padding:1.5rem;
  border-top:1px solid rgba(74,140,126,0.1);
}
.listing-district {
  font-family:var(--sans); font-size:0.62rem;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal); margin-bottom:0.4rem;
}
.listing-title {
  font-family:var(--serif); font-size:1.25rem;
  font-weight:300; color:var(--ivory);
  margin-bottom:0.4rem; line-height:1.2;
}
.listing-short {
  font-family:var(--sans); font-size:0.78rem;
  font-weight:300; color:var(--ivory-40);
  line-height:1.6; margin-bottom:1.1rem;
}
.listing-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1rem;
  border-top:1px solid rgba(238,240,240,0.07);
}
.listing-price {
  font-family:var(--serif); font-size:1.15rem;
  font-weight:400; color:var(--brass);
}
.listing-type {
  font-family:var(--sans); font-size:0.6rem;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ivory-40);
}

/* ══════════════════════════════════
   PROPERTY DETAIL PAGE
══════════════════════════════════ */
.property-hero {
  min-height:80vh; position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
}
.property-hero-img { position:absolute; inset:0; }
.property-hero-img img { width:100%; height:100%; object-fit:cover; filter:saturate(0.75); }
.property-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,16,20,0.98) 0%, rgba(11,16,20,0.65) 45%, rgba(11,16,20,0.15) 100%);
}
.property-hero-content {
  position:relative; z-index:2;
  padding:0 3rem 3.5rem; width:100%;
}
.property-breadcrumb {
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--sans); font-size:0.65rem;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ivory-40); margin-bottom:1.4rem;
}
.property-breadcrumb a:hover { color:var(--teal); }
.property-breadcrumb span { opacity:0.3; }

.property-title {
  font-family:var(--serif);
  font-size:clamp(2.8rem,6vw,5.5rem);
  font-weight:300; line-height:1;
  color:var(--ivory); margin-bottom:0.6rem;
}
.property-subtitle {
  font-family:var(--sans); font-size:0.85rem;
  font-weight:300; color:var(--ivory-70);
  margin-bottom:1.5rem;
}
.property-hero-meta {
  display:flex; gap:2rem; flex-wrap:wrap;
  align-items:center;
}
.property-price-hero {
  font-family:var(--serif); font-size:2.2rem;
  font-weight:400; color:var(--brass);
}
.prop-badge {
  font-family:var(--sans); font-size:0.6rem;
  font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  padding:0.3rem 0.9rem;
  border:1px solid rgba(74,140,126,0.5); color:var(--teal);
}
.prop-badge--freehold { border-color:rgba(201,169,110,0.4); color:var(--brass); }
.prop-badge--foreign { background:var(--teal); color:var(--void); border-color:var(--teal); }

/* Property body layout */
.property-body {
  display:grid; grid-template-columns:1.2fr 0.8fr;
  gap:0; background:var(--void);
}
.property-main { padding:4rem 3rem; border-right:1px solid rgba(74,140,126,0.1); }
.property-aside { padding:3rem 2.5rem; }

.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-bottom:3rem; }
.photo-item { aspect-ratio:4/3; overflow:hidden; cursor:pointer; }
.photo-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease, filter 0.5s ease; filter:saturate(0.75); }
.photo-item:hover img { transform:scale(1.06); filter:saturate(0.95); }

.property-section-label {
  font-family:var(--sans); font-size:0.62rem;
  letter-spacing:0.25em; text-transform:uppercase;
  color:var(--teal); margin-bottom:1.2rem; display:block;
}
.property-desc {
  font-family:var(--sans); font-size:0.9rem;
  font-weight:300; line-height:1.95;
  color:var(--ivory-70); margin-bottom:2.5rem;
}
.property-highlight {
  padding:1.4rem 1.6rem;
  border-left:2px solid var(--brass);
  background:var(--brass-dim);
  margin-bottom:2.5rem;
}
.highlight-label {
  font-family:var(--sans); font-size:0.6rem;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--brass); display:block; margin-bottom:0.4rem;
}
.highlight-text {
  font-family:var(--serif); font-size:1.05rem;
  font-weight:400; color:var(--ivory); line-height:1.5;
}

/* Specs grid */
.specs-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:rgba(74,140,126,0.08);
  border:1px solid rgba(74,140,126,0.08);
  margin-bottom:2.5rem;
}
.spec-item { padding:1.2rem 1.4rem; background:var(--void); }
.spec-label {
  font-family:var(--sans); font-size:0.6rem;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ivory-40); display:block; margin-bottom:0.3rem;
}
.spec-val {
  font-family:var(--serif); font-size:1rem;
  font-weight:400; color:var(--ivory);
}

/* Amenities */
.amenities-list { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:2.5rem; }
.amenity-tag {
  font-family:var(--sans); font-size:0.65rem;
  font-weight:400; letter-spacing:0.12em; text-transform:uppercase;
  padding:0.4rem 1rem;
  border:1px solid rgba(238,240,240,0.12); color:var(--ivory-70);
}

/* Aside — enquiry block */
.enquiry-block {
  position:sticky; top:90px;
}
.enquiry-block-inner {
  background:var(--surface);
  border:1px solid rgba(74,140,126,0.15);
  padding:2rem;
  margin-bottom:1.5rem;
}
.enquiry-title {
  font-family:var(--serif); font-size:1.4rem;
  font-weight:300; color:var(--ivory);
  margin-bottom:0.4rem;
}
.enquiry-price {
  font-family:var(--serif); font-size:2rem;
  font-weight:400; color:var(--brass);
  margin-bottom:1.5rem;
}
.enquiry-details {
  display:flex; flex-direction:column; gap:0.7rem;
  padding:1.2rem 0;
  border-top:1px solid rgba(238,240,240,0.08);
  border-bottom:1px solid rgba(238,240,240,0.08);
  margin-bottom:1.5rem;
}
.enquiry-detail-row {
  display:flex; justify-content:space-between; align-items:baseline;
}
.enquiry-detail-label {
  font-family:var(--sans); font-size:0.65rem;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ivory-40);
}
.enquiry-detail-val {
  font-family:var(--sans); font-size:0.82rem;
  font-weight:400; color:var(--ivory);
}
.enquiry-cta {
  display:flex; flex-direction:column; gap:0.7rem;
}
.btn-wa {
  display:flex; align-items:center; justify-content:center; gap:0.8rem;
  padding:1.1rem;
  background:var(--teal); color:var(--void);
  font-family:var(--sans); font-weight:500;
  font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase;
  transition:background var(--transition);
}
.btn-wa:hover { background:var(--teal-hi); }

/* Prev/Next */
.property-nav-section { padding:0 0 6rem; }
.property-nav-inner {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:2px; align-items:stretch;
}
.property-nav-card {
  padding:2rem 2.2rem;
  background:var(--surface);
  border:1px solid transparent;
  display:flex; flex-direction:column;
  transition:all var(--transition);
}
.property-nav-card:hover { border-color:rgba(74,140,126,0.2); background:var(--surface-hi); }
.property-nav-card--next { text-align:right; }
.nav-direction {
  font-family:var(--sans); font-size:0.6rem;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--teal); margin-bottom:0.5rem;
}
.nav-prop-title {
  font-family:var(--serif); font-size:1.25rem;
  font-weight:300; color:var(--ivory); margin-bottom:0.3rem;
}
.nav-prop-price {
  font-family:var(--serif); font-size:0.95rem;
  color:var(--brass);
}

/* ══════════════════════════════════
   LIGHTBOX
══════════════════════════════════ */
.lightbox {
  position:fixed; inset:0; z-index:800;
  background:rgba(11,16,20,0.98);
  display:none; align-items:center; justify-content:center;
  padding:2rem;
}
.lightbox.open { display:flex; }
.lb-img { max-width:90vw; max-height:86vh; object-fit:contain; }
.lb-close {
  position:absolute; top:1.5rem; right:1.5rem;
  color:var(--ivory-40); font-size:1.4rem;
  font-family:var(--sans); font-weight:300;
  transition:color var(--transition);
}
.lb-close:hover { color:var(--teal); }
.lb-prev, .lb-next {
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--ivory-40); font-size:2.5rem;
  padding:1rem; transition:color var(--transition);
  font-family:var(--sans); font-weight:200;
}
.lb-prev { left:1rem; } .lb-next { right:1rem; }
.lb-prev:hover, .lb-next:hover { color:var(--teal); }
.lb-caption {
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  text-align:center;
}
.lb-title {
  font-family:var(--serif); font-size:1.1rem;
  font-weight:300; color:var(--ivory);
}
.lb-sub {
  font-family:var(--sans); font-size:0.62rem;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal); margin-top:0.3rem;
}

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
footer {
  background:var(--void);
  border-top:1px solid rgba(74,140,126,0.12);
  padding:4rem 0;
}
.footer-inner {
  max-width:1380px; margin:0 auto; padding:0 2.5rem;
  display:grid; grid-template-columns:1.2fr 1fr 1fr;
  gap:4rem; align-items:start;
}
.footer-logo {
  font-family:var(--serif); font-size:1.8rem;
  font-weight:400; letter-spacing:0.04em;
  color:var(--ivory); margin-bottom:0.5rem;
}
.footer-logo-dot { color:var(--teal); }
.footer-tagline {
  font-family:var(--sans); font-size:0.7rem;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ivory-40); margin-bottom:1.2rem;
}
.footer-contact-item {
  font-family:var(--sans); font-size:0.8rem;
  font-weight:300; color:var(--ivory-70);
  margin-bottom:0.4rem;
}
.footer-contact-item a:hover { color:var(--teal); }
.footer-col-label {
  font-family:var(--sans); font-size:0.62rem;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--teal); margin-bottom:1.2rem; display:block;
}
.footer-nav { display:flex; flex-direction:column; gap:0.7rem; }
.footer-nav a {
  font-family:var(--sans); font-size:0.82rem;
  font-weight:300; color:var(--ivory-40);
  transition:color var(--transition);
}
.footer-nav a:hover { color:var(--ivory); }
.footer-bottom {
  max-width:1380px; margin:2.5rem auto 0; padding:2rem 2.5rem 0;
  border-top:1px solid rgba(238,240,240,0.06);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.footer-copy {
  font-family:var(--sans); font-size:0.7rem;
  color:rgba(238,240,240,0.2);
}
.footer-rea {
  font-family:var(--sans); font-size:0.7rem;
  color:rgba(238,240,240,0.2);
}

/* ══════════════════════════════════
   REVEAL ANIMATION
══════════════════════════════════ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════
   ANIMATIONS
══════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { to{opacity:1} }
@keyframes pulse { 0%,100%{opacity:0.25} 50%{opacity:0.9} }

/* ══════════════════════════════════
   EMPTY / LOADING STATES
══════════════════════════════════ */
.listings-empty {
  grid-column:1/-1; text-align:center; padding:5rem 2rem;
  display:none; flex-direction:column; align-items:center; gap:1rem;
}
.listings-empty p {
  font-family:var(--sans); font-size:0.85rem;
  font-weight:300; color:var(--ivory-40);
}
.load-more-wrap {
  display:none; justify-content:center;
  padding:3rem 0 0;
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width:1100px) {
  .featured-grid { grid-template-columns:1fr 1fr; }
  .prop-card--hero { grid-row:span 1; min-height:400px; }
  .prop-card--hero .prop-short { display:none; }
  .why-inner { grid-template-columns:1fr; gap:3rem; }
  .property-body { grid-template-columns:1fr; }
  .property-aside { border-top:1px solid rgba(74,140,126,0.1); }
  .listings-grid { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  #navbar { padding:1.1rem 1.5rem; }
  #navbar.scrolled { padding:0.9rem 1.5rem; }
  .nav-links {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    flex-direction:column; align-items:center; justify-content:center;
    gap:2.5rem; background:rgba(11,16,20,0.99); z-index:490;
  }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:1rem; letter-spacing:0.2em; }
  .nav-toggle { display:flex; }
  .hero { padding:0 0 5rem; }
  .hero-content { padding:0 1.5rem; }
  .hero-scroll { right:1.5rem; }
  .featured-grid { grid-template-columns:1fr; }
  .prop-card--hero { min-height:380px; }
  .prop-card--sm { min-height:260px; }
  .types-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .stats-strip { flex-wrap:wrap; }
  .stat { min-width:50%; border-right:none; border-bottom:1px solid rgba(74,140,126,0.1); }
  .page-hero { padding:7rem 1.5rem 2.5rem; }
  .filter-inner { padding:0 1.5rem; overflow-x:auto; }
  .filter-btns { min-width:max-content; }
  .listings-section { padding:2rem 0 4rem; }
  .listings-grid { grid-template-columns:1fr; }
  .property-hero-content { padding:0 1.5rem 2.5rem; }
  .property-main { padding:2.5rem 1.5rem; }
  .property-aside { padding:2rem 1.5rem; }
  .photo-grid { grid-template-columns:1fr 1fr; }
  .specs-grid { grid-template-columns:1fr; }
  .property-nav-inner { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .cta-contacts { flex-direction:column; gap:1.5rem; }
  .container { padding:0 1.5rem; }
  .section-featured,.section-why { padding:4rem 0; }
}

@media (max-width:480px) {
  .hero-title { font-size:3rem; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .photo-grid { grid-template-columns:1fr; }
}