/* ============================================================
   BGF Capital — Modern MFI Public Theme
   Loaded ONLY on public pages via layouts/frontend.blade.php.
   Never touches the member dashboard (master.blade.php).
   Loads after main.css + color.php → wins the cascade.
   ============================================================ */

/* Typefaces (Inter = body, Poppins = headings) are self-hosted in custom.css — loaded by the
   shared layouts/app.blade.php so the public site AND auth pages share one CDN-free font source. */

/* ── A. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Dark surfaces DERIVE from the brand primary (color.php --base-h/s at low lightness),
     so changing base_color in admin also moves the dark navy. Fallback #0E1633 if the
     vars are absent. Fixes the old "color.php only carries 2 colours" gap (TD-WEB-02). */
  --nav-bg:            hsl(var(--base-h, 226) var(--base-s, 60%) 13%);
  --nav-text:          rgba(255,255,255,.82);
  --nav-text-active:   #ffffff;
  --body-bg:           #F5F6FA;
  --card-bg:           #ffffff;
  --card-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --card-shadow-hover: 0 6px 20px rgba(0,0,0,.10);
  --radius-sm:  6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

/* ── B. BODY ────────────────────────────────────────────────── */
body { background: var(--body-bg) !important; }

/* ── C. NAVBAR ──────────────────────────────────────────────── */
.header {
  background: var(--nav-bg) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.22) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}
.header--scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.32) !important; }

/* Bootstrap / main.css sets .navbar to white — override it */
.header .navbar { background: transparent !important; }

