.team { padding: 100px 0; }

.team-heading {
    text-align: center;
    position: relative;
    padding-bottom: 24px;
}
.team-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--skin-red);
}

.team-org-chart { position: relative; }

.team-row-heading { text-align: center; margin-bottom: 24px; }

.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 32px;
}

/* Columns = max cards per row before wrapping — not a stretch-to-fill grid,
   so a row with fewer members than its column count still reads as a
   compact, centered group (matching the reference's 2-up management row)
   instead of two cards awkwardly stretched to half the section width. */
.team-grid--cols-2 .team-card { flex: 0 1 calc(50% - 16px); max-width: 340px; }
.team-grid--cols-3 .team-card { flex: 0 1 calc(33.333% - 22px); max-width: 300px; }
.team-grid--cols-4 .team-card { flex: 0 1 calc(25% - 24px); max-width: 280px; }

.team-row--top { padding-bottom: 40px; }
.team-row--bottom { padding-top: 40px; }

/* Absolutely positioned over the whole .team-org-chart (not sized/placed in
   normal flow) so its viewBox — set by JS to the chart's own measured
   width/height — maps 1:1 to the same coordinate space the line endpoints
   are calculated in. Sizing this in normal flow instead would force the
   SVG to scale/squash its internal coordinates to fit a box smaller than
   the chart, misplacing every line. */
.team-connector {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.team-connector line {
    stroke: var(--skin-grey-10);
    stroke-width: 2;
}
.team-row { position: relative; z-index: 1; }

.team-card {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--skin-white);
    border: 1px solid var(--skin-grey-10);
    border-radius: 16px;
    text-align: center;
    align-items: center;
}

.team-grid--align-left .team-card { text-align: left; align-items: flex-start; }
.team-grid--align-center .team-card { text-align: center; align-items: center; }
.team-grid--align-right .team-card { text-align: right; align-items: flex-end; }

.team-card-photo {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--skin-grey-5);
}
.team-card-photo img { width: 100%; height: 100%; object-fit: cover; }

.team-card-body { display: flex; flex-direction: column; align-items: inherit; gap: 8px; width: 100%; }

.team-card-name {
    position: relative;
    margin: 0 0 12px;
    padding-bottom: 12px;
    color: var(--skin-black);
}
.team-card-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: var(--skin-red);
}
.team-grid--align-left .team-card-name::after { left: 0; transform: none; }
.team-grid--align-right .team-card-name::after { left: auto; right: 0; transform: none; }

.team-card-position {
    margin: 0;
    font-size: 17px;
    color: var(--skin-black);
}
.team-card-description { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--skin-black); }

.team-card-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 12px;
    border-radius: 50%;
    background: var(--skin-grey-5);
    color: var(--skin-red);
    font-size: 16px;
    transition: background 0.2s ease, color 0.2s ease;
}
.team-card-linkedin:hover,
.team-card-linkedin:focus { background: var(--skin-red); color: var(--skin-white); }

@media (max-width: 1024px) {
    .team { padding: 60px 0; }
    .team-connector { display: none; }
}

@media (max-width: 767px) {
    .team-grid--cols-2 .team-card,
    .team-grid--cols-3 .team-card,
    .team-grid--cols-4 .team-card {
        flex: 1 1 100%;
        max-width: 400px;
    }
	
	.team-row--top {
		padding-bottom: 0;
	}
}