/* ==========================================================================
   Lucknow Real Estate Investors -- Design System (ported 1:1 from the
   approved static prototype: index.html / about.html / invest.html /
   listings.html / contact.html / styles.css). Class names are the ORIGINAL
   ones from the prototype so the visual result matches exactly. Layout
   critical properties carry !important so they reliably win over Elementor's
   own base container/widget rules regardless of DOM nesting depth.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,450;9..144,560;9..144,680&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#12302B; --ink-soft:#1C3F38; --ink-softer:#26514A;
  --gold:#B8892B; --gold-deep:#7C5C1E; --gold-light:#D9B15C; --gold-pale:#F1E3C2;
  --header-h:80px;
  --paper:#F6F1E4; --paper-deep:#EDE4CC; --white:#FFFDF8;
  --text:#182420; --text-muted:#5B6B62;
  --text-on-ink:#EDE8D8; --text-on-ink-muted:#A9BDB4;
  --line:rgba(18,48,43,0.14); --line-on-ink:rgba(237,232,216,0.16);
  --shadow:0 24px 48px -20px rgba(18,48,43,0.28);
  --arch-r:999px 999px 6px 6px;
  --maxw:1220px;
}

body{ background:var(--paper) !important; color:var(--text) !important; font-family:'Public Sans',sans-serif !important; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:'Fraunces',serif !important; font-weight:560 !important; letter-spacing:-0.01em; line-height:1.1; color:var(--ink); }
p{ color:var(--text-muted); }
.on-ink, .lre-jaali{ }
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4, .lre-jaali h1,.lre-jaali h2,.lre-jaali h3,.lre-jaali h4{ color:var(--paper) !important; }
.on-ink p, .lre-jaali p{ color:var(--text-on-ink-muted) !important; }

/* ---------- Eyebrow ---------- */
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-deep); display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--gold-deep); display:inline-block; }
.on-ink .eyebrow, .lre-jaali .eyebrow{ color:var(--gold-light) !important; }
.on-ink .eyebrow::before, .lre-jaali .eyebrow::before{ background:var(--gold-light) !important; }

/* ---------- Buttons (classes sit on the Elementor widget wrapper, so also target the inner .elementor-button) ---------- */
.btn, .btn .elementor-button{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px !important; border-radius:var(--arch-r) !important;
  font-family:'Public Sans',sans-serif !important; font-weight:600 !important; font-size:14.5px !important;
  letter-spacing:0.01em; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space:nowrap; text-decoration:none !important;
}
.btn-gold, .btn-gold .elementor-button{ background:var(--gold) !important; color:var(--ink) !important; box-shadow:0 10px 24px -10px rgba(184,137,43,0.55); }
.btn-gold:hover, .btn-gold .elementor-button:hover{ background:var(--gold-light) !important; transform:translateY(-2px); color:var(--ink) !important; }
.btn-outline, .btn-outline .elementor-button{ background:transparent !important; border-color:var(--ink) !important; color:var(--ink) !important; }
.btn-outline:hover, .btn-outline .elementor-button:hover{ background:var(--ink) !important; color:var(--paper) !important; transform:translateY(-2px); }
.btn-outline-light, .btn-outline-light .elementor-button{ background:transparent !important; border-color:rgba(237,232,216,0.5) !important; color:var(--paper) !important; }
.btn-outline-light:hover, .btn-outline-light .elementor-button:hover{ background:rgba(237,232,216,0.12) !important; border-color:var(--paper) !important; }
.btn-sm, .btn-sm .elementor-button{ padding:10px 18px !important; font-size:13px !important; }

/* ---------- Jaali lattice (dark sections) ---------- */
.jaali, .lre-jaali{
  background-color:var(--ink) !important;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(237,232,216,0.07) 1.4px, transparent 1.6px),
    linear-gradient(rgba(237,232,216,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,232,216,0.045) 1px, transparent 1px);
  background-size:24px 24px,24px 24px,24px 24px;
}

/* ---------- Arch motif ---------- */
.arch-frame{ position:relative !important; border-radius:260px 260px 8px 8px !important; overflow:hidden !important; isolation:isolate; }
.arch-frame img{ width:100% !important; height:100% !important; object-fit:cover !important; }

