/* Over ons — team cards and contact */

/* ---------- Team ---------- */
.team__grid { display: grid; gap: clamp(12px, 2vw, 24px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .team__grid { grid-template-columns: repeat(4, 1fr); } }
.member { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-md); background: var(--ink-2); color: #fff; aspect-ratio: 4 / 5.2; display: flex; align-items: flex-end; }
.member__photo { position: absolute; inset: 0; z-index: -2; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.member::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(12, 13, 15, .92) 0%, rgba(12, 13, 15, .45) 38%, transparent 65%);
}
.member::after { /* brand slash grows on hover */
  content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 32px; background: var(--red);
  transition: width .5s var(--ease);
}
.member:hover .member__photo img { transform: scale(1.06); }
.member:hover::after { width: 100%; }
.member__body { display: grid; gap: 4px; padding: clamp(14px, 2vw, 24px); }
.member__role { justify-self: start; margin-bottom: 6px; padding: 5px 8px; border-radius: 3px; background: var(--red); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.member__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: .95; text-transform: uppercase; text-wrap: balance; }
.member__note { font-style: italic; font-size: var(--fs-small); color: rgba(255, 255, 255, .8); }
@media (max-width: 559px) { .member__role { font-size: .625rem; letter-spacing: .1em; } .member__note { font-size: .875rem; } }

/* ---------- Contact ---------- */
.contact__grid { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; } }
.contact__copy { display: grid; gap: 24px; justify-items: start; }
.contact__mail {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
  font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1; overflow-wrap: anywhere;
  padding-bottom: 6px; border-bottom: 2px solid var(--red); transition: color .2s;
}
.contact__mail svg { width: .7em; height: .7em; flex: none; color: var(--red); transition: transform .3s var(--ease); }
.contact__mail:hover { color: var(--red); }
.contact__mail:hover svg { transform: translateX(6px); }
.contact__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; margin-top: 8px; }
.contact__info dt { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
.contact__info dd { margin-top: 6px; font-size: 1.125rem; font-weight: 500; }
.contact__info a:hover { color: var(--red); }
.contact__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); }