/*
  PropertEase — Multinational Luxury Real Estate
  Aesthetic: CBRE × Sotheby's × Emaar
  — Architectural. Editorial. Cinematic. —
  Fonts: Freight Display (headline) + DM Sans (body)
  Palette: Pure white canvas · Deep navy · Brand red · Muted gold
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,700&family=DM+Serif+Display:ital@0;1&display=swap');

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* Canvas */
  --white:     #FFFFFF;
  --off-white: #F8F7F5;
  --warm-gray: #F2F0EE;
  --line:      #E8E5E0;
  --line-dark: #D0CCC6;

  /* Text */
  --ink:       #0F0F0F;
  --ink-2:     #3D3D3D;
  --ink-3:     #7A7672;
  --ink-4:     #AEAAA4;

  /* Brand */
  --red:       #CC2119;
  --red-hover: #A81A13;
  --blue:      #0D2E8A;
  --blue-mid:  #1A3FA8;
  --blue-lt:   #E8EEFF;
  --gold:      #C8960C;
  --gold-lt:   #FDF5E0;

  /* Semantic aliases (backward-compat with existing JS) */
  --bg:        var(--white);
  --bg2:       var(--off-white);
  --bg3:       var(--warm-gray);
  --surf:      var(--white);
  --surf2:     var(--off-white);
  --surf3:     var(--warm-gray);
  --border:    var(--line);
  --border2:   var(--line-dark);
  --text:      var(--ink);
  --text2:     var(--ink-2);
  --muted:     var(--ink-3);
  --gold-l:    var(--gold-lt);
  --gold-d:    var(--gold);
  --gold-text: var(--gold);
  --blue-d:    var(--blue);
  --blue-l:    var(--blue-lt);
  --blue-m:    var(--blue-mid);
  --red-d:     var(--red-hover);
  --red-l:     #FFF0EE;

  /* Type */
  --display:   'DM Serif Display', 'Playfair Display', Georgia, serif;
  --serif:     'Playfair Display', Georgia, serif;
  --sans:      'DM Sans', system-ui, sans-serif;
  --font-h:    var(--display);
  --font-b:    var(--sans);

  /* Geometry */
  --r4:  4px;
  --r8:  8px;
  --r12: 12px;
  --r16: 16px;
  --r24: 24px;
  --r32: 32px;

  /* Shadow — editorial, not heavy */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06);
  --shadow:    0 4px 20px rgba(0,0,0,.07);
  --shadow-md: 0 12px 40px rgba(0,0,0,.10);
  --shadow-lg: 0 32px 80px rgba(0,0,0,.14);
  --shadow-xl: 0 48px 120px rgba(0,0,0,.18);

  --nav-h: 72px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--ink);
  line-height: 1.65;
  font-size: 15px;
  font-weight: 400;
  overflow-x: hidden;
}
img { max-width:100%; display:block }
a { color:inherit; text-decoration:none }
button { cursor:pointer; font-family:var(--sans) }
input, select, textarea { font-family:var(--sans) }
::selection { background:var(--blue); color:#fff }

/* Scrollbar */
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:var(--white) }
::-webkit-scrollbar-thumb { background:var(--line-dark); border-radius:2px }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOPBAR — slim announcement strip
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.topbar {
  background: var(--ink);
  padding: 10px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
}
.topbar a { color:rgba(255,255,255,.55); transition:color .2s }
.topbar a:hover { color:#fff }
.topbar-l { display:flex; align-items:center; gap:24px }
.tsep { width:1px; height:10px; background:rgba(255,255,255,.15) }
.topbar-r a { color:var(--gold); font-weight:500 }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAV — clean, multinational
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
nav {
  position: sticky; top:0; z-index:900;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--line);
  padding: 0 48px;
  display: flex; align-items:center; gap:40px;
  height: var(--nav-h);
}
.nav-logo {
  display:flex; align-items:center; gap:12px;
  margin-right:auto; flex-shrink:0;
  text-decoration:none;
}
.logo-img {
  height: 46px; width:46px;
  object-fit: contain;
  display: block;
  /* Transparent PNG — no blend needed */
}
.brand {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1;
}
.brand em { font-style:italic; color:var(--red) }

/* Legacy fallback */
.logo-box { display:none }

.nav-links { list-style:none; display:flex; align-items:center; gap:0 }
.nav-links > li > a {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  padding: 10px 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .2s;
  display:block;
  position:relative;
}
.nav-links > li > a::after {
  content:'';
  position:absolute; bottom:0; left:16px; right:16px;
  height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color:var(--ink) }
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after { transform:scaleX(1) }

/* CTA button in nav */
.nav-links .nav-cta {
  background: var(--red);
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 600;
  transition: background .2s, transform .2s !important;
}
.nav-links .nav-cta::after { display:none }
.nav-links .nav-cta:hover { background:var(--red-hover) !important; transform:none !important }

.nav-links li { position:relative }
.nav-links li:hover .dropdown {
  border-radius:12px; opacity:1; visibility:visible; transform:translateY(0) }

/* Dropdown */
.dropdown {
  position:absolute; top:100%; left:0;
  background:var(--white);
  border:1px solid var(--line);
  border-top:3px solid var(--red);
  border-radius:0 0 12px 12px;
  padding:12px 0;
  min-width:240px;
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:all .2s cubic-bezier(.16,1,.3,1);
  box-shadow: var(--shadow-md);
  z-index:100;
}
.dropdown a {
  display:block;
  padding: 9px 24px;
  font-size:13px;
  color:var(--ink-2);
  letter-spacing:.02em;
  font-weight:400;
  text-transform:none;
  transition:all .15s;
}
.dropdown a::after { display:none }
.dropdown a:hover { color:var(--red); background:var(--off-white); padding-left:28px }
.dsec {
  font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4);
  padding:12px 24px 6px;
}

