.section_partners_bio .section_description {
	margin-bottom: 50px;
	max-width: 580px;
}
.section_partners_bio .section_description strong {
	font-weight: 600;
	color: var(--wp--preset--color--black);
}
.section_partners_bio .bio_wraper {
	display: flex;
	gap: 7.5%;
}
.bio_wraper .bio_item {
	max-width: 530px;
}
.bio_wraper .bio_item:nth-child(2n) {
	margin-top: -135px;
}

.bio_wraper .bio_item .designation {
	font-size: 14px;
	text-transform: uppercase;
	font-style: italic;
}
.bio_wraper .bio_item .profile_image {
	margin-bottom: 34px;
}

.bio_wraper .bio_item .profile_image img {
	display: block;
	width: 100%;
}

.bio_wraper .bio_item .profile_name {
	margin-bottom: 5px;
}
.bio_wraper .bio_item .profile_sub_detail {
	position: relative;
	padding-right: 65px;
	display: inline-flex;
}
.bio_wraper .bio_item .linkedin_link {
	position: absolute;
	right: 0;
	top: -12px;
}
.bio_wraper .bio_item .profile_sub_detail .linkedin_link a {
	width: 35px;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-decoration: none;
	align-items: center;
	background-color: var(--wp--preset--color--darkblue);
	border-radius: 100%;
	color: var(--wp--preset--color--white);
	font-size: 17px;
}
.bio_wraper .bio_item .read_bio_btn_wrap {
	margin-top: 23px;
}

.bio_wraper .bio_item .profile_popup_content {
	display: none;
}

.modal_popup .profile_popup_content {
	width: 100%;
	overflow: hidden;
	position: relative;
	height: 100dvh;
	background-color: #fff;
	padding-top: 150px;
	transform: translate3d(0, -100%, 0); /* the sheet starts above the screen; see Bio panel below */
}

.modal_popup .profile_popup_content .profile_popup_content_inner {
	display: flex;
	gap: 4.5%;
	position: relative;
	overflow: auto;
	height: 100%;
}

.modal_popup .profile_popup_content .profile_image {
	width: 47.5%;
	overflow: hidden;
	clip-path: inset(0 0 100% 0); /* uncovered when the panel opens */
}
.modal_popup .profile_popup_content .profile_detail_wrap {
	flex: 1;
	padding: 20px;
}
.profile_detail_wrap .profile_detail {
	max-width: 592px;
	margin-top: 40px;
	margin-bottom: 30px;
}
.profile_detail_wrap .profile_detail strong {
	color: var(--wp--preset--color--black);
	font-weight: 600;
}
.profile_popup_content .profile_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile_popup_content .article_wrap {
	margin-bottom: 40px;
}
.profile_popup_content .article_wrap a {
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--playfairdisplay);
	font-size: var(--wp--preset--font-size--small-21);
	font-style: italic;
	font-weight: 500;
	line-height: 34px;
	text-decoration: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
/* "Read the Article": the drawn up-right arrow (shared, global/hero.css); its tail extends on hover */
.profile_popup_content .article_wrap a::after {
	--ar: 0.6em;
	--ar-gap: 4px;
}
.profile_popup_content .article_wrap a:focus-visible::after {
	--tail: calc(var(--ar) * 1.6);
}
@media (hover: hover) and (pointer: fine) {
	.profile_popup_content .article_wrap a:hover::after {
		--tail: calc(var(--ar) * 1.6);
	}
}
.profile_popup_content .linkedin_link {
	padding-bottom: 30px;
}

.profile_popup_content .linkedin_link a {
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--playfairdisplay);
	font-size: var(--wp--preset--font-size--small-24);
	font-style: italic;
	font-weight: 500;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 15px;
	transition: color var(--dur-short) var(--ease-out);
}
.profile_popup_content .linkedin_link a::after {
	--ar: 0.62em;
	--ar-gap: 0px; /* the link's gap spaces it */
}

.profile_popup_content .linkedin_link a i {
	width: 35px;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-decoration: none;
	align-items: center;
	background-color: var(--wp--preset--color--darkblue);
	border-radius: 100%;
	color: var(--wp--preset--color--white);
	font-size: 15px;
}
.profile_popup_content .designation {
	color: #262626;
	font-size: 16px;
	font-style: italic;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.32px;
}

.profile_detail_wrap .button_wrap {
	padding-bottom: 20px;
}

