/* =========================================================
   KEYS99 - INDEX.HTML STYLES
   Self-contained: no shared stylesheet. Safe to edit without
   affecting search.html or property-details.html.
========================================================= */

:root{
  --green:#006b5b;
  --green-dark:#004f45;
  --green-soft:#eaf7f3;

  --gold:#e1a400;
  --gold-dark:#bd8300;

  --ink:#092c3d;
  --muted:#6c7d86;
  --line:#e7eceb;

  --cream:#fff9ed;
  --white:#fff;

  --shadow:0 12px 35px rgba(8,45,56,.09);

  --radius:22px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"DM Sans",sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.5;
  overflow-x:hidden;
}

button,
input,
select{
  font:inherit;
}

button{
  cursor:pointer;
}

a{
  text-decoration:none;
  color:inherit;
}

.container{
  width:min(1200px,calc(100% - 48px));
  margin:auto;
}


/* =========================================================
   HEADER
========================================================= */

.header{
  height:78px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #edf1f0;

  display:flex;
  align-items:center;

  position:sticky;
  top:0;
  z-index:50;

  backdrop-filter:blur(14px);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}


/* LOGO */

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
}

.logo-link{
  display:flex;
  align-items:center;
}

.header-logo{
  width:185px;
  height:auto;
  max-height:54px;
  object-fit:contain;
  display:block;
}


/* NAVIGATION */

.nav-links{
  display:flex;
  align-items:center;
  gap:28px;

  font-size:14px;
  font-weight:500;
}

.nav-links a{
  padding:28px 0;
  position:relative;
}

.nav-links a.active,
.nav-links a:hover{
  color:var(--green);
}

.nav-links a.active:after{
  content:"";

  position:absolute;
  bottom:15px;
  left:0;
  right:0;

  height:2px;

  background:var(--green);
}


/* ACTIONS */

.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.menu-btn{
  width:42px;
  height:42px;

  border-radius:12px;
  border:0;

  background:var(--green);
  color:#fff;

  display:none;
  place-items:center;

  font-size:20px;
}

.login-btn{
  border:1px solid #d7e0de;
  background:#fff;

  border-radius:25px;

  padding:10px 17px;

  font-size:13px;
  font-weight:600;

  color:var(--ink);
}

.mobile-menu{
  display:none;
}


/* =========================================================
   HERO
========================================================= */

.hero{
  min-height:430px;

  position:relative;

  display:flex;
  align-items:center;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.82) 36%,
      rgba(255,255,255,.05) 72%
    ),
    url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1800&q=85")
    center/cover;
}

.hero-content{
  padding:55px 0 78px;
  max-width:650px;
}

.eyebrow,
.section-kicker{
  color:var(--green);

  font-size:12px;
  font-weight:700;
  letter-spacing:3px;

  text-transform:uppercase;

  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:10px;
}

.eyebrow:before,
.section-kicker:before{
  content:"";

  width:28px;
  height:2px;

  background:var(--gold);
}

.hero h1{
  font-size:clamp(42px,5vw,65px);

  line-height:1.05;

  letter-spacing:-2px;

  margin-bottom:17px;
}

.hero h1 span{
  color:var(--gold);
}

.hero p{
  font-size:17px;
  color:#254653;
  max-width:550px;
}


/* =========================================================
   SEARCH
========================================================= */

.search-wrap{
  position:absolute;

  bottom:-28px;

  left:0;
  right:0;

  z-index:4;
}

.search-bar{
  background:#fff;

  border:1px solid #e6ecea;

  border-radius:24px;

  box-shadow:var(--shadow);

  display:grid;

  grid-template-columns:
    1.7fr
    1fr
    1fr
    auto
    auto;

  align-items:center;

  padding:8px;

  position:relative;
}

.search-field{
  min-height:48px;

  display:flex;
  align-items:center;

  gap:11px;

  padding:0 18px;

  border-right:1px solid var(--line);

  color:var(--muted);
}

.search-field-main{
  position:relative;
}

.search-field input,
.search-field select{
  border:0;
  outline:0;

  width:100%;

  color:var(--ink);

  background:transparent;
}

.search-field input::placeholder{
  color:#8b9aa0;
}

.search-icon{
  font-size:21px;
  color:var(--green);
}

.search-button{
  height:48px;

  border:0;

  border-radius:18px;

  background:var(--green);

  color:#fff;

  padding:0 27px;

  font-weight:700;

  display:flex;
  align-items:center;
  gap:8px;

  transition:.25s;
}

