/**
 * Palette derived from official project artwork (welcomevertex — logo colours):
 * amber / orange STREET accent, VEWE earthy copper, sunburst gold + burgundy.
 */
:root {
  --wv-orange: #e85d22;
  --wv-orange-hot: #ff7a38;
  --wv-gold: #f4c14a;
  --wv-maroon: #9c1f32;
  --wv-earth: #a96451;
  --wv-void: #050308;

  --saffron: var(--wv-orange);
  --saffron-dark: #ca4c18;
  --saffron-glow: rgba(232, 93, 34, 0.48);

  --wv-title-gradient: linear-gradient(
    95deg,
    var(--wv-gold) 0%,
    var(--wv-orange-hot) 35%,
    var(--wv-orange) 55%,
    var(--wv-maroon) 100%
  );
}

/* Night hero — black base + logo sunburst colours */
.hero-bg {
  background: none !important;
  opacity: 1 !important;
  background-image:
    radial-gradient(ellipse 110% 80% at 18% -8%, rgba(244, 193, 74, 0.22), transparent 55%),
    radial-gradient(ellipse 90% 70% at 88% 12%, rgba(156, 31, 50, 0.28), transparent 52%),
    radial-gradient(ellipse 120% 60% at 50% 100%, rgba(232, 93, 34, 0.18), transparent 50%),
    linear-gradient(165deg, #080405 0%, #120705 42%, var(--wv-void) 100%) !important;
}

.hero-gradient {
  background: linear-gradient(
    180deg,
    rgba(5, 3, 6, 0.35) 0%,
    rgba(5, 3, 6, 0.12) 42%,
    rgba(8, 4, 2, 0.84) 100%
  ) !important;
}

.hero .hero-title {
  background-image: var(--wv-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.promo-video-bottom {
  padding-top: 48px;
  padding-bottom: 56px;
  background: linear-gradient(180deg, rgba(232, 93, 34, 0.08), rgba(5, 3, 6, 0.3)) !important;
}

/* —— Branding: VeWe PNG (official) · builder PNG footer-only —— */
.nav-brand-with-logo {
  display: inline-flex !important;
  align-items: center;
  max-width: min(46vw, 260px);
  min-width: 0;
}

.nav-project-logo-img {
  height: 34px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .nav-project-logo-img {
    max-width: 176px;
    height: 38px;
  }
}

.hero-logo {
  width: auto !important;
  max-width: clamp(220px, 58vw, 360px);
  height: auto !important;
  max-height: clamp(72px, 14vw, 108px);
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

/* Hero pills — Pride Plaza–style badges (BNX reference) */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px auto 22px;
  justify-content: center;
  max-width: 820px;
  padding-inline: 4px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  white-space: normal;
}

.hero-pill strong {
  color: #fffaf4;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hero-pill sup {
  font-size: 9px;
  font-weight: 700;
  margin-left: 1px;
  vertical-align: super;
  opacity: 0.92;
}

.hero-pill.hero-pill-accent {
  background: linear-gradient(135deg, rgba(232, 93, 34, 0.28), rgba(156, 31, 50, 0.22));
  border-color: rgba(244, 193, 74, 0.45);
  color: #fff8f4;
  box-shadow: 0 0 0 1px rgba(232, 93, 34, 0.15);
}

.hero-pill.hero-pill-loc {
  border-color: rgba(169, 100, 81, 0.55);
  background: rgba(40, 16, 9, 0.55);
  color: rgba(255, 244, 235, 0.96);
}

@media (max-width: 520px) {
  .hero-pills {
    gap: 7px;
    margin-bottom: 18px;
  }

  .hero-pill {
    font-size: 11px;
    padding: 6px 10px;
  }
}

.hero-hint sup {
  top: -0.2em;
  font-size: 0.72em;
  opacity: 0.85;
}
.form-logo.form-project-logo-img {
  width: auto;
  height: auto;
  max-height: 56px;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}

.footer-developer-logo {
  width: auto;
  height: auto;
  max-height: 52px;
  max-width: min(260px, 85vw);
  object-fit: contain;
}

.footer-project-line {
  margin-top: 10px !important;
  font-size: 13px !important;
  font-weight: 500;
  opacity: 0.88;
  line-height: 1.35;
}

/* Single reel — max width readable */
.promo-video-inner.promo-video-single {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.promo-video-inner.promo-video-single-wide {
  max-width: 980px;
}

.promo-video-bottom .promo-video-caption {
  text-align: center;
}

/* Optional duo layout (reuse if needed) */
.promo-video-inner.promo-duo {
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

@media (max-width: 820px) {
  .promo-video-inner.promo-duo {
    grid-template-columns: 1fr;
  }
}

.promo-video-caption {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.72);
}

.attraction-placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px;
  background: radial-gradient(circle at 20% -10%, rgba(244, 193, 74, 0.2), transparent 55%),
    linear-gradient(160deg, rgba(12, 8, 10, 0.95), rgba(120, 42, 26, 0.45));
}

.attraction-placeholder h3 {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
}

/* Rhythm modal — Phase-2 wiring (no agent yet) */
.rhythm-phase2-note {
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(248, 250, 252, 0.82);
  max-width: 28rem;
  margin: 0 auto 14px;
  padding: 0 12px;
}

.rhythm-phase2-note strong {
  color: var(--wv-gold);
  font-weight: 600;
}

/* Floor-plan teaser tiles — non-remote artwork */
.floor-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: #170805;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 16px;
  gap: 4px;
}

.floor-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 3, 5, 0.88), transparent 62%);
  z-index: 1;
}

