.staff-page { max-width: 1100px; margin: 0 auto; padding: 42px 15px 55px; }
.staff-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 42px; color: #fff; background: linear-gradient(120deg, #075c48, #168567); box-shadow: 0 10px 24px rgba(32, 59, 53, .12); }
.staff-hero h1 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 42px); line-height: 1.3; }
.staff-hero p:last-child { max-width: 650px; margin: 0; color: #e3f3ed; font-size: 17px; }
.staff-hero-icon { display: grid; width: 100px; height: 100px; flex: 0 0 100px; place-items: center; color: #f0c45d; border: 1px solid rgba(240, 196, 93, .7); font-size: 42px; }
.staff-list-section { margin-top: 35px; padding: 30px; background: var(--surface-color); border: 1px solid var(--border-color); box-shadow: 0 5px 18px rgba(32, 59, 53, .06); }
.staff-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.staff-section-heading h2 { margin: 0; color: var(--primary-color); font-size: 25px; }
.staff-section-heading > span { color: var(--muted-color); font-size: 13px; }
.staff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.staff-card { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 18px; border: 1px solid var(--border-color); border-top: 3px solid var(--accent-color); }
.staff-photo { width: 76px; height: 76px; flex: 0 0 76px; object-fit: cover; border: 3px solid var(--accent-color); border-radius: 50%; }
.staff-card-content { min-width: 0; }
.staff-card h3 { margin: 0 0 5px; color: var(--text-color); font-size: 16px; overflow-wrap: anywhere; }
.staff-card p { margin: 0; color: var(--muted-color); font-size: 13px; line-height: 1.4; }
.staff-card small { display: block; margin-top: 9px; color: var(--muted-color); font-size: 11px; }
.staff-card small i { color: var(--primary-color); }
.staff-page .source-note { margin-top: 20px; }

@media (max-width: 850px) {
	.staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.staff-page { padding-top: 30px; }
	.staff-hero { align-items: flex-start; flex-direction: column; padding: 28px 22px; }
	.staff-hero-icon { width: 70px; height: 70px; flex-basis: 70px; font-size: 28px; }
	.staff-list-section { padding: 25px 20px; }
	.staff-section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
	.staff-grid { grid-template-columns: 1fr; }
}
