/* ═══════════════════════════════════════════════════════════════
   GOTTILO REAL ESTATE — Master Style Sheet
   Version: 2.0  |  Replaces ALL inline styles
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --navy:    #0f1c3f;
  --blue:    #2563eb;
  --blue-d:  #1d4ed8;
  --blue-50: #eff6ff;
  --blue-100:#dbeafe;
  --blue-200:#bfdbfe;
  --blue-300:#93c5fd;
  --blue-400:#60a5fa;
  --blue-700:#1d4ed8;
  --bg:      #f8faff;
  --bg2:     #f0f4ff;
  --white:   #ffffff;
  --border:  rgba(37,99,235,.12);
  --muted:   #4a5882;
  --hint:    #8a96b8;
  --danger:  #dc2626;
  --green:   #059669;
  --amber:   #d97706;
  --grad:    linear-gradient(135deg,#2563eb,#1d4ed8);
  --nav-h:   68px;
  --sh-sm:   0 2px 10px rgba(15,28,63,.07);
  --sh-md:   0 4px 20px rgba(15,28,63,.10);
  --sh-lg:   0 8px 32px rgba(15,28,63,.13);
  --sh-xl:   0 20px 60px rgba(15,28,63,.18);
  --sh-blue: 0 4px 18px rgba(37,99,235,.30);
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    16px;
  --r-xl:    20px;
  --r-2xl:   24px;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition: all 0.25s ease;
}

/* ── 1. RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: var(--font-sans); cursor: pointer; }
img { display: block; max-width: 100%; }
input, textarea, select { font-family: var(--font-sans); }

/* ── 2. LAYOUT UTILITIES ─────────────────────────────────────── */
.container      { max-width: 1400px; margin: 0 auto; padding: 0 5%; }
.container-md   { max-width: 1100px; margin: 0 auto; padding: 0 5%; }
.container-sm   { max-width: 800px;  margin: 0 auto; padding: 0 5%; }
.page-wrap      { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); }
.page-wrap-white{ min-height: 100vh; padding-top: var(--nav-h); background: var(--white); }

/* Flex helpers */
.flex           { display: flex; }
.flex-col       { display: flex; flex-direction: column; }
.center         { align-items: center; }
.between        { justify-content: space-between; }
.wrap           { flex-wrap: wrap; }
.g4             { gap: 4px; }
.g6             { gap: 6px; }
.g8             { gap: 8px; }
.g10            { gap: 10px; }
.g12            { gap: 12px; }
.g14            { gap: 14px; }
.g16            { gap: 16px; }
.g20            { gap: 20px; }
.g24            { gap: 24px; }
.g32            { gap: 32px; }
.g48            { gap: 48px; }
.ml-auto        { margin-left: auto; }

/* Grid helpers */
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.col-span-2 { grid-column: 1 / -1; }

