/**
 * Our Team -- redesign layer.
 *
 * Loaded after css/pages/about-us/our-team.css, which stays in place: this
 * sheet only overrides, so deleting it returns the page to the flat first
 * pass rather than to nothing.
 *
 * The page now opens the way About Us, How We Work, Careers and the articles
 * do -- a photograph that is the whole first screen and hands over to the
 * content as you scroll. js/pages/our-team.js writes ONE custom property,
 * --tm-hero-p (0 at rest, 1 when the hero has travelled its own height); every
 * transform and opacity that reads it lives here. If the script never runs the
 * property is absent and each var() falls back to 0, which is the hero exactly
 * as it looks on arrival -- not a broken one.
 *
 * Everything is keyed off `.page-team-redesign` (added in functions.php) and,
 * for the hero, off `:has(.team-hero-media)` -- so deleting the photograph in
 * List View returns the hero to a plain band instead of breaking it.
 */

/* ==========================================================================
   HERO
   ========================================================================== */

.page-team-redesign .team-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * inner-pages.css pins .page-hero to `height: 100vh` -- a fixed box, not a
	 * minimum -- so BOTH have to be released, with !important, or a long
	 * headline is clipped rather than growing the section.
	 *
	 * svh, not vh, so a phone's address bar does not push the first section
	 * up underneath the hero.
	 */
	height: auto !important;
	min-height: 100vh !important;
	min-height: 100svh !important;
	margin: 0 !important;
	padding-block: clamp(6.25rem, 13vh, 9rem) clamp(2.25rem, 6vh, 4.5rem) !important;
	padding-inline: clamp(1.25rem, 5vw, 3rem) !important;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
	background: #050c0a;
}

/* ---------------------------------------------------------------- picture */

/*
 * An ordinary core/image block lifted out of flow to cover the section, so
 * the figure's own block margins have to be cleared.
 */
.page-team-redesign .team-hero-media {
	position: absolute;
	inset: 0;
	z-index: -3;
	margin: 0 !important;
	max-width: none !important;
	border-radius: 0 !important;
	overflow: hidden;
	transform: translate3d(0, calc(var(--tm-hero-p, 0) * 12%), 0)
	           scale(calc(1 + var(--tm-hero-p, 0) * 0.14));
	will-change: transform;
}
.page-team-redesign .team-hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: center 38%;
	border-radius: 0;
	box-shadow: none;
	/* A slow settle on arrival, so the picture is not simply static. */
	animation: tm-hero-settle 24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes tm-hero-settle {
	from { transform: scale(1.09); }
	to   { transform: scale(1); }
}

/*
 * The scrim. Symmetric, because the type is centred -- a one-sided wash would
 * darken half the picture to carry text that is not there.
 *
 * Heavier than the other heroes on the site because this photograph is a
 * bright, busy top-down shot: a pale desk directly behind white type. The
 * three layers are a flat floor, a bottom-weighted gradient and a pool in the
 * middle where the words actually sit.
 */
.page-team-redesign .team-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: calc(0.9 + var(--tm-hero-p, 0) * 0.1);
	background:
		radial-gradient(ellipse 62% 46% at 50% 50%,
			rgba(5, 12, 10, 0.62) 0%,
			rgba(5, 12, 10, 0.28) 62%,
			rgba(5, 12, 10, 0) 100%),
		linear-gradient(to top,
			rgba(5, 12, 10, 0.94) 0%,
			rgba(5, 12, 10, 0.62) 40%,
			rgba(5, 12, 10, 0.5) 74%,
			rgba(5, 12, 10, 0.72) 100%),
		linear-gradient(rgba(5, 12, 10, 0.16), rgba(5, 12, 10, 0.16));
	/* Cleared, or a scrim reusing a pseudo-element inherits whatever mask the
	   base sheet had on it and paints as a blob in the middle. */
	-webkit-mask-image: none;
	mask-image: none;
	background-size: auto;
	animation: none;
	pointer-events: none;
}

/* ------------------------------------------------------------------- type */

/*
 * `.wp-block-group__inner-container` is `display: contents` sitewide, and a
 * display:contents box takes no transform and no opacity. It is given a real
 * display here so it can be the type column.
 *
 * What it is NOT given is a position or a transform. The photograph is a
 * child of this container, and both of those would make it the containing
 * block for the absolutely-positioned figure -- which is exactly what
 * happened first time round: the picture shrank to the width of the text
 * column instead of covering the section. The handover therefore moves onto
 * the individual pieces of type below, and the container stays static so the
 * figure keeps resolving against `.team-hero`.
 */
