/*!
 * Monkey Vision, expert studio styling.
 *
 * Editorial-dark design system for MV Experts single page + blog-inject card.
 * Uses Fraunces (variable serif, italic display), Sora (geometric body) and
 * JetBrains Mono (accent labels). Navy `#100129` is the dominant surface;
 * green `#44E78E` powers all CTAs and accents; purple `#6F06FB` adds
 * atmospheric glows.
 */

/* ============================================================
   Tokens
   ============================================================ */
:root {
	--mvex-navy:        #100129;
	--mvex-navy-2:      #1a0a3a;
	--mvex-navy-3:      #241247;
	--mvex-navy-4:      #2e1758;
	--mvex-green:       #44E78E;
	--mvex-green-soft:  rgba(68, 231, 142, 0.12);
	--mvex-purple:      #6F06FB;
	--mvex-purple-soft: rgba(111, 6, 251, 0.18);

	--mvex-text:        #FAFAFA;
	--mvex-text-mid:    rgba(250, 250, 250, 0.72);
	--mvex-text-dim:    rgba(250, 250, 250, 0.48);
	--mvex-border:      rgba(250, 250, 250, 0.09);
	--mvex-border-2:    rgba(250, 250, 250, 0.16);

	--mvex-font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
	--mvex-font-body:    'Sora', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--mvex-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--mvex-radius-sm: 10px;
	--mvex-radius-md: 16px;
	--mvex-radius-lg: 24px;
	--mvex-radius-xl: 32px;

	--mvex-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   Single-expert page wrapper
   ============================================================ */
.mvex-studio {
	background: var(--mvex-navy);
	color: var(--mvex-text);
	font-family: var(--mvex-font-body);
	font-size: 17px;
	line-height: 1.6;
	padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px) clamp(80px, 10vw, 140px);
	position: relative;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.mvex-studio * {
	box-sizing: border-box;
}

/* Atmospheric glows, fixed to viewport so they parallax subtly while scrolling. */
.mvex-studio::before,
.mvex-studio::after {
	content: '';
	position: absolute;
	pointer-events: none;
	filter: blur(60px);
	opacity: 0.9;
	z-index: 0;
}
.mvex-studio::before {
	top: -260px;
	left: -200px;
	width: 720px;
	height: 720px;
	background: radial-gradient(circle, var(--mvex-purple-soft), transparent 62%);
}
.mvex-studio::after {
	bottom: -340px;
	right: -240px;
	width: 820px;
	height: 820px;
	background: radial-gradient(circle, rgba(68, 231, 142, 0.10), transparent 62%);
}

.mvex-studio__article {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
}

/* Subtle grain overlay for texture. */
.mvex-studio__article::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	mix-blend-mode: overlay;
	opacity: 0.6;
	z-index: -1;
}

/* ============================================================
   Hero
   ============================================================ */
.mvex-hero {
	margin-bottom: clamp(72px, 10vw, 132px);
	animation: mvex-fade-up 0.9s var(--mvex-easing) both;
}

.mvex-hero__inner {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) minmax(0, 1.45fr);
	gap: clamp(40px, 6vw, 88px);
	align-items: center;
}

@media (max-width: 880px) {
	.mvex-hero__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.mvex-hero__photo {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--mvex-radius-lg);
	overflow: hidden;
	isolation: isolate;
	margin: 0;
	max-width: 520px;
}

.mvex-hero__photo img {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.2s var(--mvex-easing);
}

.mvex-hero__photo:hover img {
	transform: scale(1.025);
}

.mvex-hero__photo-glow {
	position: absolute;
	inset: -3px;
	z-index: 1;
	border-radius: calc(var(--mvex-radius-lg) + 3px);
	background: conic-gradient(from 180deg at 50% 50%,
		var(--mvex-green) 0deg,
		var(--mvex-purple) 140deg,
		var(--mvex-green) 360deg);
	filter: blur(22px);
	opacity: 0.55;
	animation: mvex-rotate 14s linear infinite;
}