/* ---------- Header (built in XPRO; classes applied to the header container) ---------- */
.site-header{ background:rgba(246,241,228,0.92) !important; backdrop-filter:blur(10px); border-bottom:1px solid var(--line) !important; }
.header-inner{ display:flex !important; align-items:center !important; justify-content:space-between !important; padding:14px 20px !important; }
.logo, .logo *{ font-family:'Fraunces',serif !important; font-weight:560 !important; font-size:19px !important; color:var(--ink) !important; }
.xpro-site-title a{ text-decoration:none !important; }
/* horizontal menu (XPRO) look-and-feel to match .nav-desktop a */
.header-nav .xpro-horizontal-menu-list > li > a{ font-family:'Public Sans',sans-serif !important; font-size:14.5px !important; font-weight:600 !important; color:var(--text) !important; }
.header-nav .xpro-horizontal-menu-list > li > a:hover{ color:var(--ink) !important; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:70px 0 0 !important; }
.hero-grid{ display:grid !important; grid-template-columns:1.05fr 0.95fr !important; gap:48px !important; align-items:center !important; }
.hero h1{ font-size:clamp(38px,5.4vw,68px) !important; line-height:1.02 !important; margin-bottom:22px !important; }
.hero h1 em{ font-style:normal; color:var(--gold-deep); }
.hero-lede{ font-size:17.5px !important; max-width:480px; margin-bottom:32px !important; color:var(--text-muted); }
.hero-ctas{ display:flex !important; gap:14px !important; flex-wrap:wrap; margin-bottom:36px; }
.hero-meta{ display:flex !important; gap:28px !important; flex-wrap:wrap; }
.hero-meta div{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-muted); }
.hero-meta strong{ display:block; font-family:'Fraunces',serif; font-size:22px; color:var(--ink); font-weight:560; }
.hero-visual{ position:relative !important; }
.hero-visual .arch-frame{ aspect-ratio:3/4; }
.hero-tag{ position:absolute !important; bottom:-22px !important; left:-22px !important; background:var(--ink) !important; color:var(--paper) !important; padding:18px 22px !important; border-radius:6px !important; box-shadow:var(--shadow) !important; max-width:230px !important; z-index:5; }
.hero-tag .eyebrow{ color:var(--gold-light) !important; margin-bottom:8px; }
.hero-tag .eyebrow::before{ background:var(--gold-light) !important; }
.hero-tag p{ color:var(--text-on-ink-muted) !important; font-size:13px !important; margin:0 !important; }
@media(max-width:900px){
  .hero-grid{ grid-template-columns:1fr !important; }
  .hero-visual{ max-width:340px; margin:0 auto 40px; }
  .hero-tag{ left:0 !important; }
}

/* ---------- Trust strip ---------- */
.trust-strip{ border-top:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important; background:var(--paper-deep) !important; }
.trust-strip-row{ display:flex !important; justify-content:space-between !important; flex-wrap:wrap; gap:24px; }
.trust-item{ display:flex !important; align-items:baseline !important; gap:8px !important; }
.trust-item strong{ font-family:'Fraunces',serif; font-size:24px; color:var(--ink); font-weight:560; }
.trust-item span{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }

/* ---------- Section heads ---------- */
.section-head h2{ font-size:clamp(28px,3.6vw,42px) !important; }

/* ---------- Benefits ---------- */
.benefit-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:1px !important; background:var(--line) !important; border:1px solid var(--line) !important; }
.benefit-card{ background:var(--white) !important; padding:40px 32px !important; }
.benefit-card .num{ font-family:'IBM Plex Mono',monospace; color:var(--gold-deep); font-size:13px; margin-bottom:22px; display:block; }
.benefit-card h3{ font-size:21px !important; margin-bottom:12px !important; }
.benefit-card p{ margin:0 !important; font-size:14.5px !important; }
@media(max-width:820px){ .benefit-grid{ grid-template-columns:1fr !important; } }