.hamburger { display:none; background:none; border:none; padding:8px; flex-direction:column; gap:5px }
.hamburger span { width:22px; height:1.5px; background:var(--ink); border-radius:1px; transition:.3s }
.mob-nav {
  display:none; position:fixed; inset:0;
  background:var(--white); z-index:950;
  padding:80px 32px 40px;
  overflow-y:auto; flex-direction:column; gap:0;
  border-left:4px solid var(--red);
  border-radius:16px 0 0 16px;
}
.mob-nav.open { display:flex }
.mob-sec {
  font-size:9px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4); margin:24px 0 6px;
}
.mob-nav a {
  font-size:15px; color:var(--ink-2);
  padding:11px 0; border-bottom:1px solid var(--line);
  font-weight:400;
}
.mob-nav a:hover { color:var(--red) }
.mob-close { position:absolute; top:20px; right:24px; background:none; border:none; color:var(--ink); font-size:22px; cursor:pointer }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.container { max-width:1320px; margin:0 auto; padding:0 56px }
.section { padding:104px 0 }
.g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:28px }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px }

/* Section labels — editorial style */
.s-label {
  font-size:10px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--red); margin-bottom:18px;
  display:flex; align-items:center; gap:14px;
}
.s-label::before {
  content:''; width:28px; height:1.5px;
  background:var(--red); flex-shrink:0;
}
.s-title {
  font-family: var(--display);
  font-size: clamp(36px,4.2vw,60px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 20px;
  letter-spacing: -.02em;
}
.s-title em { font-style:italic; color:var(--red) }
.s-sub {
  font-size:16px; color:var(--ink-3);
  max-width:520px; line-height:1.8; font-weight:300;
}
.s-hdr { margin-bottom:56px }
.s-hdr-row {
  display:flex; align-items:flex-end;
  justify-content:space-between;
  margin-bottom:56px; gap:20px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS — architectural, no-nonsense
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 32px;
  border-radius: 8px;
  font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  border:none; transition:all .22s;
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn-red, .btn-gold { background:var(--red); color:#fff }
.btn-red:hover, .btn-gold:hover {
  background:var(--red-hover);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(204,33,25,.22);
}
.btn-blue {
  background:var(--blue); color:#fff;
}
.btn-blue:hover {
  background:var(--blue-mid);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(13,46,138,.22);
}
.btn-out {
  background:transparent; color:var(--ink);
  border:1.5px solid var(--ink);
}
.btn-out:hover { background:var(--ink); color:#fff }
.btn-ghost {
  background:rgba(255,255,255,.12); color:#fff;
  border:1.5px solid rgba(255,255,255,.35);
  backdrop-filter:blur(4px);
}
.btn-ghost:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.6) }
.btn-lg { padding:18px 40px; font-size:12px }
.btn-sm { padding:9px 20px; font-size:10px }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BADGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.badge {
  position:absolute; top:16px; left:16px;
  font-size:9px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px;
  border-radius: 4px;
  z-index:2;
}
.b-gold { background:var(--gold); color:#fff }
.b-red  { background:var(--red);  color:#fff }
.b-blue { background:var(--blue); color:#fff }
.b-green { background:#166534; color:#fff }
.b-teal  { background:#0e7490; color:#fff }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROPERTY CARD — editorial card style
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pc {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: all .35s cubic-bezier(.16,1,.3,1);
  cursor:pointer; position:relative;
}
.pc:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}
.pc-img {
  height:240px; background:var(--warm-gray);
  position:relative; overflow:hidden;
}
.pc-img img {
  width:100%; height:100%;
  object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.pc:hover .pc-img img { transform:scale(1.08) }
.pc-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:60px }

/* Red accent line on hover */
.pc::before {
  content:''; position:absolute; top:0; left:0;
  width:4px; height:0;
  background:var(--red); z-index:3;
  transition:height .35s cubic-bezier(.16,1,.3,1);
}
.pc:hover::before { height:100% }

.pc-body { padding:24px 26px 26px }
.pc-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px }
.pc-tag {
  font-size:9px; background:var(--warm-gray);
  color:var(--ink-3); padding:3px 10px;
  border-radius:20px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.pc-tag-gold { background:var(--gold-lt); color:var(--gold) }
.pc-tag-blue { background:var(--blue-lt); color:var(--blue) }
.pc-tag-red  { background:#FFF0EE; color:var(--red) }
.pc-tag-house { background:#E8F5E9; color:#2E7D32 }
.pc-tag-hl { background:#F3F0FF; color:#5B21B6; font-size:8px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.pc-name {
  font-family:var(--display); font-size:20px;
  font-weight:400; color:var(--ink);
  margin-bottom:6px; line-height:1.2;
  letter-spacing:-.01em;
}
.pc-loc {
  font-size:11px; color:var(--ink-4);
  margin-bottom:14px; display:flex; align-items:center; gap:5px;
  letter-spacing:.04em;
}
.pc-price {
  font-family:var(--display); font-size:22px;
  font-weight:400; color:var(--blue);
  margin-bottom:4px; letter-spacing:-.01em;
}
.pc-equity { font-size:13px; color:var(--gold,#C9A870); font-weight:600; margin-bottom:6px }
.pc-units { font-size:12px; color:var(--ink-3) }
.pc-foot {
  display:flex; align-items:center;
  justify-content:space-between;
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line);
}
.pc-status {
  font-size:10px; color:var(--ink-3);
  display:flex; align-items:center; gap:6px;
  letter-spacing:.06em; text-transform:uppercase;
}
.pc-status::before {
  content:''; width:5px; height:5px;
  border-radius:50%; background:var(--blue); flex-shrink:0;
}
.pc-arrow {
  width:34px; height:34px;
  border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:all .2s;
}
.pc:hover .pc-arrow { background:var(--red); border-color:var(--red); color:#fff }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO — cinematic full-viewport
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero {
  min-height:100vh;
  display:flex; align-items:center;
  position:relative; overflow:hidden;
  background:var(--white);
}
/* Architectural diagonal split — right side */
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(
    105deg,
    var(--white) 0%,
    var(--white) 52%,
    var(--off-white) 52%,
    var(--off-white) 100%
  );
}
/* Fine grid lines — like architectural drawings */
.hero-bg::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.4;
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 60%, transparent 100%);
}
/* Red accent pillar — far right edge */
.hero-bg::after {
  content:''; position:absolute; right:0; top:0;
  width:6px; height:100%;
  background:linear-gradient(to bottom, var(--red), var(--blue));
}

.hero-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 520px;
  gap:80px; align-items:center;
  padding:120px 0 100px; width:100%;
}

/* Eyebrow */
.hero-eyebrow {
  display:flex; align-items:center;
  gap:14px; margin-bottom:32px;
}
.hero-eyebrow-line {
  width:48px; height:2px;
  background:var(--red); flex-shrink:0;
}
.hero-eyebrow span {
  font-size:10px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--red);
}
/* Giant headline */
.hero-title {
  font-family:var(--display);
  font-size:clamp(52px,6vw,88px);
  font-weight:400;
  line-height:1.0;
  color:var(--ink);
  margin-bottom:28px;
  letter-spacing:-.03em;
}
.hero-title strong { display:block; font-weight:700; color:var(--blue) }
.hero-title em { font-style:italic; color:var(--red) }

.hero-sub {
  font-size:17px; color:var(--ink-3);
  line-height:1.8; max-width:480px;
  margin-bottom:48px; font-weight:300;
}
.hero-btns { display:flex; gap:14px; flex-wrap:wrap }

.hero-stats {
  display:flex; gap:48px;
  margin-top:64px; padding-top:40px;
  border-top:1px solid var(--line);
}
.hero-stat-n {
  font-family:var(--display); font-size:42px;
  font-weight:400; color:var(--blue);
  line-height:1; letter-spacing:-.02em;
}
.hero-stat-l {
  font-size:11px; color:var(--ink-4);
  margin-top:4px; letter-spacing:.06em; text-transform:uppercase;
}

/* ── HERO AGENT PANEL ── */
.hero-agent-panel { position:relative; flex-shrink:0; border-radius:20px;
}
.hero-agent-frame {
  overflow:hidden;
  height:620px;
  background:var(--warm-gray);
  border:none;
  position:relative;
  box-shadow:var(--shadow-xl);
  /* Slight rotation — editorial magazine feel */
  clip-path:polygon(0 0, 100% 0, 100% 95%, 95% 100%, 0 100%);
}
.hero-agent-frame img {
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
}

/* Gradient overlay on agent frame */
.hero-agent-ov {
  position:absolute; bottom:0; left:0; right:0; padding:36px;
  background:linear-gradient(
    to top,
    rgba(13,46,138,.95) 0%,
    rgba(13,46,138,.5) 50%,
    transparent 100%
  );
}
.hero-agent-name {
  font-family:var(--display); font-size:26px;
  font-weight:400; color:#fff; margin-bottom:6px;
  letter-spacing:-.01em;
}
.hero-agent-title {
  font-size:11px; color:rgba(255,255,255,.7);
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px;
}
.hero-cred-pills { display:flex; gap:8px; flex-wrap:wrap }
.hero-cred-pill {
  font-size:10px; font-weight:700; letter-spacing:.1em;
  padding:4px 14px; border-radius:20px;
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.25);
}

/* Float card */
.hero-float-card {
  position:absolute; top:32px; right:-28px;
  background:var(--white);
  border:1px solid var(--line);
  border-top:3px solid var(--red);
  padding:20px 24px; min-width:210px;
  box-shadow:var(--shadow-lg);
  animation:floatA 5s ease-in-out infinite;
}
.hero-float-card .label {
  font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-4); margin-bottom:10px;
}
.hero-float-card .price {
  font-family:var(--display); font-size:22px;
  font-weight:400; color:var(--blue); letter-spacing:-.01em;
}
.hero-float-card .name { font-size:12px; color:var(--ink-3); margin-top:6px }

.hero-prop-count {
  position:absolute; bottom:-20px; left:24px;
  background:var(--red); color:#fff;
  padding:12px 24px;
  font-size:11px; font-weight:700; letter-spacing:.1em;
  white-space:nowrap;
  animation:floatB 6s ease-in-out infinite .5s;
  box-shadow:0 6px 24px rgba(204,33,25,.3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOCATION CARDS — cinematic photography
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.loc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px }
.loc-card {
  border-radius: 12px; overflow:hidden;
  position:relative; height:320px;
  display:block; transition:all .4s cubic-bezier(.16,1,.3,1);
  border:none;
}
/* First card is taller — editorial asymmetry */
.loc-grid .loc-card:first-child { height:320px }
.loc-card:hover { transform:scale(1.01) }
.loc-card:hover .loc-img { transform:scale(1.06) }
.loc-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1);
  filter:saturate(1.05);
}
.loc-bg { display:none }
.loc-ov {
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.25) 50%,
    rgba(0,0,0,.08) 100%
  );
  transition:all .4s;
}
.loc-card:hover .loc-ov { background:linear-gradient(to top, rgba(13,46,138,.8) 0%, rgba(13,46,138,.2) 50%, transparent 100%) }
.loc-ct {
  position:absolute; bottom:0; left:0; right:0;
  padding:28px;
}
.loc-name {
  font-family:var(--display); font-size:28px;
  font-weight:400; color:#fff; margin-bottom:4px;
  letter-spacing:-.01em;
}
.loc-sub { font-size:12px; color:rgba(255,255,255,.65); margin-bottom:12px }
.loc-lnk {
  font-size:9px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:6px;
  opacity:0; transform:translateY(4px);
  transition:all .3s;
}
.loc-card:hover .loc-lnk { opacity:1; transform:translateY(0) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TESTIMONIALS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.testi-card {
  background:var(--white);
  border:1px solid var(--line);
  padding:36px;
  border-top:3px solid var(--red);
  box-shadow:var(--shadow-xs);
  transition:box-shadow .3s;
}
.testi-card:hover { box-shadow:var(--shadow-md) }
.testi-stars { color:var(--gold); font-size:13px; margin-bottom:18px; letter-spacing:3px }
.testi-text {
  font-family:var(--serif); font-size:17px;
  font-weight:400; line-height:1.7;
  color:var(--ink); font-style:italic;
  margin-bottom:24px;
}
.testi-auth { display:flex; align-items:center; gap:14px }
.testi-av {
  width:44px; height:44px;
  background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; font-weight:700;
  font-family:var(--display);
}
.testi-name { font-size:14px; font-weight:600; color:var(--ink) }
.testi-role { font-size:11px; color:var(--ink-4) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AGENT SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.agent-wrap { display:grid; grid-template-columns:420px 1fr; gap:72px; align-items:start }
.agent-photo {
  overflow:hidden; height:540px;
  background:var(--warm-gray);
  border:none; position:relative;
  box-shadow:var(--shadow-xl);
  clip-path:polygon(0 0, 100% 0, 100% 96%, 94% 100%, 0 100%);
}
.agent-photo img { width:100%; height:100%; object-fit:cover; object-position:top }
.agent-photo-ph { display:flex; align-items:center; justify-content:center; font-size:100px; height:100% }
.agent-badge-wrap { position:absolute; bottom:28px; left:28px; right:28px }
.agent-badge {
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  border-left:4px solid var(--red);
  padding:18px 20px;
}
.agent-badge-name {
  font-family:var(--display); font-size:20px;
  font-weight:400; color:var(--ink); letter-spacing:-.01em;
}
.agent-badge-title {
  font-size:11px; color:var(--blue);
  text-transform:uppercase; letter-spacing:.12em; margin-top:3px;
}
.cred-tag {
  font-size:10px; font-weight:700; padding:5px 14px;
  background:var(--blue); color:#fff;
  letter-spacing:.08em; text-transform:uppercase;
}
.agent-creds-wrap { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px }
.agent-bio {
  font-size:16px; line-height:1.9;
  color:var(--ink-2); margin-bottom:32px; font-weight:300;
}
.agent-contact-grid { display:flex; gap:12px; flex-wrap:wrap }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BLOG CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.blog-card {
  background:var(--white); border:1px solid var(--line);
  overflow:hidden; transition:all .32s;
  display:block;
}
.blog-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent }
.blog-img { height:200px; display:flex; align-items:center; justify-content:center; font-size:52px; background:var(--warm-gray); overflow:hidden }
.blog-img img { width:100%; height:100%; object-fit:cover }
.blog-body { padding:26px 28px 30px }
.blog-date { font-size:10px; color:var(--ink-4); margin-bottom:10px; letter-spacing:.08em; text-transform:uppercase }
.blog-title { font-family:var(--display); font-size:21px; font-weight:400; line-height:1.25; color:var(--ink); margin-bottom:10px; letter-spacing:-.01em }
.blog-excerpt { font-size:14px; color:var(--ink-3); line-height:1.75 }
.blog-read { font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--red); margin-top:18px; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROPERTY TYPE CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ptype-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line) }
.ptype-card {
  border-radius:16px;
  background:var(--white);
  padding:36px 28px;
  transition:all .28s; display:block;
  border:none;
}
.ptype-card:hover { background:var(--blue); }
.ptype-card:hover .ptype-name,
.ptype-card:hover .ptype-desc { color:#fff }
.ptype-card:hover .ptype-icon { filter:none }
.ptype-icon { font-size:36px; margin-bottom:18px }
.ptype-name { font-family:var(--display); font-size:22px; font-weight:400; color:var(--ink); margin-bottom:10px; letter-spacing:-.01em; transition:color .28s }
.ptype-desc { font-size:13px; color:var(--ink-3); line-height:1.65; transition:color .28s }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE HERO (Blog, Contact, inner pages)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-hero {
  background:var(--ink);
  padding:80px 0 64px;
  position:relative; overflow:hidden;
  color:#fff;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, var(--blue) 0%, var(--ink) 60%);
  opacity:.9;
}
/* Grid overlay */
.page-hero::after {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
}
.page-hero .container { position:relative; z-index:1 }
.page-hero .s-label { color:rgba(255,255,255,.5) }
.page-hero .s-label::before { background:rgba(255,255,255,.3) }
.page-hero h1 {
  font-family:var(--display);
  font-size:clamp(38px,5vw,66px);
  font-weight:400; color:#fff;
  margin:12px 0 18px; line-height:1.05;
  letter-spacing:-.02em;
}
.page-hero h1 em { font-style:italic; color:var(--gold) }
.page-hero p { font-size:16px; color:rgba(255,255,255,.7); max-width:560px; line-height:1.85; font-weight:300 }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LISTING DETAIL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.breadcrumb-bar { padding:22px 0; border-bottom:1px solid var(--line); margin-bottom:48px }
.ph-crumb { font-size:11px; color:var(--ink-4); display:flex; align-items:center; gap:6px; letter-spacing:.04em }
.ph-crumb a { color:var(--blue); font-weight:500 }
.ph-crumb span { color:var(--line-dark) }

/* Gallery */
.listing-gallery-main { overflow:hidden; margin-bottom:12px; cursor:pointer; position:relative; background:var(--warm-gray); box-shadow:var(--shadow) }
.listing-gallery-main img { width:100%; height:500px; object-fit:cover; display:block; transition:transform .5s }
.listing-gallery-main:hover img { transform:scale(1.02) }
.gallery-expand-btn {
  position:absolute; bottom:16px; right:16px;
  background:rgba(255,255,255,.95); border:none;
  color:var(--ink); padding:10px 18px;
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:all .2s;
}
.gallery-expand-btn:hover { background:var(--red); color:#fff }
.listing-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:44px }
.listing-thumb { overflow:hidden; height:90px; cursor:pointer; border:2px solid transparent; transition:all .22s; background:var(--warm-gray) }
.listing-thumb:hover, .listing-thumb.active { border-color:var(--red) }
.listing-thumb img { width:100%; height:100%; object-fit:cover }
.listing-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:24px }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.97); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:.25s; padding:40px }
.lightbox.open { opacity:1; visibility:visible }
.lightbox-inner { position:relative; max-width:1100px; width:100% }
.lightbox-img { width:100%; max-height:85vh; object-fit:contain; display:block; margin:auto }
.lightbox-close { position:absolute; top:-48px; right:0; background:none; border:none; color:rgba(255,255,255,.6); font-size:28px; cursor:pointer; transition:.2s }
.lightbox-close:hover { color:#fff }
.lightbox-prev, .lightbox-next { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#fff; width:48px; height:48px; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s }
.lightbox-prev:hover, .lightbox-next:hover { background:var(--red); border-color:var(--red) }
.lightbox-prev { left:20px }
.lightbox-next { right:20px }
.lightbox-count { text-align:center; color:rgba(255,255,255,.4); font-size:12px; margin-top:14px }

/* Listing layout */
.listing-layout { display:grid; grid-template-columns:1fr 380px; gap:52px; align-items:start }
.listing-sidebar { position:sticky; top:calc(var(--nav-h) + 18px) }
.listing-title { font-family:var(--display); font-size:clamp(28px,3.5vw,46px); font-weight:400; line-height:1.05; color:var(--ink); margin-bottom:12px; letter-spacing:-.02em }
.listing-sub-loc { font-size:13px; color:var(--ink-3); margin-bottom:8px; display:flex; align-items:center; gap:7px }
.listing-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px }
.listing-section { margin-bottom:48px }
.listing-section-title {
  font-family:var(--display); font-size:24px; font-weight:400;
  color:var(--ink); padding-bottom:14px;
  border-bottom:1px solid var(--line); margin-bottom:20px;
  position:relative; letter-spacing:-.01em;
}
.listing-section-title::after {
  content:''; position:absolute; bottom:-1px; left:0;
  width:40px; height:2px; background:var(--red);
}
.listing-desc { font-size:15px; line-height:1.95; color:var(--ink-2); font-weight:300 }
.listing-desc p { margin-bottom:14px }

/* Spec table */
.spec-table { width:100%; border-collapse:collapse }
.spec-row { display:grid; grid-template-columns:160px 1fr; border-bottom:1px solid var(--line) }
.spec-row:last-child { border-bottom:none }
.spec-key { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-4); padding:13px 12px 13px 0 }
.spec-val { font-size:14px; color:var(--ink); font-weight:500; padding:12px 0; display:flex; align-items:center }

