/* Utility max-widths (replaces inline style) */
.container-1280 { max-width: 1280px; }
.container-993  { max-width: 993px; }

/* HERO */
.about-hero{
  position:relative; min-height:520px; overflow:hidden;
  border-top-left-radius:2px; border-top-right-radius:0px;
  background:#000;
}
.about-hero img{ width:100%; height:100%; object-fit:cover; opacity:.9 }

/* FIX: match HTML BEM classes */
.about-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.45) 100%);
}
.about-hero__copy{
  position:absolute; inset:0; display:grid; align-content:end;
  padding:24px 24px 32px; color:#fff;
}
.about-hero__title{
  font:700 clamp(38px,5vw,56px)/1.05 "Fira Sans Extra Condensed","Montserrat",system-ui;
  text-transform:uppercase; letter-spacing:.2px; margin:.25rem 0 .75rem;
}
.about-hero__sub{ margin:0 0 12px }
.about-hero__cta .icon{ margin-left:.5rem }

/* TEXT + KPI */
.lead-tight{ font:400 16px/1.5 "Inter",sans-serif; color:var(--ink-2) }
.about-stats{
  list-style:none; margin:36px auto 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:993px;
}
.about-stats li{ display:flex; gap:16px; align-items:center }
.bubble{
  width:100px; height:100px; display:grid; place-items:center; border-radius:999px;
  background:linear-gradient(268deg,#fff 0%,#DFEDFF 100%);
  font:700 36px/1 "Inter",sans-serif;
}

/* IMAGE STRIPES */
.image-trio img{ width:100%; height:460px; object-fit:cover; border-radius:12px }
.stripe-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
.stripe-2 img{ width:100%; height:680px; object-fit:cover; border-radius:12px }

/* PRINCIPLES */
.rule{ height:1px; background:var(--line); margin:12px 0 24px }

/* BOARD */
.board-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.board-card{ border:1px solid #E6E6E6; border-radius:14px; padding:18px; background:#fff }
.board-card img{ width:100%; height:220px; object-fit:cover; border-radius:10px; margin-bottom:12px }
.board-card .name{ font-weight:600 }
.board-card .role{ font-size:14px; color:var(--muted) }

/* TEAM */
.team-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px }
.member{ text-align:center }
.member img{ width:80px; height:80px; border-radius:50%; object-fit:cover; margin:0 auto 10px }
.member .name{ font-weight:600 }
.member .role{ font-size:14px; color:var(--muted) }

/* CEO card */
.ceo-card{
  background:linear-gradient(90deg,#0047AC 0%,#A6CDFF 100%);
  color:#fff; border-radius:6px; padding:16px;
}
.ceo-card img{ width:114px; height:143px; object-fit:cover; border-radius:4px }

/* Careers + roles */
.roles .row-item{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 0; border-bottom:1px solid #D4D4D4;
}
.roles .meta{ color:var(--muted); font-size:14px }

/* CTA banner (reuses your global CTA classes if present) */
.cta { position:relative; border-top:1px solid #E4E4E4; background:#fff }
.cta__kicker { margin: 0 }
.cta__sub { margin: .25rem 0 .75rem }
.cta__title { margin: 0 0 1rem }
.cta__glow{
  position:absolute; left:50%; top:65%; transform:translate(-50%,-50%);
  width:385px; height:385px; background:rgba(0,107,255,.40);
  filter:blur(60px); border-radius:345px; opacity:.75; pointer-events:none;
}

/* Responsive tweaks */
@media (max-width: 992px){
  .about-stats{ grid-template-columns:repeat(2,1fr) }
  .board-grid{ grid-template-columns:repeat(2,1fr) }
  .team-grid{ grid-template-columns:repeat(3,1fr) }
  .stripe-2{ grid-template-columns:1fr }
}


/* ===== People cards — shared style for Board + Leadership ===== */
.member, .leader-card {
  text-align: center;
  padding: 12px 8px;
  background: #fff;
}

.member-img, .leader-img {
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
}

/* Avatar — same size/shape for both sections */
.member-img img,
.leader-img img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1px 0 rgba(13, 42, 86, 0.06), 0 8px 22px rgba(13, 42, 86, 0.06);
}

/* Name */
.member-name, .leader-name,
.member .name, .leader-card .name {
  font: 600 16px/1.2 "Inter", system-ui;
  color: #0f172a;
  margin: 8px 0 2px;
}

/* Role: blue, link-like, compact */
.member-role, .leader-role,
.member .role, .leader-card .role {
  font: 600 14px/1.3 "Inter", system-ui;
  color: #1366E7;
  margin: 0 0 8px;
  text-decoration: none;
}

/* Optional one-line bio (leadership) — smaller & muted */
.leader-bio {
  font: 400 13px/1.5 "Inter", system-ui;
  color: #6b7280;
  margin: 0 0 10px;
}

/* Social row — tiny, evenly spaced, muted → darker on hover */
.member-social, .leader-social {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.member-social a, .leader-social a {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: #9aa3af;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.member-social a:hover, .leader-social a:hover {
  color: #0f172a; border-color: #cbd5e1; transform: translateY(-1px);
}

/* Grid breathing room on small screens */
.board-section .row.g-4,
.leadership-section .row.g-5 { --bs-gutter-y: 1.75rem; }
.member-social i,
.leader-social i {
  font-size: 13px;        /* increase if too small */
  line-height: 1;
}
/* Social icons sizing for Board + Leadership */
.member-social i,
.leader-social i { font-size: 13px; line-height: 1; }

.member-social a,
.leader-social a {
  width: 26px; height: 26px; display: grid; place-items: center;
  color: #9aa3af; border: 1px solid #e5e7eb; border-radius: 50%;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.member-social a:hover,
.leader-social a:hover { color: #0f172a; border-color: #cbd5e1; transform: translateY(-1px); }
.member-social a[aria-label="LinkedIn"]:hover,
.leader-social a[aria-label="LinkedIn"]:hover { color:#0A66C2; border-color:#bcd3ec; }

.member-social a[aria-label="Twitter"]:hover,
.leader-social a[aria-label="Twitter"]:hover { color:#111; border-color:#d1d5db; } /* X/Twitter */

.member-social a[aria-label="Dribbble"]:hover,
.leader-social a[aria-label="Dribbble"]:hover { color:#EA4C89; border-color:#f8c2d6; }
.member-social i, .leader-social i {
  font-size: 14px;
  line-height: 1;
}

.member-social a, .leader-social a {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #9aa3af;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.member-social a:hover, .leader-social a:hover {
  color: #1366E7;
  border-color: #bcd3ec;
  transform: translateY(-1px);
}