/* =====================================================================
   Interactive Team Accordion — 45175a2a
   Every visual value is a CSS custom property so Elementor controls can
   override it without specificity fights or !important.
   ===================================================================== */

.ita-45175a2a-container {
	/* motion */
	--ita-duration: 550ms;
	--ita-ease: cubic-bezier(.25, 1, .5, 1);

	/* structure */
	--ita-height: 460px;
	--ita-gap: 0px;
	--ita-radius: 14px;
	--ita-strip-radius: 0px;
	--ita-expand: 4;
	--ita-collapsed-min: 72px;
	--ita-content-width: 55%;
	--ita-content-min: 240px;
	--ita-pad: 30px;

	/* colour */
	--ita-strip-bg: #ffffff;
	--ita-content-bg: #fafafa;
	--ita-divider: #ececec;
	--ita-focus: #0073e6;

	/* alignment */
	--ita-text-align: left;
	--ita-content-valign: center;

	/* image */
	--ita-img-pos: center center;
	--ita-img-fit: cover;
	--ita-grayscale: 100%;
	--ita-grayscale-active: 0%;
	--ita-img-scale: 1.08;
	--ita-overlay: rgba(255, 255, 255, .35);
	--ita-overlay-active: rgba(0, 0, 0, 0);
	--ita-stack-img: 150px;
	--ita-stack-img-active: 260px;

	/* closed label */
	--ita-label-anchor: flex-end;
	--ita-label-justify: center;
	--ita-label-offset: 22px;
	--ita-label-gap: 10px;
	--ita-label-shadow: rgba(255, 255, 255, .85);
	--ita-label-bg: rgba(0, 0, 0, 0);
	--ita-label-bg-pad: 0px;

	/* button + actions row */
	--ita-btn-icon-gap: 8px;
	--ita-btn-icon-dir: row;
	--ita-actions-gap: 16px;
	--ita-actions-align: flex-start;

	/* social icons */
	--ita-icon-size: 18px;
	--ita-icon-gap: 12px;
	--ita-icon-pad: 0px;
	--ita-icon-radius: 50%;
	--ita-icon-color: #111111;
	--ita-icon-bg: rgba(0, 0, 0, 0);
	--ita-icon-color-hover: #0073e6;
	--ita-icon-bg-hover: rgba(0, 0, 0, 0);

	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--ita-gap);
	width: 100%;
	height: var(--ita-height);
	min-width: 0;
	overflow: hidden;
	border-radius: var(--ita-radius);
	box-sizing: border-box;
}

.ita-45175a2a-container *,
.ita-45175a2a-container *::before,
.ita-45175a2a-container *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   Strip
   ------------------------------------------------------------------ */
.ita-45175a2a-strip {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex: 1 1 0%;
	min-width: var(--ita-collapsed-min);
	overflow: hidden;
	background-color: var(--ita-strip-bg);
	border-radius: var(--ita-strip-radius);
	cursor: pointer;
	transition: flex-grow var(--ita-duration) var(--ita-ease);
	-webkit-tap-highlight-color: transparent;
	/* Scopes layout and paint work to this strip, so the browser does not
	   re-lay-out the whole page on every frame of the open animation. */
	contain: layout paint;
}

/* Divider drawn as an overlay so it never steals layout width. An inset
   box-shadow would be painted underneath the panel and image children and
   would therefore be invisible. */
.ita-45175a2a-strip + .ita-45175a2a-strip::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background-color: var(--ita-divider);
	pointer-events: none;
	z-index: 5;
}

.ita-45175a2a-strip:focus {
	outline: none;
}

.ita-45175a2a-strip:focus-visible {
	outline: 2px solid var(--ita-focus);
	outline-offset: -2px;
	z-index: 3;
}

.ita-45175a2a-strip.active {
	flex-grow: var(--ita-expand);
	cursor: default;
}

/* ---------------------------------------------------------------------
   Text panel
   ------------------------------------------------------------------ */
.ita-45175a2a-content-wrap {
	flex: 0 0 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: var(--ita-content-valign);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	padding: 0;
	background-color: var(--ita-content-bg);
	transition:
		flex-basis var(--ita-duration) var(--ita-ease),
		padding var(--ita-duration) var(--ita-ease),
		opacity calc(var(--ita-duration) * .7) ease,
		visibility 0s linear var(--ita-duration);
}

/*
 * max() is the fix for the clipped panel. A plain percentage of the open
 * strip can resolve to less than the text block needs once there are 5+
 * members or the viewport narrows, and the overflow then eats the right
 * edge of the text. The panel now never opens narrower than its content.
 */
