/* ==========================================================================
   Responsive / overflow fixes
   The Tailwind build ships desktop-first tracks that can't shrink on phones:
   grid & flex children default to min-width:auto, so a wide child (the hero
   stats row, the 640px comparison table) pushes the whole page sideways and
   text gets clipped. These rules make those containers shrinkable.
   ========================================================================== */

/* 1. Never allow sideways scrolling of the document. */
html, body { max-width: 100%; overflow-x: hidden; }

/* 2. Grid/flex children must be allowed to shrink below their content width. */
main .grid > *, main .flex > * { min-width: 0; }

/* 3. Long headings and copy wrap instead of overflowing. */
main h1, main h2, main h3, main p, main a, main span, main strong {
  overflow-wrap: break-word;
}

/* 4. The hero stat row: let it wrap on small screens instead of forcing
      a ~446px min-content width on the whole grid column. */
@media (max-width: 1023px) {
  main .mt-12.flex.items-center.gap-6 { flex-wrap: wrap; gap: 1rem 1.25rem; }
  main .mt-12.flex.items-center.gap-6 > .h-8.w-px { display: none; }
}

/* 5. The comparison table has min-w-[640px]; give it a scroll container
      rather than letting it stretch the page. */
#compare .overflow-x-auto, #compare table { max-width: 100%; }
#compare table { display: block; overflow-x: auto; white-space: nowrap; }
@media (min-width: 768px) { #compare table { display: table; white-space: normal; } }

/* 6. Hero image shouldn't dictate width. */
main img { max-width: 100%; height: auto; }

/* ==========================================================================
   "Why Aangan" cards
   Rebuilt: the old version had a ⌁ / ◌ text glyph pushed 4rem away from the
   heading (mt-16), leaving a big hole, and only card 1 had any colour.
   Now: real SVG icons, three distinct brand tints, even spacing.
   ========================================================================== */
.why-grid{
  margin-top:3.5rem;
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){ .why-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .why-grid{grid-template-columns:1fr;gap:1rem} }

.why-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:2rem 1.75rem 1.75rem;
  border-radius:1.5rem;
  border:1px solid transparent;
  overflow:hidden;
  isolation:isolate;
  transition:transform .25s ease, box-shadow .25s ease;
}
.why-card:hover{ transform:translateY(-5px); box-shadow:0 18px 42px rgba(39,36,48,.14); }

/* soft tint that fades toward the bottom of each card */
.why-card::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg,var(--why-tint) 0%,transparent 62%);
  opacity:.5;
}

.why-ico{
  display:grid; place-items:center;
  width:3.25rem; height:3.25rem;
  border-radius:1rem;
  margin-bottom:1.5rem;
  color:#fff;
  background:var(--why-solid);
  box-shadow:0 8px 20px var(--why-shadow);
}
.why-ico svg{ width:1.6rem; height:1.6rem; }

.why-card h3{
  margin:0 0 .65rem;
  font-size:1.375rem;
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1.25;
  color:#272430;
}
.why-card p{
  margin:0 0 1.5rem;
  font-size:.975rem;
  line-height:1.65;
  color:#5d5872;
}

/* small proof chip pinned to the bottom so all three cards end level */
.why-tag{
  margin-top:auto;
  display:inline-flex; align-items:center;
  padding:.4rem .85rem;
  border-radius:999px;
  font-size:.75rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--why-solid);
  background:#fff;
  border:1px solid var(--why-tint);
}

/* three distinct colours, all from the existing brand palette */
.why-1{ --why-solid:#7c6bb0; --why-tint:#ded7ee; --why-shadow:rgba(124,107,176,.34);
        background:#f3f0fa; border-color:#e2dbf1; }
.why-2{ --why-solid:#2f7d6b; --why-tint:#d3ebe4; --why-shadow:rgba(47,125,107,.28);
        background:#eff8f5; border-color:#d6ece5; }
.why-3{ --why-solid:#a3754c; --why-tint:#f0e0cf; --why-shadow:rgba(163,117,76,.30);
        background:#fbf5ee; border-color:#efe2d3; }

/* ==========================================================================
   Locations tiles
   Was: six near-identical dark boxes with only tile 01 tinted, a dead 2.5rem
   gap under the number, and no reason to pick one over another.
   Now: each locality has its own accent, a project count, a one-line reason
   and a starting price — so the tile actually helps a buyer choose.
   ========================================================================== */
.loc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.85rem;
}
@media (max-width:1023px){ .loc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .loc-grid{grid-template-columns:1fr} }

.loc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.3rem;
  padding:1.15rem 1.2rem 1.1rem;
  border-radius:1.1rem;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  isolation:isolate;
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
/* the accent wash — different hue per locality */
.loc-card::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(150deg,var(--lc) 0%,transparent 68%);
  opacity:.42;
  transition:opacity .22s ease;
}
/* left accent bar */
.loc-card::after{
  content:"";
  position:absolute; left:0; top:1.15rem; bottom:1.15rem;
  width:3px; border-radius:0 3px 3px 0;
  background:var(--lc);
}
.loc-card:hover{
  transform:translateY(-4px);
  border-color:var(--lc);
  background:rgba(255,255,255,.08);
}
.loc-card:hover::before{ opacity:.62 }

.loc-num{
  font:800 .68rem Inter,system-ui,sans-serif;
  letter-spacing:.16em;
  color:rgba(255,255,255,.42);
}
.loc-count{
  position:absolute; top:1.05rem; right:1.1rem;
  padding:.2rem .55rem;
  border-radius:999px;
  background:var(--lc);
  color:#15131c;
  font:800 .64rem Inter,sans-serif;
  letter-spacing:.03em;
  white-space:nowrap;
}
.loc-name{
  margin-top:.55rem;
  font:900 1.22rem/1.2 Inter,sans-serif;
  letter-spacing:-.01em;
  color:#fff;
}
.loc-desc{
  font:500 .78rem/1.45 Inter,sans-serif;
  color:rgba(255,255,255,.6);
}
.loc-foot{
  margin-top:auto;
  padding-top:.7rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.loc-price{
  font:800 .82rem Inter,sans-serif;
  color:var(--lc);
  white-space:nowrap;
}
.loc-go{
  font:700 .74rem Inter,sans-serif;
  color:rgba(255,255,255,.55);
  transition:color .2s;
}
.loc-card:hover .loc-go{ color:#fff }

/* six distinct accents, all sitting comfortably on the dark panel */
.loc-1{ --lc:#a79ada }   /* brand purple  */
.loc-2{ --lc:#5fc3a4 }   /* teal green    */
.loc-3{ --lc:#e0a765 }   /* warm bronze   */
.loc-4{ --lc:#7fb0e8 }   /* sky blue      */
.loc-5{ --lc:#dd8fa8 }   /* rose          */
.loc-6{ --lc:#cbbf72 }   /* soft gold     */