.page-team-redesign .team-hero > .wp-block-group__inner-container,
.page-team-redesign .team-hero-inner {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: static;
	/*
	 * z-index MUST stay auto here. `.team-hero` is a flex container, so this
	 * is a flex item -- and z-index applies to a flex item even when it is
	 * statically positioned. Any value creates a stacking context, and the
	 * photograph inside then paints within it, above the scrim at -2 instead
	 * of below it. That is what left the scrim invisible: it was there, the
	 * right size and the right colour, and simply behind the picture.
	 */
	z-index: auto;
	width: 100%;
	max-width: 68ch;
	margin-inline: auto;
	transform: none;
}

/* The handover, applied to the type itself. Multiplied by more than 1 so
   the words are gone before the hero is, which is what makes it read as a
   handover rather than a fade-out. */
.page-team-redesign .team-hero .page-hero-title,
.page-team-redesign .team-hero h1,
.page-team-redesign .team-hero .team-hero-lede,
.page-team-redesign .team-hero > .wp-block-group__inner-container > p {
	position: relative;
	z-index: 1;
	opacity: calc(1 - var(--tm-hero-p, 0) * 1.45);
	transform: translate3d(0, calc(var(--tm-hero-p, 0) * -56px), 0);
	will-change: transform, opacity;
}

.page-team-redesign .team-hero .page-hero-title,
.page-team-redesign .team-hero h1 {
	max-width: none;
	margin: 0 auto 1.25rem;
	text-align: center !important;
	font-size: clamp(2.3rem, 4.6vw, 4rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.035em;
	/* White in BOTH themes: the scrim is a fixed dark gradient, so a
	   theme-aware colour would vanish in light mode. Set as a flat colour, not
	   a clipped gradient -- background-clip:text makes `color` do nothing. */
	color: #fff;
	background: none;
	-webkit-text-fill-color: #fff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* The lead line, promoted out of the body copy into the hero. */
.page-team-redesign .team-hero .team-hero-lede,
.page-team-redesign .team-hero p {
	max-width: 54ch;
	margin: 0.35rem auto 0;
	font-size: clamp(1.05rem, 1.35vw, 1.25rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92) !important;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
	text-align: center;
}
.page-team-redesign .team-hero .team-hero-lede strong,
.page-team-redesign .team-hero p strong {
	/* "Experienced Leadership. Specialist Technical Capability." -- requested
	   in the brand green rather than white. Green still reads clearly here:
	   the hero has a dark scrim behind it (see .team-hero-title above), the
	   same surface dark-mode already puts this exact green on. */
	color: var(--color-accent);
	font-weight: 700;
}


/* The bar sits over the photograph, so it is white in both themes until it
   goes solid on scroll. */
.page-team-redesign:has(.team-hero-media) .site-header:not(.scrolled-solid) .nav-list .nav-item .nav-link,
.page-team-redesign:has(.team-hero-media) .site-header:not(.scrolled-solid) nav .nav-link,
.page-team-redesign:has(.team-hero-media) .site-header:not(.scrolled-solid) .nav-chevron {
	color: #fff !important;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45) !important;
}
.page-team-redesign:has(.team-hero-media) .site-header:not(.scrolled-solid) .hamburger .bar {
	background-color: #fff !important;
}

/* ==========================================================================
   INTRO
   The body copy that used to sit under the headline. A lede paragraph and
   then the rest, so the section has a shape instead of four equal blocks.
   ========================================================================== */

.page-team-redesign .team-intro {
	padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
}
.page-team-redesign .team-intro .team-intro-body {
	max-width: 74ch;
	margin-inline: auto;
}
/* The source had 25px spacer blocks between these paragraphs; the
   restructure dropped them, so the rhythm is set here instead -- one place
   to change rather than four blocks in the editor. */
.page-team-redesign .team-intro p {
	margin: 0 0 1.35rem;
	font-size: clamp(1rem, 1.15vw, 1.08rem);
	line-height: 1.85;
	color: var(--color-text-muted);
}
.page-team-redesign .team-intro p:last-child { margin-bottom: 0; }
/* The opening paragraph carries the section, so it is set larger and in the
   body ink rather than the muted grey. */
.page-team-redesign .team-intro p:first-of-type {
	margin-bottom: 1.9rem;
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	line-height: 1.6;
	font-weight: 500;
	color: var(--color-text);
	letter-spacing: -0.012em;
}
/* A rule under the opening paragraph, so the lede reads as a lede. */
.page-team-redesign .team-intro p:first-of-type::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin-top: 1.6rem;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
}

/* ==========================================================================
   SECTION RHYTHM
   Alternating grounds and an accent rule above each heading, so the page
   reads as a sequence rather than one continuous scroll of the same colour.
   Shared with Careers and the service pages.
   ========================================================================== */

.page-team-redesign .team-leaders-section {
	background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
	border-block: 1px solid var(--color-border);
	padding-block: clamp(3.5rem, 8vw, 6rem);
}
.page-team-redesign .team-broader-section {
	padding-block: clamp(3.5rem, 8vw, 6rem);
}

.page-team-redesign .team-leaders-section .section-title,
.page-team-redesign .team-broader-section .section-title {
	position: relative;
	padding-top: 1.6rem;
}
.page-team-redesign .team-leaders-section .section-title::before,
.page-team-redesign .team-broader-section .section-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 52px;
	height: 3px;
	margin-left: -26px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
}
/*
 * The broader-team head is the only left-aligned one, so it is the only one
 * whose rule sits on the left. Keying this off `.left-aligned` instead would
 * catch the leadership head too: it carries that class in the content, but
 * the base sheet centres it anyway when the section holds the impact grid.
 */
