/* =========================================================
 * AdPro Site Tools — Team Grid
 *
 * Large portraits, no card chrome, people separated into tiers (groups) with
 * their own headings. PPAR look: navy #152131, Cormorant Garamond names,
 * Inter eyebrow roles, hairlines, 4px photo corners. The tokens fall back to the
 * same values the AdPro Directory uses (--adir-*).
 *
 * THE ZOOM GOES INTO THE FACE. Every person carries a face position
 * (--adpro-team-fx / --adpro-team-fy, % of the photo). object-position uses it
 * to keep the face in frame when the photo is cropped, and transform-origin uses
 * the same percentages: with object-fit: cover a point at x% / y% of the photo
 * sits at x% / y% of the frame, so the zoom pivots on the face and the face
 * stays put while everything around it grows.
 *
 * Motion is transform + opacity only (compositor-friendly), eased with long,
 * soft curves. It is off for prefers-reduced-motion, and hover effects only
 * apply where a real pointer exists.
 * ========================================================= */

.elementor-widget-adpro-team-grid {
	width: 100%;
}

.adpro-team {
	/* Design tokens. */
	--adpro-team-accent: var(--adir-accent, #152131);
	--adpro-team-accent-strong: var(--adir-accent-strong, #303E52);
	--adpro-team-soft: var(--adir-accent-soft, #F4F6F8);
	--adpro-team-line: var(--adir-tint, #D8DEE6);
	--adpro-team-line-strong: var(--adir-accent-line, #7287A3);
	--adpro-team-heading: var(--adir-heading, #152131);
	--adpro-team-text: var(--adir-text, #464B4F);
	--adpro-team-muted: #4F6481;
	--adpro-team-on-accent: var(--adir-on-accent, #FFFFFF);
	--adpro-team-surface: var(--adir-surface, #FFFFFF);
	--adpro-team-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--adpro-team-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--adpro-team-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* Controlled by the widget (and per person: --adpro-team-fx / -fy). */
	--adpro-team-fx: 50%;
	--adpro-team-fy: 25%;
	--adpro-team-zoom: 1.16;
	--adpro-team-ratio: 4 / 5;
	--adpro-team-ratio-feat: 3 / 4;
	--adpro-team-radius: 4px;
	--adpro-team-gap-x: 32px;
	--adpro-team-gap-y: 48px;

	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding-top: 24px; /* room under a section heading that has no intro text */
	font-family: inherit;
}

@media (max-width: 1024px) {
	.adpro-team {
		--adpro-team-gap-x: 24px;
		--adpro-team-gap-y: 40px;
	}
}

@media (max-width: 767px) {
	.adpro-team {
		--adpro-team-gap-x: 16px;
		--adpro-team-gap-y: 32px;
	}
}

.adpro-team .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Groups (tiers) ──────────────────────────────────────── */
.adpro-team__group {
	--adpro-team-cols: var(--adpro-team-c, 4);
	--adpro-team-item-max: 340px;
}

.adpro-team__group--feature {
	--adpro-team-item-max: 460px;
}

.adpro-team__group + .adpro-team__group {
	margin-top: 88px;
}

@media (max-width: 1024px) {
	.adpro-team__group {
		--adpro-team-cols: var(--adpro-team-c-t, 3);
	}
}

@media (max-width: 767px) {
	.adpro-team__group {
		--adpro-team-cols: var(--adpro-team-c-m, 2);
	}

	.adpro-team__group + .adpro-team__group {
		margin-top: 64px;
	}
}

/* Heading with a hairline either side. */
.adpro-team__group-head {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0 0 40px;
}

.adpro-team__group-head::before,
.adpro-team__group-head::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--adpro-team-line);
	transform-origin: right center;
}

.adpro-team__group-head::after {
	transform-origin: left center;
}

.adpro-team .adpro-team__group-title {
	flex: none;
	margin: 0;
	padding: 0;
	max-width: 80%;
	color: var(--adpro-team-heading);
	font-family: var(--adpro-team-serif);
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 500;
	letter-spacing: 0.005em;
	line-height: 1.1;
	text-align: center;
	text-transform: none;
	text-wrap: balance;
}

@media (max-width: 767px) {
	.adpro-team__group-head {
		gap: 16px;
		margin-bottom: 32px;
	}
}

/* ── Grid: flex so a short last row stays centred ────────── */
.adpro-team__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: var(--adpro-team-gap-x);
	row-gap: var(--adpro-team-gap-y);
	margin: 0;
	padding: 0;
	list-style: none;
}

.adpro-team__item {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: calc((100% - (var(--adpro-team-cols) - 1) * var(--adpro-team-gap-x)) / var(--adpro-team-cols) - 0.1px);
	max-width: var(--adpro-team-item-max);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Portrait ────────────────────────────────────────────── */
.adpro-team__card {
	position: relative;
	display: block;
}

.adpro-team__card--link {
	cursor: pointer;
}

/* The frame lifts and carries the shadow; the photo inside clips the zoom. */
.adpro-team__frame {
	position: relative;
	display: block;
	border-radius: var(--adpro-team-radius);
	transition: transform 0.8s var(--adpro-team-ease-out);
}

.adpro-team__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 26px 42px -24px rgba(21, 33, 49, 0.55);
	opacity: 0;
	transition: opacity 0.7s var(--adpro-team-ease);
	pointer-events: none;
}

.adpro-team__photo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--adpro-team-ratio);
	overflow: hidden;
	isolation: isolate;
	background-color: #e5e5e5;
	border-radius: var(--adpro-team-radius);
	transform: translateZ(0); /* keeps rounded corners clean while the photo inside scales */
}

.adpro-team__group--feature .adpro-team__photo {
	aspect-ratio: var(--adpro-team-ratio-feat);
}

.adpro-team .adpro-team__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: var(--adpro-team-fx) var(--adpro-team-fy);
	transform: scale(1);
	transform-origin: var(--adpro-team-fx) var(--adpro-team-fy);
	transition: transform 1s var(--adpro-team-ease-out);
	will-change: transform;
}

/* ── Caption ─────────────────────────────────────────────── */
.adpro-team__caption {
	position: relative;
	padding: 20px 0 0;
}

.adpro-team__card--link .adpro-team__caption {
	padding-right: 44px;
}

/* Hairline under the photo; a navy line draws across it on hover. */
.adpro-team__rule {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--adpro-team-line);
}

.adpro-team__rule::after {
	content: "";
	position: absolute;
	top: -0.5px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--adpro-team-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.8s var(--adpro-team-ease-out);
}

.adpro-team .adpro-team__name {
	margin: 0;
	padding: 0;
	color: var(--adpro-team-heading);
	font-family: var(--adpro-team-serif);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.15;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.adpro-team__group--feature .adpro-team__name {
	font-size: clamp(26px, 2.2vw, 32px);
}

.adpro-team .adpro-team__role {
	margin: 8px 0 0;
	padding: 0;
	color: var(--adpro-team-muted);
	font-size: max(12px, 0.75rem);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-align: left;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Designations (large portraits only). */
.adpro-team .adpro-team__desigs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 12px 0 0;
	padding: 0;
}

.adpro-team .adpro-team__desig {
	display: inline-block;
	margin: 0;
	padding: 1px 7px;
	background-color: var(--adpro-team-soft);
	border: 1px solid var(--adpro-team-line-strong);
	border-radius: 4px;
	color: var(--adpro-team-heading);
	font-size: max(12px, 0.75rem);
	font-weight: 600;
	line-height: 1.5;
}

.adpro-team .adpro-team__desig--more {
	background-color: transparent;
	border-style: dashed;
	color: var(--adpro-team-muted);
	font-weight: 500;
}

/* The name is a button when there is a popup. Astra and the Elementor kit style every
   button in every state (:hover / :focus score 0,2,1), so the doubled class resets it. */
.adpro-team .adpro-team__open.adpro-team__open {
	all: unset;
	box-sizing: border-box;
	display: inline;
	cursor: pointer;
}

.adpro-team .adpro-team__open.adpro-team__open:focus-visible {
	outline: 3px solid var(--adpro-team-accent-strong);
	outline-offset: 4px;
	border-radius: 2px;
}

/* The + that says "there is more". */
.adpro-team__plus {
	position: absolute;
	top: 16px;
	right: 0;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	border: 1px solid var(--adpro-team-line-strong);
	border-radius: 50%;
	color: var(--adpro-team-accent);
	pointer-events: none;
	transition: background-color 0.4s var(--adpro-team-ease), border-color 0.4s var(--adpro-team-ease), color 0.4s var(--adpro-team-ease), transform 0.7s var(--adpro-team-ease-out);
}

.adpro-team__plus::before,
.adpro-team__plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	margin: -0.75px 0 0 -6px;
	background: currentColor;
}

.adpro-team__plus::after {
	transform: rotate(90deg);
}

/* Keyboard focus gets the whole card's treatment as well as the ring on the name. */
.adpro-team__card:has(.adpro-team__open:focus-visible) {
	outline: 2px solid var(--adpro-team-line-strong);
	outline-offset: 8px;
	border-radius: var(--adpro-team-radius);
}

/* ── Hover (real pointers) and keyboard focus ────────────── */
@media (hover: hover) and (pointer: fine) {
	.adpro-team__card:hover .adpro-team__photo img {
		transform: scale(min(var(--adpro-team-zoom), var(--adpro-team-zoom-cap, 9)));
	}

	.adpro-team-lift-yes .adpro-team__card:hover .adpro-team__frame {
		transform: translate3d(0, -6px, 0);
	}

	.adpro-team__card:hover .adpro-team__frame::before {
		opacity: 1;
	}

	.adpro-team__card:hover .adpro-team__rule::after {
		transform: scaleX(1);
	}

	.adpro-team__card--link:hover .adpro-team__plus {
		background-color: var(--adpro-team-accent);
		border-color: var(--adpro-team-accent);
		color: var(--adpro-team-on-accent);
		transform: rotate(90deg);
	}
}

/* A separate rule: a browser without :has() would drop a shared selector list. */
.adpro-team__card:has(.adpro-team__open:focus-visible) .adpro-team__photo img {
	transform: scale(min(var(--adpro-team-zoom), var(--adpro-team-zoom-cap, 9)));
}

.adpro-team__card:has(.adpro-team__open:focus-visible) .adpro-team__rule::after {
	transform: scaleX(1);
}

.adpro-team__card:has(.adpro-team__open:focus-visible) .adpro-team__plus {
	background-color: var(--adpro-team-accent);
	border-color: var(--adpro-team-accent);
	color: var(--adpro-team-on-accent);
	transform: rotate(90deg);
}

/* ── Reveal on scroll (class added by team.js; without JS everything is simply there) ── */
.adpro-team--reveal .adpro-team__item,
.adpro-team--reveal .adpro-team__group-head {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity 0.9s var(--adpro-team-ease) var(--adpro-team-delay, 0ms), transform 1.1s var(--adpro-team-ease-out) var(--adpro-team-delay, 0ms);
}

.adpro-team--reveal .adpro-team__item.is-in,
.adpro-team--reveal .adpro-team__group-head.is-in {
	opacity: 1;
	transform: none;
}

.adpro-team--reveal .adpro-team__group-head::before,
.adpro-team--reveal .adpro-team__group-head::after {
	transform: scaleX(0);
	transition: transform 1.2s var(--adpro-team-ease-out) calc(var(--adpro-team-delay, 0ms) + 150ms);
}

.adpro-team--reveal .adpro-team__group-head.is-in::before,
.adpro-team--reveal .adpro-team__group-head.is-in::after {
	transform: scaleX(1);
}

.adpro-team__empty {
	padding: 24px;
	border: 1px dashed var(--adpro-team-line);
	border-radius: 8px;
	color: var(--adpro-team-muted);
	text-align: center;
}

/* ── Popup ───────────────────────────────────────────────── */
html.adpro-team-lock {
	overflow: hidden;
	scrollbar-gutter: stable; /* no sideways jump when the page scrollbar disappears */
}

/* Opens and closes with a soft rise + fade (display/overlay are animated discretely so the
   close is animated too; browsers without that simply open and close instantly). */
.adpro-team .adpro-team__dialog {
	position: fixed;
	inset: 0;
	width: min(1040px, calc(100vw - 32px));
	max-width: none;
	max-height: min(88vh, 760px);
	margin: auto;
	padding: 0;
	overflow: hidden;
	background: var(--adpro-team-surface);
	border: 0;
	border-top: 3px solid var(--adpro-team-accent);
	border-radius: 8px;
	box-shadow: 0 40px 100px rgba(8, 13, 20, 0.45);
	color: var(--adpro-team-text);
	font-family: inherit;
	font-size: max(14px, 1rem);
	opacity: 0;
	transform: translate3d(0, 24px, 0) scale(0.985);
	transition: opacity 0.35s var(--adpro-team-ease), transform 0.6s var(--adpro-team-ease-out), overlay 0.6s allow-discrete, display 0.6s allow-discrete;
}

.adpro-team .adpro-team__dialog[open] {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	opacity: 1;
	transform: none;
}

@starting-style {
	.adpro-team .adpro-team__dialog[open] {
		opacity: 0;
		transform: translate3d(0, 24px, 0) scale(0.985);
	}
}

.adpro-team__dialog::backdrop {
	background-color: rgba(13, 20, 29, 0.64);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.45s var(--adpro-team-ease), overlay 0.45s allow-discrete, display 0.45s allow-discrete;
}

.adpro-team__dialog[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.adpro-team__dialog[open]::backdrop {
		opacity: 0;
	}
}

.adpro-team__dialog-photo {
	position: relative;
	min-height: 480px;
	overflow: hidden;
	background-color: #e5e5e5;
}

/* The portrait settles from a face-level zoom as the popup opens. */
.adpro-team__dialog-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: var(--adpro-team-fx) var(--adpro-team-fy);
	transform: scale(1.14);
	transform-origin: var(--adpro-team-fx) var(--adpro-team-fy);
	transition: transform 1.4s var(--adpro-team-ease-out);
}

.adpro-team__dialog[open] .adpro-team__dialog-photo img {
	transform: none;
}

@starting-style {
	.adpro-team__dialog[open] .adpro-team__dialog-photo img {
		transform: scale(1.14);
	}
}

.adpro-team__dialog-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	box-sizing: border-box;
	max-height: min(88vh, 760px);
	padding: 56px 48px 48px;
	overflow-y: auto;
	overscroll-behavior: contain;
	text-align: left;
	/* A long bio fades out under the bottom edge so it is clear there is more. The fade sits in the
	   bottom padding, so at the end of the scroll no text is touched. */
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%);
}

.adpro-team__dialog-content:focus,
.adpro-team__dialog-content:focus-visible {
	outline: none;
}

/* No bio: centre what there is instead of leaving a tall empty block under it. */
.adpro-team__dialog--short .adpro-team__dialog-content {
	justify-content: center;
}

.adpro-team .adpro-team__dialog-role {
	margin: 0;
	color: var(--adpro-team-muted);
	font-size: max(12px, 0.75rem);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.adpro-team .adpro-team__dialog-name {
	margin: 0 0 4px;
	padding: 0;
	color: var(--adpro-team-heading);
	font-family: var(--adpro-team-serif);
	font-size: clamp(34px, 3.4vw, 46px);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.05;
	text-transform: none;
	text-wrap: balance;
}

.adpro-team .adpro-team__desigs--dialog {
	display: block;
	margin: 8px 0 0;
}

.adpro-team .adpro-team__label {
	display: block;
	margin-bottom: 6px;
	color: var(--adpro-team-muted);
	font-size: max(12px, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.adpro-team__desig-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.adpro-team .adpro-team__bio {
	width: 100%;
	margin-top: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--adpro-team-line);
	color: var(--adpro-team-text);
	font-size: max(14px, 1rem);
	line-height: 1.7;
}

.adpro-team .adpro-team__desigs--dialog + .adpro-team__bio,
.adpro-team .adpro-team__dialog-name + .adpro-team__bio {
	margin-top: 16px;
}

.adpro-team .adpro-team__bio p {
	margin: 0 0 1em;
}

.adpro-team .adpro-team__bio p:last-child {
	margin-bottom: 0;
}

/* Contact buttons: filled navy + white outlined. */
.adpro-team .adpro-team__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
}

.adpro-team .adpro-team__btn,
.adpro-team .adpro-team__btn:hover,
.adpro-team .adpro-team__btn:focus {
	display: inline-block;
	padding: 8px 16px;
	background: var(--adpro-team-accent);
	border: 2px solid var(--adpro-team-accent);
	border-radius: 4px;
	color: var(--adpro-team-on-accent);
	font-size: max(14px, 0.875rem);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.25s var(--adpro-team-ease), border-color 0.25s var(--adpro-team-ease);
}

.adpro-team .adpro-team__btn:hover,
.adpro-team .adpro-team__btn:focus-visible {
	background: var(--adpro-team-accent-strong);
	border-color: var(--adpro-team-accent-strong);
}

.adpro-team .adpro-team__btn--ghost,
.adpro-team .adpro-team__btn--ghost:hover,
.adpro-team .adpro-team__btn--ghost:focus {
	background: #ffffff;
	color: var(--adpro-team-accent);
}

.adpro-team .adpro-team__btn--ghost:hover,
.adpro-team .adpro-team__btn--ghost:focus-visible {
	background: var(--adpro-team-soft);
	border-color: var(--adpro-team-accent);
	color: var(--adpro-team-accent);
}

.adpro-team .adpro-team__close.adpro-team__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--adpro-team-line);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(8, 13, 20, 0.12);
	color: var(--adpro-team-heading);
	cursor: pointer;
	line-height: 1;
	min-height: 0;
	transition: transform 0.4s var(--adpro-team-ease-out);
}

.adpro-team .adpro-team__close.adpro-team__close:hover,
.adpro-team .adpro-team__close.adpro-team__close:focus,
.adpro-team .adpro-team__close.adpro-team__close:active {
	background: rgba(255, 255, 255, 0.94);
	color: var(--adpro-team-heading);
	transform: rotate(90deg);
}

.adpro-team .adpro-team__close.adpro-team__close:focus-visible {
	outline: 3px solid var(--adpro-team-accent-strong);
	outline-offset: 2px;
}

/* ── Phones ──────────────────────────────────────────────── */
@media (max-width: 767px) {
	.adpro-team .adpro-team__name {
		font-size: 20px;
	}

	.adpro-team__group--feature .adpro-team__name {
		font-size: 26px;
	}

	.adpro-team__card--link .adpro-team__caption {
		padding-right: 36px;
	}

	.adpro-team__caption {
		padding-top: 16px;
	}

	.adpro-team__plus {
		top: 12px;
		width: 28px;
		height: 28px;
	}

	.adpro-team .adpro-team__dialog {
		width: calc(100vw - 24px);
		max-height: calc(100dvh - 24px);
	}

	.adpro-team .adpro-team__dialog[open] {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		overflow-y: auto;
	}

	.adpro-team__dialog-photo {
		min-height: 0;
		height: min(360px, 48vh);
	}

	.adpro-team__dialog-content {
		max-height: none;
		padding: 24px;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.adpro-team *,
	.adpro-team *::before,
	.adpro-team *::after {
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		animation: none !important;
	}

	.adpro-team .adpro-team__photo img,
	.adpro-team__card:hover .adpro-team__photo img,
	.adpro-team .adpro-team__dialog-photo img {
		transform: none !important;
	}

	.adpro-team--reveal .adpro-team__item,
	.adpro-team--reveal .adpro-team__group-head {
		opacity: 1;
		transform: none;
	}

	.adpro-team .adpro-team__dialog {
		transform: none;
	}
}

@media print {
	.adpro-team--reveal .adpro-team__item,
	.adpro-team--reveal .adpro-team__group-head {
		opacity: 1;
		transform: none;
	}

	.adpro-team--reveal .adpro-team__group-head::before,
	.adpro-team--reveal .adpro-team__group-head::after {
		transform: none;
	}
}