/*
 * Flex Pons Team v1.3.0
 * Kleuren volgen de Creote theme variabelen (--primary-color-one / -two), met de Flex Pons waarden als fallback.
 */

.fpt-team {
	--fpt-primary: var(--primary-color-one, #009ab2);
	--fpt-dark:    var(--primary-color-two, #183557);
	--fpt-radius:  10px;
	--fpt-gap:     30px;

	display:               grid;
	grid-template-columns: repeat(var(--fpt-cols, 3), minmax(0, 1fr));
	gap:                   var(--fpt-gap);
	margin:                0;
	padding:               0;
}

.fpt-head {
	margin: 0 0 20px;
}

.fpt-head--center { text-align: center; }

.fpt-head .fpt-head__sub {
	margin:         0;
	padding:        0 0 12px;
	font-size:      15px;
	font-weight:    600;
	line-height:    25px;
	letter-spacing: 3px;
	color:          var(--primary-color-one, #009ab2);
}

.fpt-head .fpt-head__title {
	margin:         0;
	padding:        0 0 10px;
	font-family:    inherit;
	font-size:      38px;
	font-weight:    600;
	line-height:    50px;
	letter-spacing: 0;
	color:          var(--primary-color-two, #183557);
}

@media (max-width: 767px) {
	.fpt-head .fpt-head__sub   { font-size: 14px; letter-spacing: 2px; }
	.fpt-head .fpt-head__title { font-size: 30px; line-height: 38px; }
}

.fpt-team--cols-2 { --fpt-cols: 2; }
.fpt-team--cols-3 { --fpt-cols: 3; }
.fpt-team--cols-4 { --fpt-cols: 4; }

.fpt-team .fpt-card {
	position:      relative;
	isolation:     isolate;
	overflow:      hidden;
	aspect-ratio:  1 / 1.03;
	border-radius: var(--fpt-radius);
	background:    var(--fpt-dark);
	box-shadow:    0 14px 34px -22px rgba(24, 53, 87, .55);
	transition:    box-shadow .35s ease, transform .35s ease;
}

.fpt-team .fpt-card::after {
	content:        "";
	position:       absolute;
	inset:          0;
	z-index:        1;
	pointer-events: none;
	background:     linear-gradient(to top, rgba(24, 53, 87, .94) 0%, rgba(24, 53, 87, .62) 26%, rgba(24, 53, 87, 0) 58%);
	transition:     opacity .35s ease;
}

.fpt-team .fpt-card::before {
	content:          "";
	position:         absolute;
	left:             0;
	right:            0;
	bottom:           0;
	z-index:          3;
	height:           4px;
	background:       var(--fpt-primary);
	transform:        scaleX(0);
	transform-origin: left center;
	transition:       transform .45s ease;
}

.fpt-team .fpt-card__media {
	position: absolute;
	inset:    0;
}

.fpt-team .fpt-card__img {
	display:         block;
	width:           100%;
	height:          100%;
	max-width:       none;
	object-fit:      cover;
	object-position: 50% 22%;
	border-radius:   0;
	transition:      transform .7s ease;
}

.fpt-team .fpt-card__initials {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	padding-bottom:  18%;
	background:      linear-gradient(140deg, var(--fpt-dark) 35%, var(--fpt-primary) 160%);
	color:           rgba(255, 255, 255, .92);
	font-size:       clamp(3rem, 7vw, 4.5rem);
	font-weight:     700;
	letter-spacing:  .04em;
}

.fpt-team .fpt-card__body {
	position: absolute;
	left:     0;
	right:    0;
	bottom:   0;
	z-index:  2;
	padding:  0 24px 22px;
}

.fpt-team .fpt-card__role {
	display:        inline-flex;
	align-items:    center;
	gap:            10px;
	font-size:      12px;
	font-weight:    600;
	line-height:    1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	color:          rgba(255, 255, 255, .88);
}

.fpt-team .fpt-card__role::before {
	content:    "";
	flex:       0 0 auto;
	width:      22px;
	height:     2px;
	background: var(--fpt-primary);
}

.fpt-team h3.fpt-card__name {
	margin:         6px 0 0;
	padding:        0;
	font-family:    inherit;
	font-size:      22px;
	font-weight:    700;
	line-height:    1.25;
	letter-spacing: 0;
	color:          #fff;
}

.fpt-team ul.fpt-card__contact {
	display:    flex;
	flex-wrap:  wrap;
	gap:        8px;
	margin:     0;
	padding:    0;
	list-style: none;
	max-height: 0;
	opacity:    0;
	overflow:   hidden;
	transform:  translateY(8px);
	transition: max-height .35s ease, opacity .3s ease, transform .35s ease, margin-top .35s ease;
}

.fpt-team .fpt-card__contact li {
	margin:     0;
	padding:    0;
	list-style: none;
}

.fpt-team .fpt-card__contact li::before,
.fpt-team .fpt-card__contact li::after {
	display: none;
}

.fpt-team a.fpt-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           40px;
	height:          40px;
	border-radius:   10px 0;
	border:          1px solid rgba(255, 255, 255, .28);
	background:      rgba(255, 255, 255, .12);
	color:           #fff;
	text-decoration: none;
	backdrop-filter: blur(6px);
	transition:      background-color .25s ease, border-color .25s ease, color .25s ease;
}

.fpt-team a.fpt-btn:hover,
.fpt-team a.fpt-btn:focus-visible {
	background:   var(--fpt-primary);
	border-color: var(--fpt-primary);
	color:        #fff;
}

.fpt-team a.fpt-btn:focus-visible {
	outline:        2px solid #fff;
	outline-offset: 2px;
}

.fpt-team a.fpt-btn svg {
	display: block;
	width:   18px;
	height:  18px;
}

.fpt-team .fpt-card--has-contact:hover ul.fpt-card__contact,
.fpt-team .fpt-card--has-contact:focus-within ul.fpt-card__contact {
	max-height: 60px;
	margin-top: 14px;
	opacity:    1;
	transform:  none;
}

@media (hover: hover) {
	.fpt-team .fpt-card:hover {
		transform:  translateY(-4px);
		box-shadow: 0 22px 40px -22px rgba(24, 53, 87, .7);
	}

	.fpt-team .fpt-card:hover::before { transform: scaleX(1); }

	.fpt-team .fpt-card:hover .fpt-card__img { transform: scale(1.045); }
}

@media (hover: none) {
	.fpt-team ul.fpt-card__contact {
		max-height: 60px;
		margin-top: 14px;
		opacity:    1;
		transform:  none;
	}
}

@media (max-width: 1199px) {
	.fpt-team--cols-4 { --fpt-cols: 3; }
}

@media (max-width: 991px) {
	.fpt-team {
		--fpt-cols: 2;
		--fpt-gap:  20px;
	}
}

@media (max-width: 575px) {
	.fpt-team {
		--fpt-cols: 2;
		--fpt-gap:  12px;
	}

	.fpt-team .fpt-card {
		aspect-ratio: 3 / 4;
		box-shadow:   0 8px 20px -14px rgba(24, 53, 87, .5);
	}

	.fpt-team .fpt-card::after {
		background: linear-gradient(to top, rgba(24, 53, 87, .95) 0%, rgba(24, 53, 87, .6) 30%, rgba(24, 53, 87, 0) 60%);
	}

	.fpt-team .fpt-card__body { padding: 0 12px 12px; }

	.fpt-team .fpt-card__role {
		font-size:      10px;
		letter-spacing: .05em;
	}

	.fpt-team .fpt-card__role::before { display: none; }

	.fpt-team h3.fpt-card__name {
		margin-top:  3px;
		font-size:   16px;
		line-height: 1.2;
	}

	.fpt-team ul.fpt-card__contact,
	.fpt-team .fpt-card--has-contact:hover ul.fpt-card__contact,
	.fpt-team .fpt-card--has-contact:focus-within ul.fpt-card__contact {
		gap:        5px;
		margin-top: 9px;
	}

	.fpt-team ul.fpt-card__contact { flex-wrap: nowrap; }

	.fpt-team .fpt-card__contact li {
		flex:      1 1 0;
		min-width: 0;
		max-width: 34px;
	}

	.fpt-team a.fpt-btn {
		width:         100%;
		height:        30px;
		border-radius: 8px 0;
	}

	.fpt-team a.fpt-btn svg {
		width:  15px;
		height: 15px;
	}

	.fpt-team .fpt-card__initials { font-size: 2.4rem; }
}

@media (max-width: 359px) {
	.fpt-team { --fpt-gap: 8px; }

	.fpt-team .fpt-card__body { padding: 0 10px 10px; }

	.fpt-team h3.fpt-card__name { font-size: 15px; }

	.fpt-team .fpt-card__role {
		font-size:      9px;
		letter-spacing: .02em;
		overflow-wrap:  anywhere;
	}

	.fpt-team ul.fpt-card__contact,
	.fpt-team .fpt-card--has-contact:hover ul.fpt-card__contact,
	.fpt-team .fpt-card--has-contact:focus-within ul.fpt-card__contact { gap: 4px; }

	.fpt-team a.fpt-btn { height: 28px; }

	.fpt-team a.fpt-btn svg {
		width:  14px;
		height: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fpt-team .fpt-card,
	.fpt-team .fpt-card::before,
	.fpt-team .fpt-card__img,
	.fpt-team ul.fpt-card__contact {
		transition: none;
	}
}

.fpt-empty {
	padding:       16px 20px;
	border:        1px dashed rgba(24, 53, 87, .3);
	border-radius: 10px;
	color:         #183557;
}

.fpt-why {
	--fpt-primary: var(--primary-color-one, #009ab2);
	--fpt-dark:    var(--primary-color-two, #183557);
	--fpt-soft:    var(--primary-color-three, #f0f3f9);

	display:               grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap:                   64px;
	align-items:           start;
}

.fpt-why .fpt-why__intro {
	position: sticky;
	top:      120px;
}

.fpt-why .fpt-why__sub {
	margin:         0;
	padding:        0 0 12px;
	font-size:      15px;
	font-weight:    600;
	line-height:    25px;
	letter-spacing: 3px;
	color:          var(--fpt-primary);
}

.fpt-why h2.fpt-why__title {
	margin:      0 0 18px;
	padding:     0;
	font-family: inherit;
	font-size:   38px;
	font-weight: 600;
	line-height: 1.25;
	color:       var(--fpt-dark);
}

.fpt-why .fpt-why__lead {
	margin:      0;
	font-size:   17px;
	line-height: 1.7;
	color:       #4a4e56;
}

.fpt-why .fpt-why__actions {
	display:    flex;
	flex-wrap:  wrap;
	gap:        12px;
	margin-top: 30px;
}

.fpt-why a.fpt-why__btn {
	display:         inline-flex;
	align-items:     center;
	padding:         14px 28px;
	border-radius:   10px 0;
	border:          1px solid var(--fpt-primary);
	font-size:       15px;
	font-weight:     600;
	line-height:     1.2;
	text-decoration: none;
	transition:      background-color .25s ease, color .25s ease, border-color .25s ease;
}

.fpt-why a.fpt-why__btn--primary {
	background: var(--fpt-primary);
	color:      #fff;
}

.fpt-why a.fpt-why__btn--primary:hover,
.fpt-why a.fpt-why__btn--primary:focus-visible {
	background:   var(--fpt-dark);
	border-color: var(--fpt-dark);
	color:        #fff;
}

.fpt-why a.fpt-why__btn--ghost {
	background:   transparent;
	border-color: rgba(24, 53, 87, .25);
	color:        var(--fpt-dark);
}

.fpt-why a.fpt-why__btn--ghost:hover,
.fpt-why a.fpt-why__btn--ghost:focus-visible {
	border-color: var(--fpt-dark);
	color:        var(--fpt-dark);
}

.fpt-why ol.fpt-why__list {
	margin:     0;
	padding:    0;
	list-style: none;
	border-top: 1px solid rgba(24, 53, 87, .1);
}

.fpt-why li.fpt-why__item {
	display:               grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap:                   24px;
	margin:                0;
	padding:               28px 0;
	border-bottom:         1px solid rgba(24, 53, 87, .1);
	list-style:            none;
}

.fpt-why li.fpt-why__item::before,
.fpt-why li.fpt-why__item::after {
	display: none;
}

.fpt-why .fpt-why__num {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           52px;
	height:          52px;
	border-radius:   10px 0;
	background:      var(--fpt-soft);
	color:           var(--fpt-primary);
	font-size:       17px;
	font-weight:     700;
	transition:      background-color .3s ease, color .3s ease;
}

.fpt-why li.fpt-why__item:hover .fpt-why__num {
	background: var(--fpt-primary);
	color:      #fff;
}

.fpt-why h3.fpt-why__item-title {
	margin:      2px 0 8px;
	padding:     0;
	font-family: inherit;
	font-size:   20px;
	font-weight: 600;
	line-height: 1.3;
	color:       var(--fpt-dark);
}

.fpt-why .fpt-why__text p {
	margin:      0;
	font-size:   16px;
	line-height: 1.7;
	color:       #4a4e56;
}

@media (max-width: 991px) {
	.fpt-why {
		grid-template-columns: minmax(0, 1fr);
		gap:                   36px;
	}

	.fpt-why .fpt-why__intro { position: static; }
}

@media (max-width: 767px) {
	.fpt-why h2.fpt-why__title { font-size: 30px; }

	.fpt-why li.fpt-why__item {
		grid-template-columns: 44px minmax(0, 1fr);
		gap:                   16px;
		padding:               22px 0;
	}

	.fpt-why .fpt-why__num {
		width:  44px;
		height: 44px;
		font-size: 15px;
	}

	.fpt-why h3.fpt-why__item-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.fpt-why .fpt-why__num,
	.fpt-why a.fpt-why__btn { transition: none; }
}

.fpt-wrap--joined {
	--fpt-soft:    var(--primary-color-three, #f0f3f9);
	--fpt-overlap: 170px;

	position: relative;
}

.fpt-wrap--joined .fpt-team {
	position: relative;
	z-index:  2;
}

.fpt-band {
	position:   relative;
	z-index:    1;
	margin-top: calc(var(--fpt-overlap) * -1);
	padding:    calc(var(--fpt-overlap) + 90px) 0 40px;
	background: var(--fpt-soft);
	box-shadow: 0 0 0 100vmax var(--fpt-soft);
	clip-path:  inset(0 -100vmax calc(var(--fpt-band-bleed, 80px) * -1));
}

.fpt-band .fpt-why .fpt-why__num { background: #fff; }

.fpt-band .fpt-why li.fpt-why__item:hover .fpt-why__num { background: var(--fpt-primary); }

.fpt-band .fpt-why a.fpt-why__btn--ghost { background: #fff; }

.fpt-band .fpt-why ol.fpt-why__list,
.fpt-band .fpt-why li.fpt-why__item { border-color: rgba(24, 53, 87, .12); }

@media (max-width: 991px) {
	.fpt-wrap--joined { --fpt-overlap: 140px; }

	.fpt-band { padding: calc(var(--fpt-overlap) + 60px) 0 24px; }
}

@media (max-width: 575px) {
	.fpt-wrap--joined { --fpt-overlap: 90px; }

	.fpt-band { padding: calc(var(--fpt-overlap) + 44px) 0 8px; }
}

@media (max-width: 991px) {
	.fpt-team .fpt-card:last-child:nth-child(odd) {
		grid-column:  1 / -1;
		justify-self: center;
		width:        calc(50% - var(--fpt-gap) / 2);
	}
}