.floor-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.floor-thumb .floor-thumb-label,
.floor-thumb .floor-thumb-meta {
  position: relative;
  z-index: 2;
}

.floor-thumb-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 193, 74, 0.95);
}

.floor-thumb-meta {
  font-size: 14px;
  font-weight: 600;
  color: #f8fafc;
}

.floor-grid .floor-card .floor-thumb {
  width: 100%;
  position: relative;
  z-index: 0;
}

.about-visual {
  position: relative;
  min-height: 220px;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
}

.about-visual img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.about-visual-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff8f5;
  background: linear-gradient(to top, rgba(5, 3, 5, 0.88), transparent);
}

/* Offering strip — décor from WP media */
.offering-figure-visual {
  margin-top: 28px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(232, 93, 34, 0.2);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.2);
}

.offering-figure-visual img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Attractions row — reuse Samrajya card chrome with real JPGs */
.attraction-card.wv-attr-card {
  aspect-ratio: auto !important;
  display: flex;
  flex-direction: column;
}

.wv-attr-card .wv-attr-title-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(5, 3, 5, 0.85), transparent);
}

.wv-attr-card .wv-attr-title-overlay h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff8f5;
}

.wv-attr-card .attraction-img-wrap {
  position: relative;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.wv-attr-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wv-attr-caption {
  padding: 12px;
}

.wv-attr-caption p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.92);
}

.dd-body-inner .wv-attr-caption {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.96);
}

.dd-body-inner .wv-attr-caption p {
  color: rgba(30, 41, 59, 0.92);
}

/* Location schematic from developer site */
.location-map-sheet {
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(232, 93, 34, 0.18);
}

.location-map-sheet img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.location-map-sheet figcaption {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
}

.location-grid > .location-map-sheet {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.location-map-embed-wrap {
  border-radius: 14px;
  overflow: hidden;
  min-height: 260px;
  background: rgba(15, 23, 42, 0.6);
}

.location-map-embed-wrap iframe {
  width: 100%;
  height: 260px;
  border: 0;
}

.location-map-fallback-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wv-gold);
}

.location-map-fallback-link:hover {
  text-decoration: underline;
  color: var(--wv-orange-hot);
}

/* Footer trust pills (RERA detail + recap — homepage shows “RERA Approved” only) */
.footer-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 4px auto 26px;
  padding: 0 8px;
  max-width: 900px;
}

.footer-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.36;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  white-space: normal;
}

.footer-pill sup {
  font-size: 9px;
  font-weight: 700;
  margin-left: 1px;
  vertical-align: super;
}

.footer-pill.footer-pill-loc {
  border-color: rgba(244, 193, 74, 0.35);
  background: rgba(232, 93, 34, 0.12);
  color: rgba(255, 248, 240, 0.94);
}

.footer-pill.footer-pill-rera-highlight {
  border-color: rgba(244, 193, 74, 0.45);
  background: rgba(156, 31, 50, 0.2);
  color: #fff5eb;
}

.footer-pill.footer-pill-rera-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.035em;
  font-weight: 700;
  color: #fffaf4;
  border-color: rgba(232, 93, 34, 0.35);
}

@media (max-width: 480px) {
  .footer-meta-pills {
    gap: 6px;
  }

  .footer-pill {
    font-size: 10px;
    padding: 5px 10px;
  }
}