.page-team-redesign .team-broader-section .section-title::before {
	left: 0;
	margin-left: 0;
}
/* The base sheet draws its own divider under the head; one rule is enough. */
.page-team-redesign .team-leaders-section .kt-divider,
.page-team-redesign .team-broader-section > .wp-block-columns .kt-divider {
	display: none;
}

/* ==========================================================================
   LEADERSHIP CARDS
   ========================================================================== */

.page-team-redesign .business-impact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
	justify-content: center;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	max-width: 1100px;
	margin-inline: auto;
}

.page-team-redesign .business-impact-grid .impact-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(2rem, 3vw, 2.6rem) clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem);
	border: 1px solid var(--color-border);
	border-radius: 22px;
	background: var(--color-bg);
	overflow: hidden;
	text-align: center;
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* A soft accent wash that lights up from the top on hover. ::before, because
   the base sheet already uses ::after on this card. */
.page-team-redesign .business-impact-grid .impact-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 160px;
	z-index: 0;
	opacity: 0;
	background: radial-gradient(ellipse 70% 100% at 50% 0%,
		rgba(var(--color-accent-rgb), 0.16) 0%,
		rgba(var(--color-accent-rgb), 0) 100%);
	transition: opacity 0.55s ease;
	pointer-events: none;
}
.page-team-redesign .business-impact-grid .impact-card:hover {
	transform: translateY(-6px);
	border-color: rgba(var(--color-accent-rgb), 0.45);
	box-shadow: 0 34px 70px -34px rgba(var(--ink-rgb), 0.55);
}
.page-team-redesign .business-impact-grid .impact-card:hover::before { opacity: 1; }

/* Everything above the wash. */
.page-team-redesign .business-impact-grid .impact-card > * {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------- portrait */

/*
 * The two portraits are placeholder silhouettes -- flat black SVGs with no
 * fill styles of their own. Dropped straight onto a white card they read as
 * an inkblot, so the disc is given a tinted ground and a gradient ring and
 * the silhouette is softened into it. Replace the Image block with a real
 * photograph in List View and this still holds: the ring and the crop are on
 * the figure, not on the file.
 */
.page-team-redesign .team-member-photo,
.page-team-redesign .impact-card .wp-block-image {
	position: relative;
	/*
	 * !important on the width, because the base sheet sets `width: 132px
	 * !important` -- and flex-none as well, since the card is a flex column
	 * and a bare width still let the disc squash into an ellipse.
	 */
	flex: 0 0 auto;
	width: clamp(120px, 15vw, 156px) !important;
	height: clamp(120px, 15vw, 156px);
	min-width: clamp(120px, 15vw, 156px);
	max-width: none !important;
	/* The base sheet draws its own double ring in box-shadow; the gradient
	   ring below replaces it, and both together read as a target. */
	box-shadow: none;
	margin: 0 auto 1.25rem !important;
	padding: 4px;
	border-radius: 50%;
	background: linear-gradient(140deg,
		rgba(var(--color-accent-rgb), 0.85),
		rgba(var(--color-accent-rgb), 0.15) 55%,
		rgba(var(--color-accent-rgb), 0.6));
	overflow: visible;
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-team-redesign .team-member-photo img,
.page-team-redesign .impact-card .wp-block-image img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	background: var(--color-surface);
	/* Softens the flat placeholder silhouette; a real photograph is barely
	   touched by it. */
	opacity: 0.92;
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-team-redesign .impact-card:hover .team-member-photo {
	transform: translateY(-3px) rotate(-1.5deg);
	box-shadow: none;
}
.page-team-redesign .impact-card:hover .team-member-photo img {
	transform: scale(1.05);
}

/* A slow sweep around the ring, so the card is alive before you touch it. */
.page-team-redesign .team-member-photo::before {
	content: "";
	position: absolute;
	inset: -3px;
	z-index: -1;
	border-radius: 50%;
	background: conic-gradient(from 0deg,
		rgba(var(--color-accent-rgb), 0) 0deg,
		rgba(var(--color-accent-rgb), 0.55) 90deg,
		rgba(var(--color-accent-rgb), 0) 200deg,
		rgba(var(--color-accent-rgb), 0) 360deg);
	opacity: 0.75;
	animation: tm-ring 9s linear infinite;
}
@keyframes tm-ring {
	to { transform: rotate(1turn); }
}
/* Stagger the two rings so they are not in lockstep. */
.page-team-redesign .business-impact-grid .impact-card:nth-child(2) .team-member-photo::before { animation-delay: -3s; }
.page-team-redesign .business-impact-grid .impact-card:nth-child(3) .team-member-photo::before { animation-delay: -6s; }

/* ------------------------------------------------------------------ text */

.page-team-redesign .impact-card-title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.18rem, 1.6vw, 1.42rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-text);
}