@keyframes mvex-rotate {
	to { transform: rotate(360deg); }
}

/* Eyebrow label */
.mvex-hero__eyebrow {
	font-family: var(--mvex-font-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mvex-text-mid);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
	flex-wrap: wrap;
}

.mvex-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	background: var(--mvex-green);
	border-radius: 50%;
	box-shadow: 0 0 14px var(--mvex-green);
	animation: mvex-pulse 2.6s ease-in-out infinite;
}

@keyframes mvex-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(0.75); }
}

.mvex-divider {
	color: var(--mvex-text-dim);
	font-weight: 300;
}

/* Big italic name */
.mvex-hero__name {
	font-family: var(--mvex-font-display);
	font-variation-settings: "opsz" 144, "wght" 460, "SOFT" 0;
	font-style: italic;
	font-size: clamp(48px, 9.5vw, 132px);
	line-height: 0.94;
	letter-spacing: -0.035em;
	margin: 0 0 18px;
	color: var(--mvex-text);
	text-wrap: balance;
}

.mvex-hero__role {
	font-family: var(--mvex-font-mono);
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--mvex-green);
	margin: 0 0 32px;
	text-transform: uppercase;
}

.mvex-hero__lead {
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.55;
	color: var(--mvex-text-mid);
	max-width: 580px;
	margin-bottom: 44px;
}

.mvex-hero__lead p {
	margin: 0 0 14px;
}

.mvex-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

/* ============================================================
   Buttons
   ============================================================ */
.mvex-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	border-radius: 999px;
	font-family: var(--mvex-font-mono);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform 0.3s var(--mvex-easing),
		background 0.3s var(--mvex-easing),
		color 0.3s var(--mvex-easing),
		box-shadow 0.3s var(--mvex-easing);
	white-space: nowrap;
}

.mvex-btn svg {
	transition: transform 0.3s var(--mvex-easing);
}

.mvex-btn--primary {
	background: var(--mvex-green);
	color: var(--mvex-navy);
	font-weight: 600;
}

.mvex-btn--primary:hover,
.mvex-btn--primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -10px rgba(68, 231, 142, 0.55);
}

.mvex-btn--primary:hover svg {
	transform: translateX(3px);
}

.mvex-btn--ghost {
	background: transparent;
	color: var(--mvex-text);
	border: 1px solid var(--mvex-border-2);
}

.mvex-btn--ghost:hover,
.mvex-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--mvex-green);
	color: var(--mvex-green);
}

/* ============================================================
   Socials inline list
   ============================================================ */
.mvex-socials {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 0;
	padding: 0;
}

.mvex-socials a {
	font-family: var(--mvex-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mvex-text-mid);
	text-decoration: none;
	padding: 4px 0;
	position: relative;
	transition: color 0.25s var(--mvex-easing);
}

.mvex-socials a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	opacity: 0.25;
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 0.35s var(--mvex-easing), opacity 0.25s ease;
}

.mvex-socials a:hover {
	color: var(--mvex-green);
}
.mvex-socials a:hover::after {
	opacity: 1;
	transform: scaleX(1);
}

/* ============================================================
   Stats strip
   ============================================================ */
.mvex-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	border-top: 1px solid var(--mvex-border);
	border-bottom: 1px solid var(--mvex-border);
	margin-bottom: clamp(60px, 8vw, 100px);
}

.mvex-stat {
	padding: 36px 28px;
	border-right: 1px solid var(--mvex-border);
}

.mvex-stat:last-child {
	border-right: none;
}

@media (max-width: 720px) {
	.mvex-stat {
		border-right: none;
		border-bottom: 1px solid var(--mvex-border);
	}
	.mvex-stat:last-child {
		border-bottom: none;
	}
}

.mvex-stat__num {
	font-family: var(--mvex-font-display);
	font-variation-settings: "opsz" 144, "wght" 480;
	font-size: clamp(36px, 6vw, 64px);
	line-height: 1;
	color: var(--mvex-green);
	margin-bottom: 10px;
	letter-spacing: -0.02em;
}

