/* ─── Over ons: foto links, kaart eroverheen ───── */
.team { padding: clamp(80px, 12vh, 140px) var(--gutter); background: var(--ivory-2); }
.team__inner { max-width: 1240px; margin: 0 auto; }
.team__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 5vh, 56px); }
.team__head .kicker { color: var(--gold-deep); margin-bottom: 14px; }
.team__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -.03em; color: var(--navy); }
.team__head h2 em { font-style: normal; color: var(--gold); }
.team__stage { display: flex; align-items: center; outline: none; }
.team__photo { position: relative; width: min(470px, 42vw); aspect-ratio: 1; flex-shrink: 0; border-radius: 24px; overflow: hidden; background: var(--sand); transition: opacity .3s var(--ease-soft), transform .5s var(--ease-out); }
.team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team__placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(120% 100% at 20% 0%, #1E2B4A, var(--navy) 65%); color: var(--ivory); }
.team__placeholder span { font-family: var(--font-display); font-weight: 300; font-size: clamp(64px, 8vw, 120px); letter-spacing: -.04em; color: var(--gold); line-height: 1; }
.team__placeholder small { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,239,231,.55); }
.team__card { position: relative; z-index: 1; flex: 1; max-width: 600px; margin-left: -80px; padding: clamp(28px, 3.2vw, 48px); border-radius: 24px; background: #fff; border: 1px solid rgba(16,26,48,.08); box-shadow: 0 40px 80px -40px rgba(16,26,48,.35); transition: opacity .3s var(--ease-soft), transform .5s var(--ease-out); }
.team__photo.is-out, .team__card.is-out { opacity: 0; transform: translateY(8px); }
.team__num { font-size: 12px; letter-spacing: .18em; color: var(--gold-deep); font-weight: 500; margin-bottom: 14px; }
.team__num span { color: var(--grey); font-weight: 400; }
.team__card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.025em; color: var(--navy); }
.team__rol { margin-top: 6px; font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--gold-deep); }
.team__tekst { margin-top: 18px; font-size: 16px; line-height: 1.65; color: #2A2F3E; }
.team__links { display: flex; gap: 12px; margin-top: 26px; }
.team__links a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy); color: var(--ivory); transition: background .3s, transform .3s var(--ease-out); }
.team__links a svg { width: 18px; height: 18px; }
.team__links a:hover { background: var(--gold-deep); transform: translateY(-2px); }
.team__nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 36px; }
.team__arrow { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--navy-45); color: var(--navy); background: transparent; transition: background .3s, color .3s; }
.team__arrow svg { width: 18px; height: 18px; }
.team__arrow:hover { background: var(--navy); color: var(--ivory); }
.team__dots { display: flex; gap: 8px; }
.team__dots button { width: 10px; height: 10px; border-radius: 50%; background: rgba(16,26,48,.2); transition: background .3s, transform .3s; }
.team__dots button.is-on { background: var(--gold); transform: scale(1.2); }
@media (max-width: 860px) { .team__stage { flex-direction: column; align-items: stretch; } .team__photo { width: 100%; max-width: 420px; margin: 0 auto; } .team__card { margin: -40px 12px 0; max-width: none; } .team__head { flex-direction: column; align-items: flex-start; } }