/* The role, as a pill rather than loose caps. */
.page-team-redesign .impact-card-desc:has(strong.accent) {
	margin: 0 0 1rem;
}
.page-team-redesign .impact-card-desc strong.accent {
	display: inline-block;
	padding: 0.34rem 0.85rem;
	border: 1px solid rgba(var(--color-accent-rgb), 0.35);
	border-radius: 100px;
	background: rgba(var(--color-accent-rgb), 0.1);
	color: var(--color-accent-hover);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.page-team-redesign .impact-card-desc em {
	display: block;
	max-width: 34ch;
	margin-inline: auto;
	font-size: 0.94rem;
	line-height: 1.7;
	color: var(--color-text-muted);
	font-style: normal;
}

/* ---------------------------------------------------------------- social */

.page-team-redesign .impact-card-social {
	margin-top: auto !important;
	padding-top: 1.25rem;
	justify-content: center;
	gap: 0.5rem;
}
/* The card's own top border, drawn as a short rule rather than a full one. */
.page-team-redesign .impact-card-social::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 48px;
	height: 1px;
	margin-left: -24px;
	background: var(--color-border);
}
.page-team-redesign .impact-card-social { position: relative; }

.page-team-redesign .impact-card-social .wp-social-link {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-team-redesign .impact-card-social .wp-social-link:hover {
	transform: translateY(-3px) scale(1.08);
}
.page-team-redesign .impact-card-social .wp-social-link a {
	border-radius: 50%;
}

/* ==========================================================================
   THE BROADER TEAM
   ========================================================================== */

.page-team-redesign .team-broader-section .wp-block-columns {
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.page-team-redesign .broader-team-photo {
	position: relative;
	margin: 0 !important;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 36px 80px -40px rgba(var(--ink-rgb), 0.6);
}
.page-team-redesign .broader-team-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-team-redesign .broader-team-photo:hover img { transform: scale(1.05); }

/* A thin accent edge along the top of the picture, matching the section rules. */
.page-team-redesign .broader-team-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 3px 0 0 rgba(var(--color-accent-rgb), 0.85);
	pointer-events: none;
}

/* ==========================================================================
   CTA
   ========================================================================== */

.page-team-redesign .inner-cta-box {
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-team-redesign .inner-cta-box:hover {
	transform: translateY(-4px);
	box-shadow: 0 40px 80px -40px rgba(var(--ink-rgb), 0.6);
}

/* ==========================================================================
   REVEALS

   The hidden state is gated on `.team-js`, which js/pages/our-team.js puts on
   <html> before it observes anything. CSS alone never hides a section, so a
   blocked script cannot leave a blank page.
   ========================================================================== */

.team-js .tm-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-js .tm-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   PORTRAIT SCREENS

   Same reasoning as the article, About, How We Work and Careers heroes: a
   full-bleed cover in a tall window crops a landscape photograph to a
   vertical sliver. The picture takes a band of its own and the headline sits
   below it.
   ========================================================================== */

@media (max-width: 900px) and (orientation: portrait) {
	.page-team-redesign .team-hero {
		/* grid, not block, so the band and its caption sit in the middle of
		   the screen rather than at the top of it with 300px of nothing
		   underneath. */
		display: grid;
		align-content: center;
		padding-block: clamp(5rem, 13vw, 6rem) clamp(2rem, 7vw, 3rem) !important;
		padding-inline: 0 !important;
		background: var(--color-bg);
	}
	/* The picture is a child of the inner container, not of the section, so
	   the two bands are rows of the container. */
	.page-team-redesign .team-hero > .wp-block-group__inner-container,
	.page-team-redesign .team-hero-inner {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(1.25rem, 5vw, 2rem);
		max-width: none;
		padding-inline: clamp(1.25rem, 5vw, 2rem);
	}
	.page-team-redesign .team-hero .page-hero-title,
	.page-team-redesign .team-hero h1,
	.page-team-redesign .team-hero .team-hero-lede {
		transform: none;
		opacity: 1;
	}
	.page-team-redesign .team-hero-media {
		position: relative;
		inset: auto;
		z-index: 0;
		aspect-ratio: 4 / 3;
		width: auto;
		/* Back out to the screen edges: a photograph band reads better
		   full-bleed than inset by the column gutter. */
		margin-inline: calc( clamp(1.25rem, 5vw, 2rem) * -1 ) !important;
		/* Nothing behind it to sink into once it has a band of its own. */
		transform: none;
	}
	.page-team-redesign .team-hero-media img { height: 100%; }

	/* The section scrim has nothing to darken now. The vignette that keeps
	   the white nav legible moves onto the picture itself. */
	.page-team-redesign .team-hero::after { display: none; }
	.page-team-redesign .team-hero-media::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(to bottom,
			rgba(5, 12, 10, 0.5) 0%,
			rgba(5, 12, 10, 0) 42%);
	}

	/* The type is on the page background again, so it takes the page colours. */
	.page-team-redesign .team-hero .page-hero-title,
	.page-team-redesign .team-hero h1 {
		color: var(--color-text);
		-webkit-text-fill-color: var(--color-text);
		text-shadow: none;
	}
	.page-team-redesign .team-hero .team-hero-lede,
	.page-team-redesign .team-hero p {
		color: var(--color-text-muted) !important;
		/* The dark halo existed to lift white type off a photograph. Over the
		   page background it only smudges dark type. */
		text-shadow: none;
	}
	.page-team-redesign .team-hero .team-hero-lede strong,
	.page-team-redesign .team-hero p strong { color: var(--color-accent); }


	/* The bar is over the page background here, not the photograph. */
	.page-team-redesign:has(.team-hero-media) .site-header:not(.scrolled-solid) .nav-list .nav-item .nav-link,
	.page-team-redesign:has(.team-hero-media) .site-header:not(.scrolled-solid) nav .nav-link,
	.page-team-redesign:has(.team-hero-media) .site-header:not(.scrolled-solid) .nav-chevron {
		color: var(--color-text) !important;
		text-shadow: none !important;
	}
	.page-team-redesign:has(.team-hero-media) .site-header:not(.scrolled-solid) .hamburger .bar {
		background-color: var(--color-text) !important;
	}

	.page-team-redesign .team-broader-section .wp-block-columns { gap: 1.75rem; }
}

@media (max-width: 700px) {
	.page-team-redesign .business-impact-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
	}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.page-team-redesign .team-hero-media,
	.page-team-redesign .team-hero > .wp-block-group__inner-container,
	.page-team-redesign .team-hero-inner,
	.page-team-redesign .team-hero .page-hero-title,
	.page-team-redesign .team-hero h1,
	.page-team-redesign .team-hero .team-hero-lede {
		transform: none !important;
		opacity: 1 !important;
	}
	.page-team-redesign .team-hero-media img,
	.page-team-redesign .team-member-photo::before {
		animation: none;
	}

	.team-js .tm-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.page-team-redesign .business-impact-grid .impact-card:hover,
	.page-team-redesign .impact-card:hover .team-member-photo,
	.page-team-redesign .impact-card:hover .team-member-photo img,
	.page-team-redesign .impact-card-social .wp-social-link:hover,
	.page-team-redesign .broader-team-photo:hover img,
	.page-team-redesign .inner-cta-box:hover {
		transform: none;
	}
}