.mvex-stat__label {
	font-family: var(--mvex-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mvex-text-mid);
}

/* ============================================================
   Sections
   ============================================================ */
.mvex-section {
	margin-bottom: clamp(64px, 9vw, 110px);
}

.mvex-section__header {
	margin-bottom: 36px;
	max-width: 820px;
}

.mvex-section__title {
	font-family: var(--mvex-font-display);
	font-variation-settings: "opsz" 144, "wght" 500;
	font-size: clamp(32px, 5vw, 60px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 12px;
	color: var(--mvex-text);
}

.mvex-section__title em {
	font-style: italic;
	color: var(--mvex-green);
}

.mvex-section__subtitle {
	font-family: var(--mvex-font-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mvex-text-mid);
	margin: 0;
}

/* ============================================================
   Tags / chips
   ============================================================ */
.mvex-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin: 0;
}

.mvex-tag {
	display: inline-flex;
	align-items: center;
	padding: 12px 20px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--mvex-border);
	border-radius: 999px;
	font-size: 13.5px;
	color: var(--mvex-text);
	transition: border-color 0.25s var(--mvex-easing),
		background 0.25s var(--mvex-easing),
		transform 0.25s var(--mvex-easing);
	will-change: transform;
}

.mvex-tag:hover {
	border-color: var(--mvex-green);
	background: var(--mvex-green-soft);
	transform: translateY(-2px);
}

/* ============================================================
   Bio
   ============================================================ */
.mvex-bio__content {
	max-width: 760px;
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.72;
	color: var(--mvex-text-mid);
}

.mvex-bio__content p {
	margin: 0 0 22px;
}

.mvex-bio__content p:last-child {
	margin-bottom: 0;
}

.mvex-bio__content a {
	color: var(--mvex-green);
	border-bottom: 1px solid currentColor;
	text-decoration: none;
	padding-bottom: 1px;
	transition: background 0.2s ease, color 0.2s ease;
}

.mvex-bio__content a:hover {
	background: var(--mvex-green);
	color: var(--mvex-navy);
}

/* ============================================================
   Split: education + awards
   ============================================================ */
.mvex-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 6vw, 88px);
}

@media (max-width: 720px) {
	.mvex-split {
		grid-template-columns: 1fr;
	}
}

.mvex-split__title {
	font-family: var(--mvex-font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mvex-green);
	margin: 0 0 24px;
}

.mvex-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mvex-list__item {
	padding: 22px 0;
	border-bottom: 1px solid var(--mvex-border);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 18px;
	align-items: baseline;
}

.mvex-list__item:first-child {
	padding-top: 0;
}

.mvex-list__main {
	font-family: var(--mvex-font-display);
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.2;
	color: var(--mvex-text);
}

.mvex-list__main a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.mvex-list__main a:hover {
	border-bottom-color: var(--mvex-green);
}

.mvex-list__sub {
	font-family: var(--mvex-font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mvex-text-mid);
	margin-top: 6px;
}

.mvex-list__year {
	font-family: var(--mvex-font-mono);
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--mvex-green);
}

/* ============================================================
   Credentials grid
   ============================================================ */
.mvex-creds {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}

.mvex-cred {
	padding: 28px;
	background: linear-gradient(155deg, var(--mvex-navy-2), var(--mvex-navy));
	border: 1px solid var(--mvex-border);
	border-radius: var(--mvex-radius-md);
	transition: border-color 0.3s var(--mvex-easing),
		transform 0.3s var(--mvex-easing),
		background 0.3s var(--mvex-easing);
}

.mvex-cred:hover {
	border-color: var(--mvex-green);
	transform: translateY(-4px);
	background: linear-gradient(155deg, var(--mvex-navy-3), var(--mvex-navy));
}