.ita-45175a2a-strip.active .ita-45175a2a-content-wrap {
	flex-basis: max(var(--ita-content-min), var(--ita-content-width));
	opacity: 1;
	visibility: visible;
	padding: var(--ita-pad);
	transition:
		flex-basis var(--ita-duration) var(--ita-ease),
		padding var(--ita-duration) var(--ita-ease),
		opacity calc(var(--ita-duration) * .7) ease,
		visibility 0s linear 0s;
}

/* Guarantee the open strip is wide enough to hold that panel plus image. */
.ita-45175a2a-strip.active {
	min-width: min( 100%, calc( var(--ita-content-min) + var(--ita-collapsed-min) ) );
}

/* min-width holds the text at a stable width while the panel animates,
   which is what stops the mid-animation reflow / text jitter */
.ita-45175a2a-content-inner {
	width: 100%;
	/* Holds a stable width during the open animation so the text does not
	   reflow mid-transition. Safe now that the panel can never be narrower. */
	min-width: var(--ita-content-min);
	/* A bio longer than the accordion is tall used to be silently cut off at
	   the bottom. It scrolls instead. Set "Limit Bio Lines" to avoid both. */
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	text-align: var(--ita-text-align);
	overflow-wrap: anywhere;
}

.ita-45175a2a-name {
	margin: 0 0 4px 0;
	font-size: clamp(1.15rem, 1.6vw + .5rem, 1.6rem);
	line-height: 1.2;
	font-weight: 700;
	color: #111;
}

.ita-45175a2a-title {
	margin: 0 0 14px 0;
	font-size: clamp(.85rem, .4vw + .75rem, 1rem);
	line-height: 1.3;
	font-weight: 500;
	color: #0073e6;
}

.ita-45175a2a-bio {
	--ita-bio-lines: none;
	margin: 0 0 20px 0;
	line-height: 1.55;
	color: #555;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ita-bio-lines);
	line-clamp: var(--ita-bio-lines);
	overflow: hidden;
}

.ita-45175a2a-bio p {
	margin: 0 0 1em 0;
}

.ita-45175a2a-bio p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Social icons
   ------------------------------------------------------------------ */
.ita-45175a2a-socials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ita-icon-gap);
	line-height: 0;
	max-width: 100%;
}

.ita-45175a2a-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--ita-icon-pad);
	border-radius: var(--ita-icon-radius);
	font-size: var(--ita-icon-size);
	line-height: 1;
	color: var(--ita-icon-color);
	background-color: var(--ita-icon-bg);
	text-decoration: none;
	transition: color .3s ease, background-color .3s ease;
}

.ita-45175a2a-social-link:hover,
.ita-45175a2a-social-link:focus-visible {
	color: var(--ita-icon-color-hover);
	background-color: var(--ita-icon-bg-hover);
}

/*
 * The size is applied to the icon directly rather than inherited. Elementor
 * renders these as either <i> (Font Awesome, sized by its own ::before rules)
 * or inline <svg class="e-font-icon-svg"> which Elementor sizes at 1em — and
 * a theme setting a fixed font-size on `i` beats a plain `font-size: inherit`.
 * Naming the variable at every level leaves nothing to inherit incorrectly.
 */
/*
 * !important is deliberate and scoped. These selectors match nothing but this
 * widget's own icons, and the size has now failed to apply twice through
 * inheritance and through raised specificity — meaning something in the stack
 * (theme, Font Awesome, or Elementor's icon CSS) is setting it with a weight
 * we cannot outrank by selector alone. There is no competing rule of ours for
 * this to override, so the only thing it can win against is that unknown rule.
 */
.ita-45175a2a-socials .ita-45175a2a-social-link > i,
.ita-45175a2a-socials .ita-45175a2a-social-link > i::before,
.ita-45175a2a-socials .ita-45175a2a-social-link > span > i {
	font-size: var(--ita-icon-size) !important;
	line-height: 1 !important;
	width: auto !important;
	height: auto !important;
}

.ita-45175a2a-socials .ita-45175a2a-social-link > svg,
.ita-45175a2a-socials .ita-45175a2a-social-link > span > svg {
	width: var(--ita-icon-size) !important;
	height: var(--ita-icon-size) !important;
	font-size: var(--ita-icon-size) !important;
	fill: currentColor;
}

/* ---------------------------------------------------------------------
   Panel button
   Block-level wrapper so alignment follows text-align, matching the socials.
   ------------------------------------------------------------------ */
