/* ============================================================
   LUXE ESTATES — Design System
   Aesthetic: Dark luxury editorial — deep charcoal, warm gold,
   refined serif headings, smooth micro-interactions
   ============================================================ */

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

   /* ── CSS Variables ── */
   :root {
     --bg-base:       #0d0d0e;
     --bg-surface:    #141416;
     --bg-card:       #1a1a1d;
     --bg-card-hover: #202024;
     --gold:          #c9a96e;
     --gold-light:    #e0c898;
     --gold-dim:      #8a6f42;
     --text-primary:  #f0ebe2;
     --text-secondary:#9e9a92;
     --text-muted:    #5a5752;
     --border:        rgba(201,169,110,0.15);
     --border-strong: rgba(201,169,110,0.35);
     --radius-sm:     6px;
     --radius-md:     12px;
     --radius-lg:     20px;
     --font-display:  'Cormorant Garamond', Georgia, serif;
     --font-body:     'DM Sans', sans-serif;
     --transition:    0.3s cubic-bezier(0.4, 0, 0.2, 1);
     --shadow-card:   0 4px 32px rgba(0,0,0,0.45);
     --shadow-glow:   0 0 40px rgba(201,169,110,0.08);
   }
   
   /* ── Reset & Base ── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
   
   body {
     font-family: var(--font-body);
     background: var(--bg-base);
     color: var(--text-primary);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
   }
   
   a { color: inherit; text-decoration: none; }
   img { display: block; max-width: 100%; }
   ul { list-style: none; }
   button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }
   input, textarea, select { font-family: var(--font-body); }
   
   /* ── Typography ── */
   h1, h2, h3, h4 {
     font-family: var(--font-display);
     font-weight: 300;
     line-height: 1.15;
     letter-spacing: -0.01em;
   }
   h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
   h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
   h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
   h4 { font-size: 1.2rem; }
   
   p { font-size: 1rem; color: var(--text-secondary); line-height: 1.75; }
   
   .label {
     font-family: var(--font-body);
     font-size: 0.7rem;
     font-weight: 500;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--gold);
   }
   
   /* ── Layout ── */
   .container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 2rem;
   }
   
   .section { padding: 7rem 0; }
   
   /* ── Gold Accent Line ── */
   .accent-line {
     display: inline-block;
     width: 40px;
     height: 1px;
     background: var(--gold);
     vertical-align: middle;
     margin-right: 1rem;
   }
   
   /* ── Buttons ── */
   .btn {
     display: inline-flex;
     align-items: center;
     gap: 0.6rem;
     padding: 0.85rem 2rem;
     border-radius: var(--radius-sm);
     font-size: 0.85rem;
     font-weight: 500;
     letter-spacing: 0.05em;
     transition: var(--transition);
   }
   
   .btn-gold {
     background: var(--gold);
     color: #0d0d0e;
   }
   .btn-gold:hover {
     background: var(--gold-light);
     transform: translateY(-1px);
     box-shadow: 0 8px 24px rgba(201,169,110,0.3);
   }
   
   .btn-outline {
     border: 1px solid var(--border-strong);
     color: var(--text-primary);
   }
   .btn-outline:hover {
     border-color: var(--gold);
     color: var(--gold);
     background: rgba(201,169,110,0.05);
   }
   
   .btn-ghost {
     color: var(--gold);
     padding: 0.5rem 0;
     position: relative;
   }
   .btn-ghost::after {
     content: '';
     position: absolute;
     bottom: 0; left: 0;
     width: 0; height: 1px;
     background: var(--gold);
     transition: var(--transition);
   }
   .btn-ghost:hover::after { width: 100%; }
   
   /* ── Navigation ── */
   .nav {
     position: fixed;
     top: 0; left: 0; right: 0;
     z-index: 1000;
     padding: 1.5rem 0;
     transition: var(--transition);
   }
   .nav.scrolled {
     background: rgba(13,13,14,0.92);
     backdrop-filter: blur(20px);
     padding: 1rem 0;
     border-bottom: 1px solid var(--border);
   }
   .nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   .nav-logo {
     font-family: var(--font-display);
     font-size: 2.0rem;
     font-weight: 400;
     letter-spacing: 0.05em;
     color: var(--text-primary);
   }
   .nav-logo span { color: var(--gold); }
   
   .nav-links {
     display: flex;
     align-items: center;
     gap: 2.5rem;
   }
   .nav-links a {
     font-size: 0.85rem;
     font-weight: 400;
     color: var(--text-secondary);
     letter-spacing: 0.05em;
     transition: var(--transition);
     position: relative;
   }
   .nav-links a:hover,
   .nav-links a.active { color: var(--text-primary); }
   .nav-links a.active::after {
     content: '';
     position: absolute;
     bottom: -4px; left: 0; right: 0;
     height: 1px;
     background: var(--gold);
   }
   
   .nav-cta { margin-left: 1rem; }
   
   .nav-hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     padding: 4px;
   }
   .nav-hamburger span {
     display: block;
     width: 22px;
     height: 1.5px;
     background: var(--text-primary);
     transition: var(--transition);
   }
   
   /* ── Property Card ── */
   .property-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     overflow: hidden;
     transition: var(--transition);
     cursor: pointer;
   }
   .property-card:hover {
     background: var(--bg-card-hover);
     border-color: var(--border-strong);
     transform: translateY(-4px);
     box-shadow: var(--shadow-card), var(--shadow-glow);
   }
   
   .card-image {
     position: relative;
     height: 220px;
     overflow: hidden;
   }
   .card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
   }
   .property-card:hover .card-image img { transform: scale(1.05); }
   
   .card-badge {
     position: absolute;
     top: 1rem; left: 1rem;
     padding: 0.3rem 0.8rem;
     border-radius: 999px;
     font-size: 0.7rem;
     font-weight: 500;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     backdrop-filter: blur(8px);
   }
   .badge-sale { background: rgba(201,169,110,0.9); color: #0d0d0e; }
   .badge-rent { background: rgba(13,13,14,0.85); color: var(--gold); border: 1px solid var(--gold-dim); }
   .badge-new  { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
   
   .card-wishlist {
     position: absolute;
     top: 1rem; right: 1rem;
     width: 36px; height: 36px;
     border-radius: 50%;
     background: rgba(13,13,14,0.75);
     backdrop-filter: blur(8px);
     display: flex; align-items: center; justify-content: center;
     border: 1px solid var(--border);
     color: var(--text-secondary);
     font-size: 0.9rem;
     transition: var(--transition);
   }
   .card-wishlist:hover { color: #e05a5a; border-color: #e05a5a; }
   
   .card-body { padding: 1.4rem; }
   
   .card-price {
     font-family: var(--font-display);
     font-size: 1.5rem;
     font-weight: 500;
     color: var(--gold);
     margin-bottom: 0.3rem;
   }
   .card-title {
     font-size: 0.95rem;
     font-weight: 500;
     color: var(--text-primary);
     margin-bottom: 0.25rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .card-location {
     font-size: 0.8rem;
     color: var(--text-muted);
     display: flex;
     align-items: center;
     gap: 0.3rem;
     margin-bottom: 1rem;
   }
   
   .card-meta {
     display: flex;
     gap: 1.2rem;
     padding-top: 1rem;
     border-top: 1px solid var(--border);
   }
   .card-meta-item {
     display: flex;
     align-items: center;
     gap: 0.4rem;
     font-size: 0.78rem;
     color: var(--text-secondary);
   }
   .card-meta-item svg { color: var(--gold-dim); }
   
   /* ── Form Elements ── */
   .form-group { margin-bottom: 1.25rem; }
   .form-label {
     display: block;
     font-size: 0.75rem;
     font-weight: 500;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-bottom: 0.5rem;
   }
   .form-input,
   .form-textarea,
   .form-select {
     width: 100%;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 0.85rem 1rem;
     color: var(--text-primary);
     font-size: 0.9rem;
     transition: var(--transition);
     outline: none;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     color-scheme: dark;
   }
   .form-select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239e9a92' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 0.85rem center;
     padding-right: 2.5rem;
   }
   .form-select option {
     background: var(--bg-card);
     color: var(--text-primary);
   }
   .form-input::placeholder,
   .form-textarea::placeholder { color: var(--text-muted); }
   .form-input:focus,
   .form-textarea:focus,
   .form-select:focus {
     border-color: var(--gold-dim);
     background: rgba(201,169,110,0.04);
     box-shadow: 0 0 0 3px rgba(201,169,110,0.08);
   }
   .form-textarea { resize: vertical; min-height: 120px; }
   
   /* ── Search Bar ── */
   .search-bar {
     display: flex;
     align-items: stretch;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     overflow: hidden;
     transition: var(--transition);
   }
   .search-bar:focus-within {
     border-color: var(--border-strong);
     box-shadow: 0 0 0 3px rgba(201,169,110,0.08);
   }
   .search-bar input {
     flex: 1;
     background: none;
     border: none;
     padding: 1rem 1.25rem;
     color: var(--text-primary);
     font-size: 0.9rem;
     outline: none;
   }
   .search-bar input::placeholder { color: var(--text-muted); }
   .search-bar select {
     color-scheme: dark;
     background: none;
     border: none;
     border-left: 1px solid var(--border);
     border-right: 1px solid var(--border);
     padding: 1rem;
     color: var(--text-secondary);
     font-size: 0.85rem;
     outline: none;
     min-width: 120px;
     cursor: pointer;
     appearance: none;
   }
   .search-bar select option { background: var(--bg-card); color: var(--text-primary); }
   .search-bar .search-btn {
     padding: 1rem 1.5rem;
     background: var(--gold);
     color: #0d0d0e;
     font-weight: 500;
     font-size: 0.85rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     transition: var(--transition);
   }
   .search-bar .search-btn:hover { background: var(--gold-light); }
   
   /* ── Stats Strip ── */
   .stats-strip {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1px;
     background: var(--border);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     overflow: hidden;
   }
   .stat-item {
     background: var(--bg-card);
     padding: 1.5rem 2rem;
     text-align: center;
   }
   .stat-number {
     font-family: var(--font-display);
     font-size: 2.2rem;
     font-weight: 300;
     color: var(--gold);
     display: block;
   }
   .stat-label {
     font-size: 0.75rem;
     color: var(--text-muted);
     letter-spacing: 0.08em;
     text-transform: uppercase;
   }
   
   /* ── Tag / Pill ── */
   .tag {
     display: inline-block;
     padding: 0.3rem 0.75rem;
     background: rgba(201,169,110,0.08);
     border: 1px solid var(--border);
     border-radius: 999px;
     font-size: 0.75rem;
     color: var(--text-secondary);
     transition: var(--transition);
     cursor: pointer;
   }
   .tag:hover, .tag.active {
     background: rgba(201,169,110,0.15);
     border-color: var(--gold-dim);
     color: var(--gold);
   }
   
   /* ── Section Header ── */
   .section-header {
     margin-bottom: 3.5rem;
   }
   .section-header .label { margin-bottom: 0.75rem; display: block; }
   .section-header h2 { margin-bottom: 1rem; }
   .section-header p { max-width: 520px; }
   
   /* Chatbot styles moved to css/chat.css */
   
   /* ── Toast ── */
   .toast {
     position: fixed;
     bottom: 2rem;
     left: 50%;
     transform: translateX(-50%) translateY(80px);
     background: var(--bg-card);
     border: 1px solid var(--border-strong);
     padding: 0.85rem 1.5rem;
     border-radius: var(--radius-sm);
     font-size: 0.85rem;
     color: var(--text-primary);
     display: flex;
     align-items: center;
     gap: 0.6rem;
     box-shadow: var(--shadow-card);
     transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
     z-index: 9998;
   }
   .toast.show { transform: translateX(-50%) translateY(0); }
   .toast-icon { color: var(--gold); }
   
   /* ── Footer ── */
   .footer {
     border-top: 1px solid var(--border);
     padding: 4rem 0 2rem;
   }
   .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 3rem;
     margin-bottom: 3rem;
   }
   .footer-brand p { font-size: 0.85rem; max-width: 280px; margin-top: 0.75rem; }
   .footer-col h5 {
     font-family: var(--font-body);
     font-size: 0.75rem;
     font-weight: 500;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-bottom: 1.25rem;
   }
   .footer-col a {
     display: block;
     font-size: 0.85rem;
     color: var(--text-secondary);
     margin-bottom: 0.65rem;
     transition: var(--transition);
   }
   .footer-col a:hover { color: var(--gold); }
   .footer-bottom {
     border-top: 1px solid var(--border);
     padding-top: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 0.78rem;
     color: var(--text-muted);
   }
   
   /* ── Notification Dot ── */
   .chat-badge {
     position: absolute;
     top: -3px; right: -3px;
     width: 18px; height: 18px;
     background: #e05a5a;
     border-radius: 50%;
     font-size: 0.65rem;
     color: #fff;
     display: flex; align-items: center; justify-content: center;
     font-weight: 600;
     border: 2px solid var(--bg-base);
     animation: pulse 2s infinite;
   }
   @keyframes pulse {
     0%,100% { box-shadow: 0 0 0 0 rgba(224,90,90,0.4); }
     50% { box-shadow: 0 0 0 6px rgba(224,90,90,0); }
   }
   
   /* ── Page transition ── */
   .page-enter {
     animation: pageIn 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
   }
   @keyframes pageIn {
     from { opacity: 0; transform: translateY(16px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   /* ── Utility ── */
   .gold { color: var(--gold); }
   .text-muted { color: var(--text-muted); }
   .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
   .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
   .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
   .flex { display: flex; }
   .flex-center { display: flex; align-items: center; justify-content: center; }
   .flex-between { display: flex; align-items: center; justify-content: space-between; }
   .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
   .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
   .gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; }
   
   /* ── Responsive ── */
   @media (max-width: 900px) {
     .grid-4 { grid-template-columns: repeat(2, 1fr); }
     .grid-3 { grid-template-columns: repeat(2, 1fr); }
     .footer-grid { grid-template-columns: 1fr 1fr; }
     .stats-strip { grid-template-columns: repeat(2, 1fr); }
   }
   
   @media (max-width: 640px) {
     .container { padding: 0 1.25rem; }
     .section { padding: 4rem 0; }
     .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
     .nav-links { display: none; }
     .nav-hamburger { display: flex; }
     .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
     .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
   }

   

   /* ══════════════════════════════════════════
      MOBILE FIXES (max-width: 640px)
      — Property page: images, price sidebar
      — Listings page: filter bar
      — Nav: remove "Enquire Now" CTA button
   ══════════════════════════════════════════ */

   @media (max-width: 640px) {

     /* ── Nav: hide "Enquire Now" button on mobile ── */
     .nav-cta {
       display: none;
     }

     /* ── Property page: gallery images fill properly ── */
     .gallery-wrap {
       height: clamp(200px, 55vw, 280px);
       border-radius: var(--radius-md);
       margin-left: -1.25rem;
       margin-right: -1.25rem;
       border-radius: 0;
       border-left: none;
       border-right: none;
     }
     .gallery-slide img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }

     /* ── Property page: sidebar price card — unfix from background ── */
     .prop-sidebar {
       position: static !important;
       top: auto !important;
     }
     .enquiry-card {
       margin-bottom: 1.5rem;
     }
     .enquiry-card-body {
       padding: 1.25rem;
     }
     .enquiry-card-head {
       padding: 1.25rem;
     }

     /* ── Property page: layout stacks properly ── */
     .prop-layout {
       padding: 1.5rem 0 3rem;
       gap: 1.5rem;
     }
     .prop-block {
       padding: 1.25rem;
     }

     /* ── Listings page: filter bar — scroll horizontally, don't cover content ── */
     section[style*="position:sticky"],
     section[style*="position: sticky"] {
       position: relative !important;
       top: auto !important;
     }

     /* Target the filter section specifically by its backdrop-filter style */
     .listings-filter-bar {
       position: relative !important;
       top: auto !important;
     }
   }

   /* Modal and chatbot styles moved to css/chat.css */

   /* ── Partners Section ───────────────────────────────────── */
.partners-section {
  padding: 5rem 0 4.5rem;
  background: var(--bg-base);
  border-top: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.partners-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,169,110,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.partners-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}
.partners-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  justify-content: center;
  margin-bottom: 0.6rem;
}
.partners-line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
.partners-label {
  font-family: var(--font-body, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold, #c9a96e);
  white-space: nowrap;
}
.partners-sub {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-secondary, #888);
  margin: 0 0 2.75rem;
  letter-spacing: 0.01em;
}
.partners-marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.partners-marquee-wrap::before,
.partners-marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.partners-marquee-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-base, #0d0d0d), transparent);
}
.partners-marquee-wrap::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg-base, #0d0d0d), transparent);
}
.partners-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  animation: partners-scroll 38s linear infinite;
}
.partners-track:hover { animation-play-state: paused; }
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.partner-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  height: 72px;
  padding: 0 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  cursor: default;
  flex-shrink: 0;
}
/* Dark card — logos with transparent or dark backgrounds */
.partner-logo-card.dark-card {
  background: var(--bg-card, #1a1a1d);
}
/* White card — logos with white background baked in (Ramky, Godrej, Rajpushpa) */
.partner-logo-card.white-card {
  background: #ffffff;
  border-color: rgba(201,169,110,0.12);
}
.partner-logo-card:hover {
  border-color: rgba(201, 169, 110, 0.45);
  box-shadow: 0 4px 24px rgba(201, 169, 110, 0.1);
  transform: translateY(-2px);
}
.partner-logo-card img {
  max-width: 110px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.partner-logo-card:hover img { opacity: 1; }

@media (max-width: 768px) {
  .partners-section { padding: 3.5rem 0 3rem; }
  .partner-logo-card { min-width: 120px; height: 60px; padding: 0 1.1rem; }
  .partner-logo-card img { max-width: 88px; max-height: 32px; }
  .partners-track { gap: 1rem; }
  .partners-marquee-wrap::before,
  .partners-marquee-wrap::after { width: 60px; }
}