.search-button:hover{
  background:var(--green-dark);
  transform:translateY(-1px);
}


/* =========================================================
   SEARCH SUGGESTIONS DROPDOWN
========================================================= */

.suggest-dropdown{
  position:absolute;

  top:calc(100% + 10px);
  left:0;
  right:0;

  background:#fff;

  border:1px solid var(--line);

  border-radius:16px;

  box-shadow:var(--shadow);

  padding:8px;

  max-height:300px;
  overflow-y:auto;

  z-index:20;
}

.suggest-dropdown:not([hidden]){
  display:block;
}

.suggest-item{
  display:flex;
  align-items:center;

  gap:10px;

  padding:10px 12px;

  border-radius:10px;

  font-size:13px;
  color:var(--ink);

  cursor:pointer;
}

.suggest-item:hover,
.suggest-item.active{
  background:var(--green-soft);
  color:var(--green-dark);
}

.suggest-icon{
  color:var(--green);
  font-size:15px;
  width:18px;
  text-align:center;
}

.suggest-type{
  margin-left:auto;

  font-size:9px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:.5px;

  color:var(--muted);
}


/* =========================================================
   FILTER TOGGLE + HERO FILTER PANEL
========================================================= */

.filter-toggle-btn{
  height:48px;

  padding:0 20px;

  border:1px solid var(--line);

  border-radius:18px;

  background:#fff;

  color:var(--ink);

  font-weight:700;
  font-size:13px;

  display:flex;
  align-items:center;
  gap:8px;

  transition:.2s;
}

.filter-toggle-btn svg{
  width:17px;
  height:17px;
  color:var(--green);
}

.filter-toggle-btn:hover,
.filter-toggle-btn.active{
  border-color:var(--green);
  color:var(--green);
  background:var(--green-soft);
}

.hero-filter-panel{
  position:absolute;

  top:calc(100% + 10px);
  right:0;

  width:min(560px,92vw);

  background:#fff;

  border:1px solid var(--line);

  border-radius:20px;

  box-shadow:var(--shadow);

  padding:18px;

  gap:12px;

  z-index:15;
}

.hero-filter-panel:not([hidden]){
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.hero-filter-panel .filter-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.hero-filter-panel .filter-field label{
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
}

.hero-filter-panel select{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 11px;
  font-size:13px;
  color:var(--ink);
  background:#fafcfb;
  outline:0;
}

.hero-filter-panel select:focus{
  border-color:var(--green);
}

.hero-filter-actions{
  grid-column:1/-1;

  display:flex;
  gap:10px;
  justify-content:flex-end;

  margin-top:4px;
}

.btn-primary,
.btn-ghost{
  border-radius:10px;
  padding:11px 20px;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  transition:.2s;
}

.btn-primary{
  background:var(--green);
  color:#fff;
  border:0;
}

.btn-primary:hover{
  background:var(--green-dark);
}

.btn-ghost{
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
}

.btn-ghost:hover{
  border-color:var(--green);
  color:var(--green);
}


/* =========================================================
   STATS
========================================================= */

.stats{
  margin-top:60px;

  background:#fff;

  border:1px solid var(--line);

  border-radius:22px;

  box-shadow:0 8px 30px rgba(0,0,0,.04);

  display:grid;

  grid-template-columns:repeat(4,1fr);
}

.stat{
  padding:22px 15px;

  text-align:center;

  border-right:1px solid var(--line);
}

.stat:last-child{
  border:0;
}

.stat-icon{
  font-size:25px;

  color:var(--green);

  margin-bottom:3px;
}

.stat strong{
  display:block;
  font-size:20px;
}

.stat span{
  font-size:12px;
  color:var(--muted);
}


/* =========================================================
   GENERAL
========================================================= */

section{
  padding:62px 0;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;

  margin-bottom:23px;
}

.section-title{
  font-size:30px;
  line-height:1.15;
}

.view-all{
  border:0;
  background:none;
  text-decoration:none;

  font-size:13px;
  font-weight:700;

  color:var(--green);

  display:flex;
  gap:8px;
  align-items:center;

  padding:5px 0;

  transition:.2s;
}

.view-all:hover{
  gap:12px;
}

.property-state{
  padding:26px 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.property-state.property-error{
  color:#b3403a;
}


/* =========================================================
   TYPE CARDS
========================================================= */

.type-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:16px;
}

.type-card{
  display:block;
  color:inherit;
  text-decoration:none;

  border:1px solid var(--line);

  border-radius:17px;

  overflow:hidden;

  background:#fff;

  cursor:pointer;

  transition:.3s;

  box-shadow:0 5px 20px rgba(0,0,0,.03);
}

.type-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
}

