/* ===== Team — page-specific signature components ===== */
/* Three moves carry the whole page, reused deliberately instead of scattered
   one-off effects: oversized ghost numerals (echoes About's value pillars),
   the strata-line motif (echoes About's section dividers), and a single
   dominant pull-quote in place of a headshot grid. No stock photography —
   the typography and the strata pattern are the imagery. */

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.team-hero {
    position: relative;
    padding: 72px 0 64px;
    overflow: hidden;
}
.team-hero::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -12%;
    width: 55%;
    height: 160%;
    background: radial-gradient(circle, var(--gold-dim) 0%, transparent 68%);
    pointer-events: none;
}
.team-hero-strata {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.team-hero-strata svg { width: 100%; height: 100%; }
.team-hero .team-hero-content {
    position: relative;
    z-index: 1;
    padding: 0;
    max-width: 780px;
}
.team-hero .team-hero-content .hero-ctas { margin-top: 36px; }

@media (min-width: 768px) {
    .team-hero { padding: 108px 0 88px; }
}

/* ── Mission pull-quote ──────────────────────────────────────────────────────── */
.team-quote {
    position: relative;
    padding: 88px 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.team-quote-inner {
    position: relative;
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
}
.team-quote-inner::before {
    content: "\201C";
    display: block;
    font-family: var(--font-d);
    font-weight: 800;
    font-size: 8rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.16;
    margin-bottom: -1.2rem;
    pointer-events: none;
}
.team-quote blockquote {
    font-family: var(--font-d);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.6rem, 3.6vw, 2.75rem);
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--white);
    margin: 0 0 26px;
}
.team-quote-attribution {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

@media (min-width: 768px) {
    .team-quote { padding: 128px 0; }
    .team-quote-inner::before { font-size: 10rem; }
}

/* ── Roster: editorial masthead list ────────────────────────────────────────── */
.roster-group { margin-bottom: 52px; }
.roster-group:last-child { margin-bottom: 0; }
.roster-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.roster-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
    transition: var(--tr);
}
.roster-row:hover { border-color: var(--border-h); }
.roster-row:hover .roster-num { opacity: 0.34; }
.roster-row:hover .roster-name { color: var(--gold-bright); }

/* Photo slot — leadership rows carry a headshot ahead of the ghost numeral */
.roster-row.has-photo {
    grid-template-columns: 64px 44px 1fr;
    align-items: start;
}
.roster-photo {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--g900, #14202e);
}
.roster-row.has-photo .roster-meta { grid-column: 2 / -1; }

.roster-num {
    font-family: var(--font-d);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--gold);
    opacity: 0.18;
    transition: var(--tr);
}
.roster-main { min-width: 0; }
.roster-name {
    font-family: var(--font-d);
    font-weight: 800;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    color: var(--white);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 4px;
    transition: var(--tr);
}
.roster-role {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--g500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.roster-bio {
    font-size: 0.95rem;
    color: var(--g400);
    line-height: 1.65;
    max-width: 64ch;
    margin-bottom: 12px;
}
.roster-bio:last-of-type { margin-bottom: 0; }
.roster-meta {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}
.roster-hub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--g500);
}
.roster-hub i { color: var(--gold); font-size: 0.68rem; }
.roster-social {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--g700);
    display: grid;
    place-items: center;
    color: var(--g400);
    font-size: 0.82rem;
    text-decoration: none;
    transition: var(--tr);
}
.roster-social:hover { border-color: var(--gold); color: var(--gold); }

@media (min-width: 768px) {
    .roster-row {
        grid-template-columns: 72px 1fr auto;
        gap: 28px;
        align-items: center;
        padding: 30px 0;
    }
    .roster-row.has-photo {
        grid-template-columns: 96px 72px 1fr auto;
        align-items: center;
    }
    .roster-row.has-photo .roster-meta { grid-column: auto; }
    .roster-photo { width: 96px; height: 96px; }
    .roster-num { font-size: 2rem; }
    .roster-meta {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
        margin-top: 0;
        text-align: right;
    }
}

/* ── Join CTA ────────────────────────────────────────────────────────────────── */
.team-join-cta { display: flex; justify-content: center; margin-top: 8px; }
.team-join-cta .hero-btn-primary { display: inline-flex; align-items: center; gap: 10px; }
.team-join-cta .hero-btn-primary i { font-size: 0.85rem; transition: transform var(--tr); }
.team-join-cta .hero-btn-primary:hover i { transform: translateX(4px); }

/* ── RTL ─────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .team-hero::before { right: auto; left: -12%; }
[dir="rtl"] .roster-hub i,
[dir="rtl"] .team-join-cta .hero-btn-primary i { transform: scaleX(-1); }
[dir="rtl"] .team-join-cta .hero-btn-primary:hover i { transform: scaleX(-1) translateX(-4px); }

/* ── Reduced motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .roster-row, .roster-num, .roster-name, .roster-social,
    .team-join-cta .hero-btn-primary i { transition: none; }
    .team-join-cta .hero-btn-primary:hover i { transform: none; }
}