.col-leadership {
	--col-leadership-gold: #e6b85c;
	--col-leadership-purple: #a62dd6;
	scroll-margin-top: 100px;
	position: relative;
	width: 100%;
	overflow: visible;
	padding-block: var(--col-home-section-padding, clamp(40px, 4vw, 60px));
	padding-inline: 0;
	background: linear-gradient(145deg, #101018 0%, #17131e 48%, #101018 100%);
	color: #f5f0e8;
}

.col-leadership::before {
	position: absolute;
	inset: 18px 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(230, 184, 92, 0.44), rgba(166, 45, 214, 0.45), transparent);
	content: "";
}

.col-leadership__container {
	position: relative;
	width: 100%;
}

.col-leadership__heading {
	margin: 0 auto 18px;
	text-align: center;
}

.col-leadership__eyebrow {
	display: block;
	margin: 0 0 9px;
	color: var(--col-leadership-gold);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

.col-leadership__title {
	margin: 0;
	color: #f8f1e7;
	font-size: clamp(34px, 4.2vw, 52px);
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.12;
	text-transform: none;
}

.col-leadership__toggle {
	display: flex;
	width: max-content;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 22px auto 0;
	padding: 0 20px;
	border: 1px solid rgba(230, 184, 92, 0.5);
	border-radius: 999px;
	background: rgba(18, 16, 25, 0.8);
	color: #f0d48f;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	appearance: none;
	cursor: pointer;
	transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.col-leadership__disclosure {
	--col-leadership-fade-end: 262.5px;
	position: relative;
}

.col-leadership__disclosure:not(.is-expanded) .col-leadership__toggle {
	position: absolute;
	top: calc(var(--col-leadership-fade-end) - 22px);
	left: 50%;
	z-index: 6;
	margin: 0;
	transform: translateX(-50%);
}

.col-leadership__toggle:focus-visible {
	outline: 2px solid #f1d38c;
	outline-offset: 4px;
}

.col-leadership__toggle svg {
	display: block;
	width: 18px;
	height: 18px;
	transition: transform 220ms ease;
}

.col-leadership__toggle:hover,
.col-leadership__toggle:focus-visible {
	border-color: rgba(210, 123, 242, 0.85);
	background: rgba(166, 45, 214, 0.14);
	color: #f1d9ff;
	box-shadow: 0 0 18px rgba(166, 45, 214, .22);
}

.col-leadership__toggle-label--open,
.col-leadership__disclosure.is-expanded .col-leadership__toggle-label--closed {
	display: none;
}

.col-leadership__disclosure.is-expanded .col-leadership__toggle-label--open {
	display: inline;
}

.col-leadership__disclosure.is-expanded .col-leadership__toggle svg {
	transform: rotate(45deg);
}

.col-leadership__preview {
	display: block;
	max-height: 350px;
	overflow: hidden;
	mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.72) 50%, rgba(0, 0, 0, 0.35) 63%, transparent 75%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.72) 50%, rgba(0, 0, 0, 0.35) 63%, transparent 75%, transparent 100%);
	pointer-events: none;
	transition: max-height 720ms cubic-bezier(.2,.7,.25,1), mask-image 420ms ease;
}

.col-leadership__disclosure.is-expanded .col-leadership__preview {
	max-height: 2600px;
	mask-image: none;
	-webkit-mask-image: none;
	pointer-events: auto;
}

.col-leadership__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border: 1px solid transparent;
	border-radius: 2px;
	background:
		linear-gradient(145deg, #15121c, #100f17) padding-box,
		linear-gradient(115deg, rgba(230, 184, 92, 0.32), rgba(166, 45, 214, 0.44) 48%, rgba(230, 184, 92, 0.18)) border-box;
	box-shadow: 0 0 18px rgba(166, 45, 214, 0.05);
}