/* "Coming soon" types have no link (no href), so they should not
   look clickable either. */
.type-card[aria-disabled="true"]{
  cursor:default;
}

.type-card[aria-disabled="true"]:hover{
  transform:none;
  box-shadow:0 5px 20px rgba(0,0,0,.03);
}

.type-card[aria-disabled="true"]:hover img{
  transform:none;
}

.type-card[aria-disabled="true"] .arrow{
  visibility:hidden;
}

.type-img{
  height:150px;

  position:relative;

  overflow:hidden;
}

.type-img img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:.5s;
}

.type-card:hover img{
  transform:scale(1.06);
}

.type-body{
  padding:25px 15px 15px;
}

.type-body h3{
  font-size:15px;
  margin-bottom:3px;
}

.type-body p{
  font-size:12px;
  color:var(--muted);
}

.type-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.arrow{
  width:31px;
  height:31px;

  border-radius:50%;

  background:#eff7f5;

  display:grid;
  place-items:center;

  color:var(--green);

  font-weight:700;
}


/* =========================================================
   TOP CITIES
========================================================= */

.city-grid{
  display:grid;

  grid-template-columns:repeat(5,1fr);

  gap:16px;
}

/* City cards, locality chips and card titles are anchors so that
   crawlers can follow them to the generated pages. They are grid
   and flex children, which blockifies them, so only the link
   colour and underline need resetting - no layout change. */
.city-card,
.locality-chip,
.card-link{
  text-decoration:none;
  color:inherit;
}

