/* ---------------- Leadership strip ---------------- */
.leadership-strip{
  background: var(--navy-2); border-bottom: 1px solid rgba(231,163,62,0.2);
  padding: 22px 0;
}
.leadership-strip .wrap{
  display:flex; flex-wrap:wrap; gap: 14px 40px; align-items:center; justify-content:center;
}
.leadership-badge{ display:flex; align-items:center; gap:10px; }
.leadership-badge .lb-label{
  font-family: var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color: var(--gold-pale);
}
.leadership-badge .lb-name{ color: var(--white); font-size:15px; font-weight:600; }
.leadership-sep{ width:1px; height:22px; background: rgba(255,255,255,0.18); }
@media (max-width:700px){ .leadership-sep{ display:none; } }

/* ---------------- Jump pills ---------------- */
.team-pills{
  position: sticky; top: 84px; z-index: 40;
  background: rgba(251,244,230,0.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(43,36,28,0.08);
  padding: 16px 0;
}
.team-pills .wrap{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.team-pill{
  font-family: var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
  padding: 9px 20px; border-radius:999px;
  border:1px solid rgba(43,36,28,0.18); color: var(--ink-soft);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.team-pill:hover{ border-color: var(--gold-deep); color: var(--navy); }

/* ---------------- Section shell ---------------- */
.team-section{ padding: 84px 0; scroll-margin-top: 150px; }
.team-section.alt{ background: var(--ivory-2); }
.team-head{ text-align:center; max-width:640px; margin: 0 auto 48px; }
.team-head h2{ font-size: clamp(26px,3.2vw,36px); margin-top:14px; }
.team-head p{ color: var(--ink-soft); margin-top:14px; font-size:15px; }

/* ---------------- Committee member cards ---------------- */
.member-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
@media (max-width: 980px){ .member-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px){ .member-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .member-grid{ grid-template-columns: 1fr; } }

.member-card{
  background: var(--white); border-radius: var(--radius-md);
  padding: 26px 18px; text-align:center;
  box-shadow: var(--shadow-card); border: 1px solid rgba(43,36,28,0.06);
  transition: transform .3s ease;
}
.member-card:hover{ transform: translateY(-6px); }

.member-avatar{
  width:72px; height:72px; border-radius:50%; margin: 0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(150deg, var(--gold-pale), var(--gold) 70%);
  color: var(--navy); font-family: var(--display); font-size:22px;
  overflow:hidden;
}
.member-avatar img{ width:100%; height:100%; object-fit:cover; }

.member-card .m-name{ font-family: var(--display); font-size:16.5px; color: var(--navy); line-height:1.3; }
.member-card .m-role{
  display:block; margin-top:6px; font-family: var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; color: var(--vermilion-deep);
}

.member-card.ghost{
  border: 2px dashed rgba(43,36,28,0.22); box-shadow:none; background: rgba(255,255,255,0.5);
}
.member-card.ghost .member-avatar{ background: var(--ivory-2); color: var(--gold-deep); }
.member-card.ghost .m-role{ color: var(--ink-soft); }

/* ---------------- Life members list ---------------- */
.life-list{
  columns: 3 220px; column-gap: 40px;
  background: var(--white); border-radius: var(--radius-lg);
  padding: 40px 44px; box-shadow: var(--shadow-card); border: 1px solid rgba(43,36,28,0.06);
}
.life-list li{
  break-inside: avoid; display:flex; align-items:baseline; gap:10px;
  padding: 9px 0; border-bottom: 1px dashed rgba(43,36,28,0.12);
  font-size: 14.5px; color: var(--ink);
}
.life-list li .lm-no{ font-family: var(--mono); font-size:11.5px; color: var(--gold-deep); flex-shrink:0; }
@media (max-width: 700px){ .life-list{ columns: 2 160px; padding: 30px 24px; } }
@media (max-width: 460px){ .life-list{ columns: 1; } }

/* ---------------- Group heading (splits Office Bearers / Exec Members / etc.) ---------------- */
.group-heading{
  display:flex; align-items:center; gap:14px;
  margin: 50px 0 24px;
}
.group-heading:first-of-type{ margin-top:0; }
.group-heading h3{
  font-family: var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.1em;
  color: var(--vermilion-deep); white-space:nowrap; font-weight:500;
}
.group-heading .gh-line{ height:1px; flex:1; background: rgba(43,36,28,0.14); }

/* ---------------- Member cell number ---------------- */
.m-cell{
  display:block; margin-top:6px; font-family: var(--mono); font-size:11px;
  color: var(--ink-soft); letter-spacing:.02em;
}
.m-cell a{ color: inherit; }
.m-cell a:hover{ color: var(--vermilion-deep); }

/* ---------------- Compact sub-team list (Advisory / Women / Youth / Digital) ---------------- */
.subgroup-list{
  columns: 2 220px; column-gap: 32px;
  background: var(--white); border-radius: var(--radius-md);
  padding: 28px 32px; box-shadow: var(--shadow-card); border: 1px solid rgba(43,36,28,0.06);
}
.subgroup-list li{
  break-inside: avoid; padding: 8px 0; border-bottom: 1px dashed rgba(43,36,28,0.1);
  font-size: 14.5px; color: var(--ink);
}
@media (max-width: 560px){ .subgroup-list{ columns:1; padding: 22px 24px; } }

.team-howto{
  max-width: 780px; margin: 54px auto 0; background: var(--ivory-2);
  border-radius: var(--radius-md); padding: 24px 28px; font-size:14px; color: var(--ink-soft);
  border-left: 4px solid var(--gold-deep);
}
.team-howto strong{ color: var(--navy); }
.team-howto code{
  background: rgba(43,36,28,0.08); padding:2px 7px; border-radius:6px; font-family: var(--mono); font-size:12.5px;
}