/* ════════════════════════════════════════════════════════════════
   BookNewProperty — Front Page CSS
   ────────────────────────────────────────────────────────────────
   Design direction: refined editorial luxury — dark navy base with
   a single warm orange accent. Built section-by-section as we
   implement the architecture phases.

   Naming: every class is prefixed `bnp-fp-` (BNP Front Page).
   No collisions with project-page (`v3-*`), header (`bnp-*`),
   or card (`bnp-pcard-*`).

   !important is used throughout because the Hello Elementor parent
   theme + leftover Elementor classes can otherwise win cascade.
   ════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   1. PAGE-LEVEL RESET & TOKENS
   ────────────────────────────────────────────────────────────── */
.bnp-fp{
  --bnp-navy:    #0f172a;
  --bnp-navy-2:  #0b1220;
  --bnp-navy-3:  #1e293b;
  --bnp-orange:  #f97316;
  --bnp-orange-2:#fbbf24;
  --bnp-text:    #1e293b;
  --bnp-text-mute:#64748b;
  --bnp-white:   #ffffff;
  --bnp-border:  #e5e7eb;
  --bnp-soft:    #f8fafc;
  --bnp-max:     1240px;

  --ff-head:     'Playfair Display', Georgia, serif;
  --ff-body:     'Plus Jakarta Sans', 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
}

.bnp-fp,
.bnp-fp *,
.bnp-fp *::before,
.bnp-fp *::after{
  box-sizing:border-box!important;
}
.bnp-fp{
  font-family:var(--ff-body)!important;
  color:var(--bnp-text)!important;
  background:var(--bnp-white)!important;
  -webkit-font-smoothing:antialiased!important;
}
.bnp-fp h1,.bnp-fp h2,.bnp-fp h3,.bnp-fp h4,.bnp-fp p,.bnp-fp ul,.bnp-fp ol,.bnp-fp li{
  margin:0!important;padding:0!important;list-style:none!important;
}
.bnp-fp a{text-decoration:none!important;color:inherit!important}

/* Shared container — matches header width exactly */
.bnp-fp-wrap{
  max-width:var(--bnp-max)!important;
  margin:0 auto!important;
  padding:0 24px!important;
  position:relative!important;
  z-index:2!important;
}


/* ──────────────────────────────────────────────────────────────
   2. HERO SECTION
   ──────────────────────────────────────────────────────────────
   Dark navy hero with one atmospheric orange orb in the upper right.
   No competing animations. Generous vertical padding to give the H1
   room to breathe — but NOT min-height:100vh (forces scrolling past
   with no payoff).
   ────────────────────────────────────────────────────────────── */
.bnp-fp-hero{
  position:relative!important;
  background:var(--bnp-navy)!important;
  color:var(--bnp-white)!important;
  padding:80px 0 64px!important;
  overflow:hidden!important;
}

/* Atmospheric layer — one orange orb top-right + faint grid mask */
.bnp-fp-hero-bg{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:1!important;
}
.bnp-fp-hero-orb{
  position:absolute!important;
  width:720px!important;
  height:720px!important;
  border-radius:50%!important;
  top:-260px!important;
  right:-200px!important;
  background:radial-gradient(circle, rgba(249,115,22,.22) 0%, rgba(249,115,22,.08) 35%, transparent 70%)!important;
  filter:blur(8px)!important;
}
.bnp-fp-hero-grid{
  position:absolute!important;
  inset:0!important;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px)!important;
  background-size:64px 64px!important;
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 40%, black 30%, transparent 100%)!important;
  mask-image:radial-gradient(ellipse 80% 90% at 50% 40%, black 30%, transparent 100%)!important;
}

/* Eyebrow pill — animated pulse dot signals freshness */
.bnp-fp-hero-eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:6px 14px!important;
  background:rgba(249,115,22,.10)!important;
  border:1px solid rgba(249,115,22,.28)!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:1.2px!important;
  color:#fb923c!important;
  margin-bottom:22px!important;
}
.bnp-fp-hero-pulse{
  width:6px!important;height:6px!important;
  border-radius:50%!important;
  background:var(--bnp-orange)!important;
  flex-shrink:0!important;
  animation:bnpFpPulse 2s ease-in-out infinite!important;
}
@keyframes bnpFpPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(1.35)}
}

/* H1 — Playfair Display, big and editorial. City name picks up the
   gradient treatment to draw the eye to the personalized data. */
