/* =====================================================
   CUSTOM OVERRIDES — DLF Magnolia Phase 2
   Built against the real style.css theme variables:
   --gold:#B89B5E  --beige:#D8D0C2  --ivory:#F5F1E8
   --bg:#0E0E0E    --bg2:#151515
   Load this file AFTER style.css in <head>.
===================================================== */

/* ---------------------------------------------------
   NEW CHANGE: hero-facts row (the stats strip directly
   below the two hero buttons) — text changed to black.
   Pure black text over the dark hero photo would be
   invisible, so it now sits on a soft ivory pill so it
   reads as true black and stays legible.
--------------------------------------------------- */
.hero-facts-highlight {
  background: rgba(245, 241, 232, 0.94);
  border-top: none !important;
  border-radius: 3px;
  padding: 1.5rem 1.8rem !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-facts-highlight div {
  border-right-color: rgba(0, 0, 0, 0.14) !important;
}
.hero-facts-highlight .n {
  color: #000000 !important;
  text-shadow: none !important;
}
.hero-facts-highlight .l {
  color: #000000 !important;
  opacity: 0.72 !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------
   NEW CHANGE: Virtual Tour section rebuilt as a big,
   full-bleed section with a large background image
   (previously a small side-by-side image + text grid,
   same layout as Brochure/Consultation/Site Visit).
--------------------------------------------------- */
.vt-fullbleed {
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.vt-fullbleed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 8s ease;
}
.vt-fullbleed:hover img {
  transform: scale(1);
}
.vt-fullbleed .vt-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,6,6,.88) 0%, rgba(6,6,6,.55) 48%, rgba(6,6,6,.18) 100%),
    linear-gradient(0deg, rgba(6,6,6,.55), rgba(6,6,6,0) 40%);
}
.vt-fullbleed .vt-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 0 6vw;
}
.vt-fullbleed .vt-content h2 {
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  max-width: 14ch;
  margin: 1rem 0 1.4rem;
}
.vt-fullbleed .vt-content p.body {
  font-size: 1.1rem;
  max-width: 42ch;
  margin-bottom: 2.2rem;
}
@media (max-width: 980px) {
  .vt-fullbleed { height: 78vh; min-height: 520px; }
}

/* ---------------------------------------------------
   Shrink the "Watch the story" (Project Film) section
   so it takes up noticeably less space. (unchanged)
--------------------------------------------------- */
.video-sec.video-sec-compact.pad {
  padding: 2.2rem 0 !important;
}
.video-sec.video-sec-compact h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem) !important;
  margin-bottom: 0 !important;
}
.video-sec.video-sec-compact .video-thumb {
  max-width: 420px !important;
  margin-top: 1.6rem !important;
}
.video-sec.video-sec-compact .video-thumb img {
  height: 220px !important;
}
.video-sec.video-sec-compact .play-btn {
  width: 56px !important;
  height: 56px !important;
  font-size: 1rem !important;
}
.video-sec.video-sec-compact .video-overlay span {
  font-size: .64rem !important;
}

/* ---------------------------------------------------
   Sticky bottom bar: 3 columns — Book Virtual Tour /
   Book Free Consultation / Book Site Visit. (unchanged)
--------------------------------------------------- */
.mobile-sticky .site-visit {
  background: transparent;
  color: var(--ivory);
}

/* ---------------------------------------------------
   NEW CHANGE: Mobile number field opened up to any
   country — no fixed "+91" prefix anymore. Same
   underline style as the rest of the form fields.
--------------------------------------------------- */
.phone-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid rgba(216,208,194,.28);
  transition: border-color .4s ease;
}
.phone-row:focus-within {
  border-color: var(--gold);
}
.phone-row input {
  border-bottom: none !important;
  padding: .65rem 0 !important;
  flex: 1;
}