/* Amenities */
.amenities-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.amenity-item { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--off-white); border:1px solid var(--line); font-size:13px; color:var(--ink-2) }
.amenity-item .check { color:var(--blue); font-weight:700; font-size:11px; flex-shrink:0 }
.nearby-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.nearby-item { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--off-white); border:1px solid var(--line); font-size:13px; color:var(--ink-2) }

/* Sidebar */
.sidebar-card {
  background:var(--white);
  border:1px solid var(--line);
  border-top:4px solid var(--red);
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.sidebar-head { padding:28px 28px 24px; border-bottom:1px solid var(--line); background:var(--off-white) }
.sidebar-price { font-family:var(--display); font-size:32px; font-weight:400; color:var(--blue); line-height:1; letter-spacing:-.02em }
.sidebar-price-label { font-size:10px; color:var(--ink-4); margin-top:6px; letter-spacing:.08em; text-transform:uppercase }
.sidebar-body { padding:6px 0 }
.sidebar-row { display:flex; justify-content:space-between; align-items:flex-start; padding:11px 28px; border-bottom:1px solid var(--line) }
.sidebar-row:last-child { border-bottom:none }
.sidebar-row-label { font-size:10px; color:var(--ink-4); letter-spacing:.08em; text-transform:uppercase; padding-top:3px; flex-shrink:0; margin-right:12px }
.sidebar-row-val { font-size:13px; color:var(--ink); font-weight:500; text-align:right; max-width:200px; line-height:1.45 }
.sidebar-highlight { display:flex; align-items:center; gap:10px; padding:13px 28px; background:var(--gold-lt); border-bottom:1px solid var(--line); font-size:13px; color:var(--gold) }
.sidebar-highlight .icon { flex-shrink:0 }
.sidebar-ctas { padding:20px 28px 28px; display:flex; flex-direction:column; gap:10px }
.sidebar-cta-btn { display:flex; align-items:center; justify-content:center; gap:10px; padding:15px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; transition:all .2s; border:none; cursor:pointer }
.sidebar-cta-wa { background:#25D366; color:#fff }
.sidebar-cta-wa:hover { background:#1DAA55 }
.sidebar-cta-msg { background:var(--blue); color:#fff }
.sidebar-cta-msg:hover { background:var(--blue-mid) }
.sidebar-cta-out { background:var(--off-white); color:var(--ink-2); border:1px solid var(--line) }
.sidebar-cta-out:hover { border-color:var(--red); color:var(--red) }
.sidebar-agent-foot { padding:16px 28px 20px; border-top:1px solid var(--line); text-align:center; font-size:11px; color:var(--ink-4); line-height:1.65 }

.related-section { padding:72px 0; border-top:1px solid var(--line); margin-top:12px }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER — elegant, dark
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
footer {
  background:var(--ink);
  color:rgba(255,255,255,.65);
  padding:80px 0 0;
  border-top:4px solid var(--red);
}
.f-grid { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:56px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.08) }
.f-brand {
  font-family:var(--display); font-size:28px; font-weight:400;
  color:#fff; margin-bottom:18px;
  display:flex; align-items:center; gap:12px;
  letter-spacing:-.01em;
}
.f-brand em { font-style:italic; color:var(--red) }
.f-logo-img { height:42px; width:42px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(255,255,255,.1)) }
.f-desc { font-size:14px; color:rgba(255,255,255,.5); line-height:1.85; max-width:300px; margin-bottom:28px; font-weight:300 }
.f-socs { display:flex; gap:8px }
.f-soc {
  width:38px; height:38px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; transition:all .2s;
}
.f-soc:hover { border-color:var(--red); background:rgba(204,33,25,.2) }
.f-col-t {
  font-size:9px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-bottom:20px;
}
.f-links { list-style:none; display:flex; flex-direction:column; gap:12px }
.f-links a { font-size:14px; color:rgba(255,255,255,.5); transition:color .2s; font-weight:300 }
.f-links a:hover { color:#fff }
.f-bottom {
  padding:26px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:rgba(255,255,255,.28);
  letter-spacing:.03em;
}
.f-bottom a { color:rgba(255,255,255,.28) }
.f-bottom a:hover { color:rgba(255,255,255,.7) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLOATING CTA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Floating CTA buttons ── */
.float-cta {
  position:fixed; bottom:28px; right:24px;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:10px; z-index:800;
}
.float-label {
  background:#fff;
  color:#1a2744;
  font-size:12px; font-weight:700;
  padding:6px 14px;
  border-radius:20px;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  white-space:nowrap;
  animation:floatLabel 3s ease-in-out infinite;
  letter-spacing:.01em;
  border:1px solid rgba(0,0,0,.07);
}
@keyframes floatLabel {
  0%,100% { transform:translateY(0) }
  50%      { transform:translateY(-4px) }
}
.float-btn {
  display:flex; align-items:center; gap:9px;
  padding:0 18px 0 14px;
  height:48px;
  border-radius:999px;
  font-size:20px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  border:none;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  transition:all .25s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}
.float-btn:hover { transform:scale(1.07) translateX(-3px); box-shadow:0 10px 32px rgba(0,0,0,.28) }
.float-icon { font-size:20px; line-height:1 }
.float-txt  { font-size:13px; font-weight:700; letter-spacing:.01em }
.fb-wa  { background:linear-gradient(135deg,#25D366,#1DAA55) }
.fb-wa:hover  { background:linear-gradient(135deg,#2ee673,#25D366) }
.fb-msg { background:linear-gradient(135deg,#0084ff,#0066cc) }
.fb-msg:hover { background:linear-gradient(135deg,#3399ff,#0084ff) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTACT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start }
.contact-form-wrap { background:var(--white); border:1px solid var(--line); padding:44px; box-shadow:var(--shadow) }
.form-group { margin-bottom:20px }
.form-label { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px }
.form-input { width:100%; background:var(--off-white); border:1px solid var(--line); padding:14px 16px; color:var(--ink); font-size:14px; transition:border-color .2s, background .2s; outline:none }
.form-input:focus { border-color:var(--blue); background:var(--white) }
.form-input::placeholder { color:var(--ink-4) }
.contact-info-item { display:flex; align-items:flex-start; gap:16px; padding:22px 0; border-bottom:1px solid var(--line) }
.contact-info-item:last-child { border-bottom:none }
.contact-icon { width:46px; height:46px; background:var(--blue); border:none; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0 }
.contact-info-label { font-size:10px; color:var(--ink-4); text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px }
.contact-info-val { font-size:15px; color:var(--ink) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BLOG DETAIL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.blog-detail-hero { height:440px; overflow:hidden; margin-bottom:48px; background:var(--warm-gray) }
.blog-detail-hero img { width:100%; height:100%; object-fit:cover }
.blog-detail-hero-ph { display:flex; align-items:center; justify-content:center; font-size:80px; height:100% }
.blog-content h2 { font-family:var(--display); font-size:28px; font-weight:400; color:var(--ink); margin:36px 0 14px; letter-spacing:-.01em }
.blog-content h3 { font-family:var(--display); font-size:22px; font-weight:400; color:var(--ink); margin:26px 0 10px }
.blog-content p { font-size:15px; line-height:2; color:var(--ink-2); margin-bottom:18px; font-weight:300 }
.blog-content strong { color:var(--ink); font-weight:600 }
.blog-layout { display:grid; grid-template-columns:1fr 340px; gap:52px; align-items:start }
.blog-sidebar-card { background:var(--white); border:1px solid var(--line); border-top:3px solid var(--red); padding:28px; position:sticky; top:calc(var(--nav-h) + 20px) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes fadeUp { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
@keyframes floatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.anim { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1) }
.anim.in, .anim.visible { opacity:1; transform:translateY(0) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UNIT TYPE CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.unit-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px }
.unit-card { background:var(--white); border:1px solid var(--line); overflow:hidden; transition:border-color .25s, box-shadow .25s }
.unit-card:hover { border-color:var(--red); box-shadow:var(--shadow-md) }
.unit-card-floorplan { background:var(--off-white); height:180px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--line) }
.unit-card-floorplan img { width:100%; height:100%; object-fit:contain; padding:10px }
.unit-card-floorplan-ph { font-size:48px; opacity:.3 }
.unit-card-body { padding:18px }
.unit-card-price { font-size:12px; color:var(--ink-4); margin-bottom:4px }
.unit-card-name { font-family:var(--display); font-size:17px; font-weight:400; color:var(--ink); margin-bottom:14px; line-height:1.2; text-transform:uppercase; letter-spacing:.02em }
.unit-card-row { font-size:13px; color:var(--ink-2); padding:5px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:8px }
.unit-card-row:last-child { border-bottom:none }
.unit-card-row-label { color:var(--ink-4); flex-shrink:0 }
.unit-card-row-val { font-weight:600; color:var(--ink); text-align:right }
@media(max-width:900px){.unit-cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.unit-cards-grid{grid-template-columns:1fr}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AMENITY GALLERY & CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.amenity-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px }
.amenity-gallery-item { position:relative; overflow:hidden; cursor:pointer; aspect-ratio:4/3; background:var(--warm-gray) }
.amenity-gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease }
.amenity-gallery-item:hover img { transform:scale(1.06) }
.amenity-gallery-item .ag-label { position:absolute; bottom:0; left:0; right:0; padding:8px 10px; background:linear-gradient(transparent,rgba(0,0,0,.65)); font-size:10px; color:#fff; letter-spacing:.08em; text-transform:uppercase }
.amenity-gallery-item:first-child { grid-column:span 2 }
.amenity-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px }
.amenity-card { background:var(--white); border:1px solid var(--line); overflow:hidden; cursor:pointer; transition:all .25s }
.amenity-card:hover { border-color:var(--red); transform:translateY(-2px); box-shadow:var(--shadow-md) }
.amenity-card-img { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--warm-gray) }
.amenity-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease }
.amenity-card:hover .amenity-card-img img { transform:scale(1.06) }
.amenity-card-icon { position:absolute; top:10px; left:10px; background:rgba(255,255,255,.9); width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:17px }
.amenity-card-body { padding:14px }
.amenity-card-name { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:4px }
.amenity-card-desc { font-size:12px; color:var(--ink-4); line-height:1.5 }
@media(max-width:700px){.amenity-cards-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.amenity-cards-grid{grid-template-columns:1fr}}
@media(max-width:560px){.amenity-gallery{grid-template-columns:1fr 1fr}.amenity-gallery-item:first-child{grid-column:span 2}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLOOR PLAN TABS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fp-tabs { display:flex; gap:0; flex-wrap:wrap; margin-bottom:20px; border-bottom:1px solid var(--line) }
.fp-tab { padding:10px 22px; border:none; border-bottom:2px solid transparent; background:transparent; color:var(--ink-3); font-size:12px; font-family:var(--sans); cursor:pointer; transition:all .2s; letter-spacing:.06em; text-transform:uppercase; font-weight:600; margin-bottom:-1px }
.fp-tab.active, .fp-tab:hover { color:var(--red); border-bottom-color:var(--red) }
.fp-tower-panel { display:none }
.fp-tower-panel.active { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px }
.fp-plan-card { background:var(--white); border:1px solid var(--line); overflow:hidden; transition:border-color .25s }
.fp-plan-card:hover { border-color:var(--red) }
.fp-plan-img { background:var(--off-white); height:200px; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; border-bottom:1px solid var(--line) }
.fp-plan-img img { width:100%; height:100%; object-fit:contain; padding:12px; transition:transform .3s }
.fp-plan-img:hover img { transform:scale(1.04) }
.fp-plan-label { padding:12px 14px; font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:1100px){
  .container{padding:0 32px}
  nav{padding:0 32px}
  .topbar{padding:8px 32px}
  .hero-inner{grid-template-columns:1fr}
  .hero-agent-panel{display:none;
}
  .listing-layout{grid-template-columns:1fr}
  .listing-sidebar{position:static}
  .blog-layout{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,1fr)}
  .agent-wrap{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr;gap:36px}
  .loc-grid{grid-template-columns:repeat(2,1fr)}
  .ptype-grid{grid-template-columns:repeat(2,1fr);gap:1px}
}
@media(max-width:768px){
  .container{padding:0 20px}
  nav{padding:0 20px}
  .topbar{display:none}
  .nav-links{display:none}
  .hamburger{display:flex}
  .g3,.g2{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .loc-grid{grid-template-columns:1fr 1fr}
  .amenities-grid,.nearby-grid{grid-template-columns:1fr}
  .listing-thumbs{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .ptype-grid{grid-template-columns:1fr 1fr}
  .hero-title{font-size:44px}
  .hero-stats{gap:28px;flex-wrap:wrap}
  .loc-card{height:240px}
}
@media(max-width:480px){
  .g4,.ptype-grid{grid-template-columns:1fr}
  .loc-grid{grid-template-columns:1fr}
  .hero-btns{flex-direction:column}
  .listing-thumbs{grid-template-columns:repeat(2,1fr)}
}


  .post-share-btn { padding:8px 14px; font-size:12px }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SHARE BUTTONS (icon-only)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pe-share-bar {
  display:flex; flex-direction:row; align-items:center; gap:8px;
  padding:14px 0 22px;
  border-bottom:1px solid var(--line);
  margin-bottom:28px;
  flex-wrap:wrap;
}
.pe-share-label {
  font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4); margin-right:4px; white-space:nowrap;
}
.pe-share-btn {
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer;
  transition:all .2s cubic-bezier(.16,1,.3,1);
  flex-shrink:0;
}
.pe-share-btn svg { width:17px; height:17px; display:block }
.pe-share-btn:hover { transform:translateY(-3px) scale(1.12) }

.pe-share-fb   { background:#1877f2; color:#fff }
.pe-share-fb:hover   { background:#2d8bf5; box-shadow:0 6px 18px rgba(24,119,242,.45) }

.pe-share-x    { background:#000; color:#fff }
.pe-share-x:hover    { background:#333; box-shadow:0 6px 18px rgba(0,0,0,.35) }

.pe-share-th   { background:#000; color:#fff }
.pe-share-th:hover   { background:#333; box-shadow:0 6px 18px rgba(0,0,0,.35) }

.pe-share-copy { background:var(--surf2); color:var(--ink-2); border:1.5px solid var(--line) !important }
.pe-share-copy:hover { background:var(--surf); border-color:var(--blue) !important; color:var(--blue) }
.pe-share-copy.share-copy-active { background:var(--blue); color:#fff; border-color:var(--blue) !important }

/* In listing sidebar — tighter layout */
.sidebar-ctas .pe-share-bar {
  padding:10px 0 0;
  border-bottom:none;
  border-top:1px solid var(--line);
  margin-bottom:0;
  margin-top:6px;
  flex-direction:row;
  flex-wrap:wrap;
}
.sidebar-ctas .pe-share-label { font-size:9px }
.sidebar-ctas .pe-share-btn { width:34px; height:34px }
.sidebar-ctas .pe-share-btn svg { width:15px; height:15px }


/* Propertease contrast patch for premium landing pages */
.page-hero .ph-crumb,
.page-hero .ph-crumb span{
  color:rgba(255,255,255,.82) !important;
}
.page-hero .ph-crumb a{
  color:#ffffff !important;
  opacity:.96;
}
.page-hero .ph-crumb a:hover{
  color:#ffffff !important;
  opacity:1;
}
.page-hero .ph-crumb span{
  opacity:.78;
}


.lux-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0 10px}
.lux-projlink{display:block;background:#fff;border:1px solid #dbe5f2;border-radius:22px;overflow:hidden;text-decoration:none;box-shadow:0 16px 40px rgba(13,46,138,.07);transition:transform .2s ease,box-shadow .2s ease}
.lux-projlink:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(13,46,138,.12)}
.lux-projlink img{width:100%;height:210px;object-fit:cover;display:block}
.lux-projcopy{padding:18px 20px 22px}
.lux-projcopy .lux-kicker{display:block;margin-bottom:8px}
.lux-projcopy h3{font-family:var(--font-h);font-size:24px;line-height:1.18;color:#12233f;margin:0 0 10px}
.lux-projcopy p{font-size:15px;line-height:1.75;color:#45556b;margin:0}
@media (max-width:980px){.lux-projects{grid-template-columns:1fr}.lux-projlink img{height:220px}}

/* v3 featured project fixes */
.lux-projlink{display:block;background:#fff;border:1px solid #dbe5f2;border-radius:22px;overflow:hidden;text-decoration:none;box-shadow:0 16px 40px rgba(13,46,138,.07);transition:transform .2s ease,box-shadow .2s ease}
.lux-projlink:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(13,46,138,.12)}
.lux-projlink img{width:100%;height:220px;object-fit:cover;display:block;background:#eef3fb}
.lux-projcopy{padding:20px 22px 24px}
.lux-projcopy h3{margin:6px 0 10px}
body{padding-bottom:120px}
@media (max-width:980px){.lux-projects{grid-template-columns:1fr}.lux-projlink img{height:220px}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROPERTY DETAIL ENHANCEMENTS (property-detail.js)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pd-gallery-strip{display:flex;gap:8px;padding:8px 12px;background:#111;overflow-x:auto;scrollbar-width:thin}
.pd-thumb{width:96px;height:62px;object-fit:cover;border-radius:6px;cursor:pointer;opacity:.55;transition:.2s;border:2px solid transparent;flex-shrink:0}
.pd-thumb:hover{opacity:.85}
.pd-thumb-active{opacity:1;border-color:var(--gold)}
.pd-stats-bar{display:flex;flex-wrap:wrap;background:var(--ink);border-bottom:3px solid var(--gold)}
.pd-stat{flex:1;min-width:140px;padding:16px 22px;border-right:1px solid rgba(255,255,255,.08)}
.pd-stat:last-child{border-right:none}
.pd-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.45);font-weight:700;margin-bottom:5px}
.pd-stat-val{font-size:13px;color:#fff;font-weight:600;line-height:1.3}
.pd-payment-flow{display:flex;background:var(--surf2);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:20px 0 24px}
.pd-pay-step{flex:1;padding:18px 14px;text-align:center;position:relative;border-right:1px solid var(--border)}
.pd-pay-step:last-child{border-right:none}
.pd-pay-num{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);font-weight:700;margin-bottom:5px}
.pd-pay-title{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px}
.pd-pay-val{font-size:15px;font-weight:800;color:var(--ink)}
.pd-pay-note{font-size:11px;color:var(--text2);margin-top:3px}
.pd-units-wrap{margin:8px 0 32px}
.pd-units-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin:20px 0 12px}
.pd-unit-card{background:var(--surf);border:1px solid var(--border);border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s}
.pd-unit-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.1)}
.pd-unit-name{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink)}
.pd-unit-size{font-size:13px;color:var(--text2)}
.pd-unit-price{font-size:13px;color:var(--text2)}
.pd-unit-price strong{color:var(--ink);font-size:15px}
.pd-equity-hl{background:linear-gradient(135deg,#0d2010,#1a3d20);border-radius:12px;padding:16px;text-align:center}
.pd-eq-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.55);font-weight:700;margin-bottom:3px}
.pd-eq-amount{font-size:24px;font-weight:800;color:var(--gold);font-family:var(--display);line-height:1}
.pd-eq-term{font-size:11px;color:rgba(255,255,255,.55);margin-top:4px}
.pd-unit-res{font-size:12px;color:var(--text2)}
.pd-unit-cta{display:block;text-align:center;background:var(--blue);color:#fff;padding:11px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none;margin-top:auto;transition:.2s}
.pd-unit-cta:hover{background:#2563eb}
.pd-units-note{font-size:12px;color:var(--text2);font-style:italic;line-height:1.6;margin-top:4px}
.pd-amenities-grid{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 22px}
.pd-amenity-chip{background:var(--surf2);border:1px solid var(--border);border-radius:20px;padding:7px 14px;font-size:13px;color:var(--text);display:flex;align-items:center;gap:6px}
.pd-section-h2{font-family:var(--display);font-size:22px;margin:28px 0 14px;color:var(--text)}
.pd-fp-section{margin:8px 0 28px}
.pd-fp-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.pd-fp-tab{padding:8px 18px;border-radius:8px;border:1px solid var(--border);background:var(--surf);font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);transition:.2s}
.pd-fp-tab.active{background:var(--gold);color:#000;border-color:var(--gold)}
.pd-fp-item{border-radius:10px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:.2s}
.pd-fp-item:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.pd-fp-label{padding:8px 10px;font-size:11px;font-weight:600;color:var(--text2);background:var(--surf);text-align:center}
.pd-related{background:var(--bg2);border-top:1px solid var(--border);padding:60px 0}
.pd-rel-card{text-decoration:none;display:block;background:var(--surf);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.pd-rel-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.12)}
.pd-rel-card img{width:100%;height:196px;object-fit:cover;display:block}
.pd-rel-body{padding:18px}
.pd-rel-badge{font-size:12px;color:var(--gold);margin-bottom:6px}
.pd-rel-name{font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:5px}
.pd-rel-loc{font-size:12px;color:var(--text2);margin-bottom:8px}
.pd-rel-price{font-size:14px;font-weight:700;color:var(--gold)}
.pd-rel-price span{font-size:11px;color:var(--text2);font-weight:400;margin-left:8px}
.pd-sticky{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;z-index:998;box-shadow:0 -4px 24px rgba(0,0,0,.35);transition:transform .3s ease;gap:16px}
.pd-sticky-info{flex:1;min-width:0}
.pd-sticky-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-sticky-price{font-size:12px;color:var(--gold);font-weight:600;margin-top:2px}
.pd-sticky-btns{display:flex;gap:10px;flex-shrink:0}
.pd-sticky-msg{background:#0084ff;color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.pd-sticky-wa{background:#25d366;color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
@media(max-width:640px){
  .pd-stats-bar{flex-direction:column}
  .pd-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding:12px 16px;min-width:auto}
  .pd-units-grid{grid-template-columns:1fr}
  .pd-payment-flow{flex-direction:column}
  .pd-pay-step{border-right:none;border-bottom:1px solid var(--border)}
  .pd-pay-step:last-child{border-bottom:none}
  .pd-sticky{flex-direction:column;gap:8px;padding:10px 16px}
  .pd-sticky-btns{width:100%}
  .pd-sticky-msg,.pd-sticky-wa{flex:1;text-align:center;padding:10px}
}