.city-card{
  border:1px solid var(--line);

  border-radius:17px;

  padding:22px 18px;

  background:linear-gradient(135deg,var(--green-soft),#fff);

  cursor:pointer;

  transition:.3s;

  box-shadow:0 5px 20px rgba(0,0,0,.03);
}

.city-card:hover,
.city-card:focus-visible{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  outline:none;
}

.city-icon{
  width:44px;
  height:44px;

  border-radius:50%;

  background:#fff;

  display:grid;
  place-items:center;

  color:var(--green);

  font-size:19px;

  margin-bottom:14px;

  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.city-card strong{
  display:block;
  font-size:16px;
  margin-bottom:3px;
}

.city-card span{
  font-size:11px;
  color:var(--muted);
}


/* =========================================================
   TOP LOCALITIES
========================================================= */

.locality-scroll{
  display:flex;

  overflow-x:auto;

  gap:12px;

  padding:2px 2px 12px;

  scrollbar-width:none;
}

.locality-scroll::-webkit-scrollbar{
  display:none;
}

.locality-chip{
  flex:0 0 auto;

  min-width:175px;

  border:1px solid var(--line);

  border-radius:14px;

  padding:15px 17px;

  background:#fff;

  cursor:pointer;

  transition:.25s;

  box-shadow:0 5px 16px rgba(0,0,0,.03);
}

.locality-chip:hover,
.locality-chip:focus-visible{
  border-color:var(--green);
  transform:translateY(-3px);
  outline:none;
}

.locality-chip strong{
  display:block;
  font-size:13px;
  margin-bottom:2px;
}

.locality-chip span{
  font-size:10px;
  color:var(--muted);
}

.locality-chip .count{
  display:inline-block;

  margin-top:8px;

  font-size:9px;
  font-weight:700;

  color:var(--green);

  background:var(--green-soft);

  padding:3px 9px;

  border-radius:20px;
}


/* =========================================================
   PROPERTY CARDS
========================================================= */

.property-scroll{
  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:16px;
}

.property-card{
  min-width:0;

  border:1px solid var(--line);

  border-radius:17px;

  overflow:hidden;

  background:#fff;

  box-shadow:0 5px 20px rgba(0,0,0,.03);

  transition:.3s;
}

.property-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.property-image{
  height:155px;

  position:relative;

  overflow:hidden;
}

.property-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:.45s;
}

.property-card:hover .property-image img{
  transform:scale(1.05);
}

.badge{
  position:absolute;

  top:10px;
  left:10px;

  border-radius:8px;

  padding:4px 10px;

  color:#fff;

  background:var(--green);

  font-size:10px;
  font-weight:700;
}

.badge.rent{
  background:#1559b7;
}

.badge.new{
  background:var(--gold);
  color:#092c3d;
}

/* Project status tags - one colour each. Same palette on the
   project page (css/project-extra.css). */
.badge.st-upcoming{ background:#6b4fd8; }
.badge.st-new-launch{ background:var(--gold); color:#092c3d; }
.badge.st-under-construction{ background:#1f6fd1; }
.badge.st-ready-to-move{ background:var(--green); }
.badge.st-completed{ background:#3d5361; }
.badge.st-resale{ background:#c2416b; }

.fav{
  position:absolute;

  top:9px;
  right:9px;

  width:32px;
  height:32px;

  border:0;

  border-radius:50%;

  background:#fff;

  display:grid;
  place-items:center;

  font-size:17px;

  color:#163944;

  box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.fav.active{
  color:#d53d49;
}

.property-body{
  padding:13px;
}

.property-body h3{
  font-size:14px;
  margin-bottom:5px;
}

/* Project name on the left, RERA badge in the right corner. */
.card-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  width:100%;
  margin-bottom:5px;
}

.card-title-row h3{
  flex:1;
  min-width:0;
  margin-bottom:0;
}

.card-title-row .rera-badge{
  flex:none;
  margin-top:1px;
  white-space:nowrap;
}

.location,
.developer{
  font-size:10px;
  color:var(--muted);

  margin:4px 0;
}

.rera-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;

  background:var(--green-soft);
  color:var(--green-dark);

  font-size:9px;
  font-weight:700;

  padding:3px 9px;

  border-radius:20px;

  margin-top:2px;
}


/* BHK CONFIGURATION - vertically scrollable list. Each row
   (config / area / price / status) stays on one line; the
   list of rows scrolls vertically when a property has many
   configs, so title/location/developer stay put above it. */

/* Starting price + BHK rows, pinned to the bottom of the card. */
.card-bottom{
  margin-top:auto;
  padding-top:10px;
}

.card-price{
  margin:0;
  font-size:11px;
  color:var(--muted);
}

.card-price strong{
  font-size:15px;
  color:var(--green-dark);
}

.bhk-wrap{
  position:relative;
  padding-top:11px;
}

/* Cards in a row stretch to the tallest one; keep the BHK row at the
   bottom so rows line up across cards instead of leaving a gap. */
#propertyList .property-card,
#newLaunchesList .property-card,
#recentlyViewedList .property-card{
  display:flex;
  flex-direction:column;
}

#propertyList .property-body,
#newLaunchesList .property-body,
#recentlyViewedList .property-body{
  flex:1;
  display:flex;
  flex-direction:column;
}

#propertyList .property-body > *,
#newLaunchesList .property-body > *,
#recentlyViewedList .property-body > *{
  align-self:flex-start;
  max-width:100%;
}

#propertyList .property-body > .bhk-wrap,
#newLaunchesList .property-body > .bhk-wrap,
#recentlyViewedList .property-body > .bhk-wrap,
#propertyList .property-body > .card-title-row,
#newLaunchesList .property-body > .card-title-row,
#recentlyViewedList .property-body > .card-title-row,
#propertyList .property-body > .card-bottom,
#newLaunchesList .property-body > .card-bottom,
#recentlyViewedList .property-body > .card-bottom{
  align-self:stretch;
}

/* One BHK row visible; the rest scroll vertically, snapping a row
   at a time. max-height is set from the first row by
   fitBhkScrolls() in index.html (row height varies by screen);
   the value here only applies before that runs. */
.bhk-scroll{
  display:flex;
  flex-direction:column;

  max-height:66px;
  overflow-y:auto;
  overscroll-behavior:contain;

  scroll-snap-type:y mandatory;

  gap:8px;

  scrollbar-width:none;
}

.bhk-scroll::-webkit-scrollbar{
  display:none;
}

.bhk-scroll > .bhk-chip{
  scroll-snap-align:start;
}

/* Custom scroller beside the BHK row when there is more than one
   configuration (thumb sized and moved by fitBhkScrolls). */
.bhk-wrap.has-more{
  padding-right:9px;
}

/* Labels and values on one line each, so every BHK row is the
   same single height. */
.bhk-stat span{
  white-space:nowrap;
  letter-spacing:.2px;
}

.bhk-stat strong{
  white-space:nowrap;
}

.bhk-stat{
  padding-left:4px;
  padding-right:4px;
}

.bhk-track{
  position:absolute;
  top:13px;
  right:1px;
  bottom:2px;
  width:4px;

  border-radius:4px;
  background:var(--line);
  overflow:hidden;
}

.bhk-thumb{
  display:block;
  width:100%;
  border-radius:4px;
  background:var(--green);
  transition:transform .15s ease-out;
}

/* A soft fade at the bottom edge hints that more rows follow. */
.bhk-wrap.has-more:not(.at-end) .bhk-scroll{
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, rgba(0,0,0,.35));
          mask-image:linear-gradient(to bottom, #000 78%, rgba(0,0,0,.35));
}

.bhk-count{
  position:absolute;
  top:-2px;
  right:16px;
  z-index:1;

  padding:1px 7px;

  border-radius:999px;
  background:var(--green);
  color:#fff;

  font-size:10px;
  font-weight:700;
  line-height:16px;

  pointer-events:none;
}

.bhk-chip{
  flex:0 0 auto;

  display:flex;

  align-items:stretch;

  border:1px solid var(--line);

  border-radius:12px;

  overflow:hidden;

  background:#fafdfc;
}

.bhk-stat{
  flex:1;
  min-width:0;

  padding:8px 6px;

  text-align:center;

  border-right:1px solid var(--line);
}

.bhk-stat:last-child{
  border-right:0;
}

.bhk-stat strong{
  display:block;
  font-size:11px;
  color:var(--ink);
}

.bhk-stat span{
  display:block;

  font-size:8px;

  color:var(--muted);

  text-transform:uppercase;

  letter-spacing:.4px;

  margin-bottom:2px;
}

.bhk-stat.price-stat strong{
  color:var(--green);
}

.bhk-stat.status-stat.status-available strong{
  color:var(--green);
}

.bhk-stat.status-stat.status-limited strong{
  color:var(--gold-dark);
}

.bhk-stat.status-stat.status-sold strong{
  color:#b3403a;
}


/* HIDDEN PROPERTY */

.property-card.hidden-property{
  display:none;
}


/* =========================================================
   TRUST
========================================================= */

.trust{
  background:linear-gradient(110deg,#edf9f6,#f8fbf9);

  border:1px solid #e1efeb;

  border-radius:22px;

  padding:27px 25px;

  display:grid;

  grid-template-columns:1.45fr repeat(4,1fr);

  gap:10px;

  align-items:center;
}

.trust-intro h2{
  font-size:23px;
  margin-bottom:5px;
}

.trust-intro p{
  font-size:11px;
  color:var(--muted);
  max-width:280px;
}

.trust-item{
  text-align:center;

  border-left:1px solid #d8e7e3;

  padding:5px;
}

.trust-icon{
  width:42px;
  height:42px;

  border:1px solid #d4e5e0;

  border-radius:50%;

  background:#fff;

  display:grid;
  place-items:center;

  margin:0 auto 7px;

  color:var(--green);

  font-size:19px;
}

.trust-item strong{
  display:block;
  font-size:11px;
}

.trust-item span{
  font-size:8px;
  color:var(--muted);
}


/* =========================================================
   CTA
========================================================= */

.cta{
  margin-top:16px;

  border-radius:18px;

  overflow:hidden;

  min-height:90px;

  padding:16px 26px;

  background:
    linear-gradient(
      90deg,
      rgba(255,247,229,.96),
      rgba(255,247,229,.82)
    ),
    url("https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1200&q=80")
    center/cover;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;
}

.cta small{
  font-size:9px;

  color:var(--gold-dark);

  font-weight:700;

  letter-spacing:2px;
}

.cta h2{
  font-size:22px;
}

.cta p{
  font-size:10px;
  color:var(--muted);
}

.cta-btn{
  display:inline-block;
  text-decoration:none;

  background:var(--green);

  color:#fff;

  border:0;

  border-radius:25px;

  padding:13px 24px;

  font-weight:700;

  white-space:nowrap;
}


/* =========================================================
   FOOTER
========================================================= */

footer{
  border-top:1px solid var(--line);

  margin-top:15px;

  padding:38px 0 18px;
}

.footer-grid{
  display:grid;

  grid-template-columns:1.4fr 1fr 1fr 1fr;

  gap:30px;
}

.footer-col h4{
  font-size:12px;
  margin-bottom:12px;
}

.footer-col a,
.footer-col p{
  display:block;

  color:var(--muted);

  font-size:10px;

  margin:6px 0;
}

.socials{
  display:flex;
  gap:8px;
}

.socials a{
  width:30px;
  height:30px;

  border:1px solid var(--line);

  border-radius:50%;

  display:grid;
  place-items:center;

  color:var(--green);
}

.copyright{
  border-top:1px solid var(--line);

  margin-top:25px;

  padding-top:14px;

  color:#87959b;

  font-size:9px;

  display:flex;

  justify-content:space-between;
}


/* =========================================================
   MOBILE BOTTOM NAVIGATION
   Hidden on desktop; fixed to the viewport bottom on mobile.
========================================================= */

.bottom-nav{
  display:none;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

  .container{
    width:min(100% - 28px,700px);
  }

  .header{
    height:68px;
  }

  .nav-links,
  .login-btn{
    display:none;
  }

  .menu-btn{
    display:grid;
  }


  /* MOBILE LOGO */

  .header-logo{
    width:145px;
    max-height:44px;
  }


  /* MOBILE MENU */

  .mobile-menu{
    position:fixed;

    top:68px;
    left:0;
    right:0;

    background:#fff;

    padding:18px 20px;

    border-bottom:1px solid var(--line);

    box-shadow:var(--shadow);

    z-index:49;
  }

  .mobile-menu.open{
    display:block;
  }

  .mobile-menu a{
    display:block;

    padding:12px;

    border-bottom:1px solid #f1f3f2;

    font-weight:600;
  }


  /* HERO */

  .hero{
    min-height:520px;

    align-items:flex-start;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.72) 42%,
        rgba(255,255,255,.15) 70%
      ),
      url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1000&q=85")
      center/cover;
  }

  .hero-content{
    padding:43px 0 140px;
    max-width:100%;
  }

  .hero h1{
    font-size:42px;
    letter-spacing:-1.5px;
  }

  .hero p{
    font-size:14px;
  }


  /* SEARCH */

  .search-wrap{
    bottom:-100px;
  }

  .search-bar{
    display:block;
    padding:9px;
    border-radius:18px;
  }

  .search-field{
    border-right:0;

    border-bottom:1px solid var(--line);

    min-height:44px;

    padding:0 10px;
  }

  .search-field:last-of-type{
    display:flex;
  }

  .search-button{
    width:100%;

    justify-content:center;

    margin-top:8px;

    height:44px;
  }

  .filter-toggle-btn{
    width:100%;

    justify-content:center;

    margin-top:8px;

    height:44px;
  }

  .hero-filter-panel{
    left:0;
    right:0;

    width:auto;
  }

  .hero-filter-panel:not([hidden]){
    grid-template-columns:1fr 1fr;
  }


  /* STATS */

  .stats{
    margin-top:130px;

    grid-template-columns:repeat(2,1fr);

    border-radius:18px;
  }

  .stat{
    padding:15px 8px;
  }

  .stat:nth-child(2){
    border-right:0;
  }

  .stat:nth-child(-n+2){
    border-bottom:1px solid var(--line);
  }

  .stat strong{
    font-size:18px;
  }


  /* SECTIONS */

  section{
    padding:43px 0;
  }

  .section-title{
    font-size:25px;
  }

  .section-head{
    align-items:center;
  }


  /* TYPE HORIZONTAL */

  .type-grid{
    display:flex;

    overflow-x:auto;

    gap:13px;

    padding:2px 2px 12px;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;
  }

  .type-grid::-webkit-scrollbar{
    display:none;
  }

  .type-card{
    flex:0 0 76%;

    scroll-snap-align:start;
  }

  .type-img{
    height:145px;
  }


  /* TOP CITIES HORIZONTAL */

  .city-grid{
    display:flex;

    overflow-x:auto;

    gap:13px;

    padding:2px 2px 12px;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;
  }

  .city-grid::-webkit-scrollbar{
    display:none;
  }

  .city-card{
    flex:0 0 46%;

    scroll-snap-align:start;
  }


  /* PROPERTY HORIZONTAL */

  .property-scroll{
    display:flex;

    overflow-x:auto;

    gap:13px;

    padding:2px 2px 14px;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

    overscroll-behavior-x:contain;
  }

  .property-scroll::-webkit-scrollbar{
    display:none;
  }

  .property-card{
    flex:0 0 82%;

    scroll-snap-align:start;
  }

  .property-image{
    height:190px;
  }


  /* TRUST */

  .trust{
    grid-template-columns:repeat(2,1fr);

    gap:12px;

    padding:20px;
  }

  .trust-intro{
    grid-column:1/-1;
  }

  .trust-item:nth-child(3){
    border-left:0;
  }


  /* CTA */

  .cta{
    display:block;
    padding:20px;
  }

  .cta-btn{
    margin-top:13px;
    width:100%;
  }


  /* FOOTER */

  .footer-grid{
    grid-template-columns:1fr 1fr;

    gap:25px;
  }

  .footer-grid .footer-brand{
    grid-column:1/-1;
  }

  .copyright{
    display:block;
    line-height:1.8;
  }


  /* BOTTOM NAV */

  body{
    padding-bottom:64px;
  }

  .bottom-nav{
    display:flex;

    position:fixed;

    bottom:0;
    left:0;
    right:0;

    height:60px;

    background:#fff;

    border-top:1px solid var(--line);

    box-shadow:0 -8px 24px rgba(8,45,56,.08);

    z-index:60;

    justify-content:space-around;

    align-items:center;
  }

  .bottom-nav button{
    flex:1;

    height:100%;

    border:0;

    background:none;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:3px;

    color:#7ba89d;

    font-size:10px;
    font-weight:600;
  }

  .bottom-nav .bn-icon{
    width:42px;
    height:27px;

    display:grid;
    place-items:center;

    border-radius:14px;

    transition:background .25s, transform .25s;
  }

  .bottom-nav .bn-icon svg{
    width:21px;
    height:21px;
    display:block;
  }

  .bottom-nav .bn-label{
    transition:color .25s;
  }

  .bottom-nav button.bn-active{
    color:var(--green);
  }

  .bottom-nav button.bn-active .bn-icon{
    background:var(--green-soft);
    transform:translateY(-1px);
  }

}