/* ==========================================================================
   LEADERSHIP CARD POLISH

   The three cards hold copy of very different lengths -- one real bio, two
   placeholders -- and one role that runs to two lines where the others take
   one. Left alone, nothing lines up across the row: the bios start at
   different heights and the LinkedIn chips float at different depths.

   The fix is to give each band a floor rather than to trim the copy, so the
   row still lines up when the placeholders are replaced with real text of
   whatever length.
   ========================================================================== */

/* The card is already a flex column (see above); these make the bands
   behave predictably inside it. */
.page-team-redesign .business-impact-grid .impact-card {
	justify-content: flex-start;
}

/*
 * The name sits on one line at these lengths, but a long one would otherwise
 * push everything below it down on that card alone. A floor of two lines
 * keeps the row aligned either way.
 */
.page-team-redesign .impact-card-title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6em;
	margin: 0 0 0.6rem;
}

/*
 * The role pill. "GLOBAL CUSTOMER SOLUTIONS MANAGER" wraps to two lines and
 * "SALES DIRECTOR" does not, which is what pushed one bio a whole line lower
 * than its neighbour. The band reserves two lines and centres the pill in it,
 * so both cases occupy the same height.
 */
.page-team-redesign .impact-card-desc:has(strong.accent) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 4.25rem;
	margin: 0 0 1.25rem;
}
.page-team-redesign .impact-card-desc strong.accent {
	max-width: 26ch;
	text-wrap: balance;
}