/* ---------- Services ---------- */
.service-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:26px !important; }
.service-card{ background:var(--white) !important; border:1px solid var(--line) !important; border-radius:6px !important; overflow:hidden !important; transition:transform .2s ease, box-shadow .2s ease; }
.service-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.service-card .arch-frame{ aspect-ratio:4/3; border-radius:120px 120px 6px 6px !important; }
.service-body{ padding:26px 24px 28px !important; }
.service-body .eyebrow{ margin-bottom:10px; }
.service-body h3{ font-size:20px !important; margin-bottom:10px !important; }
.service-body p{ font-size:14.5px !important; margin-bottom:18px !important; }
.service-link{ font-family:'IBM Plex Mono',monospace !important; font-size:12.5px !important; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink) !important; border-bottom:1px solid var(--gold); padding-bottom:2px; text-decoration:none !important; }
@media(max-width:960px){ .service-grid{ grid-template-columns:1fr 1fr !important; } }
@media(max-width:640px){ .service-grid{ grid-template-columns:1fr !important; } }

/* ---------- Testimonials ---------- */
.testimonial-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:1px !important; background:var(--line-on-ink) !important; }
.testimonial-grid > div{ background:var(--ink-soft) !important; padding:36px 30px !important; }
.testimonial-grid .elementor-testimonial-wrapper{ background:transparent !important; padding:0 !important; }
.testimonial-grid .elementor-testimonial__content{ font-family:'Fraunces',serif !important; font-size:18px !important; font-weight:450 !important; color:var(--paper) !important; line-height:1.5 !important; margin-bottom:24px !important; }
.testimonial-grid .elementor-testimonial__name{ color:var(--paper) !important; font-size:14px !important; font-weight:600 !important; }
.testimonial-grid .elementor-testimonial__title{ color:var(--text-on-ink-muted) !important; font-size:12.5px !important; }
.testimonial-grid .elementor-testimonial__image{ display:none !important; }
@media(max-width:820px){ .testimonial-grid{ grid-template-columns:1fr !important; } }

/* ---------- Split (about preview / story) ---------- */
.split{ display:grid !important; grid-template-columns:0.85fr 1.15fr !important; gap:64px !important; align-items:center !important; }
.split.reverse{ grid-template-columns:1.15fr 0.85fr !important; }
.split-visual .arch-frame{ aspect-ratio:1/1; }
@media(max-width:900px){ .split, .split.reverse{ grid-template-columns:1fr !important; gap:36px !important; } }

/* ---------- Final CTA band ---------- */
.cta-band h2{ font-size:clamp(28px,4vw,44px) !important; margin-bottom:16px !important; }
.cta-band p{ color:var(--text-on-ink-muted) !important; margin-bottom:32px !important; font-size:16px !important; max-width:600px; margin-left:auto; margin-right:auto; }
.cta-band .hero-ctas{ justify-content:center !important; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero h1{ font-size:clamp(34px,5vw,54px) !important; }
.breadcrumb{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:18px; }

/* ---------- About page ---------- */
.story-block p{ font-size:16.5px !important; color:var(--text) !important; }
.pillar-grid{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:1px !important; background:var(--line) !important; border:1px solid var(--line) !important; }
.pillar-card{ background:var(--white) !important; padding:34px 30px !important; }
.pillar-card h3{ font-size:19px !important; margin-bottom:10px !important; }
.pillar-card p{ font-size:14.5px !important; margin:0 !important; }
@media(max-width:700px){ .pillar-grid{ grid-template-columns:1fr !important; } }

/* ---------- Stat row ---------- */
.stat-row{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:1px !important; background:var(--line-on-ink) !important; }
.stat-cell{ background:var(--ink-soft) !important; padding:34px 26px !important; text-align:center !important; }
.stat-cell strong{ display:block; font-family:'Fraunces',serif; font-size:38px; color:var(--gold-light); font-weight:560; }
.stat-cell span{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-on-ink-muted); }
@media(max-width:820px){ .stat-row{ grid-template-columns:1fr 1fr !important; } }

/* ---------- Invest: how it works ---------- */
.step-row{ display:grid !important; grid-template-columns:100px 1fr !important; gap:28px !important; padding:30px 0 !important; border-top:1px solid var(--line-on-ink) !important; }
.step-num{ font-family:'Fraunces',serif; font-size:44px; color:var(--gold-light); font-weight:450; }
.step-body h3{ font-size:19px !important; margin-bottom:8px !important; }
.step-body p{ margin:0 !important; font-size:14.5px !important; max-width:520px; }
@media(max-width:600px){ .step-row{ grid-template-columns:1fr !important; gap:8px !important; } }