.header .navbar-toggler { border-color: rgba(255,255,255,.25) !important; }
.header .navbar-toggler .la-bars { color: #fff !important; }
.header .navbar-brand img { height: 52px !important; width: auto !important; }

/* main.css has `.nav-menu .nav-item .nav-link { color: !important }` (0,3,0 specificity).
   We need 0,4,0 to beat it on the dark navbar. */
.header .nav-menu .nav-item .nav-link {
  color: hsl(var(--base)) !important;
  font-weight: 500 !important;
  letter-spacing: .015em !important;
}
.header .nav-menu .nav-item .nav-link:hover,
.header .nav-menu .nav-item .nav-link.active { color: #ffffff !important; }
.header .nav-menu .nav-item .nav-link.active::after { background: hsl(var(--base)) !important; }

/* Mobile collapsed menu — links on dark #1e293b bg */
@media (max-width: 991px) {
  .header .nav-item .nav-link { color: rgba(255,255,255,.82) !important; }
  .header .nav-item .nav-link:hover,
  .header .nav-item .nav-link.active { color: #ffffff !important; }
}

.header .btn--base {
  background: hsl(var(--base)) !important;
  border-color: hsl(var(--base)) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
}
.header .btn--base:hover { filter: brightness(1.12) !important; transform: translateY(-1px) !important; }

.header .language_switcher__caption { color: var(--nav-text) !important; }
.header .language_switcher__list {
  background: #1e293b !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.header .language_switcher__item a { color: rgba(255,255,255,.75) !important; }
.header .language_switcher__item a:hover { color: #fff !important; }

@media (max-width: 991px) {
  .header .navbar-collapse {
    background: #1e293b !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding: 12px 0 !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  }
}

/* ── D. HEADER TOP BAR ──────────────────────────────────────── */
.header-top {
  background: #07101f !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.header-top,
.header-top a,
.header-top .contact-list__link,
.header-top .follow-social-list__text { color: rgba(255,255,255,.88) !important; font-size: .78rem !important; }
.header-top .contact-list__item-icon,
.header-top .contact-list__item-icon i { color: hsl(var(--base)) !important; }
.header-top a:hover,
.header-top .contact-list__link:hover { color: hsl(var(--base)) !important; }

/* ── E. HERO / BANNER ───────────────────────────────────────── */
.banner-section {
  background: var(--nav-bg) !important;
  padding-top: 100px !important;
  padding-bottom: 80px !important;
}
.banner-section.section-overlay::before {
  background: linear-gradient(135deg,
      rgba(15,23,42,.92) 0%,
      rgba(15,23,42,.68) 100%) !important;
}
.banner-bg-masks-group .bg-circle,
.banner-bg-masks-group .bg-polygon { opacity: .06 !important; }

.banner-content__title {
  color: #ffffff !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}
.banner-content p { color: rgba(255,255,255,.72) !important; }

/* Banner image card */
.banner-img { border-radius: var(--radius-lg) !important; overflow: hidden !important; }

/* happy-user widget needs real avatar photos to look correct.
   Hide it — trust strip in the left column already carries that social proof. */
.happy-user { display: none !important; }
.happy-user__title, .happy-user__desc { color: #fff !important; }

/* ── F. BREADCRUMB ──────────────────────────────────────────── */
section.breadcrumb.section-overlay {
  background: var(--nav-bg) !important;
  padding: 60px 0 !important;
}
/* Tone down the decorative bg shapes on dark background */
section.breadcrumb .bg-circle,
section.breadcrumb .bg-polygon { opacity: .06 !important; }

section.breadcrumb .breadcrumb__title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
}

/* ── G. SECTION HEADINGS ────────────────────────────────────── */

/* main.css puts a colored underline THROUGH the subtitle text via ::before.
   Replace with a clean pill badge. */
.section-heading__subtitle::before,
.section-heading__subtitle::after { display: none !important; }

.section-heading__subtitle {
  display: inline-flex !important;
  align-items: center !important;
  background: hsl(var(--base) / .10) !important;
  color: hsl(var(--base)) !important;
  font-size: .70rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  padding: 4px 14px !important;
  border-radius: 100px !important;
  margin-bottom: 12px !important;
  /* reset main.css position:relative / padding-bottom that enabled the underline */
  position: static !important;
  padding-bottom: 4px !important;
  max-width: unset !important;
}

/* Left-aligned heading variant — keep left margin reset */
.section-heading.style-left .section-heading__subtitle { margin-left: 0 !important; }

.section-heading__title {
  font-weight: 700 !important;
  line-height: 1.25 !important;
}
.section-heading { margin-bottom: 36px !important; }

/* ── G2. DESKTOP SECTION PADDING ───────────────────────────── */
/* main.css py-120 = 120px — too much dead space on large screens. */
@media (min-width: 992px) {
  .py-120 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* ── G3. SECTION BACKGROUND ALTERNATION ─────────────────────── */
/* White sections */
.about-section,
.chose-us,
.work-us { background: #ffffff !important; }
/* Light-grey sections (keep existing body-bg) */
.services-section,
.features { background: var(--body-bg) !important; }

/* ── H. FEATURE CARDS ───────────────────────────────────────── */
.section-bg-light { background: var(--body-bg) !important; }

.feature-card {
  background: var(--card-bg) !important;
  border: 1px solid #e8edf4 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--card-shadow) !important;
  transition: box-shadow .22s ease, transform .22s ease !important;
  padding: 32px 24px !important;
}
.feature-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-3px) !important;
}
/* Remove glassmorphism overlay */
.feature-card__overlay {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Replace hexagon PNG with a clean square icon container */
.feature-card__icon img { display: none !important; }
.feature-card__icon {
  width: 60px !important;
  height: 60px !important;
  background: hsl(var(--base) / .10) !important;
  border-radius: var(--radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  position: relative !important;
  z-index: 1 !important;
}
.feature-card__icon .icon {
  color: hsl(var(--base)) !important;
  font-size: 1.5rem !important;
  position: relative !important;
  z-index: 2 !important;
}

.feature-card__title { font-weight: 700 !important; margin-bottom: 10px !important; }
.feature-card__desc { color: #64748b !important; font-size: .9rem !important; line-height: 1.6 !important; }

/* ── I. SERVICE CARDS ───────────────────────────────────────── */
/* The template uses a split-background overlay (left image + right CMS image).
   Hide it — the section gets a clean flat background instead. */
.services-section-overlay { display: none !important; }
.services-section {
  background: var(--body-bg) !important;
  position: relative !important;
}

.service-card {
  background: var(--card-bg) !important;
  border: 1px solid #e8edf4 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--card-shadow) !important;
  transition: box-shadow .22s ease, transform .22s ease !important;
}
.service-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-3px) !important;
}
.service-card__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  background: hsl(var(--base) / .10) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 1.4rem !important;
  color: hsl(var(--base)) !important;
}
.service-card__heading { font-weight: 700 !important; }
.service-card__desc { color: #64748b !important; font-size: .9rem !important; }

/* ── J. HOW IT WORKS — stepped process cards ────────────────── */
.work-us { background: #eaf0f9 !important; }

.work-us .work-card {
  background: var(--card-bg) !important;
  border: 1px solid #e8edf4 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--card-shadow) !important;
  padding: 40px 26px 30px !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
}
.work-us .work-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-6px) !important;
}
/* Solid brand-blue step badge with a soft halo (box-shadow ring — badge has overflow:hidden).
   Kept the halo + hover lift (the liked "animation"); dropped the blue→amber gradient. */
.work-us .work-card__number {
  background: hsl(var(--base)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 24px hsl(var(--base) / .28), 0 0 0 6px hsl(var(--base) / .10) !important;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease !important;
}
.work-us .work-card:hover .work-card__number {
  transform: scale(1.07) translateY(-2px) !important;
  box-shadow: 0 16px 30px hsl(var(--base) / .34), 0 0 0 8px hsl(var(--base) / .18) !important;
}
.work-card__title { font-weight: 700 !important; }
.work-card__desc { color: #64748b !important; font-size: .9rem !important; }
.work-card__line { opacity: .5 !important; }

/* Reveal-on-scroll (mild, staggered). Progressive enhancement: cards are static unless JS adds
   .reveal-init; reduced-motion users keep them static too. */
.work-us.reveal-init .work-card { opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .55s ease; }
.work-us.reveal-init.is-visible .work-card { opacity: 1; transform: none; }
.work-us.reveal-init.is-visible .row > div:nth-child(1) .work-card { transition-delay: .05s; }
.work-us.reveal-init.is-visible .row > div:nth-child(2) .work-card { transition-delay: .15s; }
.work-us.reveal-init.is-visible .row > div:nth-child(3) .work-card { transition-delay: .25s; }
.work-us.reveal-init.is-visible .row > div:nth-child(4) .work-card { transition-delay: .35s; }
.work-us.reveal-init.is-visible .row > div:nth-child(n+5) .work-card { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .work-us.reveal-init .work-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── K. COUNTER STRIP ───────────────────────────────────────── */
/* bg-img JS sets background-image inline — override to solid navy */
.counter.section-overlay {
  background-color: var(--nav-bg) !important;
  background-image: none !important;
}
.counter-overlay { background: rgba(15,23,42,.80) !important; }
.counter-card__title {
  color: hsl(var(--base)) !important;
  font-weight: 700 !important;
}
.counter-card__title .odometer,
.counter-card__title .extra { color: hsl(var(--base)) !important; }
.counter-card__desc { color: rgba(255,255,255,.68) !important; }

/* ── L. WHY CHOOSE ──────────────────────────────────────────── */
/* Rotation animation and CMS placeholder images are hidden;
   show only the trust badge in a clean themed panel. */
.rotation-animation { display: none !important; }
.chose-us__img      { display: none !important; }
.right-section .bottom-img { display: none !important; }

/* Right panel — light gradient container for cascading cards */
.right-section {
  background: linear-gradient(160deg, hsl(var(--base) / .06) 0%, #f0f4fb 100%) !important;
  border: 1px solid hsl(var(--base) / .15) !important;
  border-radius: var(--radius-lg) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  position: relative !important;
  padding: 28px 24px !important;
}

/* White icon card — compact with brand left-border accent */
.chose-icon-card {
  position: relative !important;
  top: auto !important; left: auto !important;
  background: var(--card-bg) !important;
  border: 1px solid #e8edf4 !important;
  border-left: 3px solid hsl(var(--base)) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--card-shadow) !important;
  padding: 14px 16px !important;
  max-width: none !important;
  transition: box-shadow .2s, transform .15s !important;
}
.chose-icon-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-2px) !important;
}

/* Diagonal cascade — each card steps 32px to the right.
   In a flex-column, margins reduce the stretch width, so all
   three cards stay the same size, just staggered diagonally. */
.right-section .chose-icon-card:nth-child(1) { margin-right: 64px !important; }
.right-section .chose-icon-card:nth-child(2) { margin-left: 32px !important; margin-right: 32px !important; }
.right-section .chose-icon-card:nth-child(3) { margin-left: 64px !important; }

/* Reset cascade on tablet/mobile — stack full width */
@media (max-width: 991px) {
  .right-section .chose-icon-card:nth-child(1),
  .right-section .chose-icon-card:nth-child(2),
  .right-section .chose-icon-card:nth-child(3) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.chose-icon-card .icon {
  width: 42px !important; height: 42px !important;
  border-radius: var(--radius-sm) !important;
  background: hsl(var(--base) / .10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: hsl(var(--base)) !important;
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}
.chose-icon-card__title { font-weight: 700 !important; font-size: .92rem !important; color: #1e293b !important; margin-bottom: 3px !important; }
.chose-icon-card__desc  { color: #64748b !important; font-size: .80rem !important; margin: 0 !important; line-height: 1.5 !important; }

.service-list {
  padding: 14px 0 !important;
  border-bottom: 1px solid #e8edf4 !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.service-list:last-child { border-bottom: none !important; }
.service-list__number {
  background: hsl(var(--base)) !important;
  color: #fff !important;
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
}
.service-list__title { font-weight: 700 !important; font-size: .97rem !important; margin-bottom: .25rem !important; }
.service-list__desc { color: #64748b !important; font-size: .88rem !important; margin: 0 !important; }

/* ── L2. ABOUT SECTION THUMB ─────────────────────────────────── */
.about-thumb .thumbnail {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-md) !important;
  display: block !important;
}
/* Floating stat badge on about image */
.thumb-card {
  background: var(--card-bg) !important;
  border: 1px solid #e8edf4 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--card-shadow-hover) !important;
  padding: 14px 18px !important;
  position: relative !important;
  z-index: 2 !important;
}
.thumb-card__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--radius-sm) !important;
  background: hsl(var(--base) / .10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: hsl(var(--base)) !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
}
.thumb-card__title { font-weight: 700 !important; font-size: 1rem !important; margin-bottom: 2px !important; }
.thumb-card__desc  { color: #64748b !important; font-size: .82rem !important; margin: 0 !important; }

/* ── M. TESTIMONIALS ────────────────────────────────────────── */
.testimonial-item {
  background: var(--card-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e8edf4 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--card-shadow) !important;
}
.testimonial-item .ratings i { color: hsl(var(--base)) !important; }

/* ── N. PLAN CARDS ──────────────────────────────────────────── */
.plan-card, .fdr-plan-card, .dps-plan-card, .loan-plan-item {
  background: var(--card-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e8edf4 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--card-shadow) !important;
  transition: box-shadow .22s ease, transform .22s ease !important;
}
.plan-card:hover, .fdr-plan-card:hover,
.dps-plan-card:hover, .loan-plan-item:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-2px) !important;
}
.plan-card.active, .plan-card--featured, .loan-plan-item.active {
  border-color: hsl(var(--base)) !important;
  box-shadow: 0 0 0 2px hsl(var(--base) / .18), var(--card-shadow-hover) !important;
}

/* ── O. NEWSLETTER / CTA STRIP ──────────────────────────────── */
.newsletter, .subscribe-area {
  background: hsl(var(--base)) !important;
}
.newsletter h3, .newsletter h4, .newsletter p,
.subscribe-area h3, .subscribe-area p { color: #fff !important; }
.newsletter .form-control,
.subscribe-area .form-control {
  border-radius: var(--radius-sm) !important;
  border: none !important;
}
.newsletter .btn, .subscribe-area .btn {
  background: var(--nav-bg) !important;
  border-color: var(--nav-bg) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
}
.newsletter .btn:hover, .subscribe-area .btn:hover { background: #1e293b !important; }

/* ── P. FOOTER ──────────────────────────────────────────────── */
.footer-area { background: var(--nav-bg) !important; }
.footer-item__title { color: #ffffff !important; font-weight: 600 !important; }
.footer-item__desc { color: rgba(255,255,255,.58) !important; }
.footer-menu__link { color: rgba(255,255,255,.58) !important; }
.footer-menu__link:hover { color: hsl(var(--base)) !important; }
.footer-contact-menu__item-icon { color: hsl(var(--base)) !important; }
.footer-contact-menu__item p,
.footer-contact-menu__item a { color: rgba(255,255,255,.58) !important; }
.footer-contact-menu__item a:hover { color: hsl(var(--base)) !important; }
.social-list__link {
  border-color: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.60) !important;
}
.social-list__link:hover {
  background: hsl(var(--base)) !important;
  border-color: hsl(var(--base)) !important;
  color: #fff !important;
}
.bottom-footer {
  background: rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}
.bottom-footer-text { color: rgba(255,255,255,.45) !important; }

/* ── Q. CTA BUTTONS ─────────────────────────────────────────── */
.btn--base {
  background: hsl(var(--base)) !important;
  border-color: hsl(var(--base)) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  transition: all .2s ease !important;
}
.btn--base:hover {
  filter: brightness(1.12) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.btn--base:active { transform: translateY(0) !important; }

.btn-outline--base {
  color: hsl(var(--base)) !important;
  border-color: hsl(var(--base)) !important;
  background: transparent !important;
  border-radius: var(--radius-sm) !important;
}
.btn-outline--base:hover {
  background: hsl(var(--base)) !important;
  color: #fff !important;
}

/* Banner secondary CTA — white outline on dark hero bg */
.banner-content .btn-outline--base {
  color: #fff !important;
  border-color: rgba(255,255,255,.38) !important;
}
.banner-content .btn-outline--base:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.60) !important;
  color: #fff !important;
}

/* ── S. RESPONSIVE / FLUID TYPOGRAPHY ───────────────────────── */

/* Fluid hero heading — scales continuously from 375px to 1440px */
.banner-content__title {
  font-size: clamp(1.75rem, 5vw, 3.6rem) !important;
  line-height: 1.15 !important;
}

/* Fluid section headings */
.section-heading__title {
  font-size: clamp(1.35rem, 3.2vw, 2rem) !important;
}

/* Fluid sub-page h2s (about, why-choose, etc.) */
.about-content h2,
.chose-us__content ~ .section-heading h2,
.section-heading.style-left .section-heading__title {
  font-size: clamp(1.25rem, 3vw, 1.9rem) !important;
  line-height: 1.3 !important;
}

/* ── TABLET (≤991px) ────────────────────────────────────────── */
@media (max-width: 991px) {
  .banner-section {
    padding-top: 72px !important;
    padding-bottom: 56px !important;
  }
  /* Halve the py-120 section padding on tablet */
  .py-120 { padding-top: 72px !important; padding-bottom: 72px !important; }
}

/* ── MOBILE (≤767px) ────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hero */
  .banner-section {
    padding-top: 48px !important;
    padding-bottom: 40px !important;
  }
  /* Hide the image column on mobile — text gets full width */
  .banner-thumb { display: none !important; }
  .banner-section .col-lg-7,
  .banner-section .col-md-7 { max-width: 100% !important; flex: 0 0 100% !important; }

  .banner-content__desc { font-size: .9rem !important; max-width: 100% !important; }
  .badge-umra { font-size: .68rem !important; }

  /* Trust strip — allow two items per row */
  .banner-trust-strip { gap: 10px 20px !important; }
  .trust-item { font-size: .76rem !important; }

  /* Section headings */
  .section-heading { margin-bottom: 24px !important; }
  .section-heading__subtitle { font-size: .72rem !important; }

  /* Section padding */
  .py-120 { padding-top: 52px !important; padding-bottom: 52px !important; }

  /* Loan CTA — centred stack */
  .bgf-loan-cta { padding: 36px 0 !important; text-align: center !important; }
  .bgf-loan-cta h2 { font-size: 1.2rem !important; }
  .bgf-loan-cta p { font-size: .88rem !important; }
  .bgf-loan-cta .justify-content-lg-end { justify-content: center !important; }
  .loan-highlight { font-size: .78rem !important; padding: 7px 12px !important; }
  .loan-highlights-row { justify-content: center !important; flex-wrap: wrap !important; }
  .loan-highlights-row .loan-highlight { flex: 0 0 auto !important; }

  /* Work cards gap tighter */
  .work-us .row { gap: 12px 0 !important; }

  /* Breadcrumb */
  section.breadcrumb.section-overlay { padding: 36px 0 !important; }
  section.breadcrumb .breadcrumb__title { font-size: 1.4rem !important; }
}

/* ── SMALL MOBILE (≤575px) ──────────────────────────────────── */
@media (max-width: 575px) {
  /* Rates strip */
  .bgf-rates-strip { padding: 44px 0 !important; }
  .rate-card { padding: 24px 18px !important; }
  .rate-card__value { font-size: 2.5rem !important; }
  .rate-card--featured .rate-card__value { font-size: 2.8rem !important; }

  /* Feature / service / work cards */
  .feature-card, .service-card, .work-card { padding: 22px 16px !important; }

  /* Trust strip — single column */
  .banner-trust-strip { flex-direction: column !important; gap: 8px !important; }

  /* Counter strip numbers smaller */
  .counter-card__title { font-size: 1.8rem !important; }

  /* Navbar logo size */
  .header .navbar-brand img { max-height: 36px !important; }

  /* Footer columns */
  .footer-area .col-lg-4 { margin-bottom: 24px !important; }
  .bottom-footer-text { font-size: .75rem !important; }
}

/* ── R. BGF HOMEPAGE COMPONENTS ─────────────────────────────── */

/* Banner UMRA badge pill */
.badge-umra {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.90) !important;
  font-size: .73rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}
.banner-content__desc {
  color: rgba(255,255,255,.70) !important;
  font-size: .98rem !important;
  line-height: 1.65 !important;
  max-width: 520px !important;
}
.banner-trust-strip {
  border-top: 1px solid rgba(255,255,255,.12) !important;
  padding-top: 20px !important;
  margin-top: 24px !important;
}
.trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: rgba(255,255,255,.68) !important;
  font-size: .79rem !important;
  font-weight: 500 !important;
}
.trust-item i { color: hsl(var(--base)) !important; font-size: .9rem !important; }

/* Savings rate cards */
.bgf-rates-strip { padding: 72px 0 !important; }

.rate-card {
  background: var(--card-bg) !important;
  border: 1px solid #e8edf4 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--card-shadow) !important;
  padding: 32px 24px !important;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease !important;
}
.rate-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-3px) !important;
  border-color: hsl(var(--base) / .28) !important;
}
.rate-card--featured {
  border-color: hsl(var(--base)) !important;
  box-shadow: 0 0 0 2px hsl(var(--base) / .16), var(--card-shadow-hover) !important;
}
.rate-card__badge {
  display: inline-block !important;
  background: hsl(var(--base)) !important;
  color: #fff !important;
  font-size: .67rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  margin-bottom: 10px !important;
}
.rate-card__period {
  color: #64748b !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin-bottom: 6px !important;
}
.rate-card__value {
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: hsl(var(--base)) !important;
  line-height: 1 !important;
  display: block !important;
}
.rate-card--featured .rate-card__value { font-size: 3.4rem !important; }
.rate-card__label {
  color: #94a3b8 !important;
  font-size: .79rem !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
  display: block !important;
}
.rate-card__desc { color: #64748b !important; font-size: .86rem !important; }

/* Loan CTA strip */
.bgf-loan-cta {
  padding: 52px 0 !important;
  background: var(--nav-bg) !important;
}
.bgf-loan-cta h2 {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.55rem !important;
  line-height: 1.3 !important;
}
.bgf-loan-cta p { color: rgba(255,255,255,.62) !important; font-size: .93rem !important; }
.loan-highlight {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: var(--radius-sm) !important;
  padding: 9px 16px !important;
  color: rgba(255,255,255,.82) !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
}
.loan-highlight i { color: hsl(var(--base)) !important; }

/* Badges row — three equal pills locked to one line on desktop */
.loan-highlights-row {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}
.loan-highlights-row .loan-highlight {
  flex: 1 !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* ════════════════════════════════════════════════════════════
   FINLON RE-SKIN — 2026-06-11  (Deep Navy & Amber)
   Additive override block — appended last so it wins the cascade.
   ROLLBACK = delete from this banner to EOF.
   Palette: Primary navy  hsl(var(--base)) #1A2B6B   (buttons, links)
            Accent amber   hsl(var(--base-two)) #E8A33D (eyebrows, featured, CTA)
            Dark surface   #0E1633  (hardcoded; color.php carries only 2 colours — TD-WEB-02)
   Typeface: Inter (matches Finlon --thm-font).
   ════════════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHY — Inter body · Poppins headings ───────────────
   Body / UI text = Inter (readability). Headings = Poppins (display). These also override the
   shared layout's inline "Poppins everywhere" rule — frontend.css loads last on the public site. */
body, p, span, a, li, label,
button, input, select, textarea,
.btn, .nav-link, .footer-item__link, .loan-highlight {
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.banner-content__title,
.section-heading__title,
.feature-card__title,
.service-card__heading,
.work-card__title,
.rate-card__value,
.pricing-card__title,
.pricing-card__price,
.footer-item__title {
  font-family: "Poppins", "Inter", system-ui, -apple-system, sans-serif !important;
}
body { letter-spacing: -0.005em !important; }

/* Lifted-navy surfaces (collapsed menu, language dropdown) for depth on the deeper navy */
@media (max-width: 991px) {
  .header .navbar-collapse { background: #131c40 !important; }
}
.header .language_switcher__list { background: #131c40 !important; }

/* ── 2. AMBER ACCENT — the duotone ──────────────────────────── */
/* Eyebrow / section subtitle pills → amber (was navy) */
.section-heading__subtitle {
  background: hsl(var(--base-two) / .14) !important;
  color: hsl(var(--base-two)) !important;
}

/* Header-top + trust + footer-contact icons → amber warmth on navy */
.header-top .contact-list__item-icon,
.header-top .contact-list__item-icon i,
.trust-item i,
.footer-contact-menu__item-icon { color: hsl(var(--base-two)) !important; }

/* Featured savings/plan card → amber highlight instead of navy */
.rate-card--featured { border-color: hsl(var(--base-two)) !important; box-shadow: 0 0 0 2px hsl(var(--base-two) / .22), var(--card-shadow-hover) !important; }
.rate-card--featured .rate-card__value,
.rate-card--featured .rate-card__badge { color: #0E1633 !important; }
.rate-card--featured .rate-card__badge { background: hsl(var(--base-two)) !important; }
.rate-card--featured .rate-card__value { color: hsl(var(--base-two)) !important; }
.plan-card--featured, .plan-card.active, .loan-plan-item.active { border-color: hsl(var(--base-two)) !important; box-shadow: 0 0 0 2px hsl(var(--base-two) / .22), var(--card-shadow-hover) !important; }

/* Counter numerals → amber pop on the navy strip */
.counter-card__title,
.counter-card__title .odometer,
.counter-card__title .extra { color: hsl(var(--base-two)) !important; }

/* ── 3. DIAGONAL CTA BAND (Finlon signature) — amber wedge ───── */
.bgf-loan-cta { position: relative !important; overflow: hidden !important; background: #0E1633 !important; }
.bgf-loan-cta::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; bottom: 0 !important; right: 0 !important;
  width: 46% !important;
  background: linear-gradient(120deg, hsl(var(--base-two)) 0%, #d8922f 100%) !important;
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0% 100%) !important;
  z-index: 1 !important;
}
.bgf-loan-cta > .container,
.bgf-loan-cta .row { position: relative !important; z-index: 2 !important; }
/* Badges sit over the amber wedge — give them a solid navy chip for contrast */
.bgf-loan-cta .loan-highlight {
  background: rgba(14,22,51,.66) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: #fff !important;
}
.bgf-loan-cta .loan-highlight i { color: #fff !important; }

/* ── 4. PRIMARY BUTTON polish — pill, Finlon weight ─────────── */
.btn--base, .header .btn--base { border-radius: 8px !important; font-weight: 600 !important; }
/* Sign-in nav button keeps a touch more presence */
.header .btn--base { padding: 9px 22px !important; }

/* ── 4b. AMBER "OPEN ACCOUNT" CTA + sign-in/up grouping ──────── */
.btn--accent {
  background: hsl(var(--base-two)) !important;
  border: 1px solid hsl(var(--base-two)) !important;
  color: #0E1633 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all .2s ease !important;
}
.btn--accent:hover { filter: brightness(1.06) !important; transform: translateY(-1px) !important; color: #0E1633 !important; }
.header .btn--accent { padding: 9px 20px !important; }
.signin-btn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Mobile: auth CTAs live at the TOP of the collapsed menu (.top-button);
   hide the desktop .nav-right copy so they don't duplicate at the bottom. */
@media (max-width: 991px) { .nav-right .signin-btn { display: none !important; } }

/* ── Products: "no active products" empty-state note ─────────── */
.bgf-prod__empty {
  margin-top: 22px; color: var(--muted); font-size: .95rem; font-style: italic;
}

/* ── 5. CARD CLEANUP — drop the main.css 10px navy bottom bar ── */
/* It clips like a cut-off button on tall cards (e.g. contact info cards).
   Finlon cards are clean: border + shadow only. */
.feature-card::after,
.service-card::after { display: none !important; }
/* Decorative hexagon PNG behind the icon — hide on contact-style cards too */
.feature-card__icon img { display: none !important; }

/* ════════════════════════════════════════════════════════════
   HARMONIZATION + HARDENING — 2026-06-11
   Uniform type scale + colour roles + spacing, and a horizontal-
   overflow guard. Appended after the Finlon block so it wins.
   ROLLBACK = delete from this banner to EOF.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Colour roles (light sections) */
  --ink:        #16203f;   /* headings */
  --ink-soft:   #475569;   /* body copy */
  --muted:      #6b7280;   /* meta / captions */
  --line:       #e6eaf2;   /* hairline borders */
  /* Fluid type scale — one source of truth */
  --fs-h1:      clamp(2.1rem, 4.4vw, 3.25rem);
  --fs-h2:      clamp(1.55rem, 2.8vw, 2.05rem);
  --fs-h3:      1.15rem;
  --fs-lead:    1.05rem;
  --fs-body:    1rem;
  --fs-small:   0.9rem;
  --fs-eyebrow: 0.72rem;
}

/* ── A. HORIZONTAL-OVERFLOW GUARD ─────────────────────────────
   NEVER set overflow-x on <html>/<body>: it forces the Y-axis to clip/auto
   and breaks page scroll (and anchor nav). Clip at the SECTION level instead.
   Use `overflow-x: hidden` (NOT `clip` — `clip` is unsupported in older
   Safari/Edge, where it falls back to `visible` and decorative shapes/carousel
   slides bleed past the right edge → the "no right padding / overlaps" bug).
   Sections are content-height, so hidden never adds a vertical scrollbar and
   page scroll + the sticky header are unaffected. */
section, .footer-area, .banner-section, .bgf-loan-cta, .testimonials {
  overflow-x: hidden; max-width: 100%;
}
/* Media can't exceed its column */
img, svg, iframe, .thumbnail, video { max-width: 100%; }
body { max-width: 100%; }

/* ── B. HEADINGS — uniform family / weight / colour / scale ───── */
.banner-content__title {
  font-size: var(--fs-h1) !important; font-weight: 800 !important;
  line-height: 1.12 !important; letter-spacing: -0.01em !important; color: #fff !important;
}
.section-heading__title,
.about-content h2, .about-content h3,
.chose-us .section-heading__title,
.section-heading.style-left .section-heading__title {
  font-size: var(--fs-h2) !important; font-weight: 700 !important;
  line-height: 1.25 !important; letter-spacing: -0.01em !important; color: var(--ink) !important;
}
.feature-card__title, .service-card__heading, .work-card__title,
.chose-icon-card__title, .thumb-card__title {
  font-size: var(--fs-h3) !important; font-weight: 700 !important; color: var(--ink) !important;
}
/* Headings on dark sections stay white */
.banner-section .section-heading__title,
.counter .section-heading__title, .counter .section-heading__subtitle,
.bgf-loan-cta h2, .footer-item__title { color: #fff !important; }

/* ── C. BODY COPY — uniform colour + rhythm ───────────────────── */
.banner-content__desc { font-size: var(--fs-lead) !important; }
.section-heading__desc,
.feature-card__desc, .service-card__desc, .work-card__desc,
.chose-icon-card__desc, .thumb-card__desc, .service-list__desc,
.testimonial-item__content p {
  color: var(--ink-soft) !important; font-size: var(--fs-small) !important; line-height: 1.7 !important;
}

/* ── D. EYEBROW — uniform amber pill everywhere ───────────────── */
.section-heading__subtitle {
  font-size: var(--fs-eyebrow) !important; letter-spacing: 0.09em !important; font-weight: 700 !important;
}

/* ── E. CARDS — uniform border colour + radius ────────────────── */
.feature-card, .service-card, .work-card, .testimonial-item,
.plan-card, .rate-card, .chose-icon-card, .thumb-card {
  border-color: var(--line) !important; border-radius: var(--radius-md) !important;
}

/* ── F. SECTION SPACING — consistent vertical rhythm ──────────── */
@media (min-width: 992px) { .py-120 { padding-top: 84px !important; padding-bottom: 84px !important; } }
.section-heading { margin-bottom: 40px !important; }

/* ── G. LINKS — navy, amber on hover ──────────────────────────── */
.about-content a:not(.btn), .service-list a:not(.btn) { color: hsl(var(--base)) !important; }
.about-content a:not(.btn):hover { color: hsl(var(--base-two)) !important; }

/* ── I. PRODUCTS — anchored intro bands ───────────────────────── */
#loans, #sacco, #investments { scroll-margin-top: 90px; } /* clear the sticky header */
.bgf-prod { padding: 72px 0 28px; }
.bgf-prod--tint { background: var(--body-bg); padding-bottom: 72px; }
.bgf-prod__head { max-width: 760px; margin: 0 auto; text-align: center; }
.bgf-prod__lead { color: var(--ink-soft) !important; font-size: var(--fs-lead) !important; line-height: 1.7 !important; margin-top: 8px; }
.bgf-prod__pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.bgf-prod__pills span {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px;
  background: hsl(var(--base) / .06); border: 1px solid hsl(var(--base) / .14);
  color: var(--ink); font-size: .85rem; font-weight: 600;
}
.bgf-prod__pills i { color: hsl(var(--base-two)); }
/* tighten the card section that immediately follows an intro band */
.bgf-prod + section { padding-top: 16px !important; }

/* Product carousels — breathing room + don't clip card shadows / arrows */
.bgf-prod .plan-carousel { margin-top: 26px; }
.plan-carousel .slick-list { margin: 0 -4px; padding: 6px 4px; }
.plan-carousel + .text-center { margin-top: 30px !important; }
@media (max-width: 575px) { .plan-carousel__item { padding: 0 6px; } }
@media (max-width: 991px) { .plan-carousel .slick-prev { left: -6px; } .plan-carousel .slick-next { right: -6px; } }

/* ── J. NAV DROPDOWN (Products → Loans / SACCO / Investments) ──── */
.bgf-dropdown { position: relative; }
.bgf-dropdown__caret { font-size: .72em; margin-left: 3px; transition: transform .2s ease; }
.bgf-dropdown__menu {
  list-style: none; margin: 0; padding: 8px; min-width: 210px;
  position: absolute; top: 100%; left: 0; z-index: 1001;
  background: #131c40; border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.bgf-dropdown:hover > .bgf-dropdown__menu,
.bgf-dropdown:focus-within > .bgf-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.bgf-dropdown:hover .bgf-dropdown__caret { transform: rotate(180deg); }
.bgf-dropdown__menu li a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  color: rgba(255,255,255,.82) !important; font-size: .9rem; font-weight: 500; white-space: nowrap;
}
.bgf-dropdown__menu li a i { color: hsl(var(--base-two)); width: 18px; text-align: center; }
.bgf-dropdown__menu li a:hover { background: rgba(255,255,255,.07); color: #fff !important; }
/* Mobile / collapsed menu: show the submenu inline, always expanded */
@media (max-width: 991px) {
  .bgf-dropdown__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: transparent; border: none; padding: 4px 0 4px 18px; min-width: 0;
  }
  .bgf-dropdown__caret { display: none; }
  .bgf-dropdown__menu li a { color: rgba(255,255,255,.72) !important; }
}

/* ── H. CONTACT "FIND US" PANEL (replaces CSP-blocked map iframe) ── */
.bgf-find-us { padding: 0 0 84px; }
.bgf-find-us__card {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: #0E1633; border-radius: var(--radius-lg);
  padding: 28px 34px; color: #fff;
  background-image: linear-gradient(120deg, #0E1633 0%, #0E1633 60%, #1A2B6B 100%);
}
.bgf-find-us__icon {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--base-two)); color: #0E1633; font-size: 1.7rem;
}
.bgf-find-us__body { flex: 1 1 260px; }
.bgf-find-us__eyebrow {
  display: inline-block; color: hsl(var(--base-two));
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 4px;
}
.bgf-find-us__title { color: #fff !important; font-size: 1.15rem !important; font-weight: 600 !important; margin: 0 !important; }
.bgf-find-us__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 575px) {
  .bgf-find-us__card { padding: 22px; }
  .bgf-find-us__btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   BGF polish pass — 2026-06-15 (section rhythm · cookie/modal layering)
   ════════════════════════════════════════════════════════════════ */

/* ── Products page section rhythm ───────────────────────────────
   Why: the template left SACCO's --tint and the card sections' section-bg-light
   BOTH at var(--body-bg) (#F5F6FA) — the same tone as the page itself — so
   loans / SACCO / investments / process stacked as one flat block. Restore a
   clear two-tone band rhythm: white product bands separated by tinted bands
   (#eaf0f9, matching the How-It-Works band). */
.bgf-prod { background: #ffffff !important; }              /* loans + investments intro bands */
.bgf-prod--tint { background: #eaf0f9 !important; }        /* SACCO band → tint */
/* Product card sections → flat white, SCOPED to the Products flow only: a .pricing
   section that follows a .bgf-prod intro (loans / investments cards) or another
   .pricing (savings after investments). The standalone /loan-plans, /investment-plans
   and /dps-plans pages aren't preceded by either, so they keep the pricing-bg texture. */
.bgf-prod + .pricing,
.pricing + .pricing {
  background-color: #ffffff !important;
  background-image: none !important;
}
/* Investment (fdr) and Savings (dps) cards sit back-to-back in the same white band;
   a divider keeps the two product families distinct. */
.pricing + .pricing { border-top: 1px solid #e8edf4 !important; }

/* The Loans intro band already heads the group on the Products page, so the loan-cards
   section's own heading ("Borrow based on your savings tier") reads as a duplicate.
   Hide the whole heading row (not just the inner heading) so no empty gap remains;
   Products page only (#loans). The standalone /loan-plans page keeps it. */
#loans + .pricing > .container > .row:first-of-type { display: none !important; }

/* ── Cookie consent must never sit above a modal ────────────────
   Why: base template ships .cookies-card at z-index:999999, which punched over
   the apply-now dialog and its backdrop. Drop it below the Bootstrap modal layer
   so the backdrop dims it and the dialog reads clearly; it still floats above the
   page when no modal is open. */
.cookies-card { z-index: 1035 !important; max-width: 420px !important; }

/* ── Apply-now login prompt — centred, comfortably-sized CTAs ────
   Why: footer buttons were right-aligned and btn--sm (cramped). Centre + size up. */
.login-prompt__foot { justify-content: center !important; gap: 12px !important; border-top: 0 !important; padding-top: 4px !important; }
.login-prompt__foot .btn { min-width: 150px !important; }