/* --------------------------------------------------------------- the bio */

/*
 * Set as a pull quote: a large opening mark, a measure narrow enough to read
 * centred, and the whole thing growing to fill whatever space the tallest
 * card in the row has -- which is what keeps the three chips on one line.
 */
.page-team-redesign .impact-card-desc:has(em) {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 1.9rem;
	margin: 0;
}
.page-team-redesign .impact-card-desc:has(em)::before {
	/*
	 * The character itself, not a C escape. The escape was being parsed
	 * as three hex digits -- U+0201 -- with the trailing C left as a literal,
	 * so the card opened with a tofu box followed by the letter C. This file
	 * is UTF-8 and is served as UTF-8, so the glyph needs no escaping.
	 */
	content: "“";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	font-size: 3rem;
	line-height: 1;
	font-weight: 700;
	color: rgba(var(--color-accent-rgb), 0.35);
	pointer-events: none;
}
.page-team-redesign .impact-card-desc em {
	max-width: 32ch;
	font-size: 0.95rem;
	line-height: 1.75;
	font-style: normal;
	text-wrap: pretty;
	color: var(--color-text-muted);
}

/*
 * The editor's own dividers are redundant now that the quote mark opens the
 * bio and the chip row has its own rule.
 *
 * They have to be removed from the LAYOUT, not just emptied: each spacer
 * still occupied 20px, and only two of the three cards carry them -- which
 * is precisely why one bio started 19px higher than its neighbours.
 */
.page-team-redesign .impact-card .wp-block-kadence-spacer { display: none !important; }

/* ------------------------------------------------------------- the chips */

/*
 * The default social block paints LinkedIn's own brand blue, which is the one
 * colour on the page that belongs to somebody else. The chip takes the site's
 * palette instead: an outlined circle that fills with the accent on hover.
 *
 * The selectors are long because core styles the anchor, not the list item,
 * and does it from a sheet loaded after this one.
 */
.page-team-redesign .impact-card-social {
	margin: 1.5rem 0 0 !important;
	padding-top: 1.35rem;
	gap: 0.5rem;
}
.page-team-redesign .impact-card-social::before {
	width: 40px;
	margin-left: -20px;
	background: linear-gradient(90deg,
		rgba(var(--color-accent-rgb), 0) 0%,
		rgba(var(--color-accent-rgb), 0.55) 50%,
		rgba(var(--color-accent-rgb), 0) 100%);
}

.page-team-redesign .impact-card-social .wp-social-link,
.page-team-redesign .impact-card-social .wp-social-link.wp-social-link-linkedin {
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 50%;
	/* Core sets the brand colour on the LI itself, so it has to be cleared
	   here as well as on the anchor. */
	background-color: transparent !important;
}
.page-team-redesign .impact-card-social .wp-social-link a,
.page-team-redesign .impact-card-social .wp-social-link .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	/* The border token is very light in both themes -- too light for a 40px
	   circle sitting alone under a rule. Mixed with the ink for a firmer edge. */
	border: 1px solid rgba(var(--ink-rgb), 0.22);
	border-radius: 50%;
	background: transparent !important;
	color: var(--color-text-muted) !important;
	transition: color 0.35s ease, border-color 0.35s ease,
	            background-color 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/*
 * The glyph.
 *
 * our-team.css pins `color: #fff; fill: currentColor` ON THE SVG ITSELF, at
 * (0,5,1) -- higher than anything this sheet's own selectors reach. Forcing
 * `fill: currentColor` here therefore changed nothing: currentColor was
 * still resolving to that rule's white, so the icon stayed white on a
 * transparent chip, i.e. invisible.
 *
 * It is the COLOUR that has to be overridden, not the fill. `inherit` takes
 * it from the anchor, which means the glyph follows the chip through every
 * state including hover, with no second place to keep in sync.
 */