/*
 * One flex column holds both actions, so alignment is a single align-items
 * value rather than text-align on each. align-items accepts flex-start /
 * center / flex-end in every browser, which justify-content: left|right
 * does not.
 */
.ita-45175a2a-actions {
	display: flex;
	flex-direction: column;
	align-items: var(--ita-actions-align);
	gap: var(--ita-actions-gap);
	max-width: 100%;
}

.ita-45175a2a-actions.is-reversed {
	flex-direction: column-reverse;
}

.ita-45175a2a-button-wrap {
	display: block;
	max-width: 100%;
}

.ita-45175a2a-actions[style*="stretch"] .ita-45175a2a-button-wrap {
	width: 100%;
}

.ita-45175a2a-button {
	display: inline-flex;
	flex-direction: var(--ita-btn-icon-dir);
	align-items: center;
	justify-content: center;
	gap: var(--ita-btn-icon-gap);
	padding: 12px 22px;
	border-radius: 4px;
	color: #fff;
	background-color: #0073e6;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}

.ita-45175a2a-button:hover,
.ita-45175a2a-button:focus-visible {
	text-decoration: none;
}

.ita-45175a2a-button-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.ita-45175a2a-button-icon > i,
.ita-45175a2a-button-icon > i::before {
	font-size: 1em;
	line-height: 1;
}

.ita-45175a2a-button-icon > svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---------------------------------------------------------------------
   Image
   ------------------------------------------------------------------ */
.ita-45175a2a-image-wrap {
	position: relative;
	/* An <img> never tiles, but a theme or the imageless fallback can put a
	   background here — pin it to the same crop rules so nothing repeats. */
	background-repeat: no-repeat;
	background-position: var(--ita-img-pos);
	background-size: var(--ita-img-fit);
	flex: 1 1 0%;
	align-self: stretch;
	min-width: 0;
	min-height: 0;
	height: 100%;
	overflow: hidden;
}

/*
 * Elementor's own reset is `.elementor img { height: auto; }` at (0,1,1),
 * which outranks a lone `.ita-…-image` class at (0,1,0) — the image was
 * collapsing to its intrinsic aspect ratio instead of filling the strip.
 * The child + element selector below is (0,2,1) and wins, and absolute
 * positioning makes the fill independent of the parent's height entirely.
 */
.ita-45175a2a-image-wrap > img.ita-45175a2a-image {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--ita-img-fit);
	object-position: var(--ita-img-pos);
	filter: grayscale(var(--ita-grayscale));
	transform: scale(var(--ita-img-scale));
	transition:
		filter var(--ita-duration) ease,
		transform var(--ita-duration) var(--ita-ease);
}

.ita-45175a2a-strip.active .ita-45175a2a-image-wrap > img.ita-45175a2a-image {
	filter: grayscale(var(--ita-grayscale-active));
	transform: scale(1);
}

.ita-45175a2a-image-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--ita-overlay);
	transition: background-color var(--ita-duration) ease;
	pointer-events: none;
	z-index: 1;
}

.ita-45175a2a-strip.active .ita-45175a2a-image-wrap::after {
	background-color: var(--ita-overlay-active);
}

.ita-45175a2a-strip.is-imageless .ita-45175a2a-image-wrap {
	background-color: var(--ita-strip-bg);
}

/* ---------------------------------------------------------------------
   Closed label
   FIX: the old version rotated a bottom-anchored absolute box around its
   own centre, so half the rotated text ran past the bottom edge of the
   strip and was clipped by overflow:hidden. Now the label is a full-size
   flex overlay and the text uses writing-mode, so its box grows along the
   axis it is actually read on and stays inside the strip. Anything longer
   than the strip is ellipsised instead of being chopped.
   ------------------------------------------------------------------ */
.ita-45175a2a-collapsed-label {
	position: absolute;
	inset: 0;
	display: flex;
	padding: var(--ita-label-offset);
	pointer-events: none;
	z-index: 2;
	opacity: 1;
	transition: opacity calc(var(--ita-duration) * .5) ease;
}

.ita-45175a2a-collapsed-inner {
	display: flex;
	align-items: center;
	gap: var(--ita-label-gap);
	max-width: 100%;
	max-height: 100%;
	min-width: 0;
	min-height: 0;
	padding: var(--ita-label-bg-pad);
	background-color: var(--ita-label-bg);
	border-radius: var(--ita-strip-radius);
}