.bnp-fp-hero-h1{
  font-family:var(--ff-head)!important;
  font-size:clamp(40px,6vw,72px)!important;
  font-weight:700!important;
  line-height:1.06!important;
  letter-spacing:-1.5px!important;
  color:var(--bnp-white)!important;
  margin:0 0 14px!important;
  max-width:820px!important;
}
.bnp-fp-hero-h1 em{
  font-style:normal!important;
  background:linear-gradient(135deg, var(--bnp-orange) 0%, var(--bnp-orange-2) 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

/* Subtitle — restrained white-alpha on dark navy. Plus Jakarta Sans. */
.bnp-fp-hero-sub{
  font-family:var(--ff-body)!important;
  font-size:17px!important;
  line-height:1.65!important;
  color:rgba(255,255,255,.6)!important;
  max-width:560px!important;
  margin:0 0 36px!important;
}


/* ──────────────────────────────────────────────────────────────
   3. SEARCH BAR — glass-effect, 3 fields + CTA
   ──────────────────────────────────────────────────────────────
   Single horizontal capsule containing 3 labeled fields separated by
   faint vertical hairlines. Big orange CTA on the right is the only
   solid color in the hero — so it's unmissable.
   On mobile, collapses to a vertical stack.
   ────────────────────────────────────────────────────────────── */
.bnp-fp-search{
  max-width:880px!important;
  margin:0 0 56px!important;
}
.bnp-fp-search-inner{
  display:flex!important;
  align-items:stretch!important;
  gap:0!important;
  padding:8px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:16px!important;
  -webkit-backdrop-filter:blur(20px)!important;
  backdrop-filter:blur(20px)!important;
  box-shadow:
    0 24px 64px rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.bnp-fp-search-field{
  flex:1!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:8px 16px!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  min-width:0!important;
  cursor:text!important;
}
.bnp-fp-search-field:last-of-type{border-right:none!important}
.bnp-fp-search-field-keyword{flex:1.4!important}
.bnp-fp-search-field-type{flex:1!important}
.bnp-fp-search-field-city{flex:1!important;cursor:pointer!important}

.bnp-fp-search-label{
  font-family:var(--ff-body)!important;
  font-size:10px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:1.1px!important;
  color:rgba(255,255,255,.35)!important;
  margin-bottom:3px!important;
  display:block!important;
}
.bnp-fp-search-input-wrap{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.bnp-fp-search-input-icon{
  width:14px!important;height:14px!important;
  stroke:rgba(255,255,255,.45)!important;
  fill:none!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  flex-shrink:0!important;
}
.bnp-fp-search-field input,
.bnp-fp-search-field select{
  flex:1!important;
  background:none!important;
  border:none!important;
  outline:none!important;
  color:var(--bnp-white)!important;
  font-family:var(--ff-body)!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.4!important;
  padding:0!important;
  width:100%!important;
  min-width:0!important;
  cursor:inherit!important;
  /* native select styling reset */
  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
}
.bnp-fp-search-field input::placeholder{color:rgba(255,255,255,.4)!important}
.bnp-fp-search-field select{cursor:pointer!important}
.bnp-fp-search-field select option{
  background:var(--bnp-navy-3)!important;
  color:var(--bnp-white)!important;
}
.bnp-fp-search-field input:focus,
.bnp-fp-search-field select:focus{outline:none!important}
.bnp-fp-search-field:focus-within .bnp-fp-search-input-icon{stroke:var(--bnp-orange)!important}
.bnp-fp-search-field:focus-within .bnp-fp-search-label{color:#fb923c!important}

/* CTA button — single solid orange element. Gradient + glow. */
.bnp-fp-search-go{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 24px!important;
  background:linear-gradient(135deg, var(--bnp-orange) 0%, var(--bnp-orange-2) 100%)!important;
  color:var(--bnp-white)!important;
  border:none!important;
  border-radius:11px!important;
  font-family:var(--ff-body)!important;
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:.2px!important;
  cursor:pointer!important;
  white-space:nowrap!important;
  flex-shrink:0!important;
  box-shadow:0 6px 20px rgba(249,115,22,.45)!important;
  transition:transform .15s ease, box-shadow .15s ease!important;
}
.bnp-fp-search-go:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 10px 28px rgba(249,115,22,.55)!important;
}
.bnp-fp-search-go:active{transform:translateY(0)!important}
.bnp-fp-search-go svg{
  width:16px!important;height:16px!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:2.4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}


/* ──────────────────────────────────────────────────────────────
   4. HERO STAT STRIP
   ──────────────────────────────────────────────────────────────
   Four equal-width cells separated by vertical hairlines. Each cell
   has icon + big number + small label. Looks like an infographic strip.
   ────────────────────────────────────────────────────────────── */
.bnp-fp-hero-stats{
  display:grid!important;
  grid-template-columns:repeat(4, 1fr)!important;
  gap:0!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  padding-top:36px!important;
  max-width:880px!important;
}
.bnp-fp-hero-stat{
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  grid-template-rows:auto auto!important;
  column-gap:14px!important;
  row-gap:2px!important;
  align-items:center!important;
  padding:0 22px!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  min-width:0!important;
}
.bnp-fp-hero-stat:first-child{padding-left:0!important}
.bnp-fp-hero-stat:last-child{padding-right:0!important;border-right:none!important}
.bnp-fp-hero-stat-icon{
  grid-row:1 / span 2!important;
  width:38px!important;height:38px!important;
  border-radius:10px!important;
  background:rgba(249,115,22,.12)!important;
  border:1px solid rgba(249,115,22,.22)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-shrink:0!important;
}
.bnp-fp-hero-stat-icon svg{
  width:18px!important;height:18px!important;
  stroke:var(--bnp-orange)!important;
  fill:none!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.bnp-fp-hero-stat-num{
  font-family:var(--ff-head)!important;
  font-size:26px!important;
  font-weight:700!important;
  color:var(--bnp-white)!important;
  line-height:1.1!important;
  letter-spacing:-.5px!important;
}
.bnp-fp-hero-stat-lbl{
  font-family:var(--ff-body)!important;
  font-size:11.5px!important;
  font-weight:600!important;
  text-transform:uppercase!important;
  letter-spacing:.8px!important;
  color:rgba(255,255,255,.5)!important;
  line-height:1.2!important;
}


/* ──────────────────────────────────────────────────────────────
   5. RESPONSIVE — hero
   ──────────────────────────────────────────────────────────────
   • ≤ 880px : search form stacks vertically, fields full-width
   • ≤ 640px : H1 size drops, stat strip → 2x2 grid
   • ≤ 420px : tighter padding, single-column stat strip
   ────────────────────────────────────────────────────────────── */
@media(max-width:880px){
  .bnp-fp-hero{padding:56px 0 48px!important}
  .bnp-fp-search-inner{
    flex-direction:column!important;
    align-items:stretch!important;
    padding:6px!important;
  }
  .bnp-fp-search-field{
    flex:none!important;
    border-right:none!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    padding:10px 14px!important;
  }
  .bnp-fp-search-field:last-of-type{border-bottom:none!important}
  .bnp-fp-search-go{
    width:100%!important;
    justify-content:center!important;
    padding:14px 24px!important;
    margin-top:6px!important;
  }
}
@media(max-width:640px){
  .bnp-fp-hero-h1{font-size:36px!important;letter-spacing:-1px!important}
  .bnp-fp-hero-sub{font-size:15px!important;margin-bottom:28px!important}
  .bnp-fp-hero-stats{
    grid-template-columns:1fr 1fr!important;
    row-gap:28px!important;
    column-gap:0!important;
  }
  .bnp-fp-hero-stat{padding:0 16px!important}
  .bnp-fp-hero-stat:nth-child(2){border-right:none!important;padding-right:0!important}
  .bnp-fp-hero-stat:nth-child(3){padding-left:0!important}
  .bnp-fp-hero-stat-num{font-size:22px!important}
}
@media(max-width:420px){
  .bnp-fp-hero{padding:44px 0 36px!important}
  .bnp-fp-hero-h1{font-size:32px!important}
  .bnp-fp-hero-stats{grid-template-columns:1fr!important;row-gap:20px!important}
  .bnp-fp-hero-stat{
    padding:0!important;
    border-right:none!important;
    padding-bottom:20px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }
  .bnp-fp-hero-stat:last-child{padding-bottom:0!important;border-bottom:none!important}
}


/* ════════════════════════════════════════════════════════════════
   6. PROJECTS GRID SECTION (reusable)
   ────────────────────────────────────────────────────────────────
   Used for Featured / New Launch / Pre-Launch sections. Each is the
   same structure: section header (icon + title + accent line +
   view-all link) followed by a 3-column responsive grid of cards.

   Variants:
     .bnp-fp-pg            — white background (default)
     .bnp-fp-pg-tinted     — soft grey background for visual rhythm
   ════════════════════════════════════════════════════════════════ */
.bnp-fp-pg{
  padding:72px 0!important;
  background:var(--bnp-white)!important;
}
.bnp-fp-pg-tinted{
  background:var(--bnp-soft)!important;
}

/* ── Section header — mirrors v3-sec-head on the project page so the
   visual language is consistent across the entire site. */
.bnp-fp-pg-head{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  margin-bottom:36px!important;
  flex-wrap:wrap!important;
}
.bnp-fp-pg-icon{
  width:44px!important;
  height:44px!important;
  border-radius:11px!important;
  background:linear-gradient(135deg, var(--bnp-navy) 0%, var(--bnp-navy-3) 100%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-shrink:0!important;
  box-shadow:0 6px 14px rgba(15,23,42,.18)!important;
}
.bnp-fp-pg-icon svg{
  width:22px!important;
  height:22px!important;
  stroke:#fff!important;
  fill:none!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.bnp-fp-pg-titles{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  min-width:0!important;
}
.bnp-fp-pg-title{
  font-family:var(--ff-head)!important;
  font-size:clamp(24px,3vw,32px)!important;
  font-weight:700!important;
  line-height:1.15!important;
  letter-spacing:-.5px!important;
  color:var(--bnp-navy)!important;
  margin:0!important;
}
.bnp-fp-pg-subtitle{
  font-family:var(--ff-body)!important;
  font-size:14px!important;
  line-height:1.55!important;
  color:var(--bnp-text-mute)!important;
  margin:0!important;
  max-width:540px!important;
}
.bnp-fp-pg-accent{
  flex:1!important;
  height:1px!important;
  background:linear-gradient(90deg, var(--bnp-border) 0%, transparent 100%)!important;
  min-width:30px!important;
  align-self:center!important;
  margin-top:4px!important;
  position:relative!important;
}
.bnp-fp-pg-accent::before{
  content:''!important;
  position:absolute!important;
  left:0!important;
  top:-3px!important;
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:var(--bnp-orange)!important;
}

.bnp-fp-pg-view-all{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:9px 16px!important;
  background:rgba(249,115,22,.08)!important;
  border:1px solid rgba(249,115,22,.22)!important;
  border-radius:999px!important;
  font-family:var(--ff-body)!important;
  font-size:13px!important;
  font-weight:700!important;
  color:#c2410c!important;
  white-space:nowrap!important;
  transition:background .15s, border-color .15s, transform .15s!important;
  flex-shrink:0!important;
}
.bnp-fp-pg-view-all:hover{
  background:rgba(249,115,22,.14)!important;
  border-color:rgba(249,115,22,.38)!important;
  color:#9a3412!important;
  transform:translateX(2px)!important;
}
.bnp-fp-pg-view-all svg{
  width:13px!important;
  height:13px!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:2.4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* ── Card grid — 3 columns on desktop, 2 on tablet, 1 on phone.
   Uses minmax for graceful column collapse. The 280px floor is the
   minimum legible card width before the image gets too cramped. */
.bnp-fp-pg-grid{
  display:grid!important;
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  gap:24px!important;
}

/* Empty state — only shown if caller passed bnp_pg_empty_text and
   the query returned zero. Most sections omit this and just hide. */
.bnp-fp-pg-empty{
  padding:48px 24px!important;
  text-align:center!important;
  font-size:14px!important;
  color:var(--bnp-text-mute)!important;
  background:var(--bnp-soft)!important;
  border:1px dashed var(--bnp-border)!important;
  border-radius:12px!important;
}

/* Responsive */
@media(max-width:1024px){
  .bnp-fp-pg-grid{grid-template-columns:repeat(2, minmax(0, 1fr))!important}
}
@media(max-width:680px){
  .bnp-fp-pg{padding:56px 0!important}
  .bnp-fp-pg-grid{grid-template-columns:1fr!important;gap:18px!important}
  .bnp-fp-pg-head{margin-bottom:28px!important;gap:12px!important}
  .bnp-fp-pg-icon{width:38px!important;height:38px!important}
  .bnp-fp-pg-icon svg{width:18px!important;height:18px!important}
  .bnp-fp-pg-accent{display:none!important}
  .bnp-fp-pg-view-all{
    width:100%!important;
    justify-content:center!important;
    margin-top:8px!important;
    order:99!important;
  }
}


/* ════════════════════════════════════════════════════════════════
   7. MICRO-MARKETS SECTION
   ────────────────────────────────────────────────────────────────
   Grid of area cards. Each card has its own gradient background
   variant cycling through 4 options for visual rhythm. Cards are
   compact info-cards, not photo cards — area name + count + tagline.
   ════════════════════════════════════════════════════════════════ */
.bnp-fp-mm{
  padding:72px 0!important;
  background:var(--bnp-white)!important;
}

.bnp-fp-mm-grid{
  display:grid!important;
  grid-template-columns:repeat(4, minmax(0, 1fr))!important;
  gap:18px!important;
}

.bnp-fp-mm-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  padding:24px 22px!important;
  border-radius:16px!important;
  overflow:hidden!important;
  text-decoration:none!important;
  color:var(--bnp-navy)!important;
  transition:transform .25s ease, box-shadow .25s ease!important;
  min-height:180px!important;
  isolation:isolate!important;
  border:1px solid var(--bnp-border)!important;
}
.bnp-fp-mm-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 14px 32px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05)!important;
  border-color:transparent!important;
}

/* Decorative blob — positioned via the variant classes below.
   Sits behind the body (z-index trick via isolation). */
.bnp-fp-mm-card-deco{
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  opacity:.6!important;
  transition:opacity .25s ease!important;
}
.bnp-fp-mm-card:hover .bnp-fp-mm-card-deco{opacity:1!important}

/* 4 variants — different gradient seed colors for visual rhythm. */
.bnp-fp-mm-v1{background:linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%)!important;border-color:#fed7aa!important}
.bnp-fp-mm-v1 .bnp-fp-mm-card-deco{
  background:radial-gradient(circle at 100% 0%, rgba(249,115,22,.18) 0%, transparent 60%)!important;
}
.bnp-fp-mm-v2{background:linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%)!important;border-color:#bfdbfe!important}
.bnp-fp-mm-v2 .bnp-fp-mm-card-deco{
  background:radial-gradient(circle at 100% 0%, rgba(59,130,246,.18) 0%, transparent 60%)!important;
}
.bnp-fp-mm-v3{background:linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%)!important;border-color:#bbf7d0!important}
.bnp-fp-mm-v3 .bnp-fp-mm-card-deco{
  background:radial-gradient(circle at 100% 0%, rgba(34,197,94,.18) 0%, transparent 60%)!important;
}
.bnp-fp-mm-v4{background:linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%)!important;border-color:#f5d0fe!important}
.bnp-fp-mm-v4 .bnp-fp-mm-card-deco{
  background:radial-gradient(circle at 100% 0%, rgba(168,85,247,.18) 0%, transparent 60%)!important;
}

.bnp-fp-mm-card-body{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  gap:10px!important;
}
.bnp-fp-mm-card-head{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
}
.bnp-fp-mm-card-name{
  font-family:var(--ff-head)!important;
  font-size:20px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:-.3px!important;
  color:var(--bnp-navy)!important;
}
.bnp-fp-mm-card-count{
  display:inline-flex!important;
  align-items:center!important;
  width:fit-content!important;
  padding:3px 10px!important;
  background:rgba(15,23,42,.08)!important;
  border-radius:999px!important;
  font-family:var(--ff-body)!important;
  font-size:11px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  color:var(--bnp-navy)!important;
}
.bnp-fp-mm-card-tagline{
  font-family:var(--ff-body)!important;
  font-size:13px!important;
  line-height:1.5!important;
  color:var(--bnp-text-mute)!important;
  margin:0!important;
  /* Clamp to 2 lines so all cards stay roughly equal height */
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.bnp-fp-mm-card-cta{
  margin-top:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  font-family:var(--ff-body)!important;
  font-size:12.5px!important;
  font-weight:700!important;
  color:var(--bnp-navy)!important;
  padding-top:8px!important;
  transition:gap .2s ease, color .2s ease!important;
}
.bnp-fp-mm-card:hover .bnp-fp-mm-card-cta{
  gap:10px!important;
  color:var(--bnp-orange)!important;
}
.bnp-fp-mm-card-cta svg{
  width:14px!important;
  height:14px!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:2.4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Responsive */
@media(max-width:1024px){
  .bnp-fp-mm-grid{grid-template-columns:repeat(2, minmax(0, 1fr))!important}
}
@media(max-width:480px){
  .bnp-fp-mm{padding:56px 0!important}
  .bnp-fp-mm-grid{grid-template-columns:1fr!important;gap:14px!important}
  .bnp-fp-mm-card{min-height:auto!important;padding:20px 18px!important}
  .bnp-fp-mm-card-name{font-size:18px!important}
}


/* ════════════════════════════════════════════════════════════════
   8. TOP DEVELOPERS SECTION
   ────────────────────────────────────────────────────────────────
   Grid of logo cards. Each card centers the logo (or initials
   fallback), then shows name + project count badge.
   ════════════════════════════════════════════════════════════════ */
.bnp-fp-td{
  padding:72px 0!important;
}

.bnp-fp-td-grid{
  display:grid!important;
  grid-template-columns:repeat(4, minmax(0, 1fr))!important;
  gap:18px!important;
}

.bnp-fp-td-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:28px 20px 22px!important;
  background:var(--bnp-white)!important;
  border:1px solid var(--bnp-border)!important;
  border-radius:16px!important;
  text-decoration:none!important;
  color:var(--bnp-navy)!important;
  text-align:center!important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease!important;
  gap:14px!important;
  min-height:200px!important;
}
.bnp-fp-td-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(249,115,22,.4)!important;
  box-shadow:0 14px 28px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04)!important;
}

.bnp-fp-td-logo{
  width:88px!important;
  height:88px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)!important;
  border:1px solid #e2e8f0!important;
  overflow:hidden!important;
  flex-shrink:0!important;
}
.bnp-fp-td-logo img{
  max-width:72px!important;
  max-height:60px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  display:block!important;
}
.bnp-fp-td-initials{
  font-family:var(--ff-head)!important;
  font-size:30px!important;
  font-weight:700!important;
  color:var(--bnp-orange)!important;
  letter-spacing:-.5px!important;
  line-height:1!important;
}

.bnp-fp-td-name{
  font-family:var(--ff-body)!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.3!important;
  color:var(--bnp-navy)!important;
  letter-spacing:-.1px!important;
  /* Clamp to 2 lines so names don't break the card height */
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}

.bnp-fp-td-count{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:4px 10px!important;
  background:#fff7ed!important;
  border:1px solid #fed7aa!important;
  border-radius:999px!important;
  font-family:var(--ff-body)!important;
  font-size:11px!important;
  font-weight:700!important;
  color:#c2410c!important;
  letter-spacing:.2px!important;
  line-height:1.2!important;
  margin-top:auto!important;
}
.bnp-fp-td-count svg{
  width:10px!important;
  height:10px!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Responsive */
@media(max-width:1024px){
  .bnp-fp-td-grid{grid-template-columns:repeat(2, minmax(0, 1fr))!important}
}
@media(max-width:480px){
  .bnp-fp-td{padding:56px 0!important}
  .bnp-fp-td-grid{grid-template-columns:1fr!important;gap:14px!important}
  .bnp-fp-td-card{min-height:auto!important;padding:24px 18px 20px!important}
  .bnp-fp-td-logo{width:76px!important;height:76px!important}
}


/* ════════════════════════════════════════════════════════════════
   9. POPULAR SEARCHES SECTION (SEO link cloud)
   ────────────────────────────────────────────────────────────────
   Three-column group layout. Each group has a small heading and a
   flowing list of pill-shaped link tags. Pure prose grid — no
   images, no JS. Built to be crawler-friendly and lightning fast.
   ════════════════════════════════════════════════════════════════ */
.bnp-fp-ps{
  padding:72px 0!important;
  background:var(--bnp-white)!important;
}

.bnp-fp-ps-groups{
  display:grid!important;
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  gap:36px!important;
}

.bnp-fp-ps-group{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
}
.bnp-fp-ps-group-title{
  font-family:var(--ff-body)!important;
  font-size:11px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:1.4px!important;
  color:var(--bnp-text-mute)!important;
  margin:0!important;
  padding-bottom:10px!important;
  border-bottom:1px solid var(--bnp-border)!important;
  position:relative!important;
}
.bnp-fp-ps-group-title::after{
  content:''!important;
  position:absolute!important;
  left:0!important;
  bottom:-1px!important;
  width:28px!important;
  height:2px!important;
  background:linear-gradient(90deg, var(--bnp-orange) 0%, var(--bnp-orange-2) 100%)!important;
  border-radius:1px!important;
}

.bnp-fp-ps-list{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
}

.bnp-fp-ps-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:9px 14px!important;
  background:var(--bnp-soft)!important;
  border:1px solid var(--bnp-border)!important;
  border-radius:8px!important;
  font-family:var(--ff-body)!important;
  font-size:13px!important;
  font-weight:600!important;
  color:var(--bnp-navy)!important;
  transition:background .15s, border-color .15s, color .15s, transform .15s!important;
  line-height:1.3!important;
}
.bnp-fp-ps-pill:hover{
  background:#fff7ed!important;
  border-color:rgba(249,115,22,.4)!important;
  color:#c2410c!important;
  transform:translateX(2px)!important;
}
.bnp-fp-ps-pill svg{
  width:13px!important;
  height:13px!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  opacity:.5!important;
  flex-shrink:0!important;
  transition:opacity .15s, transform .15s!important;
}
.bnp-fp-ps-pill:hover svg{
  opacity:1!important;
  transform:translate(1px, -1px)!important;
}
.bnp-fp-ps-pill-count{
  flex-shrink:0!important;
  font-size:11px!important;
  font-weight:700!important;
  padding:2px 7px!important;
  background:rgba(15,23,42,.08)!important;
  color:var(--bnp-navy)!important;
  border-radius:10px!important;
  line-height:1.4!important;
}
.bnp-fp-ps-pill:hover .bnp-fp-ps-pill-count{
  background:#fed7aa!important;
  color:#9a3412!important;
}

/* Responsive */
@media(max-width:880px){
  .bnp-fp-ps-groups{
    grid-template-columns:1fr!important;
    gap:32px!important;
  }
}
@media(max-width:480px){
  .bnp-fp-ps{padding:56px 0!important}
}


/* ════════════════════════════════════════════════════════════════
   10. WHY US SECTION
   ────────────────────────────────────────────────────────────────
   4 numbered value-prop cards. Each has a giant outlined number
   in the corner (visual hook), a small orange icon, headline,
   and body copy. Distinctive without being loud.
   ────────────────────────────────────────────────────────────── */
.bnp-fp-wu{
  padding:72px 0!important;
}

.bnp-fp-wu-grid{
  display:grid!important;
  grid-template-columns:repeat(4, minmax(0, 1fr))!important;
  gap:20px!important;
}

.bnp-fp-wu-card{
  position:relative!important;
  padding:28px 24px 24px!important;
  background:var(--bnp-white)!important;
  border:1px solid var(--bnp-border)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease!important;
  min-height:240px!important;
  isolation:isolate!important;
}
.bnp-fp-wu-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(249,115,22,.35)!important;
  box-shadow:0 16px 36px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04)!important;
}

/* Big outlined number in the top-right corner. Acts as visual hook
   without dominating the card. Outline-style so it feels editorial,
   not bold. */
.bnp-fp-wu-num{
  position:absolute!important;
  top:14px!important;
  right:18px!important;
  font-family:var(--ff-head)!important;
  font-size:54px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:-2px!important;
  color:transparent!important;
  -webkit-text-stroke:1.5px rgba(249,115,22,.25)!important;
  z-index:-1!important;
  pointer-events:none!important;
  user-select:none!important;
}

.bnp-fp-wu-icon{
  width:48px!important;
  height:48px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg, rgba(249,115,22,.10) 0%, rgba(251,191,36,.10) 100%)!important;
  border:1px solid rgba(249,115,22,.20)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-shrink:0!important;
}
.bnp-fp-wu-icon svg{
  width:22px!important;
  height:22px!important;
  stroke:var(--bnp-orange)!important;
  fill:none!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.bnp-fp-wu-title{
  font-family:var(--ff-head)!important;
  font-size:19px!important;
  font-weight:700!important;
  line-height:1.25!important;
  letter-spacing:-.3px!important;
  color:var(--bnp-navy)!important;
  margin:0!important;
}
.bnp-fp-wu-body{
  font-family:var(--ff-body)!important;
  font-size:14px!important;
  line-height:1.6!important;
  color:var(--bnp-text-mute)!important;
  margin:0!important;
}

/* Responsive */
@media(max-width:1024px){
  .bnp-fp-wu-grid{grid-template-columns:repeat(2, minmax(0, 1fr))!important}
}
@media(max-width:560px){
  .bnp-fp-wu{padding:56px 0!important}
  .bnp-fp-wu-grid{grid-template-columns:1fr!important;gap:16px!important}
  .bnp-fp-wu-card{min-height:auto!important;padding:24px 22px 22px!important}
  .bnp-fp-wu-num{font-size:46px!important;top:12px!important;right:16px!important}
}


/* ════════════════════════════════════════════════════════════════
   11. NEWS & INSIGHTS SECTION
   ────────────────────────────────────────────────────────────────
   Three-card grid: featured large card (left, 2x width) + two
   smaller side cards stacked on the right. Adapted from the
   v2 dark-mode hp2-news design to the bnp-fp light-mode aesthetic.
   ════════════════════════════════════════════════════════════════ */
.bnp-fp-news{
  padding:72px 0!important;
  background:var(--bnp-white)!important;
}

.bnp-fp-news-grid{
  display:grid!important;
  grid-template-columns:2fr 1fr 1fr!important;
  gap:24px!important;
  align-items:stretch!important;
}

.bnp-fp-news-card{
  display:flex!important;
  flex-direction:column!important;
  text-decoration:none!important;
  color:var(--bnp-navy)!important;
  background:var(--bnp-white)!important;
  border:1px solid var(--bnp-border)!important;
  border-radius:16px!important;
  overflow:hidden!important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease!important;
}
.bnp-fp-news-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(249,115,22,.35)!important;
  box-shadow:0 14px 28px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04)!important;
}