.page-team-redesign .impact-card-social .wp-social-link svg,
.page-team-redesign .impact-card-social .wp-social-link .wp-block-social-link-anchor svg {
	width: 18px;
	height: 18px;
	color: inherit !important;
	fill: currentColor !important;
}
.page-team-redesign .impact-card-social .wp-social-link a:hover,
.page-team-redesign .impact-card-social .wp-social-link a:focus-visible {
	transform: translateY(-3px);
	border-color: var(--color-accent) !important;
	background: var(--color-accent) !important;
	/* Near-black rather than white: white on #26D07C is about 1.9:1. */
	color: #04120b !important;
}
.page-team-redesign .impact-card-social .wp-social-link a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* ------------------------------------------------- the placeholder card */

/*
 * A card nobody has filled in yet. Marked quietly rather than hidden, so it
 * is obvious in a row of real people which one still needs writing -- and so
 * it stops being obvious the moment the class is removed in List View.
 */
.page-team-redesign .rcn-placeholder-member .team-member-photo img {
	opacity: 0.5;
}

@media (max-width: 700px) {
	/* One card per row: nothing to line up with, so the floors only add
	   empty space. */
	.page-team-redesign .impact-card-title,
	.page-team-redesign .impact-card-desc:has(strong.accent) {
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-team-redesign .impact-card-social .wp-social-link a:hover {
		transform: none;
	}
}


/* ==========================================================================
   MEET OUR TEAM -- premium layer
   Built on the cards above. js/pages/our-team.js adds the "Get in touch"
   link, the reveal (.tm-in, --i stagger) and the pointer tilt/spotlight
   (--rx/--ry/--mx/--my). Without the script the cards render complete.
   ========================================================================== */
.page-team-redesign .team-leaders-section .business-impact-grid {
	perspective: 1400px;
	grid-template-columns: repeat(auto-fit, minmax(290px, 370px));
	gap: clamp(1.4rem, 2.6vw, 2.2rem);
}

.page-team-redesign .team-leaders-section .business-impact-grid .impact-card {
	isolation: isolate;
	padding-top: clamp(2.3rem, 3.2vw, 2.8rem);
	border-radius: 26px;
	background:
		linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.07) 0%, transparent 38%),
		var(--card-bg, var(--color-bg));
	box-shadow:
		0 1px 2px rgba(var(--ink-rgb), 0.04),
		0 24px 50px -34px rgba(var(--ink-rgb), 0.4);
	transform: translateY(0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition:
		opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.5s ease,
		box-shadow 0.5s ease;
	will-change: transform;
}
.page-team-redesign .team-leaders-section .business-impact-grid .impact-card:hover {
	border-color: transparent;
	transform: translateY(-10px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	box-shadow:
		0 2px 4px rgba(var(--ink-rgb), 0.04),
		0 44px 80px -38px rgba(var(--color-accent-rgb), 0.55);
}

/* Reveal: cards rise and sharpen in turn as the grid scrolls into view. */
.tm-js .page-team-redesign .team-leaders-section .impact-card:not(.tm-in),
.page-team-redesign.tm-js .team-leaders-section .impact-card:not(.tm-in) {
	opacity: 0;
	transform: translateY(40px) scale(0.97);
	filter: blur(6px);
}
.page-team-redesign .team-leaders-section .impact-card {
	transition-delay: calc(var(--i, 0) * 120ms);
}
.page-team-redesign .team-leaders-section .impact-card.tm-settled { transition-delay: 0s; }
.page-team-redesign .team-leaders-section .impact-card.tm-in {
	filter: none;
	transition-property: opacity, transform, border-color, box-shadow, filter;
}

/* Gradient border that turns slowly while hovered. */
@property --tm-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.page-team-redesign .team-leaders-section .impact-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	padding: 1.5px;
	border-radius: inherit;
	background: conic-gradient(from var(--tm-angle), #26d07c, #00a499, rgba(var(--color-accent-rgb), 0.12), #26d07c);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0;
	transition: opacity 0.5s ease;
	animation: tm-spin 6s linear infinite paused;
	pointer-events: none;
}
.page-team-redesign .team-leaders-section .impact-card:hover::after {
	opacity: 1;
	animation-play-state: running;
}
@keyframes tm-spin { to { --tm-angle: 360deg; } }

/* Spotlight that follows the pointer (replaces the static top wash). */
.page-team-redesign .team-leaders-section .impact-card::before {
	inset: 0;
	width: auto;
	height: auto;
	transform: none;
	background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--color-accent-rgb), 0.16), transparent 60%);
}

