/* v5.50 §189.20 — Meet your marketing team (/marketing/team/). Built on the
   coming soon page's tokens. Portraits are coloured monograms until the
   illustrated portraits are approved. */
.mt-hero { padding: 3rem 0 2rem; }
.mt-hero h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.05; margin: 0 0 1rem; }
.mt-hero h1 em { font-style: italic; color: var(--vr-primary); }
.mt-ai { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 1rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--vr-border); font-size: 0.82rem; color: var(--vr-text-muted); }
.mt-ai b { color: var(--vr-text); }

.mt-boss { display: grid; gap: 22px; align-items: center; padding: 22px; margin: 0 0 2rem; border: 1px solid color-mix(in srgb, var(--vr-primary) 45%, var(--vr-border)); border-radius: 20px; background: color-mix(in srgb, var(--vr-primary) 6%, var(--vr-card)); }
.mt-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mt-card { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; padding: 18px; border: 1px solid var(--vr-border); border-radius: 16px; background: var(--vr-card); }
.mt-face { position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--vr-font-heading); font-size: 2rem; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 45%), var(--c); box-shadow: inset 0 -6px 14px rgba(0,0,0,.25), 0 10px 24px -12px var(--c); }
.mt-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mt-boss .mt-face { width: 120px; height: 120px; font-size: 3rem; }
.mt-badge { position: absolute; right: -4px; bottom: 0; z-index: 1; padding: 2px 6px; border-radius: 999px; background: #0E1512; color: #EAF2EC; font-family: var(--vr-font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: .06em; border: 1px solid rgba(255,255,255,.2); }
.mt-name { margin: 0; font-family: var(--vr-font-heading); font-size: 1.45rem; color: var(--vr-text); }
.mt-role { margin: 2px 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vr-primary); }
.mt-bio { margin: 0; color: var(--vr-text-muted); line-height: 1.55; font-size: 0.95rem; }
.mt-boss .mt-name { font-size: 2rem; }
.mt-boss .mt-bio { font-size: 1.02rem; }
.mt-foot { margin: 2.5rem 0 0; padding: 18px; border-radius: 14px; border: 1px dashed var(--vr-border); color: var(--vr-text-muted); font-size: 0.95rem; line-height: 1.6; }
.mt-foot b { color: var(--vr-text); }
@media (min-width: 720px) { .mt-boss { grid-template-columns: 120px 1fr; } }