/* ---------- FAQ accordion (Elementor native accordion widget) ---------- */
.faq .elementor-accordion-item{ border-top:1px solid var(--line) !important; border-bottom:none !important; }
.faq .elementor-accordion-item:last-child{ border-bottom:1px solid var(--line) !important; }
.faq .elementor-tab-title{ font-family:'Fraunces',serif !important; font-size:18px !important; font-weight:450 !important; color:var(--ink) !important; padding:22px 4px !important; background:none !important; }
.faq .elementor-tab-content{ font-size:14.5px !important; color:var(--text-muted) !important; padding:0 4px 24px !important; border-top:none !important; max-width:640px; }
.faq .elementor-accordion-icon{ color:var(--gold-deep) !important; }
.faq .elementor-tab-title.elementor-active .elementor-accordion-icon{ color:var(--gold) !important; }

/* ---------- Listings: filter bar ---------- */
.filter-bar{ display:flex !important; gap:12px !important; flex-wrap:wrap; align-items:center !important; padding:22px 0 !important; border-top:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important; position:sticky !important; top:var(--header-h) !important; background:var(--paper) !important; z-index:40; }
.filter-group{ display:flex !important; gap:8px !important; flex-wrap:wrap; }
.filter-chip, .filter-chip .elementor-button{
  font-family:'IBM Plex Mono',monospace !important; font-size:12px !important; letter-spacing:0.03em;
  padding:9px 16px !important; border:1px solid var(--line) !important; border-radius:26px !important;
  background:var(--white) !important; cursor:pointer; color:var(--text) !important; transition:all .15s ease;
  box-shadow:none !important;
}
.filter-chip:hover, .filter-chip .elementor-button:hover{ border-color:var(--ink) !important; }
.filter-chip.active, .filter-chip.active .elementor-button{ background:var(--ink) !important; border-color:var(--ink) !important; color:var(--paper) !important; }
.filter-select select{ margin-left:auto; font-family:'IBM Plex Mono',monospace !important; font-size:12px !important; padding:9px 14px !important; border:1px solid var(--line) !important; border-radius:26px !important; background:var(--white) !important; color:var(--text) !important; }
.filter-count{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-muted); margin-left:6px; }

.listing-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:28px !important; padding-top:20px; }
@media(max-width:980px){ .listing-grid{ grid-template-columns:1fr 1fr !important; } }
@media(max-width:640px){ .listing-grid{ grid-template-columns:1fr !important; } }
.listing-card{ background:var(--white) !important; border:1px solid var(--line) !important; border-radius:6px !important; overflow:hidden !important; transition:transform .2s ease, box-shadow .2s ease; }
.listing-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.listing-media{ position:relative !important; }
.listing-media .arch-frame{ border-radius:0 !important; aspect-ratio:4/3; }
.listing-badge{ position:absolute !important; top:14px !important; left:14px !important; background:var(--ink) !important; color:var(--paper) !important; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; padding:6px 12px !important; border-radius:20px !important; z-index:2; }
.listing-price{ position:absolute !important; bottom:14px !important; right:14px !important; background:var(--gold) !important; color:var(--ink) !important; font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:12.5px; padding:7px 13px !important; border-radius:20px !important; z-index:2; }
.listing-body{ padding:22px 22px 24px !important; }
.listing-loc{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:8px; }
.listing-body h3{ font-size:19px !important; margin-bottom:8px !important; }
.listing-specs{ font-size:13px !important; color:var(--text-muted) !important; margin-bottom:18px !important; }
.listing-actions{ display:flex !important; gap:10px !important; }
.listing-actions .btn{ flex:1; padding:11px 14px !important; font-size:13px !important; text-align:center; }
.no-results{ display:none; text-align:center; padding:60px 0; color:var(--text-muted); font-family:'IBM Plex Mono',monospace; font-size:13px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:64px !important; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr !important; gap:48px !important; } }
/* WPForms field styling matched to .form-field look */
.wpforms-container .wpforms-field-label{ font-family:'IBM Plex Mono',monospace !important; font-size:11.5px !important; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted) !important; font-weight:400 !important; margin-bottom:8px !important; }
.wpforms-container input[type=text], .wpforms-container input[type=email], .wpforms-container input[type=tel], .wpforms-container textarea{
  width:100% !important; padding:14px 16px !important; border:1px solid var(--line) !important; background:var(--white) !important;
  border-radius:4px !important; font-family:'Public Sans',sans-serif !important; font-size:15px !important; color:var(--text) !important;
  transition:border-color .15s ease; box-shadow:none !important;
}
.wpforms-container input:focus, .wpforms-container textarea:focus{ border-color:var(--gold) !important; outline:none !important; box-shadow:none !important; }
.wpforms-container textarea{ min-height:120px !important; }
.wpforms-container button[type=submit]{
  display:inline-flex !important; width:100% !important; justify-content:center; align-items:center;
  padding:14px 26px !important; border-radius:var(--arch-r) !important; background:var(--gold) !important; color:var(--ink) !important;
  font-family:'Public Sans',sans-serif !important; font-weight:600 !important; font-size:14.5px !important; border:none !important;
  box-shadow:0 10px 24px -10px rgba(184,137,43,0.55) !important; transition:transform .18s ease, background .18s ease;
}
.wpforms-container button[type=submit]:hover{ background:var(--gold-light) !important; transform:translateY(-2px); }
.wpforms-confirmation-container{ background:var(--ink) !important; color:var(--paper) !important; padding:20px 22px !important; border-radius:6px !important; font-size:14.5px !important; }