.bnp-fp-news-thumb-wrap{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(135deg, var(--bnp-navy-3) 0%, var(--bnp-navy) 100%)!important;
}
.bnp-fp-news-card-lg .bnp-fp-news-thumb-wrap{
  aspect-ratio:16/10!important;
}
.bnp-fp-news-card-sm .bnp-fp-news-thumb-wrap{
  aspect-ratio:16/9!important;
}
.bnp-fp-news-thumb{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  transition:transform .4s ease!important;
}
.bnp-fp-news-card:hover .bnp-fp-news-thumb{
  transform:scale(1.04)!important;
}
.bnp-fp-news-thumb-fallback{
  width:100%!important;
  height:100%!important;
  background:linear-gradient(135deg, var(--bnp-navy-3) 0%, var(--bnp-navy) 100%)!important;
}

.bnp-fp-news-cat{
  position:absolute!important;
  top:14px!important;
  left:14px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:4px 12px!important;
  background:linear-gradient(135deg, var(--bnp-orange) 0%, var(--bnp-orange-2) 100%)!important;
  color:#fff!important;
  font-family:var(--ff-body)!important;
  font-size:10.5px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:1.1px!important;
  border-radius:999px!important;
  line-height:1.4!important;
  box-shadow:0 4px 12px rgba(249,115,22,.35)!important;
}