.modal_popup .profile_popup_content .back-to-home {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	left: 50px;
	top: 53px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 3px;
	text-transform: uppercase;
	cursor: pointer;
}
.modal_popup .profile_popup_content .back-to-home::before,
.modal_popup .profile_popup_content .back-to-home::after {
	content: none;
}
.modal_popup .profile_popup_content .back-to-home:focus-visible {
	outline: 2px solid var(--wp--preset--color--darkgreen);
	outline-offset: 6px;
	border-radius: 2px;
}

@media screen and (max-width: 1100px) {
	.section_partners_bio .section_description {
		width: 48%;
	}
	.modal_popup .profile_popup_content {
		padding-top: 100px;
	}
	.modal_popup .profile_popup_content .back-to-home {
		top: 37px;
	}
}
@media screen and (max-width: 980px) {
	.modal_popup .profile_popup_content .profile_popup_content_inner {
		flex-direction: column;
		gap: 10px;
	}
	.profile_detail_wrap .profile_detail {
		max-width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.modal_popup .profile_popup_content .profile_image {
		max-width: 300px;
		width: auto;
	}
	.modal_popup .profile_popup_content .back-to-home {
		left: 20px;
	}
}

@media screen and (max-width: 768px) {
	.section_partners_bio .section_description {
		width: 100%;
		max-width: unset;
	}
	.bio_wraper .bio_item:nth-child(2n) {
		margin-top: 0;
	}
}
@media screen and (max-width: 600px) {
	.section_partners_bio .bio_wraper {
		gap: 60px;
		flex-direction: column;
	}
	.bio_wraper .bio_item {
		max-width: unset;
	}
	.section_partners_bio .section_title br {
		display: none;
	}
}

/* ===================================
	Bio panel, in the same language as the full-screen menu:
	- Open: the sheet glides down (850ms in-out); the photo is uncovered top to bottom as it settles
		from 1.06x; then Back to home, the name, the title, each paragraph, the article and LinkedIn
		rise in out of a soft blur, 70ms apart (--bi, set by blocks/partners-bio/script.js).
	- Close (.is-closing, 760ms): the pieces lift away bottom to top (--bo), the sheet follows up.
	- The persistent menu button becomes the panel's close (×), at its usual size and place
		(html.bio-open; assets/js/navigation.js), so there's one close button, not a second, smaller one.
	- Back to home: a drawn ← whose tail draws out on hover, like the case-study Previous/Next.
	- Read the Article / Connect on LinkedIn: the up-right arrow's tail extends on hover; the
		LinkedIn circle fills with green ink from its centre, like the footer icons.
=================================== */
.modal_popup {
	animation: exc-reveal-fade var(--dur-medium) var(--ease-out) both;
}
.modal_popup.is-closing {
	opacity: 0;
	transition: opacity 300ms var(--ease-in) 440ms;
}
.modal_popup .profile_popup_content.active {
	transform: none;
	transition: transform var(--dur-long) var(--ease-in-out);
}
.modal_popup.is-closing .profile_popup_content {
	transform: translate3d(0, -100%, 0);
	transition: transform 560ms var(--ease-in-out) 160ms;
}
/* photo: uncovered top to bottom while it settles */
.modal_popup .profile_popup_content .profile_image img {
	transform: scale(1.06);
	transform-origin: 50% 30%;
}
.modal_popup .profile_popup_content.active .profile_image,
.modal_popup.is-closing .profile_popup_content .profile_image {
	clip-path: inset(0);
	transition: clip-path 1100ms var(--ease-out) 300ms;
}
.modal_popup .profile_popup_content.active .profile_image img {
	transform: none;
	transition: transform 1600ms var(--ease-out) 300ms;
}
/* closing: the photo stays at its settled size (snapping back to 1.06x read as a sudden zoom) */
.modal_popup.is-closing .profile_popup_content .profile_image img {
	transform: none;
	transition: none;
}
/* the text column, piece by piece */
.modal_popup .bio-in {
	opacity: 0;
	filter: blur(var(--bio-blur, 5px));
	transform: translate3d(0, 24px, 0);
}
.modal_popup .profile_name.bio-in {
	--bio-blur: 10px;
}
.modal_popup .profile_popup_content.active .bio-in {
	opacity: 1;
	filter: none;
	transform: none;
	transition:
		opacity 700ms var(--ease-out),
		filter 800ms var(--ease-out),
		transform 900ms var(--ease-out);
	transition-delay: calc(420ms + var(--bi, 0) * 70ms);
}
.modal_popup.is-closing .bio-in {
	opacity: 0;
	filter: none;
	transform: translate3d(0, -18px, 0);
	transition:
		opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 340ms cubic-bezier(0.4, 0, 0.2, 1);
	transition-delay: calc(var(--bo, 0) * 30ms);
}
/* the menu button is the close button while a bio is open, and stays above the sheet as it leaves */
html.bio-open.has-menu-toggle button.menu-toggle,
html.has-menu-toggle:has(body > .modal_popup) button.menu-toggle {
	z-index: 10001;
}

/* Back to home: ← drawn like Previous/Next; the shaft draws out on hover/focus */
.back-to-home .bth-arrow {
	display: inline-block;
	flex: none;
	--ah: 0.62em;
	height: var(--ah);
	font-size: 22px;
	background-color: var(--wp--preset--color--darkgreen);
	-webkit-mask:
		var(--arrow-e-head) right center / auto 100% no-repeat,
		linear-gradient(#000, #000) left 0 top 50% / calc(100% - var(--ah) * 0.11) calc(var(--ah) * 0.068) no-repeat;
	mask:
		var(--arrow-e-head) right center / auto 100% no-repeat,
		linear-gradient(#000, #000) left 0 top 50% / calc(100% - var(--ah) * 0.11) calc(var(--ah) * 0.068) no-repeat;
	transform: scaleX(-1);
	/* grows to the left, so the label doesn't move */
	margin-left: calc(0.95em - var(--bth, 0.95em));
	width: var(--bth, 0.95em);
	transition:
		width 650ms var(--ease-out),
		margin-left 650ms var(--ease-out);
}
.back-to-home:focus-visible .bth-arrow {
	--bth: 1.45em;
}
@media (hover: hover) and (pointer: fine) {
	.back-to-home:hover .bth-arrow {
		--bth: 1.45em;
	}
}
.modal_popup .profile_popup_content .back-to-home:active {
	transform: scale(0.98);
}

/* Read the Article: text stays put, the arrow does the moving */
@media (hover: hover) and (pointer: fine) {
	.profile_popup_content .article_wrap a:hover {
		color: var(--wp--preset--color--black);
	}
}

/* Connect with me on LinkedIn (and the LinkedIn button on the bio cards): ink in the circle,
	green text, the arrow's tail extends */
.profile_popup_content .linkedin_link a i,
.bio_wraper .bio_item .profile_sub_detail .linkedin_link a {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: transform var(--dur-short) var(--ease-out);
}
.profile_popup_content .linkedin_link a i::after,
.bio_wraper .bio_item .profile_sub_detail .linkedin_link a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--wp--preset--color--darkgreen);
	clip-path: circle(0% at 50% 50%);
	transition: clip-path 500ms var(--ease-out);
}
.profile_popup_content .linkedin_link a:focus-visible,
.profile_popup_content .linkedin_link a:focus-visible::after {
	color: var(--wp--preset--color--darkgreen);
	--tail: calc(var(--ar) * 1.7);
}
.profile_popup_content .linkedin_link a:focus-visible i,
.bio_wraper .bio_item .profile_sub_detail .linkedin_link a:focus-visible {
	transform: translate3d(0, -2px, 0);
}
.profile_popup_content .linkedin_link a:focus-visible i::after,
.bio_wraper .bio_item .profile_sub_detail .linkedin_link a:focus-visible::after {
	clip-path: circle(72% at 50% 50%);
}
@media (hover: hover) and (pointer: fine) {
	.profile_popup_content .linkedin_link a:hover {
		color: var(--wp--preset--color--darkgreen);
	}
	.profile_popup_content .linkedin_link a:hover::after {
		--tail: calc(var(--ar) * 1.7);
	}
	.profile_popup_content .linkedin_link a:hover i,
	.bio_wraper .bio_item .profile_sub_detail .linkedin_link a:hover {
		transform: translate3d(0, -2px, 0);
		background-color: var(--wp--preset--color--darkblue);
	}
	.profile_popup_content .linkedin_link a:hover i::after,
	.bio_wraper .bio_item .profile_sub_detail .linkedin_link a:hover::after {
		clip-path: circle(72% at 50% 50%);
	}
}