.info-list{ margin-top:32px !important; }
.info-item{ display:flex !important; gap:16px !important; padding:18px 0 !important; border-top:1px solid var(--line) !important; }
.info-item:last-child{ border-bottom:1px solid var(--line) !important; }
.info-icon{ width:40px; height:40px; flex-shrink:0; border-radius:40px 40px 4px 4px; background:var(--paper-deep); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.info-item h4{ font-size:14.5px !important; margin-bottom:4px !important; color:var(--ink) !important; font-family:'Public Sans',sans-serif !important; font-weight:600 !important; }
.info-item p{ margin:0 !important; font-size:14px !important; }

.map-frame{ margin-top:32px !important; border-radius:6px !important; overflow:hidden !important; border:1px solid var(--line) !important; }
.map-frame iframe{ width:100% !important; }

.social-row{ display:flex !important; gap:12px !important; }
.social-btn, .xpro-social-icon{ width:42px !important; height:42px !important; border:1px solid var(--line) !important; border-radius:42px 42px 4px 4px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:var(--ink) !important; transition:all .15s ease; background:transparent !important; }
.social-btn:hover, .xpro-social-icon:hover{ background:var(--ink) !important; border-color:var(--ink) !important; color:var(--paper) !important; }

/* ---------- Footer ---------- */
.footer-top{ display:grid !important; grid-template-columns:1.4fr 0.8fr 0.8fr 1fr !important; gap:40px !important; padding-bottom:56px !important; }
@media(max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr !important; row-gap:36px !important; } }
@media(max-width:560px){ .footer-top{ grid-template-columns:1fr !important; } }
.footer-brand p{ max-width:280px; font-size:14px !important; margin-top:16px !important; }
.footer-col h4{ font-family:'IBM Plex Mono',monospace !important; font-size:11.5px !important; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-light) !important; margin-bottom:18px !important; font-weight:400 !important; }
.footer-col a, .footer-col p{ display:block; font-size:14px !important; color:var(--text-on-ink-muted) !important; margin-bottom:12px !important; text-decoration:none; }
.footer-col a:hover{ color:var(--paper) !important; }
.footer-bottom{ border-top:1px solid var(--line-on-ink) !important; padding:24px 0 0 !important; display:flex !important; justify-content:space-between !important; align-items:center !important; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ margin:0 !important; font-size:12.5px !important; color:var(--text-on-ink-muted) !important; }
.footer-bottom .social-btn, .footer-bottom .xpro-social-icon{ border-color:var(--line-on-ink) !important; color:var(--paper) !important; }
.footer-bottom .social-btn:hover, .footer-bottom .xpro-social-icon:hover{ background:var(--gold) !important; border-color:var(--gold) !important; color:var(--ink) !important; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }