/* ================= BO PEOPLE GRID WIDGET -- default styling =================
   Scoped under .bo-people-wrap. Self-contained: does not depend on theme
   globals like .wrap/.eyebrow/:root vars, so it renders correctly even
   if the theme's own stylesheet isn't loaded.
   ========================================================================= */

.bo-people-wrap{
  --people-navy: #031B39;
  --people-slate-light: #8B97A8;
  --people-bg: #F1F4F8;
  --people-line: #E4E8EE;
  --people-accent: #1083E6;
  --people-ease: cubic-bezier(.22,1,.36,1);

  --people-zoom-scale: 1.05;
  --people-zoom-duration: .6s;
  --people-overlay-color: rgba(3,27,57,.85);
  --people-overlay-stop: 45%;

  font-family:'Roboto', sans-serif;
}

.bo-people-wrap .people-section{
  padding:96px 0;
  background:#fff;
}
.bo-people-wrap .wrap{
  max-width:1220px;
  margin:0 auto;
  padding:0 40px;
}

/* ---------- Section head ---------- */
.bo-people-wrap .section-head{ max-width:640px; }
.bo-people-wrap .section-head.center{ margin:0 auto; text-align:center; }
.bo-people-wrap .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--people-accent);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.bo-people-wrap .eyebrow::before{
  content:'';
  width:18px; height:1px;
  background:var(--people-accent);
  display:inline-block;
}
.bo-people-wrap .section-head.center .eyebrow::before{ display:none; }
.bo-people-wrap .section-head h2{
  font-family:'Roboto Slab', serif;
  font-size:34px;
  font-weight:500;
  letter-spacing:-0.015em;
  line-height:1.2;
  color:var(--people-navy);
  margin-bottom:14px;
}
.bo-people-wrap .section-head p{
  font-size:16px;
  line-height:1.6;
  color:var(--people-slate-light);
}

/* ---------- Grid ---------- */
.bo-people-wrap .people-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
  margin-top:48px;
}

/* ---------- Card ---------- */
.bo-people-wrap .people-card{ position:relative; }

.bo-people-wrap .people-photo{
  position:relative;
  display:block;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:4 / 5;
  background:var(--people-bg);
  text-decoration:none;
}
.bo-people-wrap .people-photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  transition:transform var(--people-zoom-duration) var(--people-ease);
}
.bo-people-wrap .people-photo.people-zoom-on:hover img,
.bo-people-wrap .people-card:hover .people-photo.people-zoom-on img{
  transform:scale(var(--people-zoom-scale));
}

.bo-people-wrap .people-hover-layer{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent var(--people-overlay-stop), var(--people-overlay-color) 100%);
  display:flex;
  align-items:flex-end;
  padding:18px 16px;
  opacity:0;
  transition:opacity .35s var(--people-ease);
}
.bo-people-wrap .people-photo.people-overlay-on:hover .people-hover-layer,
.bo-people-wrap .people-card:hover .people-photo.people-overlay-on .people-hover-layer{
  opacity:1;
}
.bo-people-wrap .people-photo.people-overlay-always .people-hover-layer{
  opacity:1;
}
.bo-people-wrap .people-hover-layer span{
  font-size:12px;
  font-weight:600;
  color:#fff;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.06em;
}

.bo-people-wrap .people-info{ padding:14px 4px 0; }
.bo-people-wrap .people-info strong{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--people-navy);
  font-family:'Roboto', sans-serif;
  margin-bottom:4px;
}
.bo-people-wrap .people-info span{
  font-size:12.5px;
  color:var(--people-slate-light);
}

/* ---------- Reveal / stagger helpers (self-contained, no theme JS required) ---------- */
.bo-people-wrap .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--people-ease), transform .8s var(--people-ease);
}
.bo-people-wrap .reveal.in{ opacity:1; transform:translateY(0); }

.bo-people-wrap .stagger-children .people-card{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--people-ease), transform .6s var(--people-ease);
}
.bo-people-wrap .stagger-children.in .people-card{ opacity:1; transform:translateY(0); }
.bo-people-wrap .stagger-children.in .people-card:nth-child(1){ transition-delay:.05s; }
.bo-people-wrap .stagger-children.in .people-card:nth-child(2){ transition-delay:.15s; }
.bo-people-wrap .stagger-children.in .people-card:nth-child(3){ transition-delay:.25s; }
.bo-people-wrap .stagger-children.in .people-card:nth-child(4){ transition-delay:.35s; }
.bo-people-wrap .stagger-children.in .people-card:nth-child(5){ transition-delay:.45s; }
.bo-people-wrap .stagger-children.in .people-card:nth-child(6){ transition-delay:.55s; }
.bo-people-wrap .stagger-children.in .people-card:nth-child(7){ transition-delay:.65s; }
.bo-people-wrap .stagger-children.in .people-card:nth-child(8){ transition-delay:.75s; }

@media (prefers-reduced-motion: reduce){
  .bo-people-wrap .reveal,
  .bo-people-wrap .stagger-children .people-card{ opacity:1; transform:none; transition:none; }
}

/* ---------- Editor-active safety net ----------
   Elementor adds this class to the preview iframe <body> so plugins can
   force-show scroll-reveal content while editing, independent of any
   JS timing race. */
body.elementor-editor-active .bo-people-wrap .reveal,
body.elementor-editor-active .bo-people-wrap .stagger-children,
body.elementor-editor-active .bo-people-wrap .stagger-children .people-card{
	opacity: 1 !important;
	transform: none !important;
}

/* ================= RESPONSIVE =================
   Elementor's own responsive controls (grid_columns) will override the
   column count inline per-breakpoint, but these fallbacks keep the
   widget correct even without those controls being touched. */
@media (max-width:1024px){
  .bo-people-wrap .people-grid{ grid-template-columns:repeat(2, 1fr); gap:18px; }
  .bo-people-wrap .wrap{ padding:0 30px; }
}
@media (max-width:640px){
  .bo-people-wrap .people-section{ padding:64px 0; }
  .bo-people-wrap .wrap{ padding:0 20px; }
  .bo-people-wrap .people-grid{ grid-template-columns:1fr; gap:20px; margin-top:32px; }
  .bo-people-wrap .section-head h2{ font-size:26px; }
  .bo-people-wrap .section-head p{ font-size:14.5px; }
}