.ita-45175a2a-collapsed-name,
.ita-45175a2a-collapsed-title {
	display: block;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-shadow: 0 1px 3px var(--ita-label-shadow);
}

.ita-45175a2a-collapsed-name {
	font-weight: 700;
	font-size: clamp(.85rem, .35vw + .75rem, 1rem);
	color: #111;
}

.ita-45175a2a-collapsed-title {
	font-size: clamp(.72rem, .25vw + .65rem, .85rem);
	color: #555;
}

/* Vertical (rotated) label */
.ita-45175a2a--label-vertical .ita-45175a2a-collapsed-label {
	align-items: var(--ita-label-anchor);
	justify-content: center;
}

.ita-45175a2a--label-vertical .ita-45175a2a-collapsed-inner {
	writing-mode: vertical-rl;
	flex-direction: row;
}

/* reads bottom-to-top, name nearest the bottom edge */
.ita-45175a2a--label-vertical.ita-45175a2a--dir-up .ita-45175a2a-collapsed-inner {
	transform: rotate(180deg);
}

/* Horizontal label */
.ita-45175a2a--label-horizontal .ita-45175a2a-collapsed-label {
	align-items: var(--ita-label-anchor);
	justify-content: var(--ita-label-justify);
}

.ita-45175a2a--label-horizontal .ita-45175a2a-collapsed-inner {
	flex-direction: column;
	align-items: var(--ita-label-justify);
	gap: calc(var(--ita-label-gap) / 3);
}

.ita-45175a2a-strip.active .ita-45175a2a-collapsed-label {
	opacity: 0;
}

/* ---------------------------------------------------------------------
   Stacked layout
   Applied by the "Stack Vertically On" control:
   .ita--stack-mobile  -> below 768px
   .ita--stack-tablet  -> below 1025px
   .ita--stack-never   -> never
   ------------------------------------------------------------------ */
@media screen and (max-width: 1024px) {
	.ita-45175a2a-container.ita-45175a2a--stack-tablet {
		flex-direction: column;
		height: auto;
	}

	.ita-45175a2a--stack-tablet .ita-45175a2a-strip {
		flex: 0 0 auto;
		flex-direction: column;
		min-width: 0;
		width: 100%;
	}

	.ita-45175a2a--stack-tablet .ita-45175a2a-strip + .ita-45175a2a-strip::before {
		top: 0;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 1px;
	}

	.ita-45175a2a--stack-tablet .ita-45175a2a-image-wrap {
		order: 1;
		width: 100%;
		flex: 0 0 auto;
		height: var(--ita-stack-img);
		align-self: auto;
		transition: height var(--ita-duration) var(--ita-ease);
	}

	.ita-45175a2a--stack-tablet .ita-45175a2a-strip.active .ita-45175a2a-image-wrap {
		height: var(--ita-stack-img-active);
	}

	.ita-45175a2a--stack-tablet .ita-45175a2a-content-wrap {
		order: 2;
		flex: 0 0 auto;
		width: 100%;
		display: grid;
		grid-template-rows: 0fr;
		padding: 0 var(--ita-pad);
		transition:
			grid-template-rows var(--ita-duration) var(--ita-ease),
			padding var(--ita-duration) var(--ita-ease),
			opacity calc(var(--ita-duration) * .7) ease;
	}

	.ita-45175a2a--stack-tablet .ita-45175a2a-strip.active .ita-45175a2a-content-wrap {
		grid-template-rows: 1fr;
		padding: var(--ita-pad);
	}

	.ita-45175a2a--stack-tablet .ita-45175a2a-strip.active .ita-45175a2a-content-wrap {
		flex-basis: auto;
		min-width: 0;
	}

	.ita-45175a2a--stack-tablet .ita-45175a2a-strip.active {
		min-width: 0;
	}

	.ita-45175a2a--stack-tablet .ita-45175a2a-content-inner {
		min-width: 0;
		min-height: 0;
		max-height: none;
		overflow: hidden;
	}

	/*
	 * Must outrank .ita--label-vertical.ita--dir-up .collapsed-inner at (0,3,0),
	 * which sets transform: rotate(180deg). At (0,2,0) this lost, and the label
	 * stayed upside down once the layout stacked.
	 */
	.ita-45175a2a-container.ita-45175a2a--stack-tablet .ita-45175a2a-collapsed-inner {
		writing-mode: horizontal-tb;
		transform: none;
		flex-direction: column;
		align-items: var(--ita-label-justify);
		gap: 2px;
	}

	.ita-45175a2a-container.ita-45175a2a--stack-tablet .ita-45175a2a-collapsed-label {
		align-items: flex-end;
		justify-content: var(--ita-label-justify);
	}
}

