.team-cluster { position: relative; width: 100%; aspect-ratio: 1624 / 1146; }

.team-circle {
	position: absolute; width: 29.4%; aspect-ratio: 1;
	border-radius: 50%; overflow: hidden; z-index: 1; display: block;
	
	will-change: transform;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}
.team-circle img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } 
.team-circle--feature { left: 0;      top: 19%; }
.team-circle--a       { left: 35.3%;  top: 0; }
.team-circle--c       { left: 70.6%;  top: 5%; }
.team-circle--b       { left: 52%;    top: 47%; }
.team-circle--e       { left: 19%;    top: 58%; }

.team-circle__overlay {
	position: absolute; inset: 0; background: color-mix(in srgb, var(--c-red) 82%, transparent);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(.75rem, 1.6vw, 1.125rem); text-align: center; padding: 1rem;
	opacity: 0; transition: opacity .35s ease;
	pointer-events: none; 
}
.team-circle:hover .team-circle__overlay { opacity: 1; }
.team-circle__name {
	color: var(--c-white); font-family: var(--font-serif); font-weight: 300;
	font-size: clamp(1rem, 1.6vw, 1.625rem); line-height: 1.2;
}

@media (min-width: 601px) and (max-width: 1024px) {
	.team-cluster {
		aspect-ratio: auto;
		display: grid;
		grid-template-columns: repeat(6, 1fr);              
		column-gap: clamp(1rem, 2.5vw, 2rem);
		row-gap: clamp(1.5rem, 4vw, 2.5rem);
		justify-items: center;
	}
	.team-circle {
		position: static;
		width: 100%; max-width: clamp(160px, 28vw, 260px);
	}
	
	.team-circle--feature { grid-column: 1 / span 2; grid-row: 1; }
	.team-circle--a       { grid-column: 3 / span 2; grid-row: 1; }
	.team-circle--c       { grid-column: 5 / span 2; grid-row: 1; }
	
	.team-circle--b       { grid-column: 2 / span 2; grid-row: 2; }
	.team-circle--e       { grid-column: 4 / span 2; grid-row: 2; }
	
	.team-watermark { display: none; }
}

@media (max-width: 600px) {
	.team-cluster {
		--team-gap: clamp(1rem, 4vw, 1.5rem);
		aspect-ratio: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--team-gap);
		justify-items: center;
		align-items: start;
		max-width: 28rem;
		margin-inline: auto;
	}
	.team-circle {
		position: static;
		width: 100%;
		max-width: 200px;                   
	}
	.team-circle--feature {
		grid-column: 1 / -1;                
		justify-self: center;               
		order: 99;                          
		
		max-width: calc((100% - var(--team-gap)) / 2);
	}
	
	.team-circle--a, .team-circle--c,
	.team-circle--b, .team-circle--e { align-self: auto; }
}

body.has-modal-open { overflow: hidden; }

.notaire-modal {
	--m-ease: cubic-bezier(.76, 0, .24, 1);
	position: fixed; inset: 0; z-index: 1000;
	background: transparent;                               
	visibility: hidden;
	transition: visibility 0s linear .55s;
}
.notaire-modal.is-open {
	visibility: visible;
	transition: visibility 0s linear 0s;
}
.notaire-modal[hidden] { display: none; }

.notaire-modal::before {
	content: '';
	position: absolute; inset: 0;
	background: var(--c-bg);
	transform: translateY(100%);
	transition: transform .55s var(--m-ease);
	z-index: 0;
}
.notaire-modal.is-open::before { transform: translateY(0); }

.notaire-modal__photo {
	position: absolute; top: 0; right: 0; height: 100%; width: 50.6%;
	z-index: 1;
	clip-path: inset(0 0 0 100%);
	transition: clip-path .55s var(--m-ease);
}
.notaire-modal.is-open .notaire-modal__photo { clip-path: inset(0); }
.notaire-modal__photo img {
	width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}

.notaire-modal__back {
	position: absolute; top: clamp(2rem, 7.3vw, 127px); left: 50%;
	z-index: 2; cursor: pointer;
	opacity: 0;
	transform: translateX(-50%) translateY(-12px);
	transition: opacity .5s var(--m-ease),
	            transform .5s var(--m-ease),
	            background-color .35s ease, color .35s ease;
}
.notaire-modal.is-open .notaire-modal__back {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	transition-delay: .45s, .45s, 0s, 0s;
}
.notaire-modal__back .c-arrow { transform: rotate(-90deg); } 
.notaire-modal__back:hover .c-arrow { transform: rotate(-90deg); } 

.notaire-modal__body {
	position: relative; z-index: 1;
	width: 49.4%; height: 100%; overflow: hidden;
	padding: clamp(5rem, 11.5vw, 199px) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem) clamp(1.5rem, 7.1vw, 123px);
}
.notaire-modal.is-ready .notaire-modal__body { overflow-y: auto; }

.notaire-modal__poste,
.notaire-modal__name,
.notaire-modal__pole,
.notaire-modal__contact,
.notaire-modal__bio {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s var(--m-ease), transform .55s var(--m-ease);
}
.notaire-modal.is-open .notaire-modal__poste,
.notaire-modal.is-open .notaire-modal__name,
.notaire-modal.is-open .notaire-modal__pole,
.notaire-modal.is-open .notaire-modal__contact,
.notaire-modal.is-open .notaire-modal__bio {
	opacity: 1; transform: translateY(0);
}
.notaire-modal.is-open .notaire-modal__poste { transition-delay: .4s; }
.notaire-modal.is-open .notaire-modal__name  { transition-delay: .47s; }
.notaire-modal.is-open .notaire-modal__pole  { transition-delay: .54s; }
.notaire-modal.is-open .notaire-modal__contact { transition-delay: .58s; }
.notaire-modal.is-open .notaire-modal__bio   { transition-delay: .65s; }
.notaire-modal__poste { margin: 0 0 clamp(1.25rem, 2.3vw, 2.4375rem); }
.notaire-modal__contact { margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; }
.notaire-modal__contact + .notaire-modal__bio { margin-top: clamp(1.5rem, 2.6vw, 2.1875rem); }
.notaire-modal__name {
	margin: 0; font-family: var(--font-serif); font-weight: 300;
	font-size: clamp(2.25rem, 3.2vw, 3.4375rem); line-height: 1.05; color: var(--c-burgundy);
}
.notaire-modal__pole {
	margin: clamp(.5rem, 1vw, .9375rem) 0 0;
	text-transform: uppercase; letter-spacing: .1em;
	font-size: var(--fs-eyebrow); color: var(--c-burgundy);
}
.notaire-modal__bio {
	margin-top: clamp(1.5rem, 2.6vw, 2.1875rem);
	max-width: 605px; color: var(--c-burgundy);
	font-size: .875rem; line-height: 2;
}
.notaire-modal__bio p { margin: 0 0 1.875rem; }
.notaire-modal__bio p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.notaire-modal,
	.notaire-modal::before,
	.notaire-modal__photo,
	.notaire-modal__back,
	.notaire-modal__body,
	.notaire-modal__poste,
	.notaire-modal__name,
	.notaire-modal__pole,
	.notaire-modal__contact,
	.notaire-modal__bio {
		transition: visibility 0s linear !important;
		clip-path: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
	.notaire-modal__back { transform: translateX(-50%) !important; }   
}

@media (max-width: 1024px) {
	.notaire-modal { display: flex; flex-direction: column; overflow: hidden; -webkit-overflow-scrolling: touch; }
	.notaire-modal.is-ready { overflow-y: auto; }
	.notaire-modal[hidden] { display: none; }
	.notaire-modal__photo { position: static; order: -1; width: 100%; height: clamp(300px, 70vw, 460px); flex: none; }
	.notaire-modal__body {
		position: static; width: 100%; height: auto; overflow: visible;
		padding: clamp(2rem, 7vw, 3rem) var(--gutter) clamp(3rem, 9vw, 4rem);
	}
	.notaire-modal__back { top: clamp(1rem, 4vw, 1.5rem); }
}