.col-leadership__member {
	box-sizing: border-box;
	position: relative;
	z-index: 0;
	display: flex;
	min-width: 0;
	min-height: 180px;
	align-items: center;
	gap: clamp(16px, 2.4vw, 30px);
	padding: 16px clamp(18px, 3.2vw, 40px);
	background: rgba(20, 15, 30, 0.65);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
	transform-origin: center;
	transition: transform 220ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.col-leadership__member::before,
.col-leadership__member::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.col-leadership__member::before {
	top: 16px;
	bottom: 16px;
	left: calc(100% - 4px);
	width: 9px;
	background:
		radial-gradient(circle, #ffe7a4 0 1.5px, rgba(166, 45, 214, 0.94) 2px 4px, transparent 4.6px) center / 9px 9px no-repeat,
		linear-gradient(to bottom, transparent, rgba(166, 45, 214, 0.55) 18%, rgba(230, 184, 92, 0.78) 50%, rgba(166, 45, 214, 0.55) 82%, transparent) center / 1px 100% no-repeat;
}

.col-leadership__member::after {
	right: 22px;
	bottom: 0;
	left: 22px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(166, 45, 214, 0.22) 18%, rgba(230, 184, 92, 0.46) 50%, rgba(166, 45, 214, 0.22) 82%, transparent);
}

.col-leadership__member:hover,
.col-leadership__member:focus-within {
	z-index: 4;
	background-color: rgba(53, 29, 66, 0.72);
	box-shadow: inset 0 0 0 1px rgba(230, 184, 92, 0.16), 0 0 20px rgba(166, 45, 214, 0.14);
	transform: scale(1.02);
}

.col-leadership__member--left {
	flex-direction: row;
	text-align: left;
}

.col-leadership__member--right {
	flex-direction: row-reverse;
	text-align: right;
}

.col-leadership__member--right::before {
	display: none;
}

.col-leadership__portrait-frame {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	isolation: isolate;
	flex: 0 0 clamp(88px, 9.8vw, 120px);
	width: clamp(88px, 9.8vw, 120px);
	height: clamp(116px, 12.3vw, 148px);
	padding: 3px;
	transform-origin: center;
	transition: transform 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.col-leadership__portrait-frame::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: conic-gradient(from 25deg, #f0cc78, #6c38aa 22%, #dc8b45 45%, #6d35a2 70%, #f0cc78);
	clip-path: polygon(9% 0, 40% 0, 50% 5%, 60% 0, 91% 0, 100% 9%, 100% 40%, 95% 50%, 100% 60%, 100% 91%, 91% 100%, 60% 100%, 50% 95%, 40% 100%, 9% 100%, 0 91%, 0 60%, 5% 50%, 0 40%, 0 9%);
	content: "";
	pointer-events: none;
}

.col-leadership__portrait-frame::after {
	position: absolute;
	inset: -24px;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(202, 105, 255, 0.65) 0%, rgba(166, 45, 214, 0.37) 34%, rgba(230, 184, 92, 0.2) 54%, transparent 74%);
	opacity: 0;
	content: "";
	transition: opacity 240ms ease;
}

.col-leadership__member:hover .col-leadership__portrait-frame,
.col-leadership__member:focus-within .col-leadership__portrait-frame,
.col-leadership__portrait-frame:hover {
	z-index: 5;
	transform: scale(1.16);
}

.col-leadership__member:hover .col-leadership__portrait-frame::after,
.col-leadership__member:focus-within .col-leadership__portrait-frame::after,
.col-leadership__portrait-frame:hover::after {
		opacity: 0.95;
		box-shadow: 0 0 22px rgba(202, 105, 255, 0.28);
}

	.col-leadership__member:hover .col-leadership__portrait-frame,
	.col-leadership__member:focus-within .col-leadership__portrait-frame,
	.col-leadership__portrait-frame:hover {
		box-shadow: 0 0 15px rgba(230, 184, 92, 0.22), 0 0 26px rgba(166, 45, 214, 0.2);
}

.col-leadership__member:hover .col-leadership__portrait-inner img,
.col-leadership__member:focus-within .col-leadership__portrait-inner img,
.col-leadership__portrait-frame:hover img {
	transform: scale(1.08);
}

.col-leadership__portrait-inner {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
	border: 1px solid rgba(255, 226, 163, 0.76);
	box-sizing: border-box;
	clip-path: polygon(9% 0, 40% 0, 50% 5%, 60% 0, 91% 0, 100% 9%, 100% 40%, 95% 50%, 100% 60%, 100% 91%, 91% 100%, 60% 100%, 50% 95%, 40% 100%, 9% 100%, 0 91%, 0 60%, 5% 50%, 0 40%, 0 9%);
	background: radial-gradient(circle at 50% 34%, rgba(166, 45, 214, 0.5), #14121b 64%);
}

.col-leadership__portrait-inner::before {
	position: absolute;
	inset: 7px;
	z-index: 2;
	border: 1px solid rgba(255, 226, 163, 0.62);
	clip-path: polygon(11% 0, 42% 0, 50% 4%, 58% 0, 89% 0, 100% 11%, 100% 42%, 96% 50%, 100% 58%, 100% 89%, 89% 100%, 58% 100%, 50% 96%, 42% 100%, 11% 100%, 0 89%, 0 58%, 4% 50%, 0 42%, 0 11%);
	content: "";
	pointer-events: none;
}

.col-leadership__portrait-inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
	transition: transform 320ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.col-leadership__details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	min-width: 0;
}

.col-leadership__member--right .col-leadership__details {
	align-items: flex-end;
}

.col-leadership__details h3 {
	margin: 0;
	font-family: "Days One", "Chakra Petch", sans-serif;
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
	-webkit-text-stroke: 0;
	font-size: clamp(20px, 2.1vw, 27px);
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.15;
	text-transform: uppercase;
	word-break: normal;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	transition: color 220ms ease, text-shadow 220ms ease;
}

.col-leadership__member:hover .col-leadership__details h3,
.col-leadership__member:focus-within .col-leadership__details h3 {
	color: #fff;
	text-shadow: 0 0 16px rgba(243, 195, 99, 0.5);
}

.col-leadership__role {
	margin: 6px 0 0;
	font-family: "Chakra Petch", sans-serif;
	color: #f3c363;
	font-size: clamp(13px, 1.15vw, 14.5px);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.35;
	text-transform: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.col-leadership__desc {
	margin: 8px 0 0;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #e2daed;
	font-size: clamp(12.5px, 1.05vw, 13.5px);
	font-weight: 400;
	letter-spacing: 0.015em;
	line-height: 1.55;
	text-transform: none;
	max-width: 480px;
	transition: color 180ms ease;
}

.col-leadership__member:hover .col-leadership__desc,
.col-leadership__member:focus-within .col-leadership__desc {
	color: #ffffff;
}

.col-leadership__socials {
	display: flex;
	width: max-content;
	gap: 9px;
	margin-top: 12px;
	flex-shrink: 0;
}

.col-leadership__member--left .col-leadership__socials {
	align-self: flex-end;
}

.col-leadership__member--right .col-leadership__socials {
	align-self: flex-start;
}

.col-leadership__socials a {
	display: inline-grid;
	width: 31px;
	height: 31px;
	place-items: center;
	border: 1px solid rgba(230, 184, 92, 0.35);
	border-radius: 50%;
	color: #edc976;
	transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.col-leadership__socials a:hover,
.col-leadership__socials a:focus-visible {
	border-color: #c47ae1;
	background: rgba(166, 45, 214, 0.18);
	color: #f1d9ff;
}

.col-leadership__socials a:focus-visible,
.col-leadership__socials svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

@media (max-width: 767px) {
	.col-leadership {
		padding: var(--col-home-section-padding, 36px) 18px;
	}

	.col-leadership__heading {
		margin-bottom: 16px;
	}

	.col-leadership__toggle {
		min-height: 44px;
	}

	.col-leadership__disclosure {
		--col-leadership-fade-end: 450px;
	}

	.col-leadership__preview {
		max-height: 600px;
		mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.72) 50%, rgba(0, 0, 0, 0.35) 63%, transparent 75%, transparent 100%);
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.72) 50%, rgba(0, 0, 0, 0.35) 63%, transparent 75%, transparent 100%);
	}

	.col-leadership__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.col-leadership__member,
	.col-leadership__member--left,
	.col-leadership__member--right {
		min-height: 150px;
		flex-direction: row;
		gap: 16px;
		padding: 12px;
		text-align: left;
	}

	.col-leadership__member::before {
		display: none;
	}

	.col-leadership__portrait-frame {
		flex-basis: 88px;
		width: 88px;
		height: 116px;
	}

	.col-leadership__role {
		font-size: 13px;
	}

	.col-leadership__desc {
		font-size: 12.5px;
		line-height: 1.5;
		color: #e2daed;
		max-width: 100%;
	}

	.col-leadership__member--right .col-leadership__details {
		align-items: flex-start;
	}

	.col-leadership__member--left .col-leadership__socials,
	.col-leadership__member--right .col-leadership__socials {
		align-self: flex-end;
	}

	.col-leadership__member:hover,
	.col-leadership__member:focus-within {
		transform: scale(1.012);
	}

	.col-leadership__portrait-frame::after { inset: -12px; }

	.col-leadership__details h3 {
		font-size: clamp(18px, 5vw, 24px);
	}

	.col-leadership__title {
		font-size: clamp(30px, 8vw, 42px);
	}
}

@media (max-width: 360px) {
	.col-leadership {
		padding-inline: 12px;
	}

	.col-leadership__member,
	.col-leadership__member--left,
	.col-leadership__member--right {
		gap: 12px;
		padding: 10px;
	}

	.col-leadership__portrait-frame {
		flex-basis: 76px;
		width: 76px;
		height: 104px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.col-leadership__socials a,
	.col-leadership__toggle,
	.col-leadership__member,
	.col-leadership__portrait-frame,
	.col-leadership__portrait-inner img,
	.col-leadership__portrait-frame::after,
	.col-leadership__portrait-frame::before {
		transition: none;
		animation: none !important;
	}

	.col-leadership__member:hover .col-leadership__portrait-frame,
	.col-leadership__member:focus-within .col-leadership__portrait-frame,
	.col-leadership__portrait-frame:hover,
	.col-leadership__member:hover .col-leadership__portrait-inner img,
	.col-leadership__member:focus-within .col-leadership__portrait-inner img,
	.col-leadership__portrait-frame:hover img {
		transform: none;
	}

	.col-leadership__member:hover,
	.col-leadership__member:focus-within {
		transform: none;
	}
}
