/* ═══════════════════════════════════════════
   THEME VARIABLES  — edit these to retheme
═══════════════════════════════════════════ */
:root {
  /* Brand palette — warm slate + deep teal + gold accent */
  --c-primary:       #1D4E4B;   /* deep teal/forest — trust, nature, wealth */
  --c-primary-hover: #163b39;
  --c-primary-light: #2d7a73;
  --c-gold:          #C9A84C;   /* warm gold accent — premium, India-market */
  --c-gold-light:    #e5c87a;
  --c-gold-muted:    #f5edda;
  --c-dark:          #0F2624;   /* near-black teal — footer/hero */
  --c-text:          #1A2422;
  --c-text-muted:    #5f7270;
  --c-border:        #DDE6E5;
  --c-bg:            #F6FAF9;   /* very light teal tint */
  --c-surface:       #FFFFFF;

  /* Typography */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body:    'Outfit', sans-serif;

  /* Spacing */
  --radius:    0.75rem;
  --transition: 0.22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset & Base ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5 { font-family: var(--f-display); line-height: 1.25; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── Utilities ────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.section-label {
  font-family: var(--f-body);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-gold);
}
.gold-text { color: var(--c-gold); }
.teal-text { color: var(--c-primary); }

/* ── Buttons ──────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-body); font-size: .85rem; font-weight: 600;
  padding: .65rem 1.5rem; border-radius: var(--radius);
  cursor: pointer; border: none; transition: all var(--transition);
  white-space: nowrap;
}
.btn-gold {
  background: var(--c-gold); color: #fff;
}
.btn-gold:hover { background: #b8942f; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,168,76,.35); }

.btn-outline-gold {
  background: transparent; color: var(--c-gold);
  border: 1.5px solid var(--c-gold);
}
.btn-outline-gold:hover { background: var(--c-gold); color: #fff; transform: translateY(-1px); }

.btn-teal {
  background: var(--c-primary); color: #fff;
}
.btn-teal:hover { background: var(--c-primary-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(29,78,75,.3); }

.btn-outline-white {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.5);
}
.btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ── Badges ───────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .22rem .6rem;
  border-radius: 999px;
}
.badge-teal    { background: rgba(29,78,75,.12); color: var(--c-primary); }
.badge-gold    { background: rgba(201,168,76,.15); color: #9c7a2a; }
.badge-green   { background: #e8f5e9; color: #2e7d32; }
.badge-slate   { background: #f1f3f5; color: #4a5568; }
.badge-red     { background: #fdecea; color: #c0392b; }

/* ── Card hover ───────────────────────────── */
.card-hover { transition: transform var(--transition), box-shadow var(--transition); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,38,36,.12); }

/* ── Ticker ───────────────────────────────── */
.ticker-wrap { overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-block; animation: tick 30s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Nav glass ────────────────────────────── */
.nav-wrap {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
}

/* ── Hero ─────────────────────────────────── */
.hero {
  background: var(--c-dark);
  background-image:
    linear-gradient(135deg, rgba(15,38,36,.96) 0%, rgba(15,38,36,.75) 60%, rgba(15,38,36,.4) 100%),
    url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1600&q=85');
  background-size: cover;
  background-position: center 40%;
  min-height: 90vh;
  display: flex; align-items: center;
}

/* ── Step pill ────────────────────────────── */
.step-pill {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px; padding: .4rem 1rem .4rem .4rem;
}
.step-num {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--c-gold); color: #fff;
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── Search bar ───────────────────────────── */
.search-bar {
  background: var(--c-surface);
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  transition: border-color var(--transition);
}
.search-bar:focus-within { border-color: var(--c-primary); }
.search-input {
  border: none; outline: none; background: transparent;
  font-family: var(--f-body); font-size: .88rem;
  color: var(--c-text); width: 100%;
}
.search-input::placeholder { color: var(--c-text-muted); }
.search-select {
  border: none; outline: none; background: transparent;
  font-family: var(--f-body); font-size: .85rem;
  color: var(--c-text); cursor: pointer;
  padding: .55rem .75rem;
}
.search-divider { width: 1px; background: var(--c-border); align-self: stretch; margin: .4rem 0; }

/* ── Feature cards ────────────────────────── */
.feature-icon {
  width: 2.75rem; height: 2.75rem; border-radius: .6rem;
  background: var(--c-gold-muted);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── Property card ────────────────────────── */
.prop-img { width: 100%; height: 210px; object-fit: cover; display: block; }
.prop-tag-bar { position: absolute; top: .75rem; left: .75rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.prop-status { position: absolute; top: .75rem; right: .75rem; }

/* ── Service tile ─────────────────────────── */
.service-tile {
  position: relative; overflow: hidden; border-radius: var(--radius);
  cursor: pointer;
}
.service-tile img { width: 100%; height: 220px; object-fit: cover;
  transition: transform .5s ease; display: block; }
.service-tile:hover img { transform: scale(1.06); }
.service-tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,38,36,.82) 0%, transparent 55%);
}

/* ── Accordion ────────────────────────────── */
.acc-body { max-height: 0; overflow: hidden; transition: max-height .38s ease; }
.acc-body.open { max-height: 400px; }
.acc-icon { transition: transform .3s; }
.acc-icon.open { transform: rotate(180deg); }

/* ── Upcoming card ────────────────────────── */
.upcoming-coming {
  position: absolute; inset: 0;
  background: rgba(15,38,36,.45);
  display: flex; align-items: center; justify-content: center;
}

/* ── Blog card img ────────────────────────── */
.blog-img { width: 100%; height: 190px; object-fit: cover; transition: transform .5s; }
.blog-card:hover .blog-img { transform: scale(1.04); }

/* ── Testimonial active ───────────────────── */
.testi-active { background: var(--c-primary) !important; color: #fff !important; }
.testi-active p, .testi-active .testi-meta { color: rgba(255,255,255,.8) !important; }
.testi-active .testi-name { color: #fff !important; }

/* ── Mobile menu ──────────────────────────── */
#mob-nav { max-height: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s; opacity: 0; }
#mob-nav.open { max-height: 600px; opacity: 1; }

/* ── Floating WA ──────────────────────────── */
.wa-btn {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(37,211,102,.4);
  transition: transform var(--transition);
}
.wa-btn:hover { transform: scale(1.1); }

/* ── Divider ornament ─────────────────────── */
.ornament { display: flex; align-items: center; gap: .75rem; }
.ornament::before, .ornament::after {
  content: ''; flex: 1; height: 1px; background: var(--c-border);
}

/* ── CTA strip ────────────────────────────── */
.cta-strip {
  background: var(--c-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ── Scroll reveal ────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ── Stat ─────────────────────────────────── */
.stat-val { font-family: var(--f-display); font-size: 2.2rem; font-weight: 700; color: var(--c-gold); }

@media(max-width:900px){
  .two-col { grid-template-columns:1fr !important; gap:2rem !important; }
  .three-col { grid-template-columns:1fr 1fr !important; }
  .four-col { grid-template-columns:1fr 1fr !important; gap:2rem !important; }
}
@media(max-width:640px){
  .three-col, .four-col { grid-template-columns:1fr !important; }
  .hidden-mobile { display:none !important; }
  #ham-btn { display:flex !important; }
}