/* Text helpers */
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-navy      { color: var(--navy); }
.text-blue      { color: var(--blue); }
.text-blue-700  { color: var(--blue-700); }
.text-muted     { color: var(--muted); }
.text-hint      { color: var(--hint); }
.text-white     { color: #fff; }
.text-white-65  { color: rgba(255,255,255,0.65); }
.text-white-55  { color: rgba(255,255,255,0.55); }
.white          { color: #fff; }

/* Typography */
.serif          { font-family: var(--font-serif); }
.sans           { font-family: var(--font-sans); }
.body           { font-size: 14px; color: var(--muted); }
.body-sm        { font-size: 12px; color: var(--hint); }
.blue           { color: var(--blue); }
.eyebrow        { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--blue); text-transform: uppercase; }

/* ── 3. SECTION TITLE ──────────────────────────────────────────── */
.section-head            { margin-bottom: 48px; }
.section-head.center     { text-align: center; }
.section-head-row        { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.section-head-bar        { width: 28px; height: 2px; background: var(--blue); }
.section-h2              { font-family: var(--font-serif); font-size: clamp(28px,4vw,42px); font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: 12px; }
.section-subtitle        { font-size: 16px; color: var(--muted); line-height: 1.7; max-width: 640px; }
.section-subtitle.center { max-width: 560px; margin: 0 auto; }

/* ── 4. BUTTONS ────────────────────────────────────────────────── */
.btn           { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: var(--transition); }
.btn-primary   { background: var(--grad); color: #fff; box-shadow: var(--sh-blue); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(37,99,235,.4); }
.btn-outline   { background: #fff; color: var(--navy); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-white     { background: #fff; color: var(--blue-700); }
.btn-ghost     { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.2); }
.btn-danger    { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.btn-sm        { padding: 8px 16px; font-size: 13px; border-radius: var(--r-md); }
.btn-lg        { padding: 14px 32px; font-size: 16px; border-radius: 12px; }
.btn-full      { width: 100%; }
.btn-icon      { width: 34px; height: 34px; padding: 0; border-radius: var(--r-sm); font-size: 17px; }

/* ── 5. FORM ELEMENTS ──────────────────────────────────────────── */
.input, .textarea, .select {
  width: 100%; padding: 11px 14px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 10px; color: var(--navy); font-size: 14px;
  font-family: var(--font-sans); outline: none; transition: border .2s;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--blue-400); }
.textarea { resize: vertical; }
.select   { cursor: pointer; }
.input-wrap       { margin-bottom: 18px; }
.input-label      { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.input-icon-wrap  { position: relative; }
.input-icon       { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--hint); pointer-events: none; }
.input-with-icon  { padding-left: 36px; }
.input-rounded    { border-radius: 22px; }
.form-grid-2      { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }

/* ── 6. NAVBAR ─────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h); transition: background .3s, box-shadow .3s;
}
.nav.transparent {
  background: rgba(15,28,63,.35);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.nav.solid {
  background: #fff;
  box-shadow: 0 1px 0 var(--border), var(--sh-sm);
}
.nav-inner {
  height: 100%; max-width: 1400px; margin: 0 auto;
  padding: 0 5%; display: flex; align-items: center; gap: 32px;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 36px; width: auto; max-width: 160px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-link {
  padding: 8px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
  color: var(--muted); transition: var(--transition); white-space: nowrap;
}
.nav.transparent .nav-link { color: rgba(255,255,255,.8); }
.nav-link:hover, .nav-link.active { color: var(--blue); background: var(--blue-50); }
.nav.transparent .nav-link:hover { color: #fff; background: rgba(255,255,255,.15); }
.nav.transparent .nav-link.active { color: #fff; background: rgba(255,255,255,.2); }
.nav-btn {
  padding: 8px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
  color: var(--muted); background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 4px; transition: var(--transition);
}
.nav.transparent .nav-btn { color: rgba(255,255,255,.8); }
.nav-btn:hover, .nav-btn.open { color: var(--blue); background: var(--blue-50); }
.nav.transparent .nav-btn:hover { color: #fff; background: rgba(255,255,255,.15); }
.nav-btn-arrow { font-size: 8px; opacity: .55; transition: transform .2s; display: inline-block; }
.nav-btn.open .nav-btn-arrow { transform: rotate(180deg); }

/* Dropdown */
.nav-dd {
  position: absolute; top: calc(100% + 10px); left: -20px;
  background: #fff; border-radius: var(--r-xl); border: 1px solid var(--border);
  box-shadow: var(--sh-xl); z-index: 500; overflow: hidden; min-width: 720px;
}
.nav-dd-buy  { min-width: 760px; }
.nav-dd-proj { min-width: 560px; }
.nav-dd-cols { display: grid; grid-template-columns: repeat(4,1fr); }
.nav-dd-col-3 { display: grid; grid-template-columns: repeat(3,1fr); }
.nav-dd-col  { padding: 20px 16px; border-right: 1px solid var(--border); }
.nav-dd-col:last-child { border-right: none; }
.nav-dd-head { font-size: 10px; font-weight: 800; color: var(--blue); letter-spacing: .1em; margin-bottom: 10px; }
.nav-dd-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  border-radius: var(--r-sm); border: none; background: transparent;
  font-size: 13px; color: var(--navy); cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-dd-item:hover { background: var(--blue-50); color: var(--blue); }
.nav-dd-footer { padding-top: 14px; border-top: 1px solid var(--border); margin-top: 10px; }
.nav-overlay { position: fixed; inset: 0; z-index: 499; background: transparent; }

/* Right side */
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-icon  { font-size: 18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); transition: background .2s; }
.nav-icon:hover { background: var(--blue-50); }
.nav.transparent .nav-icon:hover { background: rgba(255,255,255,.15); }
.nav-phone {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 22px; border: 1.5px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--navy);
  background: #fff; transition: var(--transition);
}
.nav.transparent .nav-phone { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.nav-phone-icon { font-size: 14px; }
.nav-cta {
  padding: 9px 18px; background: var(--grad); color: #fff;
  border-radius: 22px; font-size: 13px; font-weight: 700;
  box-shadow: var(--sh-blue); transition: var(--transition);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(37,99,235,.4); }

/* Hamburger */
.nav-ham {
  display: none; position: fixed; top: 14px; right: 16px;
  z-index: 1001; width: 42px; height: 42px; border-radius: 10px;
  background: var(--navy); border: none; color: #fff; font-size: 20px;
  align-items: center; justify-content: center; box-shadow: var(--sh-md);
}

/* Mobile drawer */
.mob-drawer .mob-overlay {
  position: fixed; inset: 0; background: rgba(15,28,63,.55);
  backdrop-filter: blur(4px); z-index: 1099;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.mob-drawer.open .mob-overlay { opacity: 1; pointer-events: auto; }
.mob-panel {
  position: fixed; top: 0; right: -100%; bottom: 0; width: 290px;
  background: #fff; z-index: 1100; display: flex; flex-direction: column;
  box-shadow: var(--sh-xl); transition: right .3s ease;
}
.mob-drawer.open .mob-panel { right: 0; }
.mob-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.mob-close {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: none;
  background: var(--bg); font-size: 16px; cursor: pointer;
}
.mob-link {
  display: flex; align-items: center; gap: 10px; padding: 13px 20px;
  font-size: 15px; font-weight: 500; color: var(--navy); border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.mob-link:hover     { background: var(--blue-50); color: var(--blue); }
.mob-link-cta       { background: var(--blue-50); color: var(--blue); font-weight: 700; }
.mob-foot           { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.mob-cta-btn        { padding: 13px; background: var(--grad); color: #fff; border-radius: 10px; font-size: 14px; font-weight: 700; text-align: center; border: none; cursor: pointer; box-shadow: var(--sh-blue); }
.mob-phone-btn      { padding: 13px; background: var(--bg); border: 1.5px solid var(--border); color: var(--navy); border-radius: 10px; font-size: 14px; font-weight: 600; text-align: center; }

/* ── 7. HERO (Homepage) ─────────────────────────────────────────── */
.hero               { min-height: 100vh; background: var(--navy); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; padding-top: var(--nav-h); }
.hero-orb           { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-orb-1         { width: 600px; height: 600px; background: rgba(37,99,235,.18); top: -150px; right: -100px; }
.hero-orb-2         { width: 400px; height: 400px; background: rgba(37,99,235,.10); bottom: -100px; left: -80px; }
.hero-inner         { max-width: 1400px; margin: 0 auto; padding: 80px 5%; position: relative; z-index: 2; }
.hero-eyebrow       { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.hero-bar           { width: 24px; height: 2px; background: var(--blue-300); }
.hero-eyebrow-text  { font-size: 11px; color: var(--blue-300); font-weight: 700; letter-spacing: .12em; }
.hero-h1            { font-family: var(--font-serif); font-size: clamp(36px,5.5vw,68px); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 20px; max-width: 780px; }
.hero-h1 span       { color: var(--blue-300); }
.hero-sub           { font-size: clamp(15px,1.8vw,18px); color: rgba(255,255,255,.6); max-width: 560px; line-height: 1.75; margin-bottom: 36px; }
.hero-badges        { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }
.hero-badge         { display: flex; align-items: center; gap: 7px; padding: 8px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 22px; font-size: 12px; color: rgba(255,255,255,.7); font-weight: 600; }

/* ── 8. STATS STRIP ────────────────────────────────────────────── */
.stats-strip        { background: linear-gradient(135deg,#1e3a8a,#1d4ed8); padding: 48px 0; }
.stats-grid         { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; max-width: 1400px; margin: 0 auto; padding: 0 5%; }
.stat-card          { text-align: center; padding: 20px 10px; }
.stat-icon          { font-size: 28px; margin-bottom: 8px; }
.stat-number        { font-size: clamp(26px,3vw,36px); font-weight: 800; color: var(--blue-300); font-family: var(--font-serif); }
.stat-label         { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 5px; }

/* ── 9. SECTION WRAPPER ─────────────────────────────────────────── */
.section            { padding: 80px 0; }
.section-sm         { padding: 52px 0; }
.section-lg         { padding: 100px 0; }
.section-dark       { background: var(--navy); }
.section-bg         { background: var(--bg); }
.section-white      { background: var(--white); }

/* ── 10. CATEGORY CARDS ─────────────────────────────────────────── */
.cat-grid           { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.cat-card           { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 22px 12px; text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--sh-sm); transition: var(--transition); }
.cat-card:hover     { box-shadow: var(--sh-lg); border-color: var(--blue-400); transform: translateY(-4px); background: var(--blue-50); }
.cat-icon           { font-size: 28px; }
.cat-label          { font-size: 13px; font-weight: 700; color: var(--navy); }
.cat-count          { font-size: 11px; color: var(--blue); font-weight: 600; }

/* ── 11. PROPERTY CARDS ─────────────────────────────────────────── */
.prop-grid          { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 20px; }
.prop-card          { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: var(--transition); }
.prop-card:hover    { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.prop-card-img      { position: relative; height: 200px; overflow: hidden; }
.prop-card-img img  { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.prop-card:hover .prop-card-img img { transform: scale(1.05); }
.prop-card-body     { padding: 16px; }
.prop-meta          { font-size: 11px; color: var(--hint); margin-bottom: 3px; }
.prop-title         { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 8px; line-height: 1.3; }
.prop-price         { font-size: 22px; font-weight: 800; color: var(--blue-700); margin-bottom: 12px; }
.prop-tags          { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.prop-tag           { font-size: 12px; color: var(--muted); background: var(--bg); padding: 3px 9px; border-radius: 7px; }
.prop-footer        { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 12px; }
.prop-location      { font-size: 12px; color: var(--muted); }
.prop-badges        { display: flex; gap: 4px; }
.badge-rera         { font-size: 10px; background: #ecfdf5; color: #059669; padding: 2px 7px; border-radius: 5px; font-weight: 700; }
.badge-feat         { font-size: 10px; background: #fffbeb; color: #d97706; padding: 2px 7px; border-radius: 5px; font-weight: 700; }
.badge-sale         { position: absolute; top: 10px; left: 10px; background: var(--navy); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.badge-rent         { position: absolute; top: 10px; left: 10px; background: #059669; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.badge-star         { position: absolute; top: 10px; right: 44px; background: #f59e0b; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.prop-actions       { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 5px; }
.prop-action-btn    { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.5); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.prop-action-btn.saved  { background: #fef2f2; border-color: #fca5a5; }
.prop-action-btn.cmpd   { background: var(--blue-50); border-color: var(--blue-300); }

/* List view */
.prop-list-card     { display: flex; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: var(--transition); margin-bottom: 14px; }
.prop-list-card:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }
.prop-list-img      { width: 260px; flex-shrink: 0; position: relative; background: var(--bg2); min-height: 180px; overflow: hidden; }
.prop-list-img img  { width: 100%; height: 100%; object-fit: cover; min-height: 180px; display: block; }
.prop-list-body     { flex: 1; padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; }

/* ── 12. WHY SECTION (dark) ─────────────────────────────────────── */
.why-grid           { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.why-card           { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 28px; transition: all .3s; }
.why-card:hover     { background: rgba(37,99,235,.25); transform: translateY(-4px); }
.why-icon           { font-size: 32px; margin-bottom: 16px; }
.why-title          { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.why-desc           { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.7; }

/* ── 13. TEAM CARDS ─────────────────────────────────────────────── */
.team-grid          { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.team-card          { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; text-align: center; box-shadow: var(--sh-sm); transition: var(--transition); }
.team-card:hover    { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.team-photo         { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; border: 3px solid var(--blue-100); display: block; }
.team-avatar        { width: 88px; height: 88px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 28px; font-family: var(--font-serif); margin: 0 auto 14px; border: 3px solid var(--blue-100); }
.team-name          { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.team-role          { font-size: 12px; color: var(--blue); font-weight: 600; margin-bottom: 12px; }
.team-stats         { display: flex; justify-content: center; gap: 20px; }
.team-stat          { text-align: center; }
.team-stat-n        { font-size: 18px; font-weight: 800; color: var(--navy); }
.team-stat-l        { font-size: 10px; color: var(--hint); }
.team-divider       { width: 1px; background: var(--border); }

/* ── 14. TESTIMONIAL CARDS ──────────────────────────────────────── */
.testi-grid         { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.testi-card         { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-sm); transition: var(--transition); }
.testi-card:hover   { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.testi-stars        { display: flex; gap: 2px; margin-bottom: 14px; }
.testi-star         { color: #f59e0b; }
.testi-text         { font-size: 15px; color: var(--navy); line-height: 1.75; font-style: italic; margin-bottom: 18px; }
.testi-author       { display: flex; gap: 10px; align-items: center; }
.testi-avatar       { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.testi-name         { font-weight: 700; color: var(--navy); font-size: 14px; }
.testi-role-text    { font-size: 12px; color: var(--muted); }

/* ── 15. CTA BANNER ─────────────────────────────────────────────── */
.cta-banner         { background: var(--grad); border-radius: var(--r-xl); padding: 56px 6%; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; box-shadow: var(--sh-blue); }
.cta-banner-text    { }
.cta-banner-h       { font-family: var(--font-serif); font-size: clamp(22px,3vw,34px); color: #fff; margin-bottom: 8px; }
.cta-banner-sub     { font-size: 15px; color: rgba(255,255,255,.75); }
.cta-banner-btns    { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── 16. PAGE HERO ──────────────────────────────────────────────── */
.page-hero          { background: var(--navy); padding: 52px 5% 46px; text-align: center; position: relative; overflow: hidden; }
.page-hero-orb      { position: absolute; right: -80px; top: -80px; width: 380px; height: 380px; border-radius: 50%; background: rgba(37,99,235,.18); pointer-events: none; }
.page-hero-inner    { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; }
.page-hero-h1       { font-family: var(--font-serif); font-size: clamp(30px,5vw,50px); color: #fff; margin-bottom: 10px; }
.page-hero-h1 span  { color: var(--blue-300); }
.page-hero-sub      { font-size: 15px; color: rgba(255,255,255,.6); max-width: 460px; margin: 0 auto; }

/* ── 17. FILTER BAR ─────────────────────────────────────────────── */
.filter-bar         { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: var(--nav-h); z-index: 200; box-shadow: var(--sh-sm); }
.filter-bar-inner   { max-width: 1400px; margin: 0 auto; padding: 10px 5%; }
.filter-row         { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.filter-row:last-child { margin-bottom: 0; }
.filter-pill-group  { display: flex; gap: 2px; background: var(--bg); border-radius: 24px; padding: 3px; border: 1px solid var(--border); }
.filter-pill        { padding: 7px 18px; border-radius: 20px; border: none; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.filter-pill.active { background: var(--blue); color: #fff; }
.filter-search      { position: relative; flex: 1; max-width: 400px; }
.filter-count       { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 600; }
.filter-count strong { color: var(--navy); font-weight: 800; }
.filter-view-btns   { display: flex; gap: 4px; }
.filter-view-btn    { width: 36px; height: 36px; border-radius: 9px; border: 1.5px solid var(--border); background: #fff; color: var(--muted); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.filter-view-btn.active { border-color: var(--blue); background: var(--blue-50); color: var(--blue-700); }
.filter-sort-select { padding: 9px 14px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 22px; color: var(--muted); font-size: 13px; outline: none; cursor: pointer; }
.filter-clear-btn   { padding: 9px 16px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 22px; color: #dc2626; font-size: 13px; font-weight: 700; cursor: pointer; }

/* Pill dropdown */
.pill-dd            { position: relative; }
.pill-dd-btn        { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: #fff; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition); white-space: nowrap; }
.pill-dd-btn.active { border-color: var(--blue); background: var(--blue-50); color: var(--blue-700); font-weight: 700; }
.pill-dd-dot        { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.pill-dd-arrow      { font-size: 8px; opacity: .55; transition: transform .2s; display: inline-block; }
.pill-dd-btn.open .pill-dd-arrow { transform: rotate(180deg); }
.pill-dd-panel      { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: #fff; border-radius: 13px; box-shadow: 0 12px 36px rgba(15,28,63,.14); border: 1px solid var(--border); padding: 12px; z-index: 400; }
.pill-dd-head       { font-size: 10px; font-weight: 800; color: var(--blue); letter-spacing: .1em; margin-bottom: 8px; }
.pill-dd-item       { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 7px; border: none; background: transparent; font-size: 13px; color: var(--navy); cursor: pointer; transition: background .15s; }
.pill-dd-item:hover, .pill-dd-item.active { background: var(--blue-50); color: var(--blue-700); }
.pill-dd-opts       { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-dd-opt        { padding: 8px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: #fff; color: var(--navy); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); }
.pill-dd-opt.active { border-color: var(--blue); background: var(--blue-50); color: var(--blue-700); }
.pill-dd-clear      { display: block; width: 100%; padding: 6px 10px; border: none; background: transparent; font-size: 12px; color: #dc2626; cursor: pointer; margin-top: 4px; }
.pill-dd-scroll     { max-height: 260px; overflow-y: auto; }

/* Results area */
.results-area       { max-width: 1400px; margin: 0 auto; padding: 24px 5%; }

/* ── 18. BLOG PAGE ──────────────────────────────────────────────── */
.blog-hero          { background: var(--navy); padding: 80px 5% 64px; position: relative; overflow: hidden; }
.blog-hero-orb      { position: absolute; right: -60px; top: -60px; width: 420px; height: 420px; border-radius: 50%; background: rgba(37,99,235,.15); pointer-events: none; }
.blog-hero-inner    { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.blog-hero-eyebrow  { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.blog-hero-bar      { width: 28px; height: 2px; background: var(--blue-300); }
.blog-hero-label    { font-size: 11px; color: var(--blue-300); font-weight: 700; letter-spacing: .12em; }
.blog-hero-h1       { font-family: var(--font-serif); font-size: clamp(36px,5vw,60px); color: #fff; margin-bottom: 16px; line-height: 1.15; }
.blog-hero-sub      { font-size: 16px; color: rgba(255,255,255,.65); max-width: 520px; line-height: 1.75; margin-bottom: 32px; }
.blog-hero-search   { position: relative; max-width: 480px; }
.blog-hero-search input { width: 100%; padding: 14px 16px 14px 44px; border-radius: 12px; border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font-size: 15px; font-family: var(--font-sans); outline: none; backdrop-filter: blur(8px); }
.blog-hero-search input::placeholder { color: rgba(255,255,255,.5); }
.blog-hero-search input:focus { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.15); }
.blog-search-icon   { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; color: rgba(255,255,255,.6); pointer-events: none; }

/* Blog filter tabs */
.blog-cats          { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.blog-cat           { padding: 8px 18px; border-radius: 22px; border: 1.5px solid var(--border); background: #fff; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); }
.blog-cat.active    { background: var(--blue); border-color: var(--blue); color: #fff; }
.blog-cat:hover:not(.active) { border-color: var(--blue-300); color: var(--blue); }

/* Blog layout */
.blog-layout        { max-width: 1280px; margin: 0 auto; padding: 48px 5%; display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.blog-main          { min-width: 0; }

/* Featured post */
.blog-featured      { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); margin-bottom: 28px; display: grid; grid-template-columns: 1fr 1fr; transition: var(--transition); }
.blog-featured:hover { box-shadow: var(--sh-xl); transform: translateY(-3px); }
.blog-feat-img      { position: relative; min-height: 320px; overflow: hidden; }
.blog-feat-img img  { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.blog-featured:hover .blog-feat-img img { transform: scale(1.04); }
.blog-feat-overlay  { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 40%,rgba(15,28,63,.6) 100%); }
.blog-feat-body     { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.blog-feat-label    { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.blog-feat-badge    { background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.blog-feat-new      { background: #f59e0b; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.blog-feat-title    { font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: var(--navy); margin-bottom: 12px; line-height: 1.3; }
.blog-feat-excerpt  { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.blog-feat-meta     { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--hint); flex-wrap: wrap; }
.blog-feat-meta span{ display: flex; align-items: center; gap: 4px; }

/* Blog grid */
.blog-grid          { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.blog-card          { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: var(--transition); display: flex; flex-direction: column; }
.blog-card:hover    { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.blog-card-img      { position: relative; height: 200px; overflow: hidden; }
.blog-card-img img  { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body     { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-card-cat      { display: inline-block; background: var(--blue-50); color: var(--blue); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; }
.blog-card-title    { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.35; flex: 1; }
.blog-card-excerpt  { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 14px; }
.blog-card-meta     { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--hint); border-top: 1px solid var(--border); padding-top: 12px; margin-top: auto; }
.blog-card-meta-l   { display: flex; align-items: center; gap: 10px; }
.blog-card-meta span{ display: flex; align-items: center; gap: 4px; }
.blog-read-more     { color: var(--blue); font-weight: 700; font-size: 12px; display: flex; align-items: center; gap: 4px; }

/* Small blog card (sidebar list) */
.blog-card-sm       { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.blog-card-sm:last-child { border-bottom: none; }
.blog-card-sm-img   { width: 72px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.blog-card-sm-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-sm-title { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.4; margin-bottom: 4px; }
.blog-card-sm-meta  { font-size: 11px; color: var(--hint); }

/* Blog sidebar */
.blog-sidebar       { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 20px; }
.blog-sidebar-card  { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-sm); }
.blog-sidebar-h     { font-family: var(--font-serif); font-size: 18px; color: var(--navy); margin-bottom: 16px; }

/* ── 19. BLOG DETAIL ────────────────────────────────────────────── */
.blog-detail-page   { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); }
.blog-detail-hero   { position: relative; height: 420px; overflow: hidden; }
.blog-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.blog-detail-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg,rgba(15,28,63,.1) 0%,rgba(15,28,63,.72) 100%); }
.blog-detail-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 5% 36px; max-width: 1280px; margin: 0 auto; }
.blog-detail-cat    { display: inline-flex; align-items: center; gap: 6px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; }
.blog-detail-h1     { font-family: var(--font-serif); font-size: clamp(28px,4vw,48px); color: #fff; line-height: 1.2; margin-bottom: 16px; max-width: 820px; }
.blog-detail-meta   { display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.75); font-size: 13px; flex-wrap: wrap; }
.blog-detail-meta span{ display: flex; align-items: center; gap: 5px; }

/* Blog detail layout */
.blog-detail-layout { max-width: 1280px; margin: 0 auto; padding: 40px 5%; display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.blog-content-wrap  { min-width: 0; }
.blog-breadcrumb    { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 24px; flex-wrap: wrap; }
.blog-breadcrumb a  { color: var(--muted); transition: color .2s; }
.blog-breadcrumb a:hover { color: var(--blue); }
.blog-breadcrumb-sep { color: var(--hint); font-size: 12px; }

/* Article prose */
.blog-prose         { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 40px; box-shadow: var(--sh-sm); line-height: 1.85; font-size: 16px; color: var(--navy); }
.blog-prose h2      { font-family: var(--font-serif); font-size: 26px; color: var(--navy); margin: 32px 0 14px; }
.blog-prose h3      { font-family: var(--font-serif); font-size: 21px; color: var(--navy); margin: 24px 0 10px; }
.blog-prose p       { margin-bottom: 18px; line-height: 1.85; }
.blog-prose ul, .blog-prose ol { padding-left: 24px; margin-bottom: 18px; }
.blog-prose li      { margin-bottom: 8px; }
.blog-prose strong  { color: var(--navy); }
.blog-prose blockquote { border-left: 4px solid var(--blue); padding: 16px 20px; margin: 24px 0; background: var(--blue-50); border-radius: 0 10px 10px 0; color: var(--muted); font-style: italic; }
.blog-prose img     { border-radius: var(--r-md); margin: 20px 0; max-width: 100%; }
.blog-prose a       { color: var(--blue); text-decoration: underline; }

/* Share section */
.blog-share         { display: flex; align-items: center; gap: 12px; padding: 20px; background: var(--blue-50); border-radius: var(--r-md); border: 1px solid var(--blue-100); margin-top: 28px; flex-wrap: wrap; }
.blog-share-label   { font-size: 14px; font-weight: 700; color: var(--navy); }
.blog-share-btns    { display: flex; gap: 8px; }
.blog-share-btn     { padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: var(--transition); }
.blog-share-fb      { background: #1877f2; color: #fff; }
.blog-share-tw      { background: #000; color: #fff; }
.blog-share-wa      { background: #25d366; color: #fff; }
.blog-share-li      { background: #0a66c2; color: #fff; }

/* Blog sidebar detail */
.blog-sidebar-cta   { background: var(--grad); border-radius: var(--r-lg); padding: 24px; color: #fff; text-align: center; }
.blog-sidebar-cta h4 { font-family: var(--font-serif); font-size: 20px; margin-bottom: 8px; }
.blog-sidebar-cta p  { font-size: 13px; opacity: .85; margin-bottom: 18px; }
.blog-author-card   { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; }
.blog-author-inner  { display: flex; gap: 14px; align-items: flex-start; }
.blog-author-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 20px; flex-shrink: 0; }
.blog-author-name   { font-weight: 700; color: var(--navy); font-size: 15px; margin-bottom: 2px; }
.blog-author-role   { font-size: 12px; color: var(--blue); font-weight: 600; margin-bottom: 6px; }
.blog-author-bio    { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ── 20. PROPERTY DETAIL ────────────────────────────────────────── */
.pd-breadcrumb      { background: var(--white); border-bottom: 1px solid var(--border); padding: 12px 5%; }
.pd-breadcrumb-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-bc-links        { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.pd-bc-links a      { color: var(--muted); }
.pd-bc-links a:hover { color: var(--blue); }
.pd-bc-sep          { color: var(--hint); }
.pd-bc-current      { color: var(--blue-700); font-weight: 600; }
.pd-actions         { display: flex; gap: 8px; }
.pd-action          { display: flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: #fff; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); }
.pd-action.saved    { border-color: var(--danger); background: #fef2f2; color: var(--danger); }
.pd-action.compared { border-color: var(--blue); background: var(--blue-50); color: var(--blue-700); }
.pd-action-cta      { display: flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 20px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; }

.pd-layout          { max-width: 1280px; margin: 0 auto; padding: 32px 5%; display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.pd-main            { min-width: 0; }
.pd-sidebar         { position: sticky; top: calc(var(--nav-h) + 16px); }

/* Gallery */
.pd-gallery         { border-radius: var(--r-xl); overflow: hidden; margin-bottom: 12px; position: relative; box-shadow: var(--sh-lg); }
.pd-gallery-img     { width: 100%; height: 460px; object-fit: cover; display: block; }
.pd-badge-tag       { position: absolute; top: 16px; left: 16px; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 20px; }
.pd-badge-status    { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px; color: #fff; }
.pd-badge-sale-bg   { background: var(--navy); }
.pd-badge-rent-bg   { background: var(--blue); }
.pd-badge-featured  { position: absolute; bottom: 16px; left: 16px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.pd-gallery-nav     { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.5); border: none; color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pd-gallery-nav-prev { left: 12px; }
.pd-gallery-nav-next { right: 12px; }
.pd-thumbnails      { display: flex; gap: 10px; margin-bottom: 28px; overflow-x: auto; }
.pd-thumb           { flex-shrink: 0; width: 90px; height: 72px; border-radius: 10px; overflow: hidden; border: 2.5px solid transparent; cursor: pointer; padding: 0; background: none; transition: border-color .2s; }
.pd-thumb.active    { border-color: var(--blue); }
.pd-thumb img       { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb-tour      { flex-shrink: 0; width: 90px; height: 72px; border-radius: 10px; border: 2px dashed var(--blue-300); display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--blue); font-size: 10px; font-weight: 700; gap: 4px; }

/* Property header card */
.pd-header          { background: var(--white); border-radius: var(--r-lg); padding: 24px; margin-bottom: 20px; box-shadow: var(--sh-sm); border: 1px solid var(--border); }
.pd-type-loc        { font-size: 12px; color: var(--hint); margin-bottom: 6px; }
.pd-title           { font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.pd-rera            { font-size: 13px; color: var(--muted); }
.pd-price           { font-size: 36px; font-weight: 800; color: var(--blue-700); font-family: var(--font-serif); }
.pd-ppsf            { font-size: 12px; color: var(--hint); text-align: right; }
.pd-specs           { display: flex; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.pd-spec            { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 9px 16px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--navy); }

/* Tabs */
.pd-tabs            { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-sm); border: 1px solid var(--border); overflow: hidden; }
.pd-tab-nav         { border-bottom: 1px solid var(--border); display: flex; overflow-x: auto; }
.pd-tab-btn         { padding: 11px 20px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: var(--transition); }
.pd-tab-btn.active  { border-bottom-color: var(--blue); color: var(--blue-700); font-weight: 700; }
.pd-tab-body        { padding: 24px; }
.pd-tab-h3          { font-family: var(--font-serif); font-size: 20px; color: var(--navy); margin-bottom: 12px; }
.pd-desc            { font-size: 14px; color: var(--muted); line-height: 1.85; }
.pd-detail-chips    { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.pd-detail-chip     { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 10px 14px; }
.pd-chip-label      { font-size: 10px; color: var(--hint); }
.pd-chip-value      { font-size: 13px; font-weight: 700; color: var(--navy); }
.pd-nearby          { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pd-nearby-item     { font-size: 13px; color: var(--muted); background: var(--bg); padding: 8px 12px; border-radius: 8px; display: flex; gap: 8px; }
.pd-amenities-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.pd-amenity         { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 12px 16px; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--navy); }
.pd-amenity-check   { color: var(--blue); }
.pd-map-iframe      { width: 100%; height: 280px; border-radius: 14px; border: 1px solid var(--border); }
.pd-no-map          { background: var(--bg2); border-radius: 14px; height: 260px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
.pd-media-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-media-item      { display: flex; gap: 12px; align-items: center; padding: 16px; background: var(--bg); border-radius: 12px; border: 1px solid var(--border); text-decoration: none; color: var(--navy); transition: var(--transition); }
.pd-media-item:hover { background: var(--blue-50); border-color: var(--blue-200); }
.pd-media-icon      { font-size: 28px; }
.pd-media-title     { font-weight: 700; font-size: 14px; }
.pd-media-sub       { font-size: 12px; color: var(--muted); }

/* Related */
.pd-related         { margin-top: 28px; }
.pd-related-h       { font-family: var(--font-serif); font-size: 22px; color: var(--navy); margin-bottom: 16px; }
.pd-related-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.pd-related-card    { text-decoration: none; background: #fff; border-radius: 14px; border: 1px solid var(--border); overflow: hidden; box-shadow: var(--sh-sm); transition: var(--transition); }
.pd-related-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.pd-related-img     { width: 100%; height: 140px; object-fit: cover; display: block; }
.pd-related-body    { padding: 14px; }
.pd-related-price   { font-size: 20px; font-weight: 800; color: var(--blue-700); }
.pd-related-title   { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.pd-related-meta    { font-size: 12px; color: var(--muted); }

/* Sidebar enquiry */
.pd-enquiry         { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; margin-bottom: 16px; box-shadow: var(--sh-md); }
.pd-enquiry-h       { font-family: var(--font-serif); font-size: 20px; color: var(--navy); margin-bottom: 6px; }
.pd-enquiry-sub     { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.pd-enquiry-sent    { text-align: center; padding: 24px 0; }
.pd-stats-grid      { background: #fff; border-radius: 14px; padding: 18px; margin-bottom: 16px; border: 1px solid var(--border); box-shadow: var(--sh-sm); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-stat-item       { background: var(--bg); border-radius: 9px; padding: 10px 12px; }
.pd-stat-label      { font-size: 11px; color: var(--hint); }
.pd-stat-value      { font-size: 13px; font-weight: 700; color: var(--navy); margin-top: 2px; }

/* ── 21. PROJECTS PAGE ──────────────────────────────────────────── */
.proj-hero-sub      { font-size: 15px; color: rgba(255,255,255,.6); max-width: 460px; margin: 6px auto 0; }
.dev-logo           { border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.proj-grid          { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.proj-card          { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); display: flex; flex-direction: column; transition: var(--transition); }
.proj-card:hover    { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.proj-card-img      { position: relative; height: 215px; flex-shrink: 0; }
.proj-card-img img  { width: 100%; height: 100%; object-fit: cover; }
.proj-card-overlay  { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(15,28,63,.55) 100%); }
.proj-card-body     { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.proj-dev-row       { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.proj-dev-name      { font-size: 12px; font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-title         { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 5px; line-height: 1.3; }
.proj-location      { font-size: 12px; color: #e11d48; margin-bottom: 10px; display: flex; align-items: center; gap: 3px; }
.proj-price         { font-size: 17px; font-weight: 800; color: var(--blue-700); font-family: var(--font-serif); margin-bottom: 12px; }
.proj-info-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; flex: 1; }
.proj-info-item     { background: var(--bg); border-radius: 8px; padding: 8px 10px; border: 1px solid var(--border); }
.proj-info-label    { font-size: 10px; color: var(--hint); margin-bottom: 2px; }
.proj-info-value    { font-size: 11px; font-weight: 700; color: var(--navy); line-height: 1.3; }

/* List card */
.proj-list-card     { display: flex; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: var(--transition); margin-bottom: 14px; }
.proj-list-card:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }
.proj-list-img      { width: 280px; flex-shrink: 0; position: relative; min-height: 200px; }
.proj-list-img img  { width: 100%; height: 100%; object-fit: cover; min-height: 200px; display: block; }
.proj-list-body     { flex: 1; padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; }
.proj-list-footer   { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 12px; }
.proj-list-by       { font-size: 11px; color: var(--hint); }
.proj-list-contact  { display: flex; gap: 8px; }
.proj-contact-btn   { width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; background: #fff; cursor: pointer; text-decoration: none; transition: border-color .2s; }
.proj-contact-btn:hover { border-color: var(--blue-400); }
.proj-wa-btn        { width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid #a7f3d0; background: #ecfdf5; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; text-decoration: none; }
.proj-info-3col     { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }

/* Brochure modal */
.modal-overlay      { position: fixed; inset: 0; background: rgba(15,28,63,.75); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box          { background: #fff; border-radius: var(--r-xl); width: 100%; max-width: 460px; box-shadow: var(--sh-xl); overflow: hidden; }
.modal-header       { background: var(--grad); padding: 20px 26px; }
.modal-body         { padding: 22px 26px; }
.modal-price-badge  { background: rgba(255,255,255,.15); border-radius: 8px; padding: 7px 12px; font-size: 14px; font-weight: 700; color: #fff; margin-top: 8px; }
.modal-success      { text-align: center; padding: 12px 0; }
.modal-success-icon { font-size: 44px; margin-bottom: 10px; }
.modal-form p       { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.modal-input-mb     { margin-bottom: 11px; }
.modal-form-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ── 22. LIST PROPERTY ──────────────────────────────────────────── */
.list-wrap          { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); }
.list-hero          { background: var(--navy); padding: 48px 5% 40px; }
.list-hero-inner    { max-width: 800px; margin: 0 auto; text-align: center; }
.list-progress      { display: flex; align-items: center; gap: 0; }
.list-step-dot      { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.list-step-dot.done { background: var(--blue); color: #fff; }
.list-step-dot.current { background: #fff; color: var(--blue-700); border: 3px solid var(--blue-400); }
.list-step-dot.future { background: rgba(255,255,255,.15); color: rgba(255,255,255,.5); }
.list-step-label    { font-size: 10px; white-space: nowrap; font-weight: 400; }
.list-step-label.current { color: #fff; font-weight: 700; }
.list-step-label.other { color: rgba(255,255,255,.4); }
.list-step-line     { flex: 1; height: 2px; margin-bottom: 20px; }
.list-step-line.done { background: var(--blue-500,#3b82f6); }
.list-step-line.future { background: rgba(255,255,255,.15); }
.list-main          { max-width: 740px; margin: 0 auto; padding: 40px 5%; }
.list-card          { background: var(--white); border-radius: var(--r-xl); box-shadow: var(--sh-lg); border: 1px solid var(--border); padding: 36px 40px; }
.list-step-h        { font-family: var(--font-serif); font-size: 24px; color: var(--navy); margin-bottom: 6px; }
.list-step-sub      { color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.list-nav           { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--border); margin-top: 24px; }
.list-submit-card   { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); display: flex; align-items: center; justify-content: center; }
.list-success       { background: var(--white); border-radius: var(--r-xl); padding: 64px 48px; text-align: center; max-width: 500px; box-shadow: var(--sh-xl); border: 1px solid var(--border); }
.list-success-icon  { width: 80px; height: 80px; border-radius: 50%; background: var(--blue-50); border: 3px solid var(--blue-200); display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 0 auto 24px; }

/* Toggle button group */
.toggle-group       { display: flex; flex-wrap: wrap; gap: 10px; }
.toggle-btn         { padding: 9px 18px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: #fff; color: var(--navy); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); }
.toggle-btn.active  { border-color: var(--blue); background: var(--blue-50); color: var(--blue-700); }
.toggle-btn-sm      { padding: 6px 12px; font-size: 12px; border-radius: 8px; }

/* Amenity toggle */
.amenity-grid       { display: flex; flex-wrap: wrap; gap: 8px; }
.amenity-btn        { padding: 7px 14px; border-radius: 8px; border: 1.5px solid var(--border); background: #fff; color: var(--muted); font-size: 12px; cursor: pointer; transition: var(--transition); }
.amenity-btn.active { border-color: var(--green); background: #ecfdf5; color: var(--green); }

/* Photo upload */
.photo-grid         { display: grid; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap: 10px; }
.photo-add          { height: 88px; border: 2px dashed var(--blue-200); border-radius: var(--r-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; gap: 6px; font-size: 11px; color: var(--blue); font-weight: 600; background: var(--blue-50); transition: var(--transition); }
.photo-add:hover    { border-color: var(--blue); background: #dbeafe; }
.photo-thumb-wrap   { position: relative; height: 88px; }
.photo-thumb        { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); display: block; }
.photo-remove       { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.6); border: none; color: #fff; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ── 23. TOOLS PAGE ────────────────────────────────────────────── */
.tools-wrap         { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); }
.tools-grid         { display: grid; grid-template-columns: 240px 1fr; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 32px 5%; }
.tools-nav          { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--sh-sm); position: sticky; top: calc(var(--nav-h) + 16px); height: fit-content; }
.tool-nav-btn       { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: var(--r-sm); border: none; background: transparent; font-size: 13px; font-weight: 500; color: var(--navy); cursor: pointer; transition: background .15s, color .15s; text-align: left; margin-bottom: 2px; }
.tool-nav-btn:hover { background: var(--bg); }
.tool-nav-btn.active { background: var(--blue-50); color: var(--blue-700); font-weight: 700; }
.tool-nav-icon      { font-size: 18px; }
.tool-panel         { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-sm); }
.tool-h             { font-family: var(--font-serif); font-size: 24px; color: var(--navy); margin-bottom: 6px; }
.tool-sub           { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.tool-slider-row    { margin-bottom: 20px; }
.tool-slider-top    { display: flex; justify-content: space-between; margin-bottom: 6px; }
.tool-slider-label  { font-size: 13px; color: var(--muted); }
.tool-slider-value  { font-size: 14px; font-weight: 700; color: var(--blue-700); }
.tool-result        { background: var(--grad); border-radius: 12px; padding: 18px; color: #fff; text-align: center; margin-top: 8px; }
.tool-result-label  { font-size: 11px; opacity: .8; letter-spacing: .1em; margin-bottom: 4px; }
.tool-result-value  { font-size: 32px; font-weight: 800; font-family: var(--font-serif); }
.tool-stats-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tool-stat-item     { background: var(--bg); border-radius: 10px; padding: 12px 14px; }
.tool-stat-label    { font-size: 11px; color: var(--hint); margin-bottom: 4px; }
.tool-stat-value    { font-size: 15px; font-weight: 700; }
.tool-conv-output   { background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 12px; padding: 18px; text-align: center; margin-top: 16px; }
.tool-conv-result   { font-size: 28px; font-weight: 800; color: var(--blue-700); font-family: var(--font-serif); }

/* ── 24. SAVED / COMPARE PAGES ──────────────────────────────────── */
.saved-empty        { text-align: center; padding: 80px 0; }
.saved-empty-icon   { font-size: 64px; margin-bottom: 16px; }
.saved-empty-h      { font-family: var(--font-serif); font-size: 26px; color: var(--navy); margin-bottom: 8px; }
.saved-empty-sub    { color: var(--muted); margin-bottom: 24px; }
.compare-table      { overflow-x: auto; }
.compare-table table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.compare-th         { padding: 16px; background: var(--bg); border-bottom: 2px solid var(--border); font-size: 13px; font-weight: 700; color: var(--navy); }
.compare-td         { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.compare-label-td   { font-weight: 700; color: var(--navy); background: var(--bg); }

/* ── 25. PRICING PAGE ───────────────────────────────────────────── */
.pricing-grid       { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.pricing-card       { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 36px; box-shadow: var(--sh-sm); transition: var(--transition); }
.pricing-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.pricing-card.popular { border-color: var(--blue); background: var(--navy); transform: scale(1.04); }
.pricing-popular-badge { background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; display: inline-block; margin-bottom: 16px; }
.pricing-plan-name  { font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.pricing-card.popular .pricing-plan-name { color: rgba(255,255,255,.7); }
.pricing-price      { font-family: var(--font-serif); font-size: 48px; font-weight: 800; color: var(--navy); line-height: 1; }
.pricing-card.popular .pricing-price { color: #fff; }
.pricing-period     { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.pricing-card.popular .pricing-period { color: rgba(255,255,255,.6); }
.pricing-features   { margin: 0 0 28px; padding: 0; list-style: none; }
.pricing-feat       { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.pricing-card.popular .pricing-feat { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.pricing-feat-icon  { color: var(--green); font-weight: 700; flex-shrink: 0; }

/* ── 26. SITE VISIT PAGE ────────────────────────────────────────── */
.sv-wrap            { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); }
.sv-layout          { max-width: 1200px; margin: 0 auto; padding: 40px 5%; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.sv-card            { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 36px; box-shadow: var(--sh-md); }
.sv-info-card       { background: var(--navy); border-radius: var(--r-xl); padding: 36px; color: #fff; }
.sv-info-h          { font-family: var(--font-serif); font-size: 28px; color: #fff; margin-bottom: 10px; }
.sv-info-sub        { color: rgba(255,255,255,.65); font-size: 14px; margin-bottom: 32px; line-height: 1.7; }
.sv-info-items      { display: flex; flex-direction: column; gap: 16px; }
.sv-info-item       { display: flex; gap: 14px; align-items: flex-start; }
.sv-info-icon       { width: 40px; height: 40px; border-radius: 10px; background: rgba(37,99,235,.3); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.sv-info-label      { font-size: 11px; color: rgba(255,255,255,.6); margin-bottom: 2px; }
.sv-info-value      { font-size: 14px; font-weight: 600; color: #fff; }

/* ── 27. EMI CALCULATOR ─────────────────────────────────────────── */
.emi-wrap           { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-sm); }
.emi-wrap.compact   { padding: 18px; }
.emi-h              { font-family: var(--font-serif); font-size: 22px; margin-bottom: 20px; color: var(--navy); }
.emi-wrap.compact .emi-h { font-size: 18px; }
.emi-slider-row     { margin-bottom: 20px; }
.emi-wrap.compact .emi-slider-row { margin-bottom: 14px; }
.emi-slider-top     { display: flex; justify-content: space-between; margin-bottom: 6px; }
.emi-slider-label   { font-size: 13px; color: var(--muted); }
.emi-slider-value   { font-size: 14px; font-weight: 700; color: var(--blue-700); }
.emi-result         { background: var(--grad); border-radius: 12px; padding: 18px; color: #fff; text-align: center; margin-top: 8px; }
.emi-result-label   { font-size: 11px; opacity: .8; letter-spacing: .1em; margin-bottom: 4px; }
.emi-result-value   { font-size: 32px; font-weight: 800; font-family: var(--font-serif); }
.emi-stats          { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.emi-stat           { background: var(--bg); border-radius: 10px; padding: 12px 14px; }
.emi-stat-label     { font-size: 11px; color: var(--hint); margin-bottom: 4px; }
.emi-stat-value     { font-size: 15px; font-weight: 700; }
input[type="range"] { width: 100%; accent-color: var(--blue); cursor: pointer; }

/* ── 28. COMPARE BAR (fixed bottom) ─────────────────────────────── */
.compare-bar        { position: fixed; bottom: 0; left: 0; right: 0; z-index: 800; background: var(--navy); border-top: 3px solid var(--blue); padding: 12px 5%; box-shadow: 0 -4px 24px rgba(15,28,63,.3); }
.compare-bar-inner  { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.compare-bar-info   { display: flex; align-items: center; gap: 10px; }
.compare-bar-count  { background: var(--blue); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.compare-bar-hint   { color: rgba(255,255,255,.5); font-size: 13px; }
.compare-bar-btns   { display: flex; gap: 10px; }
.compare-bar-clear  { padding: 8px 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; cursor: pointer; }
.compare-bar-go     { padding: 8px 20px; background: var(--blue); border: none; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: var(--sh-blue); }

/* ── 29. SEARCH BAR ─────────────────────────────────────────────── */
.search-bar         { background: rgba(255,255,255,.1); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 18px 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: 860px; }
.search-bar.solid   { background: #fff; border-color: var(--border); box-shadow: var(--sh-md); }
.search-divider     { width: 1px; height: 36px; background: rgba(255,255,255,.25); }
.search-bar.solid .search-divider { background: var(--border); }
.search-field       { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 140px; }
.search-field-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.search-bar.solid .search-field-label { color: var(--hint); }
.search-field input, .search-field select { background: transparent; border: none; outline: none; font-size: 14px; color: #fff; font-family: var(--font-sans); width: 100%; }
.search-bar.solid .search-field input,
.search-bar.solid .search-field select { color: var(--navy); }
.search-field input::placeholder { color: rgba(255,255,255,.45); }
.search-bar.solid .search-field input::placeholder { color: var(--hint); }
.search-btn         { padding: 14px 24px; background: var(--grad); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: var(--sh-blue); white-space: nowrap; transition: var(--transition); flex-shrink: 0; }
.search-btn:hover   { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(37,99,235,.4); }

/* ── 30. FOOTER ──────────────────────────────────────────────────── */
.footer             { background: var(--navy); color: rgba(255,255,255,.65); }
.footer-top         { max-width: 1400px; margin: 0 auto; padding: 72px 5% 48px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand-h     { font-family: var(--font-serif); font-size: 24px; color: #fff; margin-bottom: 10px; }
.footer-brand-sub   { font-size: 13px; line-height: 1.7; margin-bottom: 20px; max-width: 280px; }
.footer-contact-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.footer-contact-icon{ font-size: 16px; margin-top: 2px; }
.footer-contact-text{ font-size: 13px; }
.footer-col-h       { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #fff; margin-bottom: 16px; opacity: .5; }
.footer-link        { display: block; font-size: 13px; color: rgba(255,255,255,.55); padding: 4px 0; transition: color .2s; }
.footer-link:hover  { color: #fff; }
.footer-social      { display: flex; gap: 10px; margin-top: 24px; }
.footer-social-btn  { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.65); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: var(--transition); }
.footer-social-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.footer-search-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 5%; border-top: 1px solid rgba(255,255,255,.08); max-width: 1400px; margin: 0 auto; }
.footer-tag         { font-size: 11px; padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.5); transition: color .2s; }
.footer-tag:hover   { color: rgba(255,255,255,.85); }
.footer-bottom      { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 5%; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; }
.footer-copy        { font-size: 12px; }
.footer-legal       { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal a     { font-size: 12px; color: rgba(255,255,255,.4); transition: color .2s; }
.footer-legal a:hover { color: #fff; }

/* ── 31. STATUS / MISC BADGES ────────────────────────────────────── */
.badge              { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-block; }
.badge-blue         { background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); }
.badge-green        { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.badge-orange       { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.badge-purple       { background: #faf5ff; color: #7c3aed; border: 1px solid #e9d5ff; }
.badge-amber        { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.badge-navy         { background: var(--navy); color: #fbbf24; }

/* ── 32. PAGINATION ─────────────────────────────────────────────── */
.pagination         { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 40px; }
.page-btn           { width: 38px; height: 38px; border-radius: 9px; border: 1.5px solid var(--border); background: #fff; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 400; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.page-btn.active    { border-color: var(--blue); background: var(--blue); color: #fff; font-weight: 700; }
.page-btn:disabled  { opacity: .4; cursor: not-allowed; }
.page-nav-btn       { padding: 9px 18px; background: #fff; border: 1px solid var(--border); border-radius: 9px; color: var(--navy); cursor: pointer; font-size: 13px; font-weight: 600; transition: var(--transition); }
.page-nav-btn:disabled { color: var(--hint); cursor: not-allowed; }

/* ── 33. EMPTY STATE ─────────────────────────────────────────────── */
.empty-state        { text-align: center; padding: 80px 0; background: #fff; border-radius: var(--r-xl); border: 1px solid var(--border); }
.empty-icon         { font-size: 56px; margin-bottom: 16px; }
.empty-h            { font-family: var(--font-serif); font-size: 24px; color: var(--navy); margin-bottom: 8px; }
.empty-sub          { color: var(--muted); margin-bottom: 20px; }

/* ── 34. SKELETON ────────────────────────────────────────────────── */
.skeleton           { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse    { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
.skeleton-h200      { height: 200px; }
.skeleton-h320      { height: 320px; }
.skeleton-h460      { height: 460px; }

/* ── 35. MODAL ───────────────────────────────────────────────────── */
.modal-backdrop     { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-card         { background: #fff; border-radius: var(--r-xl); padding: 32px; max-height: 90vh; overflow-y: auto; box-shadow: var(--sh-xl); }
.modal-close        { background: transparent; border: none; font-size: 20px; cursor: pointer; color: var(--muted); }
.modal-success-big  { text-align: center; padding: 24px 0; }

/* Pill select (date/time) */
.pill-row           { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-sel           { padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--border); background: #fff; color: var(--navy); font-size: 11px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.pill-sel.active    { background: var(--blue); border-color: var(--blue); color: #fff; }
.pill-sel-round     { border-radius: 20px; font-size: 12px; padding: 7px 12px; }
.pill-sel-round.active { background: var(--blue-50); border-color: var(--blue); color: var(--blue-700); }

/* ── 36. ANIM UTILITY ────────────────────────────────────────────── */
.anim-in            { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.anim-in.visible    { opacity: 1; transform: translateY(0); }

/* ── 37. ABOUT PAGE ──────────────────────────────────────────────── */
.about-hero         { background: var(--navy); padding: 96px 5% 80px; position: relative; overflow: hidden; }
.about-hero-orb     { position: absolute; right: -100px; top: -100px; width: 600px; height: 600px; border-radius: 50%; background: rgba(37,99,235,.15); pointer-events: none; }
.about-hero-inner   { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.milestone-wrap     { position: relative; }
.milestone-line     { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--blue-100); transform: translateX(-50%); }
.milestone-item     { display: flex; margin-bottom: 40px; }
.milestone-item.odd  { justify-content: flex-start; }
.milestone-item.even { justify-content: flex-end; }
.milestone-card     { width: 44%; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; box-shadow: var(--sh-sm); }
.milestone-year     { font-size: 13px; color: var(--blue); font-weight: 800; margin-bottom: 6px; }
.milestone-title    { font-size: 16px; font-weight: 700; font-family: var(--font-serif); color: var(--navy); margin-bottom: 6px; }
.milestone-desc     { font-size: 13px; color: var(--muted); line-height: 1.6; }
.about-stats-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.about-stat-card    { text-align: center; }
.about-stat-n       { font-size: 38px; font-weight: 800; color: var(--blue-700); font-family: var(--font-serif); }
.about-stat-l       { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ── 38. CONTACT PAGE ────────────────────────────────────────────── */
.contact-layout     { max-width: 1100px; margin: 0 auto; padding: 64px 5%; display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.contact-info-item  { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; }
.contact-icon-box   { width: 44px; height: 44px; border-radius: 11px; background: var(--blue-50); border: 1px solid var(--blue-100); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.contact-form-card  { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 36px; box-shadow: var(--sh-lg); }

/* ── 39. BREADCRUMB ──────────────────────────────────────────────── */
.breadcrumb         { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.breadcrumb a       { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb-sep     { color: var(--hint); }
.breadcrumb-current { color: var(--blue-700); font-weight: 600; }

/* ── 40. LOADING SPINNER ─────────────────────────────────────────── */
.spinner-page       { min-height: 100vh; padding-top: var(--nav-h); display: flex; align-items: center; justify-content: center; }
.spinner-icon       { font-size: 48px; margin-bottom: 12px; }
.spinner-text       { color: var(--muted); }

/* ── 41. ALERTS ──────────────────────────────────────────────────── */
.alert              { padding: 12px 16px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 10px; }
.alert-blue         { background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-700); }
.alert-green        { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }

/* ── 42. ABOUT + CONTACT ─────────────────────────────────────────── */
.contact-info-label { font-size: 11px; color: var(--hint); margin-bottom: 3px; font-weight: 700; }
.contact-info-val   { font-size: 15px; font-weight: 600; color: var(--navy); }
.contact-info-hint  { font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

/* ── TABLET (≤1024px) ──────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   EXTENDED COMPONENT STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Global mobile base fixes */
*  { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: var(--font-sans); }

/* Prevent iOS font-size zoom on input focus */

/* ── TABLET ≤1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-links, .nav-right { display: none; }
  .nav-ham               { display: flex; }
  .stats-grid        { grid-template-columns: repeat(2,1fr); }
  .cat-grid          { grid-template-columns: repeat(3,1fr); }
  .why-grid          { grid-template-columns: repeat(2,1fr); }
  .team-grid         { grid-template-columns: repeat(2,1fr); }
  .testi-grid        { grid-template-columns: repeat(2,1fr); }
  .proj-grid         { grid-template-columns: repeat(2,1fr); }
  .about-stats-grid  { grid-template-columns: repeat(2,1fr); }
  .about-team-grid   { grid-template-columns: repeat(2,1fr); }
  .about-testi-grid  { grid-template-columns: 1fr; }
  .grid-4            { grid-template-columns: repeat(2,1fr); }
  .pd-amenities-grid { grid-template-columns: repeat(2,1fr); }
  .pd-related-grid   { grid-template-columns: repeat(2,1fr); }
  .blog-layout        { grid-template-columns: 1fr; }
  .blog-detail-layout { grid-template-columns: 1fr; }
  .blog-sidebar       { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .pd-layout          { grid-template-columns: 1fr; }
  .pd-sidebar         { position: static; }
  .contact-body       { grid-template-columns: 1fr; }
  .sv-body            { grid-template-columns: 1fr; }
  .tools-emi-layout   { grid-template-columns: 1fr; }
  .footer-top         { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cta-banner         { flex-direction: column; text-align: center; padding: 40px 5%; }
  .cta-banner-btns    { justify-content: center; }
  .milestone-card     { width: 46%; }
  .pricing-grid       { grid-template-columns: repeat(2,1fr); }
  .pricing-card.popular { transform: translateY(-4px); }
  .list-type-grid     { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── FORM SYSTEM ─────────────────────────────────────────────── */
.form-group     { margin-bottom: 16px; }
.form-label     { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; letter-spacing: .04em; }
.form-input     { width: 100%; padding: 12px 14px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; color: var(--navy); font-size: 14px; font-family: var(--font-sans); outline: none; transition: border-color .2s; box-sizing: border-box; }
.form-input:focus { border-color: #60a5fa; background: #fff; }
.form-select    { appearance: none; cursor: pointer; }
.form-textarea  { resize: vertical; min-height: 100px; }

/* ── UTILITY ─────────────────────────────────────────────────── */
.txt-blue   { color: var(--blue); }
.txt-muted  { color: var(--muted); }
.txt-hint   { color: var(--hint); }
.txt-white  { color: #fff; }
.btn-full   { width: 100%; justify-content: center; }
.btn-danger-outline { padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; color: #dc2626; cursor: pointer; font-size: 13px; font-weight: 600; }
.grid-2     { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3     { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-4     { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.section-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.eyebrow-line    { width: 24px; height: 2px; background: var(--blue); }
.section-title   { font-family: var(--font-serif); font-size: clamp(24px,4vw,40px); color: var(--navy); font-weight: 700; margin-bottom: 10px; }

/* ── NAV EXTRAS ──────────────────────────────────────────────── */
.nav-dd-rel         { position: relative; }
.nav-dd-footer-link { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.nav-logo-icon      { width: 38px; height: 38px; background: var(--grad); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.nav-logo-name      { font-weight: 800; font-size: 17px; }
.nav-logo-name.white { color: #fff; }
.nav-logo-name.dark  { color: var(--navy); }
.mob-logo-img       { height: 28px; width: auto; max-width: 120px; object-fit: contain; }
.mob-header-inner   { font-size: 16px; font-weight: 800; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.mob-scroll         { flex: 1; overflow-y: auto; padding: 6px 0; }

/* ── FOOTER EXTRAS ───────────────────────────────────────────── */
.footer-logo-name   { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.footer-logo-sub    { font-size: 9px; color: rgba(255,255,255,.5); letter-spacing: .12em; }
.footer-contact-ico { flex-shrink: 0; font-size: 16px; }
.footer-divider     { height: 1px; background: rgba(255,255,255,.08); margin: 0; }

/* ── PROP BADGE EXTRA ────────────────────────────────────────── */
.prop-badge-extra   { top: 12px; right: 12px; left: auto; }

/* ── ABOUT PAGE ──────────────────────────────────────────────── */
.about-hero         { background: var(--navy); padding: 96px 5% 80px; position: relative; overflow: hidden; }
.about-hero-blob    { position: absolute; right: -100px; top: -100px; width: 600px; height: 600px; border-radius: 50%; background: rgba(37,99,235,.15); pointer-events: none; }
.about-hero-inner   { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.about-eyebrow      { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.about-eyebrow-line { width: 28px; height: 2px; background: var(--blue-300,#93c5fd); }
.about-eyebrow-txt  { font-size: 11px; color: var(--blue-300,#93c5fd); font-weight: 700; letter-spacing: .12em; }
.about-hero h1      { font-family: var(--font-serif); font-size: clamp(26px,5vw,58px); font-weight: 700; color: #fff; margin-bottom: 18px; line-height: 1.15; }
.about-hero p       { font-size: 16px; color: rgba(255,255,255,.65); max-width: 580px; line-height: 1.8; }
.about-hero-btns    { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.about-stats-strip  { background: var(--bg); border-bottom: 1px solid var(--border); padding: 52px 5%; }
.about-stats-grid   { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.about-stat         { text-align: center; }
.about-stat-num     { font-size: 38px; font-weight: 800; color: var(--blue); font-family: var(--font-serif); }
.about-stat-label   { font-size: 13px; color: var(--muted); margin-top: 6px; }
.about-team-section { padding: 80px 5%; }
.about-team-inner   { max-width: 1280px; margin: 0 auto; }
.about-team-head    { text-align: center; margin-bottom: 48px; }
.about-team-grid    { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.about-member-card  { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 24px; text-align: center; box-shadow: var(--sh-sm); transition: all .3s; }
.about-member-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.about-member-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; border: 3px solid #dbeafe; display: block; }
.about-member-initials { width: 80px; height: 80px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 26px; margin: 0 auto 14px; border: 3px solid #dbeafe; }
.about-member-name  { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.about-member-role  { font-size: 12px; color: var(--blue); font-weight: 600; margin-bottom: 10px; }
.about-member-bio   { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.about-member-stats { display: flex; justify-content: center; gap: 16px; }
.about-member-stat  { text-align: center; }
.about-member-stat-n { font-size: 16px; font-weight: 800; color: var(--navy); }
.about-member-stat-l { font-size: 10px; color: var(--hint); }
.about-member-div   { width: 1px; background: var(--border); }
.milestone-section  { background: var(--bg); padding: 80px 5%; border-top: 1px solid var(--border); }
.milestone-inner    { max-width: 800px; margin: 0 auto; }
.milestone-head     { text-align: center; margin-bottom: 48px; }
.milestone-timeline { position: relative; }
.milestone-item     { display: flex; margin-bottom: 40px; }
.milestone-item.left  { justify-content: flex-start; }
.milestone-item.right { justify-content: flex-end; }
.milestone-card     { width: 44%; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; box-shadow: var(--sh-sm); }
.milestone-year     { font-size: 13px; color: var(--blue); font-weight: 800; margin-bottom: 6px; }
.milestone-title    { font-size: 16px; font-weight: 700; font-family: var(--font-serif); color: var(--navy); margin-bottom: 6px; }
.milestone-desc     { font-size: 13px; color: var(--muted); line-height: 1.6; }
.about-testi-section { padding: 80px 5%; }
.about-testi-inner  { max-width: 1280px; margin: 0 auto; }
.about-testi-grid   { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.about-testi-card   { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--sh-sm); }
.about-testi-stars  { display: flex; gap: 2px; margin-bottom: 14px; color: #f59e0b; }
.about-testi-text   { font-size: 15px; color: var(--navy); line-height: 1.75; font-style: italic; margin-bottom: 18px; }
.about-testi-author { display: flex; gap: 10px; align-items: center; }
.about-testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.about-testi-name   { font-weight: 700; color: var(--navy); font-size: 14px; }
.about-testi-role   { font-size: 12px; color: var(--muted); }

/* ── CONTACT ─────────────────────────────────────────────────── */
.contact-hero       { background: var(--navy); padding: 64px 5% 56px; text-align: center; }
.contact-hero h1    { font-family: var(--font-serif); font-size: clamp(28px,5vw,52px); color: #fff; margin-bottom: 12px; }
.contact-hero p     { font-size: 15px; color: rgba(255,255,255,.6); max-width: 420px; margin: 0 auto; }
.contact-body       { max-width: 1100px; margin: 0 auto; padding: 64px 5%; display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.contact-info-title { font-family: var(--font-serif); font-size: 22px; color: var(--navy); margin-bottom: 24px; }
.contact-info-item  { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; }
.contact-info-icon  { width: 44px; height: 44px; border-radius: 11px; background: #eff6ff; border: 1px solid #dbeafe; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.contact-info-label { font-size: 11px; color: var(--hint); margin-bottom: 3px; font-weight: 700; }
.contact-info-val   { font-size: 15px; font-weight: 600; color: var(--navy); }
.contact-info-sub   { font-size: 12px; color: var(--muted); }
.contact-form-card  { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 36px; box-shadow: var(--sh-lg); }
.contact-form-title { font-family: var(--font-serif); font-size: 22px; color: var(--navy); margin-bottom: 22px; }
.contact-grid-2     { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.contact-success    { text-align: center; padding: 32px 0; }
.contact-success-ico { font-size: 52px; margin-bottom: 14px; }

/* ── 404 ─────────────────────────────────────────────────────── */
.not-found-wrap     { min-height: 100vh; padding-top: var(--nav-h); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: var(--nav-h) 5% 5%; }
.not-found-num      { font-family: var(--font-serif); font-size: clamp(72px,18vw,120px); font-weight: 800; color: #dbeafe; line-height: 1; margin-bottom: 16px; }
.not-found-title    { font-family: var(--font-serif); font-size: clamp(22px,5vw,32px); color: var(--navy); margin-bottom: 10px; }
.not-found-desc     { font-size: 15px; color: var(--muted); max-width: 360px; margin-bottom: 28px; }
.not-found-btns     { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── LIST PROPERTY ───────────────────────────────────────────── */
.list-hero          { background: var(--navy); padding: 48px 5% 36px; }
.list-hero-inner    { max-width: 800px; margin: 0 auto; text-align: center; }
.list-hero-eyebrow  { font-size: 11px; color: #93c5fd; font-weight: 700; letter-spacing: .12em; margin-bottom: 10px; }
.list-hero h1       { font-family: var(--font-serif); font-size: clamp(22px,5vw,44px); font-weight: 700; color: #fff; margin-bottom: 10px; }
.list-hero p        { font-size: 14px; color: rgba(255,255,255,.65); margin: 0 auto 28px; max-width: 480px; }
.list-progress      { display: flex; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
.list-step          { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.list-step-circle   { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.list-step-circle.done    { background: var(--blue); color: #fff; }
.list-step-circle.active  { background: #fff; border: 3px solid #60a5fa; color: var(--blue); }
.list-step-circle.pending { background: rgba(255,255,255,.15); color: rgba(255,255,255,.5); }
.list-step-label    { font-size: 9px; color: rgba(255,255,255,.45); white-space: nowrap; }
.list-step-label.active { color: #fff; font-weight: 700; }
.list-step-connector  { flex: 1; height: 2px; margin-bottom: 24px; min-width: 12px; }
.list-step-connector.done    { background: var(--blue); }
.list-step-connector.pending { background: rgba(255,255,255,.2); }
.list-body          { max-width: 740px; margin: 0 auto; padding: 32px 5%; }
.list-card          { background: var(--white); border-radius: 18px; box-shadow: var(--sh-lg); border: 1px solid var(--border); padding: 32px 36px; }
.list-card h2       { font-family: var(--font-serif); font-size: 22px; color: var(--navy); margin-bottom: 6px; }
.list-card > p      { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.list-type-grid     { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px; }
.list-type-btn      { padding: 11px 8px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--navy); font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; transition: all .2s; }
.list-type-btn.active { border-color: var(--blue); background: #eff6ff; color: var(--blue); }
.list-toggle        { display: flex; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
.list-toggle-btn    { flex: 1; padding: 11px; border: none; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted); transition: all .2s; }
.list-toggle-btn.active { background: var(--white); color: var(--blue); box-shadow: var(--sh-sm); border-radius: 8px; margin: 2px; }
.list-amenity-grid  { display: flex; flex-wrap: wrap; gap: 8px; }
.list-amenity-btn   { padding: 7px 14px; border: 1.5px solid var(--border); border-radius: 20px; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; }
.list-amenity-btn.active { border-color: var(--blue); background: #eff6ff; color: var(--blue); }
.list-photo-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.list-photo-item    { position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border); }
.list-photo-item img { width: 100%; height: 100%; object-fit: cover; }
.list-photo-del     { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: none; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.list-photo-upload  { border: 2px dashed var(--blue-200,#bfdbfe); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; background: var(--bg); transition: all .2s; padding: 28px; text-align: center; }
.list-photo-upload:hover { border-color: var(--blue); background: #eff6ff; }
.list-photo-upload-ico { font-size: 28px; }
.list-photo-upload-txt { font-size: 13px; color: var(--muted); font-weight: 600; }
.list-privacy-box   { background: #eff6ff; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid #dbeafe; font-size: 13px; color: #1e40af; }
.list-warning-box   { background: #fffbeb; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid #fde68a; font-size: 13px; color: #92400e; }
.list-review-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.list-review-item   { background: var(--bg); border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); }
.list-review-label  { font-size: 11px; color: var(--hint); font-weight: 600; margin-bottom: 4px; }
.list-review-val    { font-size: 14px; font-weight: 700; color: var(--navy); word-break: break-word; }
.list-nav-row       { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.list-success       { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); display: flex; align-items: center; justify-content: center; padding: var(--nav-h) 4% 4%; }
.list-success-card  { background: var(--white); border-radius: 20px; padding: 52px 40px; text-align: center; max-width: 480px; width: 100%; box-shadow: var(--sh-xl); border: 1px solid var(--border); }
.list-success-ico   { width: 80px; height: 80px; border-radius: 50%; background: #eff6ff; border: 3px solid #dbeafe; display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 0 auto 22px; }
.list-success-info  { background: #eff6ff; border-radius: 12px; padding: 14px; margin-bottom: 24px; border: 1px solid #dbeafe; font-size: 13px; color: #1e40af; }

/* ── SAVED ───────────────────────────────────────────────────── */
.saved-page         { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); }
.saved-hero         { background: var(--navy); padding: 40px 5% 36px; }
.saved-hero-inner   { max-width: 1280px; margin: 0 auto; }
.saved-hero-eyebrow { font-size: 11px; color: #93c5fd; font-weight: 700; letter-spacing: .12em; margin-bottom: 8px; }
.saved-hero h1      { font-family: var(--font-serif); font-size: clamp(24px,5vw,36px); color: #fff; margin: 0; }
.saved-hero p       { color: rgba(255,255,255,.6); margin-top: 8px; font-size: 14px; }
.saved-body         { max-width: 1280px; margin: 0 auto; padding: 36px 5%; }
.saved-grid         { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 20px; }
.saved-card         { background: var(--white); border-radius: 14px; border: 1px solid var(--border); overflow: hidden; box-shadow: var(--sh-sm); }
.saved-card-img     { position: relative; height: 190px; }
.saved-card-img img { width: 100%; height: 100%; object-fit: cover; }
.saved-card-badge   { position: absolute; top: 12px; right: 12px; color: #fff; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.saved-card-badge.rent { background: #059669; }
.saved-card-badge.sale { background: var(--navy); }
.saved-remove-btn   { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: none; cursor: pointer; font-size: 16px; box-shadow: var(--sh-md); display: flex; align-items: center; justify-content: center; }
.saved-card-body    { padding: 16px 18px; }
.saved-card-type    { font-size: 11px; color: var(--hint); margin-bottom: 4px; }
.saved-card-title   { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 6px; line-height: 1.3; }
.saved-card-price   { font-size: 20px; font-weight: 800; color: var(--blue); margin-bottom: 12px; }
.saved-card-specs   { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.saved-card-spec    { font-size: 11px; color: var(--muted); background: var(--bg); padding: 4px 9px; border-radius: 7px; }
.saved-card-actions { display: flex; gap: 8px; }
.saved-empty        { text-align: center; padding: 64px 20px; background: var(--white); border-radius: 20px; border: 1px solid var(--border); }
.saved-empty-ico    { font-size: 60px; margin-bottom: 14px; }
.saved-skel-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.saved-skel-item    { height: 300px; border-radius: 14px; background: var(--white); border: 1px solid var(--border); animation: pulse 1.5s ease-in-out infinite; }

/* ── COMPARE ─────────────────────────────────────────────────── */
.compare-page       { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); }
.compare-hero       { background: var(--navy); padding: 40px 5% 36px; }
.compare-hero-inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.compare-hero-eyebrow { font-size: 11px; color: #93c5fd; font-weight: 700; letter-spacing: .12em; margin-bottom: 8px; }
.compare-hero h1    { font-family: var(--font-serif); font-size: clamp(22px,5vw,36px); color: #fff; margin: 0; }
.compare-body       { max-width: 1400px; margin: 0 auto; padding: 32px 5%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table      { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: var(--sh-md); min-width: 600px; }
.compare-table th, .compare-table td { padding: 12px 14px; text-align: left; font-size: 13px; }
.compare-table thead th { background: var(--bg); font-weight: 700; color: var(--navy); }
.compare-table tbody td:first-child { font-weight: 700; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; background: var(--bg); width: 120px; }
.compare-table tbody tr { border-bottom: 1px solid var(--border); }
.compare-prop-img   { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
.compare-prop-title { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.compare-prop-loc   { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.compare-empty      { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); display: flex; align-items: center; justify-content: center; padding: var(--nav-h) 4% 4%; }
.compare-empty-card { text-align: center; padding: 48px 32px; background: var(--white); border-radius: 20px; box-shadow: var(--sh-lg); max-width: 440px; width: 100%; }

/* ── PRICING ─────────────────────────────────────────────────── */
.pricing-page       { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); }
.pricing-hero       { background: var(--navy); padding: 56px 5% 60px; text-align: center; }
.pricing-hero-eyebrow { font-size: 11px; color: #93c5fd; font-weight: 700; letter-spacing: .12em; margin-bottom: 12px; }
.pricing-hero h1    { font-family: var(--font-serif); font-size: clamp(26px,5vw,52px); font-weight: 700; color: #fff; margin: 0 0 14px; }
.pricing-hero p     { color: rgba(255,255,255,.65); font-size: 16px; max-width: 500px; margin: 0 auto 32px; }
.billing-toggle     { display: inline-flex; background: rgba(255,255,255,.1); border-radius: 40px; padding: 4px; border: 1px solid rgba(255,255,255,.15); }
.billing-btn        { padding: 8px 22px; border-radius: 36px; border: none; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; }
.billing-btn.active   { background: #fff; color: var(--blue); }
.billing-btn.inactive { background: transparent; color: rgba(255,255,255,.7); }
.billing-save-tag   { margin-left: 4px; font-size: 11px; font-weight: 800; }
.pricing-wrap       { max-width: 1160px; margin: -28px auto 0; padding: 0 5% 72px; }
.pricing-grid       { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; align-items: start; }
.pricing-card       { background: var(--white); border-radius: 18px; border: 2px solid var(--border); box-shadow: var(--sh-md); overflow: hidden; }
.pricing-card.popular { box-shadow: var(--sh-xl); transform: translateY(-8px); }
.pricing-popular-tag { background: var(--grad); color: #fff; text-align: center; font-size: 11px; font-weight: 800; padding: 5px 0; letter-spacing: .08em; }
.pricing-card-body  { padding: 24px 20px; }
.pricing-plan-name  { font-size: 12px; font-weight: 800; letter-spacing: .08em; margin-bottom: 8px; }
.pricing-plan-desc  { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.pricing-price-row  { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.pricing-price-amt  { font-family: var(--font-serif); font-size: 38px; font-weight: 800; color: var(--navy); }
.pricing-price-per  { font-size: 13px; color: var(--muted); }
.pricing-divider    { height: 1px; background: var(--border); margin: 16px 0; }
.pricing-features   { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.pricing-feature-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--muted); }
.pricing-feature-ico { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.pricing-save-badge { display: inline-block; background: #dcfce7; color: #16a34a; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; margin-bottom: 16px; }
.pricing-faq        { max-width: 720px; margin: 0 auto; padding: 0 5% 72px; }
.pricing-faq-title  { font-family: var(--font-serif); font-size: clamp(22px,3vw,34px); font-weight: 700; color: var(--navy); text-align: center; margin-bottom: 32px; }
.pricing-faq-item   { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.pricing-faq-q      { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; cursor: pointer; background: var(--white); font-size: 14px; font-weight: 600; color: var(--navy); }
.pricing-faq-a      { padding: 0 20px 16px; font-size: 13px; color: var(--muted); line-height: 1.7; background: var(--white); }

/* ── TOOLS ───────────────────────────────────────────────────── */
.tools-page         { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); }
.tools-hero         { background: var(--navy); padding: 52px 5% 44px; text-align: center; }
.tools-hero-eyebrow { font-size: 11px; color: #93c5fd; font-weight: 700; letter-spacing: .12em; margin-bottom: 12px; }
.tools-hero h1      { font-family: var(--font-serif); font-size: clamp(24px,5vw,48px); font-weight: 700; color: #fff; margin: 0 0 10px; }
.tools-hero p       { color: rgba(255,255,255,.65); font-size: 15px; max-width: 500px; margin: 0 auto; }
.tools-nav          { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: var(--nav-h); z-index: 50; }
.tools-nav-inner    { max-width: 1200px; margin: 0 auto; padding: 0 4%; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tools-nav-inner::-webkit-scrollbar { display: none; }
.tools-nav-btn      { flex-shrink: 0; padding: 14px 18px; border: none; border-bottom: 3px solid transparent; background: transparent; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: all .2s; }
.tools-nav-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
.tools-body         { max-width: 1200px; margin: 0 auto; padding: 32px 5% 72px; }
.tools-panel        { background: var(--white); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--sh-md); padding: 32px; }
.tools-panel-title  { font-family: var(--font-serif); font-size: 22px; color: var(--navy); margin-bottom: 6px; }
.tools-panel-desc   { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.tools-emi-layout   { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.tools-slider-row   { margin-bottom: 18px; }
.tools-slider-head  { display: flex; justify-content: space-between; margin-bottom: 6px; }
.tools-slider-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.tools-slider-val   { font-size: 14px; font-weight: 800; color: var(--blue); }
.tools-range        { width: 100%; accent-color: var(--blue); cursor: pointer; }
.tools-range-bounds { display: flex; justify-content: space-between; font-size: 10px; color: var(--hint); margin-top: 2px; }
.tools-result-box   { background: var(--grad); border-radius: 14px; padding: 22px; color: #fff; text-align: center; margin-bottom: 14px; }
.tools-result-label { font-size: 10px; opacity: .8; letter-spacing: .1em; margin-bottom: 4px; }
.tools-result-val   { font-size: 38px; font-weight: 900; font-family: var(--font-serif); }
.tools-result-sub   { font-size: 12px; opacity: .75; margin-top: 4px; }
.tools-breakdown    { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tools-breakdown-item { background: var(--bg); border-radius: 10px; padding: 12px 14px; }
.tools-breakdown-item.full { grid-column: 1/-1; }
.tools-breakdown-label { font-size: 11px; color: var(--hint); margin-bottom: 3px; }
.tools-breakdown-val { font-size: 15px; font-weight: 800; }

/* ── SITE VISIT ──────────────────────────────────────────────── */
.sv-page            { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); }
.sv-hero            { background: var(--navy); padding: 52px 5% 44px; text-align: center; }
.sv-hero-eyebrow    { font-size: 11px; color: #93c5fd; font-weight: 700; letter-spacing: .12em; margin-bottom: 10px; }
.sv-hero h1         { font-family: var(--font-serif); font-size: clamp(24px,5vw,46px); font-weight: 700; color: #fff; margin: 0 0 8px; }
.sv-hero p          { color: rgba(255,255,255,.65); font-size: 15px; max-width: 460px; margin: 0 auto; }
.sv-body            { max-width: 1060px; margin: 0 auto; padding: 40px 5%; display: grid; grid-template-columns: 1fr 1.4fr; gap: 36px; align-items: start; }
.sv-info-card       { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 26px; box-shadow: var(--sh-md); }
.sv-info-title      { font-family: var(--font-serif); font-size: 20px; color: var(--navy); margin-bottom: 6px; }
.sv-info-sub        { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.sv-process-list    { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.sv-process-item    { display: flex; gap: 12px; align-items: flex-start; }
.sv-process-num     { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sv-process-text h4 { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.sv-process-text p  { font-size: 12px; color: var(--muted); }
.sv-contact-row     { background: var(--bg); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.sv-contact-ico     { font-size: 18px; }
.sv-contact-label   { font-size: 10px; color: var(--hint); font-weight: 700; }
.sv-contact-val     { font-size: 14px; font-weight: 700; color: var(--navy); }
.sv-form-card       { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 28px; box-shadow: var(--sh-md); }
.sv-form-title      { font-family: var(--font-serif); font-size: 20px; color: var(--navy); margin-bottom: 18px; }
.sv-date-btn        { padding: 9px 5px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 10px; font-weight: 600; cursor: pointer; text-align: center; transition: all .2s; color: var(--muted); line-height: 1.3; }
.sv-date-btn.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.sv-time-btn        { padding: 9px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; color: var(--muted); }
.sv-time-btn.active { border-color: var(--blue); background: #eff6ff; color: var(--blue); }
.sv-success         { min-height: 100vh; padding-top: var(--nav-h); background: var(--bg); display: flex; align-items: center; justify-content: center; padding: var(--nav-h) 4% 4%; }
.sv-success-card    { background: var(--white); border-radius: 22px; padding: 52px 40px; max-width: 460px; width: 100%; text-align: center; box-shadow: var(--sh-xl); border: 1px solid var(--border); }
.sv-success-ico     { width: 72px; height: 72px; border-radius: 50%; background: #ecfdf5; border: 3px solid #a7f3d0; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 20px; }
.sv-success-info    { background: #eff6ff; border-radius: 10px; padding: 14px; margin-bottom: 20px; border: 1px solid #dbeafe; font-size: 13px; color: #1e40af; }
.sv-success-btns    { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── COMPARE BAR ─────────────────────────────────────────────── */
.compare-bar        { position: fixed; bottom: 0; left: 0; right: 0; z-index: 800; background: var(--navy); border-top: 3px solid var(--blue); padding: 10px 5%; box-shadow: 0 -4px 24px rgba(15,28,63,.3); }
.compare-bar-inner  { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.compare-bar-left   { display: flex; align-items: center; gap: 8px; min-width: 0; }
.compare-bar-icon   { font-size: 18px; flex-shrink: 0; }
.compare-bar-title  { color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.compare-bar-count  { background: var(--blue); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.compare-bar-hint   { color: rgba(255,255,255,.5); font-size: 12px; white-space: nowrap; }
.compare-bar-add    { color: rgba(255,255,255,.35); font-size: 11px; }
.compare-bar-right  { display: flex; gap: 8px; flex-shrink: 0; }

/* ── EMI CALCULATOR ──────────────────────────────────────────── */
.emi-wrap           { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 22px; box-shadow: var(--sh-sm); }
.emi-wrap.compact   { padding: 16px; }
.emi-title          { font-family: var(--font-serif); font-size: 20px; margin-bottom: 18px; color: var(--navy); }
.emi-title.compact  { font-size: 17px; margin-bottom: 12px; }
.emi-slider-row     { margin-bottom: 18px; }
.emi-slider-row.compact { margin-bottom: 12px; }
.emi-slider-head    { display: flex; justify-content: space-between; margin-bottom: 5px; }
.emi-slider-label   { font-size: 12px; color: var(--muted); }
.emi-slider-val     { font-size: 13px; font-weight: 700; color: var(--blue); }
.emi-result-box     { background: var(--grad); border-radius: 10px; padding: 16px; color: #fff; text-align: center; margin-top: 8px; }
.emi-result-label   { font-size: 10px; opacity: .8; letter-spacing: .1em; margin-bottom: 4px; }
.emi-result-val     { font-size: 28px; font-weight: 800; font-family: var(--font-serif); }
.emi-breakdown      { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.emi-breakdown-item { background: var(--bg); border-radius: 8px; padding: 9px 11px; }
.emi-breakdown-item.full { grid-column: 1/-1; }
.emi-breakdown-label { font-size: 10px; color: var(--hint); margin-bottom: 2px; }
.emi-breakdown-val  { font-size: 13px; font-weight: 800; }

/* ── SEARCH BAR (component) ──────────────────────────────────── */
.searchbar-wrap     { background: var(--white); border-radius: 18px; box-shadow: var(--sh-xl); padding: 6px; overflow: hidden; }
.searchbar-tabs     { display: flex; gap: 2px; padding: 6px 6px 0; margin-bottom: 10px; flex-wrap: wrap; }
.searchbar-tab      { padding: 8px 18px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; transition: all .2s; white-space: nowrap; }
.searchbar-tab.active   { background: var(--blue); color: #fff; }
.searchbar-tab.inactive { background: transparent; color: var(--muted); }
.searchbar-row      { display: flex; gap: 6px; padding: 0 4px 4px; }
.searchbar-field    { flex: 1; position: relative; min-width: 0; }
.searchbar-ico      { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; }
.searchbar-input    { width: 100%; background: var(--bg); border: 1.5px solid var(--border); border-radius: 9px; color: var(--navy); font-family: inherit; outline: none; transition: border .2s; padding: 12px 12px 12px 36px; }
.searchbar-input:focus  { border-color: #60a5fa; }
.searchbar-select   { background: var(--bg); border: 1.5px solid var(--border); border-radius: 9px; color: var(--navy); font-family: inherit; cursor: pointer; outline: none; padding: 12px 10px; min-width: 110px; }
.searchbar-btn      { background: var(--grad); color: #fff; border: none; border-radius: 9px; font-weight: 700; cursor: pointer; padding: 12px 22px; box-shadow: var(--sh-blue); transition: all .2s; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   COMPLETE RESPONSIVE SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── TABLET ≤1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Nav */
  .nav-links, .nav-right { display: none; }
  .nav-ham               { display: flex; }

  /* Grids */
  .stats-grid        { grid-template-columns: repeat(2,1fr); }
  .cat-grid          { grid-template-columns: repeat(3,1fr); }
  .why-grid          { grid-template-columns: repeat(2,1fr); }
  .team-grid         { grid-template-columns: repeat(2,1fr); }
  .testi-grid        { grid-template-columns: repeat(2,1fr); }
  .proj-grid         { grid-template-columns: repeat(2,1fr); }
  .pricing-grid      { grid-template-columns: repeat(2,1fr); }
  .about-stats-grid  { grid-template-columns: repeat(2,1fr); }
  .about-team-grid   { grid-template-columns: repeat(2,1fr); }
  .about-testi-grid  { grid-template-columns: 1fr; }
  .grid-4            { grid-template-columns: repeat(2,1fr); }
  .pd-amenities-grid { grid-template-columns: repeat(2,1fr); }
  .pd-related-grid   { grid-template-columns: repeat(2,1fr); }

  /* Layouts */
  .blog-layout        { grid-template-columns: 1fr; }
  .blog-detail-layout { grid-template-columns: 1fr; }
  .blog-sidebar       { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .pd-layout          { grid-template-columns: 1fr; }
  .pd-sidebar         { position: static; }
  .contact-body       { grid-template-columns: 1fr; }
  .sv-body            { grid-template-columns: 1fr; }
  .tools-emi-layout   { grid-template-columns: 1fr; }
  .footer-top         { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* Misc */
  .cta-banner         { flex-direction: column; text-align: center; padding: 40px 5%; }
  .cta-banner-btns    { justify-content: center; }
  .milestone-card     { width: 46%; }
  .pricing-card.popular { transform: translateY(-4px); }
  .list-type-grid     { grid-template-columns: repeat(2,1fr); }
}

/* ── MOBILE ≤768px ──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --nav-h: 56px;
  }

  /* ── Global ── */
  .section    { padding: 44px 0; }
  .section-sm { padding: 32px 0; }
  .section-lg { padding: 56px 0; }
  .section-head { margin-bottom: 28px; }
  .section-h2 { font-size: clamp(22px,6vw,32px); }

  /* ── NAVBAR ── */
  .nav-inner  { padding: 0 4%; gap: 12px; }
  .nav-ham    { display: flex; top: 10px; right: 14px; width: 40px; height: 40px; font-size: 18px; }

  /* ── HERO ── */
  .hero         { min-height: auto; padding-bottom: 56px; }
  .hero-inner   { padding: 44px 4% 52px; }
  .hero-h1      { font-size: clamp(26px,8vw,38px); margin-bottom: 12px; max-width: 100%; }
  .hero-sub     { font-size: 14px; margin-bottom: 22px; max-width: 100%; }
  .hero-badges  { display: none; }

  /* ── SEARCH BAR ── */
  .search-bar         { flex-direction: column; padding: 14px; gap: 10px; border-radius: 14px; max-width: 100%; }
  .search-divider     { display: none; }
  .search-field       { width: 100%; min-width: unset; }
  .search-btn         { width: 100%; padding: 13px; font-size: 14px; text-align: center; }
  .searchbar-row      { flex-direction: column; gap: 8px; }
  .searchbar-select,
  .searchbar-btn      { width: 100%; }
  .searchbar-field    { width: 100%; }

  /* ── STATS STRIP ── */
  .stats-strip    { padding: 28px 0; }
  .stats-grid     { grid-template-columns: repeat(2,1fr); gap: 0; background: rgba(255,255,255,.08); }
  .stat-card      { padding: 18px 10px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
  .stat-number    { font-size: clamp(22px,5vw,30px); }
  .stat-label     { font-size: 11px; }
  .stat-icon      { font-size: 22px; margin-bottom: 6px; }

  /* ── CATEGORIES ── */
  .cat-grid   { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .cat-card   { padding: 14px 8px; border-radius: 10px; gap: 7px; }
  .cat-icon   { font-size: 22px; }
  .cat-label  { font-size: 11px; }
  .cat-count  { font-size: 10px; }

  /* ── PROPERTY CARDS ── */
  .prop-grid      { grid-template-columns: 1fr; gap: 14px; }
  .prop-card-img  { height: 180px; }
  .prop-list-card { flex-direction: column; }
  .prop-list-img  { width: 100%; height: 180px; }
  .prop-list-body { padding: 14px 16px; }

  /* ── WHY / FEATURES ── */
  .why-grid   { grid-template-columns: 1fr; gap: 10px; }
  .why-card   { padding: 20px; }
  .why-icon   { font-size: 26px; margin-bottom: 10px; }
  .why-title  { font-size: 15px; }
  .why-desc   { font-size: 13px; }

  /* ── TEAM ── */
  .team-grid  { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .team-card  { padding: 18px 12px; }
  .team-photo,
  .team-avatar { width: 68px; height: 68px; font-size: 22px; margin-bottom: 10px; }
  .team-name  { font-size: 14px; }
  .team-role  { font-size: 11px; margin-bottom: 10px; }
  .team-stats { gap: 14px; }
  .team-stat-n { font-size: 16px; }

  /* ── TESTIMONIALS ── */
  .testi-grid { grid-template-columns: 1fr; gap: 12px; }
  .testi-card { padding: 20px; }
  .testi-text { font-size: 14px; }

  /* ── CTA BANNER ── */
  .cta-banner      { flex-direction: column; text-align: center; padding: 32px 4%; border-radius: 14px; }
  .cta-banner-h    { font-size: clamp(18px,5vw,26px); }
  .cta-banner-sub  { font-size: 14px; }
  .cta-banner-btns { justify-content: center; flex-direction: column; align-items: center; gap: 10px; }
  .cta-banner-btns .btn { width: 100%; max-width: 280px; justify-content: center; }

  /* ── PAGE HERO ── */
  .page-hero    { padding: 36px 4% 32px; }
  .page-hero-h1 { font-size: clamp(22px,6vw,36px); }
  .page-hero-sub { font-size: 13px; }

  /* ── FILTER BAR ── */
  .filter-bar-inner   { padding: 8px 4%; }
  .filter-row         { gap: 6px; flex-wrap: wrap; }
  .filter-sort-select { display: none; }
  .filter-count       { display: none; }
  .filter-pill        { padding: 6px 12px; font-size: 12px; }
  .pill-dd-btn        { padding: 6px 10px; font-size: 12px; }
  .results-area       { padding: 14px 4%; }

  /* ── BLOG LISTING ── */
  .blog-hero          { padding: 48px 4% 40px; }
  .blog-hero-h1       { font-size: clamp(24px,7vw,38px); }
  .blog-hero-sub      { font-size: 14px; max-width: 100%; }
  .blog-hero-search   { max-width: 100%; }
  .blog-cats          { gap: 6px; flex-wrap: wrap; }
  .blog-cat           { padding: 7px 14px; font-size: 12px; }
  .blog-layout        { padding: 24px 4%; gap: 24px; }
  .blog-featured      { grid-template-columns: 1fr; }
  .blog-feat-img      { min-height: 200px; max-height: 220px; }
  .blog-feat-body     { padding: 20px; }
  .blog-feat-title    { font-size: 19px; }
  .blog-feat-excerpt  { font-size: 13px; }
  .blog-grid          { grid-template-columns: 1fr; gap: 14px; }
  .blog-card-body     { padding: 16px; }
  .blog-card-title    { font-size: 16px; }
  .blog-card-excerpt  { font-size: 13px; }
  .blog-sidebar       { grid-template-columns: 1fr; position: static; }

  /* ── BLOG DETAIL ── */
  .blog-detail-hero         { height: 220px; }
  .blog-detail-hero-content { padding: 0 4% 18px; }
  .blog-detail-h1           { font-size: clamp(18px,5vw,26px); margin-bottom: 10px; }
  .blog-detail-meta         { gap: 8px; font-size: 12px; }
  .blog-detail-cat          { font-size: 10px; padding: 3px 10px; }
  .blog-detail-layout       { padding: 20px 4%; gap: 20px; }
  .blog-content-wrap        { min-width: 0; }
  .blog-breadcrumb          { font-size: 12px; }
  .blog-prose               { padding: 18px 16px; font-size: 14px; line-height: 1.8; border-radius: 14px; }
  .blog-prose h2            { font-size: 19px; margin: 24px 0 10px; }
  .blog-prose h3            { font-size: 17px; margin: 18px 0 8px; }
  .blog-prose blockquote    { padding: 12px 14px; margin: 16px 0; font-size: 13px; }
  .blog-share               { flex-direction: column; gap: 10px; padding: 16px; border-radius: 10px; }
  .blog-share-btns          { flex-wrap: wrap; gap: 6px; }
  .blog-share-btn           { padding: 7px 12px; font-size: 11px; }
  .blog-author-card         { padding: 16px; }
  .blog-author-inner        { gap: 10px; }
  .blog-sidebar-card        { padding: 18px; }
  .blog-sidebar-cta         { padding: 20px; }

  /* ── PROPERTY DETAIL ── */
  .pd-layout        { padding: 14px 4%; gap: 18px; }
  .pd-breadcrumb    { padding: 10px 4%; }
  .pd-bc-links      { font-size: 12px; }
  .pd-actions       { flex-wrap: wrap; gap: 6px; }
  .pd-gallery-img   { height: 230px; }
  .pd-thumbnails    { gap: 6px; padding-bottom: 4px; }
  .pd-thumb         { width: 62px; height: 50px; border-radius: 7px; }
  .pd-header        { padding: 16px; margin-bottom: 14px; }
  .pd-title         { font-size: clamp(18px,5vw,26px); margin-bottom: 6px; }
  .pd-price         { font-size: 26px; }
  .pd-specs         { gap: 6px; margin-top: 14px; }
  .pd-spec          { font-size: 11px; padding: 6px 10px; }
  .pd-tabs          { border-radius: 12px; }
  .pd-tab-btn       { padding: 9px 12px; font-size: 12px; }
  .pd-tab-body      { padding: 16px; }
  .pd-amenities-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .pd-amenity       { padding: 9px 12px; font-size: 12px; }
  .pd-nearby        { grid-template-columns: 1fr; gap: 6px; }
  .pd-related-grid  { grid-template-columns: 1fr; gap: 12px; }
  .pd-related-h     { font-size: 18px; }
  .pd-enquiry       { padding: 18px; }
  .pd-stats-grid    { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pd-media-grid    { grid-template-columns: 1fr; gap: 8px; }

  /* ── PROJECTS ── */
  .proj-grid          { grid-template-columns: 1fr; gap: 14px; }
  .proj-list-card     { flex-direction: column; }
  .proj-list-img      { width: 100%; height: 190px; }
  .proj-list-body     { padding: 14px 16px; }
  .proj-info-3col     { grid-template-columns: repeat(2,1fr); }

  /* ── ABOUT ── */
  .about-hero         { padding: 56px 4% 48px; }
  .about-hero h1      { font-size: clamp(24px,7vw,38px); }
  .about-hero p       { font-size: 14px; }
  .about-hero-btns    { flex-direction: column; align-items: flex-start; gap: 10px; }
  .about-hero-btns .btn { width: 100%; max-width: 240px; justify-content: center; }
  .about-stats-strip  { padding: 36px 4%; }
  .about-stats-grid   { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .about-stat-num     { font-size: 28px; }
  .about-team-section { padding: 52px 4%; }
  .about-team-grid    { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .about-member-card  { padding: 18px 12px; }
  .about-member-avatar,
  .about-member-initials { width: 64px; height: 64px; font-size: 20px; margin-bottom: 10px; }
  .about-member-name  { font-size: 14px; }
  .about-member-role  { font-size: 11px; }
  .milestone-section  { padding: 48px 4%; }
  .milestone-head     { margin-bottom: 32px; }
  .milestone-line     { display: none !important; }
  .milestone-item     { justify-content: center !important; margin-bottom: 20px; }
  .milestone-card     { width: 100%; max-width: 100%; }
  .about-testi-section { padding: 48px 4%; }
  .about-testi-grid   { grid-template-columns: 1fr; gap: 14px; }
  .about-testi-card   { padding: 20px; }
  .about-testi-text   { font-size: 14px; }

  /* ── CONTACT ── */
  .contact-hero     { padding: 44px 4% 36px; }
  .contact-body     { padding: 32px 4%; gap: 24px; }
  .contact-form-card { padding: 22px 18px; }
  .contact-grid-2   { grid-template-columns: 1fr; gap: 0; }

  /* ── LIST PROPERTY ── */
  .list-hero        { padding: 28px 4% 24px; }
  .list-hero h1     { font-size: clamp(20px,6vw,32px); }
  .list-hero p      { font-size: 13px; }
  .list-body        { padding: 20px 4%; }
  .list-card        { padding: 22px 18px; border-radius: 14px; }
  .list-type-grid   { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .list-photo-grid  { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .list-review-grid { grid-template-columns: 1fr; gap: 8px; }
  .list-success-card { padding: 36px 22px; }

  /* ── SAVED ── */
  .saved-hero       { padding: 28px 4%; }
  .saved-body       { padding: 20px 4%; }
  .saved-grid       { grid-template-columns: 1fr; gap: 14px; }
  .saved-skel-grid  { grid-template-columns: 1fr; }

  /* ── COMPARE ── */
  .compare-hero      { padding: 28px 4%; }
  .compare-body      { padding: 16px 4%; }
  .compare-table th,
  .compare-table td  { padding: 10px 10px; font-size: 12px; }
  .compare-prop-img  { height: 110px; }

  /* ── PRICING ── */
  .pricing-hero      { padding: 40px 4% 48px; }
  .pricing-hero p    { font-size: 14px; }
  .pricing-wrap      { padding: 0 4% 60px; margin-top: -20px; }
  .pricing-grid      { grid-template-columns: 1fr; gap: 14px; }
  .pricing-card.popular { transform: none; order: -1; }
  .pricing-card-body { padding: 20px 16px; }
  .billing-btn       { padding: 8px 16px; font-size: 13px; }

  /* ── TOOLS ── */
  .tools-hero        { padding: 40px 4% 36px; }
  .tools-nav-inner   { padding: 0 4%; }
  .tools-nav-btn     { padding: 12px 14px; font-size: 12px; }
  .tools-body        { padding: 20px 4% 60px; }
  .tools-panel       { padding: 22px 18px; border-radius: 14px; }
  .tools-emi-layout  { grid-template-columns: 1fr; gap: 20px; }
  .tools-result-val  { font-size: 32px; }

  /* ── SITE VISIT ── */
  .sv-hero           { padding: 40px 4% 36px; }
  .sv-body           { padding: 24px 4%; gap: 22px; }
  .sv-form-card      { padding: 22px 18px; }
  .sv-info-card      { padding: 20px 18px; }
  .sv-success-card   { padding: 36px 22px; }
  .sv-success-btns   { flex-direction: column; align-items: center; }
  .sv-success-btns .btn { width: 100%; max-width: 260px; justify-content: center; }

  /* ── FOOTER ── */
  .footer-top        { grid-template-columns: 1fr; gap: 24px; padding: 44px 4% 32px; }
  .footer-bottom     { flex-direction: column; text-align: center; gap: 10px; padding: 16px 4%; }
  .footer-legal      { justify-content: center; flex-wrap: wrap; }
  .footer-search-tags { padding: 16px 4%; gap: 6px; }
  .footer-brand-sub  { max-width: 100%; }

  /* ── MODALS ── */
  .modal-backdrop    { padding: 12px; }
  .modal-card        { padding: 22px 16px; border-radius: 14px; max-height: 92vh; }
  .modal-box         { border-radius: 14px; }
  .modal-body        { padding: 18px 20px; }
  .modal-header      { padding: 16px 20px; }
  .modal-form-grid   { grid-template-columns: 1fr; }

  /* ── PAGINATION ── */
  .pagination        { gap: 4px; margin-top: 28px; }
  .page-btn          { width: 34px; height: 34px; font-size: 12px; }
  .page-nav-btn      { padding: 8px 14px; font-size: 12px; }

  /* ── COMPARE BAR ── */
  .compare-bar        { padding: 10px 4%; }
  .compare-bar-add    { display: none; }
  .compare-bar-hint   { font-size: 11px; }
  .compare-bar-right  { gap: 6px; }

  /* ── GRID COLLAPSE ── */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid-2       { grid-template-columns: 1fr; }
}

/* ── PHONE ≤480px ───────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --nav-h: 52px; }

  /* Nav */
  .nav-ham    { width: 38px; height: 38px; top: 7px; right: 12px; font-size: 17px; }
  .nav-inner  { padding: 0 3.5%; }

  /* Hero */
  .hero-inner { padding: 36px 3.5% 48px; }
  .hero-h1    { font-size: clamp(22px,8vw,30px); }
  .hero-sub   { font-size: 13px; }

  /* Stats */
  .stats-grid   { grid-template-columns: repeat(2,1fr); }
  .stat-number  { font-size: 22px; }
  .stat-label   { font-size: 10px; }

  /* Categories */
  .cat-grid   { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .cat-card   { padding: 12px 6px; border-radius: 10px; }
  .cat-icon   { font-size: 20px; }
  .cat-label  { font-size: 10px; }

  /* Team */
  .team-grid  { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .team-card  { padding: 14px 10px; }
  .team-photo,
  .team-avatar { width: 56px; height: 56px; font-size: 18px; }
  .team-name  { font-size: 13px; }
  .team-stats { gap: 10px; }

  /* Blog detail */
  .blog-detail-hero         { height: 190px; }
  .blog-detail-hero-content { padding: 0 3.5% 14px; }
  .blog-detail-h1           { font-size: clamp(16px,5vw,22px); }
  .blog-prose               { padding: 16px 13px; font-size: 13px; }
  .blog-prose h2            { font-size: 17px; }
  .blog-prose h3            { font-size: 15px; }
  .blog-feat-title          { font-size: 16px; }
  .blog-feat-body           { padding: 14px; }

  /* Property detail */
  .pd-gallery-img  { height: 200px; }
  .pd-thumb        { width: 52px; height: 44px; }
  .pd-title        { font-size: 18px; }
  .pd-price        { font-size: 22px; }
  .pd-spec         { font-size: 11px; padding: 5px 9px; }
  .pd-tab-btn      { padding: 8px 9px; font-size: 11px; }
  .pd-amenities-grid { grid-template-columns: 1fr; }

  /* Filter */
  .filter-bar-inner { padding: 7px 3.5%; }
  .pill-dd-btn      { padding: 5px 9px; font-size: 11px; }
  .filter-pill      { padding: 5px 10px; font-size: 11px; }
  .filter-view-btn  { width: 30px; height: 30px; font-size: 15px; }

  /* About */
  .about-team-grid  { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .about-member-card { padding: 14px 10px; }
  .about-member-avatar,
  .about-member-initials { width: 56px; height: 56px; font-size: 18px; }
  .about-member-name { font-size: 13px; }
  .about-member-bio  { display: none; }
  .about-stats-grid  { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .about-stat-num    { font-size: 26px; }

  /* List property */
  .list-card          { padding: 18px 14px; }
  .list-hero          { padding: 24px 3.5% 20px; }
  .list-step-label    { display: none; }
  .list-type-grid     { grid-template-columns: 1fr 1fr; }
  .list-photo-grid    { grid-template-columns: repeat(2,1fr); }
  .list-success-card  { padding: 30px 18px; }

  /* Tools */
  .tools-panel        { padding: 18px 14px; }
  .tools-result-val   { font-size: 28px; }
  .tools-breakdown    { grid-template-columns: 1fr 1fr; }

  /* Site visit success */
  .sv-success-card    { padding: 30px 18px; }

  /* Footer */
  .footer-top         { padding: 36px 3.5% 24px; }
  .footer-search-tags { padding: 12px 3.5%; gap: 5px; }
  .footer-tag         { font-size: 10px; padding: 3px 8px; }
  .footer-col-h       { font-size: 10px; margin-bottom: 10px; }
  .footer-link        { font-size: 12px; }

  /* Pricing */
  .pricing-hero       { padding: 36px 3.5% 44px; }
  .pricing-card-body  { padding: 18px 14px; }
  .pricing-price-amt  { font-size: 32px; }

  /* Not Found */
  .not-found-num      { font-size: clamp(60px,16vw,80px); }
  .not-found-title    { font-size: 22px; }
  .not-found-btns     { flex-direction: column; align-items: center; }
  .not-found-btns .btn { width: 100%; max-width: 240px; justify-content: center; }

  /* Compare bar */
  .compare-bar-hint   { display: none; }
  .compare-bar-title  { font-size: 12px; }

  /* Pagination */
  .pagination    { gap: 3px; }
  .page-btn      { width: 30px; height: 30px; font-size: 11px; border-radius: 7px; }
  .page-nav-btn  { padding: 7px 10px; font-size: 11px; }

  /* CTA */
  .cta-banner         { padding: 26px 3.5%; }
  .cta-banner-h       { font-size: 18px; }
  .cta-banner-btns .btn { max-width: 100%; }
}

/* ── EXTRA SMALL ≤360px ─────────────────────────────────────── */
@media (max-width: 360px) {
  .cat-grid   { grid-template-columns: repeat(2,1fr); gap: 6px; }
  .cat-card   { padding: 10px 4px; }
  .cat-label  { font-size: 9px; }
  .hero-h1    { font-size: 22px; }
  .team-grid  { grid-template-columns: repeat(2,1fr); }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .blog-share-btn { padding: 6px 9px; font-size: 10px; }
  .nav-ham    { width: 34px; height: 34px; font-size: 16px; }
  .pd-tab-btn { padding: 7px 7px; font-size: 10px; }
  .list-step-circle { width: 24px; height: 24px; font-size: 10px; }
}

/* ── PRINT ───────────────────────────────────────────────────── */
@media print {
  .nav, .footer, .compare-bar, .filter-bar, .nav-ham, .mob-drawer { display: none !important; }
  .page-wrap { padding-top: 0; }
  .pd-layout { grid-template-columns: 1fr; }
  .pd-sidebar, .blog-sidebar { display: none; }
}