:root{
  --bg:#0c4a6e;
  --gold:#ffc627;
  --line:#000;
  --radius:22px;
  --gap:4.5rem;
  --avatar:88px;
  --overlap:30px;
 --coord-shift: 20px; 
}

/* keep the lines above any CMS wrapper backgrounds, but below cards */

.org{ position:relative; isolation:isolate; max-width:1100px; margin:0 auto; }
.wires{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:1; }

.org-row{ display:grid; justify-content:center; gap:var(--gap); margin-block:2.25rem; position:relative; z-index:2; }
.org-row.director{ grid-template-columns:1fr; }
.org-row.associate{ grid-template-columns:1fr; }
.org-row.leads{ grid-template-columns:repeat(2,520px); column-gap:var(--gap); justify-content:center; }
/* Prevent left-edge bleed only for the coordinators grid */
.org-row.coordinators{
	grid-template-columns:repeat(4,minmax(260px,1fr));
	gap: calc(var(--gap) - 25px);
  padding-left: var(--overlap);
  transform: translateX(calc(-1 * var(--coord-shift)));
  padding-right: var(--coord-shift);   /* keeps content width the same and creates right gutter */
  box-sizing: border-box;  
}

/* .org-row.coordinators{ grid-template-columns:repeat(4,minmax(260px,1fr)); } */
@media (max-width:1200px){ .org-row.coordinators{ grid-template-columns:repeat(2,minmax(260px,1fr)); } }
@media (max-width:720px){ .org-row.leads{ grid-template-columns:1fr; } .org-row.coordinators{ grid-template-columns:1fr; } }
/* Optional: on very small screens, reduce the overlap a bit */
@media (max-width: 480px){
  :root{ --overlap: 24px; } /* was 30px; only affects the tiny viewports */
}
.org-row, .staff{ position:relative; z-index:2; }
.staff{ display:flex; align-items:center; width:100%; max-width:520px; margin:0 auto; }
.org-row.leads .staff{ width:520px; max-width:520px; }
.org-row.coordinators .staff{ max-width:360px; }

.avatar{
  width:var(--avatar); height:var(--avatar);
  border-radius:50% !important;
  border:4px solid #fff;
  background:var(--bg); color:#fff; font-weight:bold;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; z-index:3; box-shadow:0 0 0 4px var(--bg);
}

.card-wrap{ position:relative; display:inline-block; margin-left:calc(-1 * var(--overlap)); }

.band{
  position:absolute; left:30px; top:-6px; bottom:-6px;
  background:var(--gold); border-radius:var(--radius) !important; z-index:1;
}
.band{ right:20px; }         /* coordinators: band slightly longer on right */
.is-head .band{ right:23px; } /* heads: band shorter than white card */

.card{
  position:relative; background:#fff; border-radius:var(--radius) !important;
  min-width:225px; padding:.7rem 1rem .8rem; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.18); z-index:2;
}
.director .card, .associate .card, .leads .card {min-width:320px;}
.name{ font-weight:700; font-size:1rem; margin:0; }
.role{ font-size:.8rem; margin:.28rem 0 0; text-transform:uppercase; }

@media (max-width:440px){
  :root{ --avatar:82px; --overlap:26px; }
  .staff{ max-width:360px; } .org-row.leads .staff{ width:100%; max-width:360px; }
  .card{ min-width:230px; }
  .is-head .band{ right:60px; }
}

/* Optional: photo avatars without breaking the ring */
.avatar > img{
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius:50%;
  clip-path:circle(50% at 50% 50%);
}