.bnp-fp-news-body{
  padding:20px 22px 22px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  flex:1!important;
}
.bnp-fp-news-title{
  font-family:var(--ff-head)!important;
  font-weight:700!important;
  line-height:1.3!important;
  letter-spacing:-.3px!important;
  color:var(--bnp-navy)!important;
  margin:0!important;
  /* Clamp to 3 lines for the large card, 2 for smaller */
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.bnp-fp-news-card-lg .bnp-fp-news-title{
  font-size:22px!important;
  -webkit-line-clamp:3!important;
}
.bnp-fp-news-card-sm .bnp-fp-news-title{
  font-size:16px!important;
  -webkit-line-clamp:3!important;
}
.bnp-fp-news-card:hover .bnp-fp-news-title{color:var(--bnp-orange)!important}

.bnp-fp-news-meta{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  font-family:var(--ff-body)!important;
  font-size:12px!important;
  font-weight:600!important;
  color:var(--bnp-text-mute)!important;
  margin-top:auto!important;
}
.bnp-fp-news-meta svg{
  width:13px!important;
  height:13px!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Responsive */
@media(max-width:880px){
  .bnp-fp-news-grid{
    grid-template-columns:1fr 1fr!important;
    gap:18px!important;
  }
  .bnp-fp-news-card-lg{grid-column:1 / -1!important}
  .bnp-fp-news-card-lg .bnp-fp-news-title{font-size:20px!important}
}
@media(max-width:540px){
  .bnp-fp-news{padding:56px 0!important}
  .bnp-fp-news-grid{grid-template-columns:1fr!important;gap:16px!important}
  .bnp-fp-news-card-lg .bnp-fp-news-title{font-size:18px!important}
  .bnp-fp-news-body{padding:18px 18px 18px!important}
}