/* Portrait: bigger, with a soft glow and a lift. */
.page-team-redesign .team-leaders-section .team-member-photo {
	width: clamp(132px, 15vw, 164px) !important;
	height: clamp(132px, 15vw, 164px);
	min-width: clamp(132px, 15vw, 164px);
	box-shadow: 0 18px 40px -18px rgba(var(--color-accent-rgb), 0.7);
	transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.5s ease;
}
.page-team-redesign .team-leaders-section .impact-card:hover .team-member-photo {
	transform: translateY(-6px) scale(1.04);
	box-shadow: 0 26px 50px -18px rgba(var(--color-accent-rgb), 0.85);
}
.page-team-redesign .team-leaders-section .team-member-photo img { opacity: 1; }

/* Name: a gradient rule draws out beneath it on hover. */
.page-team-redesign .team-leaders-section .impact-card-title {
	position: relative;
	padding-bottom: 0.5rem;
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}
.page-team-redesign .team-leaders-section .impact-card-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #26d07c, #00a499);
	transform: translateX(-50%);
	transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-team-redesign .team-leaders-section .impact-card:hover .impact-card-title::after { width: 72px; }

/* Role pill: solid gradient on hover. */
.page-team-redesign .team-leaders-section .impact-card-desc strong.accent {
	transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.page-team-redesign .team-leaders-section .impact-card:hover .impact-card-desc strong.accent {
	background: linear-gradient(135deg, #26d07c, #00a499);
	border-color: transparent;
	color: #ffffff !important;
	box-shadow: 0 10px 22px -12px rgba(var(--color-accent-rgb), 0.9);
}
/* design-system.css darkens this label in light mode at id weight; match it. */
html:not([data-theme="dark"]) #main-content .team-leaders-section .impact-card:hover .impact-card-desc .accent:not(#rcn-ds) {
	color: #ffffff !important;
}

/* Quote: the bio reads as a quotation, with a large soft mark behind it. */
.page-team-redesign .team-leaders-section .impact-card-desc:has(em) {
	position: relative;
	margin-top: 0.4rem;
	font-size: 0.95rem;
	line-height: 1.75;
	color: var(--color-text-muted);
}
.page-team-redesign .team-leaders-section .impact-card-desc:has(em)::before {
	content: "\201C";
	position: absolute;
	top: -1.55rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	font-family: Georgia, serif;
	font-size: 3rem;
	line-height: 1;
	color: rgba(var(--color-accent-rgb), 0.16);
	transition: color 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-team-redesign .team-leaders-section .impact-card:hover .impact-card-desc:has(em)::before {
	color: rgba(var(--color-accent-rgb), 0.28);
	transform: translateX(-50%) translateY(-4px) scale(1.08);
}

/* The spacer rules around the bio: short gradient dashes. */
.page-team-redesign .team-leaders-section .impact-card .kt-divider {
	width: 36px !important;
	border-top: 2px solid transparent !important;
	border-image: linear-gradient(90deg, #26d07c, #00a499) 1 !important;
	opacity: 0.7;
}

/* LinkedIn row, centred at the foot.
   margin-top:auto pins it to the bottom so the three rows line up. */
.page-team-redesign .team-leaders-section .impact-card .tm-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: auto;
	padding-top: 1.1rem;
}
.page-team-redesign .team-leaders-section .impact-card .impact-card-social {
	display: flex !important;
	justify-content: center !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 8px !important;
}
.page-team-redesign .team-leaders-section .impact-card-social .wp-social-link {
	margin: 0 !important;
}
/* LinkedIn in its own brand style: white "in" on a LinkedIn-blue rounded
   square, centred at the card foot. */
.page-team-redesign .team-leaders-section .impact-card-social .wp-block-social-link-anchor {
	display: grid !important;
	place-items: center;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #0a66c2 !important;
	color: #ffffff !important;
	box-shadow: 0 8px 18px -10px rgba(10, 102, 194, 0.75);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
}
.page-team-redesign .team-leaders-section .impact-card-social .wp-block-social-link-anchor svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.page-team-redesign .team-leaders-section .impact-card-social .wp-block-social-link-anchor:hover,
.page-team-redesign .team-leaders-section .impact-card-social .wp-block-social-link-anchor:focus-visible {
	transform: translateY(-3px);
	background: #004182 !important;
	box-shadow: 0 14px 26px -12px rgba(10, 102, 194, 0.9);
}

@media (prefers-reduced-motion: reduce) {
	.page-team-redesign .team-leaders-section .impact-card,
	.page-team-redesign .team-leaders-section .impact-card:hover,
	.page-team-redesign .team-leaders-section .impact-card:not(.tm-in) {
		transform: none !important;
		filter: none !important;
		opacity: 1 !important;
	}
	.page-team-redesign .team-leaders-section .impact-card::after { animation: none; }
}