/* ==========================================================================
   TEAM PAGE - GLOBAL & NAV CLEARANCE
   ========================================================================== */
.team-page main {
    padding-top: 10rem;
    background-color: #fff;
}

/* ==========================================================================
   SECTION 1: TEAM HERO
   ========================================================================== */
#team-hero {
    position: relative;
    padding: 15rem 0 8rem;
    overflow: hidden;
    text-align: center;
}

.watermark-team {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15vw; /* Using VW for scale without overflow */
    font-weight: 900;
    color: rgba(18, 26, 51, 0.03);
    z-index: 1;
    pointer-events: none;
    letter-spacing: -0.05em;
}

.team-header-block {
    position: relative;
    z-index: 10;
    max-width: 50rem;
    margin: 0 auto;
}

.team-header-block .display-large {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.lead-text-grey {
    font-size: 1.125rem;
    color: var(--grey-label);
    line-height: 1.8;
}

/* ==========================================================================
   SECTION 2: EXPERTISE DOMAINS (THE FIX: 4-COLUMN GRID)
   ========================================================================== */
#expertise-domains {
    padding: 6rem 0;
    background-color: #fff;
}

.domains-grid {
    display: grid;
    /* THE FIX: Explicitly set to 4 columns for desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 1.5rem;
    align-items: stretch;
}

.domain-card {
    background: #fff;
    padding: 3rem 1.5rem;
    border-radius: 0.75rem;
    border-top: 4px solid var(--red);
    box-shadow: 0 1rem 3rem rgba(18, 26, 51, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.domain-card h4 {
    font-size: 1.375rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.domain-card p {
    font-size: 0.95rem;
    color: var(--grey-label);
    line-height: 1.6;
    flex-grow: 1;
}

/* ==========================================================================
   SECTION 3: ROSTER / SPECIALISTS (3-COLUMN GRID)
   ========================================================================== */
#specialists-section {
    padding: 8rem 0 12rem;
}

.roster-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Desktop Standard */
    gap: 4rem;
    margin-top: 6rem;
}

.specialist-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.member-photo-placeholder {
    width: 14rem;
    height: 14rem;
    background: var(--sm-light-grey);
    border-radius: 50%;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1.5rem 3.5rem rgba(18, 26, 51, 0.06);
}

.initials {
    font-family: 'Amaranth', sans-serif;
    font-size: 4rem;
    color: #ccc;
    font-weight: 700;
}

.member-name {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--navy);
}

.member-title {
    display: block;
    color: var(--red);
    font-weight: 800;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    margin: 0.5rem 0 1.25rem;
}

.member-bio {
    font-size: 1.1rem;
    color: var(--grey-label);
    line-height: 1.7;
    max-width: 25rem;
}

/* ==========================================================================
   RESPONSIVE OVERRIDES (TABLET & MOBILE ONLY)
   ========================================================================== */

@media (max-width: 64rem) { /* 1024px */
    .domains-grid { grid-template-columns: repeat(2, 1fr); }
    .roster-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 48rem) { /* 768px */
    .domains-grid { grid-template-columns: 1fr; }
    .roster-grid { grid-template-columns: 1fr; }
    
    .domain-card {
        padding: 2.5rem 2rem;
        text-align: left;
        align-items: flex-start;
    }
    
    .member-photo-placeholder {
        width: 12rem;
        height: 12rem;
    }
}