.mvex-cred__name {
	font-size: 16px;
	line-height: 1.4;
	color: var(--mvex-text);
	margin-bottom: 14px;
}

.mvex-cred__issuer {
	font-family: var(--mvex-font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mvex-green);
	margin-bottom: 6px;
}

.mvex-cred__year {
	font-family: var(--mvex-font-mono);
	font-size: 12px;
	color: var(--mvex-text-dim);
}

/* ============================================================
   Publications / podcasts
   ============================================================ */
.mvex-pubs {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 32px;
}

.mvex-pub {
	padding: 32px;
	background: linear-gradient(160deg, var(--mvex-navy-2), var(--mvex-navy));
	border: 1px solid var(--mvex-border);
	border-radius: var(--mvex-radius-lg);
}

.mvex-pub__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	font-family: var(--mvex-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.mvex-pub__type {
	color: var(--mvex-green);
}

.mvex-pub__publisher,
.mvex-pub__year {
	color: var(--mvex-text-mid);
}

.mvex-pub__divider {
	color: var(--mvex-text-dim);
}

.mvex-pub__title {
	font-family: var(--mvex-font-display);
	font-variation-settings: "opsz" 36, "wght" 500;
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 22px;
}

.mvex-pub__title a {
	color: var(--mvex-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.mvex-pub__title a:hover {
	color: var(--mvex-green);
}

.mvex-pub__embed {
	width: 100%;
	height: 152px;
	border-radius: 12px;
	border: none;
	display: block;
}

/* ============================================================
   Team
   ============================================================ */
.mvex-team {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	padding: 0;
	margin: 0;
}

.mvex-team__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 24px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--mvex-border);
	border-radius: var(--mvex-radius-lg);
	text-decoration: none;
	text-align: center;
	transition: border-color 0.3s var(--mvex-easing),
		transform 0.3s var(--mvex-easing),
		background 0.3s var(--mvex-easing);
}

.mvex-team__link:hover {
	border-color: var(--mvex-green);
	transform: translateY(-4px);
	background: rgba(255, 255, 255, 0.045);
}

.mvex-team__photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 8px;
	position: relative;
}

.mvex-team__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mvex-team__name {
	font-family: var(--mvex-font-display);
	font-style: italic;
	font-size: 22px;
	line-height: 1.1;
	color: var(--mvex-text);
}

.mvex-team__role {
	font-family: var(--mvex-font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mvex-text-mid);
}

/* ============================================================
   CTA
   ============================================================ */
.mvex-cta {
	position: relative;
	background: linear-gradient(165deg, var(--mvex-navy-2) 0%, var(--mvex-navy-3) 60%, var(--mvex-navy-4) 100%);
	border: 1px solid var(--mvex-border-2);
	border-radius: var(--mvex-radius-xl);
	padding: clamp(48px, 7vw, 96px);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.mvex-cta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(circle at 25% 25%, rgba(68, 231, 142, 0.18), transparent 50%),
		radial-gradient(circle at 75% 75%, rgba(111, 6, 251, 0.22), transparent 55%);
	pointer-events: none;
}

.mvex-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}

.mvex-cta__eyebrow {
	font-family: var(--mvex-font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mvex-text-mid);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
}

