/* The team — monogram cards; the orange square from the logo sits in each avatar */
.team-group { margin-top: 44px; }
.team-group + .team-group { margin-top: 56px; }
.team-label { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.team-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,122,26,.5), transparent); }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.person { position: relative; padding: 28px; border-radius: 24px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; overflow: hidden; isolation: isolate;
  transition: border-color .4s ease, transform .5s cubic-bezier(.2,.7,.1,1), background .4s ease; }
.person::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(60% 50% at 20% 0%, rgba(255,122,26,.16), transparent 70%), radial-gradient(60% 60% at 100% 100%, rgba(124,58,237,.14), transparent 70%); }
.person:hover { border-color: rgba(255,122,26,.38); transform: translateY(-4px); }
.person:hover::before { opacity: 1; }
.person-head { display: flex; align-items: center; gap: 16px; }
.avatar { position: relative; flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font: 700 22px/1 var(--display); letter-spacing: -.02em; color: #fff;
  background: linear-gradient(140deg, #1a1c46, #0b0d2c); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar i { position: absolute; left: -4px; bottom: -4px; width: 13px; height: 13px; border-radius: 3px; background: var(--orange); box-shadow: 0 0 0 3px #0b0d2c, 0 0 14px rgba(255,122,26,.7); transition: transform .5s cubic-bezier(.3,1.6,.5,1), box-shadow .5s ease; }
.person:hover .avatar i { transform: rotate(45deg) scale(1.2); box-shadow: 0 0 0 3px #0b0d2c, 0 0 22px rgba(255,122,26,1); }
.person h3 { font-size: 21px; letter-spacing: -.02em; margin: 0; }
.person .role { margin-top: 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-soft); }
.person p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
.person p a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,122,26,.6); text-underline-offset: 3px; }
.person ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.person li { position: relative; padding-left: 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.person li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 1.5px; background: var(--orange); transform: rotate(45deg); }
.person li b { color: var(--text); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.chips span { font-size: 12px; font-weight: 500; color: var(--text); padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
@media (max-width: 1020px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .team-grid { grid-template-columns: 1fr; } .person { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { .person, .avatar i { transition: none; } .person:hover { transform: none; } }