@media(max-width:420px){

  .hero h1{
    font-size:36px;
  }

  .property-card{
    flex-basis:86%;
  }

  .type-card{
    flex-basis:82%;
  }

  .city-card{
    flex-basis:60%;
  }

  .header-logo{
    width:135px;
  }

}


/* =========================================================
   SCROLL HINT
========================================================= */

.scroll-hint{
  display:none;
}

@media(max-width:900px){

  .scroll-hint{
    display:block;

    text-align:right;

    font-size:10px;

    color:#91a0a4;

    margin-top:-15px;

    margin-bottom:8px;
  }

}


/* =========================================================
   VIEW ALL ANIMATION
========================================================= */

.property-card.reveal{
  animation:propertyReveal .35s ease;
}

@keyframes propertyReveal{

  from{
    opacity:0;
    transform:translateY(10px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}


/* =========================================================
   PROPERTY CARD REFINEMENTS
   - clearer border
   - BHK rows run the full width of the card, edge to edge at
     the bottom; the scroller sits over their right edge
   - starting price the same size as the project name
   - smaller BHK values so they never crowd their cell
========================================================= */

.property-card{
  border:1px solid #d3e0dc;
}

.property-card:hover{
  border-color:#b9d3cb;
}

.card-price strong{
  font-size:14px;
}

#propertyList .card-bottom,
#newLaunchesList .card-bottom,
#recentlyViewedList .card-bottom{
  margin-left:-13px;
  margin-right:-13px;
  margin-bottom:-13px;
  max-width:none;
}

.card-bottom .card-price{
  padding:0 13px;
}

.card-bottom .bhk-wrap,
.card-bottom .bhk-wrap.has-more{
  padding-right:0;
}

.card-bottom .bhk-scroll{
  gap:0;
}

.card-bottom .bhk-chip{
  border:0;
  border-top:1px solid #d3e0dc;
  border-radius:0;
  background:#f6faf9;
}

.card-bottom .bhk-stat:last-child{
  padding-right:9px;
}

.card-bottom .bhk-track{
  top:13px;
  right:3px;
  bottom:3px;
  width:3px;
}

.card-bottom .bhk-count{
  right:13px;
}

.bhk-stat strong{
  font-size:10px;
}


/* ---------- FAQs (homepage guide + hub pages) ---------- */

.hub-faqs{
  display:grid;
  gap:10px;
  max-width:860px;
}

.hub-faq{
  border:1px solid #d3e0dc;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.hub-faq summary{
  position:relative;
  padding:14px 40px 14px 16px;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}

.hub-faq summary::-webkit-details-marker{ display:none; }

.hub-faq summary:after{
  content:"+";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  color:var(--green);
}

.hub-faq[open] summary:after{ content:"–"; }

.hub-faq p{
  margin:0;
  padding:0 16px 15px;
  font-size:13px;
  line-height:1.6;
  color:#3d5560;
}

/* ---------- Homepage guide ---------- */

.home-guide-intro{
  max-width:860px;
  margin:0 0 12px;
  font-size:14px;
  line-height:1.7;
  color:#3d5560;
}

.home-guide-links{
  max-width:860px;
  margin:0 0 22px;
  font-size:13px;
  line-height:1.8;
  color:#3d5560;
}

.home-guide-links a{
  color:var(--green);
  font-weight:700;
  text-decoration:none;
}

.home-guide-links a:hover{ text-decoration:underline; }

.home-guide h3{
  margin:0 0 12px;
  font-size:17px;
  color:var(--ink);
}


/* ---------- Compare button on cards (js/compare-tray.js) ---------- */

.compare-toggle{
  position:absolute;
  right:9px;
  bottom:9px;
  padding:5px 10px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#082d38;
  font:inherit;
  font-size:11px;
  font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.14);
  cursor:pointer;
}