.mvex-cta__title {
	font-family: var(--mvex-font-display);
	font-size: clamp(32px, 6vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 16px;
	color: var(--mvex-text);
	text-wrap: balance;
}

.mvex-cta__title em {
	font-style: italic;
	color: var(--mvex-green);
}

.mvex-cta__sub {
	color: var(--mvex-text-mid);
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.55;
	margin: 0 0 36px;
	max-width: 560px;
	margin-inline: auto;
}

.mvex-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* ============================================================
   Fade-in animation (subtle)
   ============================================================ */
@keyframes mvex-fade-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.mvex-section {
	animation: mvex-fade-up 0.6s var(--mvex-easing) both;
	animation-timeline: view();
	animation-range: entry 5% cover 30%;
}

/* Reduced motion: kill animations, keep static. */
@media (prefers-reduced-motion: reduce) {
	.mvex-hero,
	.mvex-section,
	.mvex-hero__photo img,
	.mvex-hero__photo-glow {
		animation: none !important;
		transition: none !important;
	}
}

/* ============================================================
   Signature card (auto-injected under blog posts)
   ============================================================ */
.mvex-card-studio {
	--card-bg: var(--mvex-navy);
	--card-bg-hover: var(--mvex-navy-2);
	font-family: var(--mvex-font-body);
	background: var(--card-bg);
	color: var(--mvex-text);
	border: 1px solid var(--mvex-border);
	border-radius: var(--mvex-radius-md);
	padding: 28px 32px;
	margin: 48px 0;
	position: relative;
	overflow: hidden;
	transition: border-color 0.3s var(--mvex-easing),
		transform 0.3s var(--mvex-easing),
		background 0.3s var(--mvex-easing);
}

.mvex-card-studio:hover {
	border-color: rgba(68, 231, 142, 0.45);
	transform: translateY(-2px);
	background: var(--card-bg-hover);
}

.mvex-card-studio__rail {
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	background: var(--mvex-green);
	transition: width 0.3s var(--mvex-easing);
}

.mvex-card-studio:hover .mvex-card-studio__rail {
	width: 5px;
}

.mvex-card-studio::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, var(--mvex-purple-soft), transparent 65%);
	pointer-events: none;
	transition: transform 0.6s var(--mvex-easing);
}

.mvex-card-studio:hover::before {
	transform: scale(1.2) rotate(8deg);
}

.mvex-card-studio__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
}

@media (max-width: 640px) {
	.mvex-card-studio {
		padding: 22px 24px;
	}
	.mvex-card-studio__inner {
		grid-template-columns: auto 1fr;
		gap: 18px;
	}
	.mvex-card-studio__cta {
		grid-column: 1 / -1;
		justify-self: start;
		margin-top: 14px;
	}
}

.mvex-card-studio__photo {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
	transition: transform 0.3s var(--mvex-easing);
}

.mvex-card-studio__photo::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1px solid var(--mvex-green);
	opacity: 0;
	transition: opacity 0.3s var(--mvex-easing);
}

.mvex-card-studio:hover .mvex-card-studio__photo::after {
	opacity: 0.6;
}

.mvex-card-studio__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mvex-card-studio__eyebrow {
	font-family: var(--mvex-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mvex-text-mid);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	flex-wrap: wrap;
}

.mvex-card-studio__dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--mvex-green);
	border-radius: 50%;
}

.mvex-card-studio__divider {
	color: var(--mvex-text-dim);
}

.mvex-card-studio__name {
	font-family: var(--mvex-font-display);
	font-variation-settings: "opsz" 36, "wght" 500;
	font-style: italic;
	font-size: clamp(22px, 2.5vw, 28px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 4px;
}

.mvex-card-studio__name a {
	color: var(--mvex-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.mvex-card-studio__name a:hover {
	color: var(--mvex-green);
}

.mvex-card-studio__role {
	font-family: var(--mvex-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--mvex-green);
	margin: 0 0 8px;
}

.mvex-card-studio__lead {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--mvex-text-mid);
	margin: 0;
	max-width: 56ch;
}

.mvex-card-studio__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--mvex-green);
	color: var(--mvex-navy);
	font-family: var(--mvex-font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.25s var(--mvex-easing),
		transform 0.25s var(--mvex-easing);
}

.mvex-card-studio__cta svg {
	transition: transform 0.25s var(--mvex-easing);
}

.mvex-card-studio__cta:hover {
	background: var(--mvex-text);
}

.mvex-card-studio__cta:hover svg {
	transform: translateX(3px);
}

/* ============================================================
   Salient header harmonisation on expert pages.
   ============================================================
   Salient's perma-transparent header (`body.single-expert.transparent-header`)
   sits over our dark hero. We add a navy fallback for sites where the theme
   header doesn't go fully transparent, and we strip Salient's default white
   bottom-border so it doesn't draw a visible seam.
*/
body.single-expert,
body.single-expert #ajax-content-wrap,
body.single-expert .container-wrap,
body.single-expert #page-header-bg {
	background: var(--mvex-navy) !important;
}

