.staff-rank{margin:0 0 38px}.staff-rank>h3{padding-bottom:9px;border-bottom:2px solid var(--gold)}.staff-department{margin:20px 0}.staff-department h4{color:var(--teal);margin:0 0 12px;font-size:.92rem}
.staff-avatar.has-photo{overflow:hidden;background:#e7efed}.staff-avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block}

.staff-avatar.has-photo img{object-position:center 62%;transform:scale(1.08);transform-origin:center center}.staff-card{overflow:hidden}.staff-avatar{box-shadow:0 0 0 4px #f4f8f7}

/* Center personnel cards inside each rank/department group. */
.staff-grid{grid-template-columns:repeat(auto-fit,minmax(220px,270px));justify-content:center;align-items:stretch}.staff-department h4{text-align:center}.staff-rank>h3{text-align:left}.staff-card{width:100%}@media(max-width:620px){.staff-grid{grid-template-columns:minmax(0,270px)}}

.staff-department-group{margin:0 0 42px}.staff-department-group>h3{font:600 1.35rem Pridi;color:var(--navy);padding:13px 18px;border-left:5px solid var(--gold);background:#f7f5ee;border-radius:0 14px 14px 0}.staff-department-group .staff-rank{margin:22px 0 28px}.staff-department-group .staff-rank>h4{text-align:center;color:var(--teal);font:600 1rem Pridi;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid #e4ebe8}.staff-department-group .staff-rank>h3{display:none}

/* Personnel layout: three cards per row on desktop. */
.staff-grid{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}.staff-card{min-width:0}@media(max-width:1050px){.staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.staff-grid{grid-template-columns:1fr}}

/* Force personnel cards to 3 columns in the content area; reduce only on narrow screens. */
.content-main .staff-grid{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}.content-main .staff-card{min-width:0}@media(max-width:760px){.content-main .staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.content-main .staff-grid{grid-template-columns:1fr}}

/* Center three personnel cards per row without stretching cards too wide. */
.content-main .staff-grid{grid-template-columns:repeat(3,minmax(220px,260px));justify-content:center;gap:18px}.content-main .staff-card{width:100%;min-width:0}@media(max-width:860px){.content-main .staff-grid{grid-template-columns:repeat(2,minmax(220px,260px));justify-content:center}}@media(max-width:560px){.content-main .staff-grid{grid-template-columns:minmax(0,270px);justify-content:center}}

/* Keep every personnel rank row centered, including director and chiefs. */
.staff-department-group .staff-grid{display:grid!important;grid-template-columns:repeat(3,260px)!important;justify-content:center!important;justify-items:stretch!important}.staff-department-group .staff-card,.staff-department-group .staff-card.head{grid-column:auto!important;justify-self:stretch!important;max-width:none!important;width:100%!important}@media(max-width:900px){.staff-department-group .staff-grid{grid-template-columns:repeat(2,260px)!important}}@media(max-width:620px){.staff-department-group .staff-grid{grid-template-columns:minmax(0,270px)!important}}

/* Use flex for personnel rows so incomplete rows are centered. */
.staff-department-group .staff-grid{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:stretch!important;gap:18px!important}.staff-department-group .staff-card,.staff-department-group .staff-card.head{flex:0 0 240px!important;width:240px!important;max-width:240px!important;grid-column:auto!important;justify-self:auto!important}@media(max-width:620px){.staff-department-group .staff-card,.staff-department-group .staff-card.head{flex-basis:min(270px,100%)!important;width:min(270px,100%)!important;max-width:270px!important}}