@media screen and (max-width: 767px) {
	.ita-45175a2a-container.ita-45175a2a--stack-mobile {
		flex-direction: column;
		height: auto;
	}

	.ita-45175a2a--stack-mobile .ita-45175a2a-strip {
		flex: 0 0 auto;
		flex-direction: column;
		min-width: 0;
		width: 100%;
	}

	.ita-45175a2a--stack-mobile .ita-45175a2a-strip + .ita-45175a2a-strip::before {
		top: 0;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 1px;
	}

	.ita-45175a2a--stack-mobile .ita-45175a2a-image-wrap {
		order: 1;
		width: 100%;
		flex: 0 0 auto;
		height: var(--ita-stack-img);
		align-self: auto;
		transition: height var(--ita-duration) var(--ita-ease);
	}

	.ita-45175a2a--stack-mobile .ita-45175a2a-strip.active .ita-45175a2a-image-wrap {
		height: var(--ita-stack-img-active);
	}

	.ita-45175a2a--stack-mobile .ita-45175a2a-content-wrap {
		order: 2;
		flex: 0 0 auto;
		width: 100%;
		display: grid;
		grid-template-rows: 0fr;
		padding: 0 var(--ita-pad);
		transition:
			grid-template-rows var(--ita-duration) var(--ita-ease),
			padding var(--ita-duration) var(--ita-ease),
			opacity calc(var(--ita-duration) * .7) ease;
	}

	.ita-45175a2a--stack-mobile .ita-45175a2a-strip.active .ita-45175a2a-content-wrap {
		grid-template-rows: 1fr;
		padding: var(--ita-pad);
	}

	.ita-45175a2a--stack-mobile .ita-45175a2a-strip.active .ita-45175a2a-content-wrap {
		flex-basis: auto;
		min-width: 0;
	}

	.ita-45175a2a--stack-mobile .ita-45175a2a-strip.active {
		min-width: 0;
	}

	.ita-45175a2a--stack-mobile .ita-45175a2a-content-inner {
		min-width: 0;
		min-height: 0;
		max-height: none;
		overflow: hidden;
	}

	/*
	 * Must outrank .ita--label-vertical.ita--dir-up .collapsed-inner at (0,3,0),
	 * which sets transform: rotate(180deg). At (0,2,0) this lost, and the label
	 * stayed upside down once the layout stacked.
	 */
	.ita-45175a2a-container.ita-45175a2a--stack-mobile .ita-45175a2a-collapsed-inner {
		writing-mode: horizontal-tb;
		transform: none;
		flex-direction: column;
		align-items: var(--ita-label-justify);
		gap: 2px;
	}

	.ita-45175a2a-container.ita-45175a2a--stack-mobile .ita-45175a2a-collapsed-label {
		align-items: flex-end;
		justify-content: var(--ita-label-justify);
	}
}

/* Fluid safety net: while still in row layout on a narrow viewport a
   closed strip is too short for two lines of rotated text, so the job
   title steps aside instead of both being squashed. The stacked blocks
   above bring it back once the strips go full width. */
@media screen and (max-width: 900px) {
	.ita-45175a2a-container .ita-45175a2a-collapsed-title {
		display: none;
	}
}

@media screen and (max-width: 1024px) {
	.ita-45175a2a-container.ita-45175a2a--stack-tablet .ita-45175a2a-collapsed-title {
		display: block;
	}
}

@media screen and (max-width: 767px) {
	.ita-45175a2a-container.ita-45175a2a--stack-mobile .ita-45175a2a-collapsed-title {
		display: block;
	}
}

/* ---------------------------------------------------------------------
   Paint hints
   filter and transform on a large photo are the most expensive part of the
   animation. Promoting the layer on hover gives the compositor a head start
   before the click lands, and the hint is dropped again the moment the
   pointer leaves, so no layer is held permanently. Hover-capable pointers
   only: touch devices would keep the hint alive after a tap for no gain.
   ------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
	.ita-45175a2a-container:hover .ita-45175a2a-image-wrap > img.ita-45175a2a-image {
		will-change: filter, transform;
	}
}

/* ---------------------------------------------------------------------
   Accessibility / motion preferences
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.ita-45175a2a-container,
	.ita-45175a2a-container * {
		transition-duration: 1ms !important;
	}
}

/* Elementor editor: keep the widget usable while dragging */
.elementor-editor-active .ita-45175a2a-strip {
	cursor: pointer;
}