/* Salient's #header-outer carries data-user-set-bg='#232220' (dark gray),
   which we override to our navy so the header reads as part of the same
   surface as the hero. We force across all states: scrolled, mobile,
   secondary header, page-header background. */
body.single-expert #header-outer,
body.single-expert.ascend #header-outer,
body.single-expert #header-outer.detached,
body.single-expert #header-outer.scrolled-down,
body.single-expert #header-outer.transparent,
body.single-expert #header-secondary-outer,
body.single-expert #header-outer[data-format],
body.single-expert #header-outer[data-user-set-bg],
body.single-expert .nectar-mobile-only-section,
body.single-expert #header-outer .container .row .full-width-content .span_9 {
	background-color: var(--mvex-navy) !important;
	background-image: none !important;
	box-shadow: none !important;
	border-bottom: 1px solid var(--mvex-border) !important;
}

/* Drop the bottom border when the page is at the top — fully seamless. */
body.single-expert #header-outer:not(.scrolled-down):not(.detached) {
	border-bottom-color: transparent !important;
}

/* Logo + nav text on a dark background need light colours. */
body.single-expert #header-outer .sf-menu > li > a,
body.single-expert #header-outer .nectar-header-text-color-light,
body.single-expert #header-outer .mobile-icon-button {
	color: var(--mvex-text) !important;
}

/* Lift our hero up snug under the header. */
body.single-expert .mvex-studio {
	padding-top: clamp(40px, 6vw, 88px);
}

/* Extra cushion when the WP admin bar is showing. */
body.admin-bar.single-expert .mvex-studio {
	padding-top: clamp(56px, 7vw, 96px);
}

/* Salient sometimes wraps content in a white .container-wrap, kill it. */
body.single-expert .container-wrap.no-bottom-padding {
	padding-bottom: 0 !important;
}

/* Hide Salient's default page-title bar (we render our own hero). */
body.single-expert #page-header-bg,
body.single-expert .post-area-title-section {
	display: none !important;
}

/* ============================================================
   List-style hard reset, Salient parent theme keeps reapplying
   disc/circle bullets on UL>LI; we beat it with higher specificity.
   ============================================================ */
.mvex-studio ul,
.mvex-studio ol,
.mvex-studio li,
.mvex-card-studio ul,
.mvex-card-studio li {
	list-style: none !important;
	list-style-image: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}
.mvex-studio li::marker,
.mvex-studio li::before,
.mvex-card-studio li::marker,
.mvex-card-studio li::before {
	content: none !important;
	display: none !important;
}

/* ============================================================
   Hide tdi-knowledge-base "Over de auteur" block on kb_term pages,
   our MV Experts signature card replaces it (with the publication
   and last-update dates rolled into the card meta).
   ============================================================ */
.kb-author-updates,
.kb-author-updates-title,
.kb-author-updates-content,
.kb-author-bio,
.kb-author-bio-text,
.kb-author-name,
.kb-author-credentials,
.kb-author-meta,
.kb-author-updates-item,
.kb-author-info,
[class^="kb-author-"] {
	display: none !important;
}

/* ============================================================
   Signature card meta row, publication + last-update dates.
   ============================================================ */
.mvex-card-studio__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--mvex-border);
	font-family: var(--mvex-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mvex-text-dim);
}

.mvex-card-studio__meta-label {
	color: var(--mvex-text-mid);
}

.mvex-card-studio__meta-value {
	color: var(--mvex-green);
	letter-spacing: 0.04em;
	text-transform: none;
}

.mvex-card-studio__meta-divider {
	color: var(--mvex-text-dim);
}