/* ============================================================
   Smooth load + design polish  (same theme, additive only)
   ============================================================ */

/* prevent image aspect-ratio distortion globally (object-fit images keep their
   explicit sizing via more specific rules like .cmedia img, .gal img, etc.) */
img { height: auto; }

/* smooth in-page scrolling */
html { scroll-behavior: smooth; }

/* gentle page fade-in on load */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageIn .45s ease both; }

/* images fade in as they load (JS adds .img-load / .img-in) */
img.img-load { opacity: 0; transition: opacity .5s ease; }
img.img-in   { opacity: 1; }

/* scroll reveal — JS only tags blocks that start BELOW the fold, so there is no flicker */
.rv     { opacity: 0; transition: opacity .6s cubic-bezier(.22,.61,.36,1); }
.rv.rv-in { opacity: 1; }
.rv-up  { transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.rv-up.rv-in { transform: none; }

/* honour users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; }
  .rv, .rv-up, img.img-load { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- footer social icons: keep them on ONE row ---- */
.ft .ft-social { flex-wrap: nowrap; gap: 6px; margin-top: 16px; }
.ft .ft-social a { width: 30px; height: 30px; border-radius: 9px; }
.ft .ft-social a svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .ft .ft-social { flex-wrap: wrap; gap: 10px; } .ft .ft-social a { width: 36px; height: 36px; } }

/* ---- richer depth & smoother interactions (same palette) ---- */
.card { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .2s ease; }
.card:hover { transform: translateY(-6px); border-color: #cfd8e6; box-shadow: 0 26px 52px -22px rgba(2,6,23,.38); }

.dcard, .vcard, .scard2 { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.dcard:hover, .vcard:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -24px rgba(2,6,23,.32); }

/* buttons feel more responsive */
.btn { transition: transform .18s ease, background-color .2s ease, box-shadow .2s ease, filter .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(168,138,82,.55); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* crisper links + clear keyboard focus (accessibility) */
a { transition: color .18s ease; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 8px;
}

/* subtle lift on interactive form fields for clarity */
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(168,138,82,.12);
}

/* project detail RERA QR code card */
.qr-card .sub { margin-bottom: 10px; }
.qr-card .qr-img { display: flex; justify-content: center; }
.qr-card .qr-img img { width: 190px; height: 190px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; transition: transform .25s ease; }
.qr-card .qr-img a:hover img { transform: scale(1.03); }
.qr-card .qr-num { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--ink); word-break: break-word; }
.qr-card .qr-num span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); margin-bottom: 2px; }