.compare-toggle:hover{ background:#fff; }

.compare-toggle.is-compared{
  background:#e1a400;
  color:#082d38;
}


/* ---------- City cards with a monument picture ---------- */

.city-card{
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  background:#fff;
}

.city-img{
  display:block;
  aspect-ratio:8/5;
  background:var(--green-soft);
  overflow:hidden;
}

.city-img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s;
}

.city-card:hover .city-img img,
.city-card:focus-visible .city-img img{
  transform:scale(1.04);
}

/* .city-card span (the project count) is muted grey; the wrapper and
   the picture frame are spans too, so they reset it. */
.city-card .city-body{
  display:block;
  padding:12px 14px 14px;
  font-size:inherit;
  color:var(--ink, #092c3d);
}

.city-card .city-body strong{ color:var(--ink, #092c3d); }
.city-card .city-body span{ font-size:11px; color:var(--muted); }


/* ---------- Project cards: defined border + soft shadow ----------
   A crisp edge plus a two-layer shadow (tight contact shadow + wide
   soft one) so cards lift off the page; deeper on hover. */

.property-card{
  border:1px solid #cad9d4;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(8,45,56,.06), 0 6px 18px rgba(8,45,56,.08);
}

.property-card:hover{
  border-color:#a9c8be;
  box-shadow:0 2px 4px rgba(8,45,56,.08), 0 16px 34px rgba(8,45,56,.14);
}

/* Sideways-scrolling rows clip anything outside their box, which
   would cut the shadow off; give it room without moving the cards. */
@media (max-width:900px){
  .property-scroll{
    padding:8px 8px 24px;
    margin:-8px -8px -10px;
    scroll-padding-left:8px;
  }
}

/* Header "Saved" button: number of saved projects (js/compare-tray.js) */
.saved-count{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 5px;border-radius:999px;background:#e1a400;color:#082d38;font-size:10.5px;font-weight:800;line-height:1}
.saved-count[hidden]{display:none}


/* =========================================================
   HOME LOAN PARTNERS
   Every logo sits in the same white card at the same height,
   so wide and narrow logos read as one even row.
========================================================= */

.loan-partners{
  padding-top:20px;
}

.loan-partners-intro{
  margin-top:8px;
  color:var(--muted);
  font-size:14px;
}

.loan-partner-grid{
  list-style:none;

  /* Flex rather than grid so a short last row is centred. */
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

.loan-partner{
  flex:0 0 calc((100% - 4 * 14px) / 5);
  height:96px;
  padding:18px 20px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
}

.loan-partner img{
  max-width:100%;
  max-height:52px;
  width:auto;
  height:auto;
  object-fit:contain;
}

@media(max-width:900px){
  .loan-partner-grid{
    gap:10px;
  }

  .loan-partner{
    flex-basis:calc((100% - 2 * 10px) / 3);
    height:72px;
    padding:12px;
    border-radius:12px;
  }

  .loan-partner img{
    max-height:38px;
  }
}