/* ==========================================================================
   HERO CRITICAL CSS  —  loaded in <head> on the home page only
   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   The full light-theme hero overrides live in footer.php's inline <style>,
   which sits at the very BOTTOM of a ~300 KB HTML document. Browsers paint
   progressively, so on first load the hero was briefly rendered with the old
   dark-theme rules from style.css / main.css:
       - white H1 on a white background  -> headline invisible
       - .hero-stats painted #0a0f1e     -> dark stat cards
       - banner crop / hero height wrong
   That is the flash-of-wrong-hero reported on first entry.

   These rules are applied in <head> so the very first paint is already right.

   !! WHY THE SELECTORS LOOK "DOUBLED" (e.g. `.hero-stats.hero-stats`) !!
   style.css is loaded in the BODY (after this file) and contains the exact
   same selectors, e.g. `.home-hero.hero-image-mode .hero-stats`.
   With identical specificity, the LATER sheet wins - which was style.css.
   Repeating the last class bumps specificity by +1 so this file always wins.
   Do NOT "clean up" the duplicated class.

   These rules intentionally MIRROR the hero block in footer.php (which still
   runs and has the final say). If the hero look changes there, change it here.
   ========================================================================== */

.home-hero.hero-image-mode.home-hero {
  background: #f8fafc !important;
  min-height: calc(100vh - var(--rjn-header-h, 96px)) !important;
  min-height: calc(100svh - var(--rjn-header-h, 96px)) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* full-bleed banner */
.home-hero.hero-image-mode .hero-main.hero-main {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.home-hero.hero-image-mode .hero-bg.hero-bg {
  opacity: 1 !important;
}
.home-hero.hero-image-mode .hero-bg .hero-slide-img {
  object-position: right center !important;
}
.home-hero.hero-image-mode .hero-bg.hero-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.95) 40%, rgba(255,255,255,.80) 51%, rgba(255,255,255,.30) 62%, rgba(255,255,255,0) 73%) !important;
}
@media (max-width: 900px) {
  .home-hero.hero-image-mode .hero-bg.hero-bg::after {
    background: linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.92) 100%) !important;
  }
}

/* readable copy on the light banner */
.home-hero.hero-image-mode .hero-main .hero-copy h1,
.home-hero.hero-image-mode .hero-main h1,
.home-hero.hero-image-mode .hero-copy h1,
.home-hero.hero-image h1 {
  color: #2563eb !important;
  font-size: clamp(28px, 3.6vw, 46px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
}
.home-hero.hero-image-mode .hero-main .hero-copy .hero-lead,
.home-hero.hero-image-mode .hero-copy .hero-lead,
.home-hero .hero-copy .hero-lead {
  color: #475569 !important;
  display: block !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  max-width: 560px !important;
}
.home-hero.hero-image-mode .eyebrow.eyebrow,
.home-hero.hero-image-mode .hero-copy .eyebrow {
  display: none !important;
}

/* blue check list */
.home-hero.hero-image-mode .trust-row.trust-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  border-top: none !important;
  margin-top: 24px !important;
}
.home-hero.hero-image-mode .trust-row.trust-row span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #1e293b !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.home-hero.hero-image-mode .trust-row.trust-row span::before {
  content: "" !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* pill buttons floating on the banner */
.home-hero.hero-image-mode .hero-main .hero-actions a {
  border-radius: 999px !important;
  padding: 13px 30px !important;
  font-size: 15px !important;
}
.home-hero.hero-image-mode .hero-main .hero-actions a.btn-ghost {
  background: rgba(13,26,48,.80) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.32) !important;
}

/* light-blue glass stat cards, no panel behind them */
.home-hero.hero-image-mode .hero-stats.hero-stats {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 0 20px !important;
  margin-top: -28px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.home-hero.hero-image-mode .hero-stats .stat-grid.stat-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 30px !important;
  max-width: 1180px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.home-hero.hero-image-mode .hero-stats .stat-grid > div {
  flex: 1 1 0 !important;
  background:
    linear-gradient(150deg, rgba(255,255,255,.22) 0%, rgba(240,249,255,.05) 50%, rgba(255,255,255,.15) 100%) padding-box,
    linear-gradient(150deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.28) 34%, rgba(255,255,255,.02) 55%, rgba(255,255,255,.58) 100%) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  box-shadow:
    0 16px 38px rgba(15,23,42,.10),
    0 3px 10px rgba(15,23,42,.05),
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -16px 30px rgba(255,255,255,.28) !important;
  backdrop-filter: blur(22px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(190%) !important;
  padding: 16px 16px !important;
  min-height: 78px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  text-align: center !important;
}
.home-hero.hero-image-mode .hero-stats .stat-grid > div .stat-txt strong {
  color: #0f2a5c !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  display: block !important;
  text-align: center !important;
}
.home-hero.hero-image-mode .hero-stats .stat-grid > div .stat-txt > span {
  display: block !important;
  color: #475569 !important;
  font-size: 12.5px !important;
  line-height: 1.32 !important;
  margin-top: 4px !important;
  text-align: center !important;
}