/* -----------------------------------------------------------------------
   Management team page (page-our-team.php) — full-bleed, no sidebar.
   RTL-first, logical properties only.

   A directory of cards, not the portrait-led editorial layout of the team
   page: this roster has no photographs, so an initial monogram carries the
   visual weight instead. The card grid also absorbs seven very uneven bios
   (one paragraph up to four) without leaving holes in the layout.
   ----------------------------------------------------------------------- */

.our-team-page {
	--ot-ink: #0e1120;
	--ot-ink-deep: #070a16;
	--ot-tint: #6ebbe9;           /* accent tint that survives the dark hero */
	--ot-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ot-dur: 0.32s;
	--ot-gap: clamp(3rem, 6vw, 5rem);

	display: grid;
	gap: var(--ot-gap);
	/* Swallow .site-content's padding so the hero runs edge-to-edge from
	   the header down. */
	margin-block-start: calc(-1 * var(--shivuk-space));
	padding-block-end: var(--ot-gap);
}

.our-team-page .container {
	inline-size: 100%;
	max-inline-size: min(1240px, calc(100% - 2 * var(--shivuk-space)));
}

/* -----------------------------------------------------------------------
   Reveal-on-scroll. An animation rather than a transition so it never
   fights the hover transitions on the same cards. The hidden start state
   only exists when motion is allowed — reduced-motion visitors, and anyone
   without IntersectionObserver, see everything immediately.
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.our-team-page .js-reveal {
		opacity: 0;
	}

	.our-team-page .js-reveal.is-visible {
		animation: ot-rise 0.65s var(--ot-ease) both;
	}
}

@keyframes ot-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -----------------------------------------------------------------------
   1. Hero — centred, on a canvas of two slow lights; the headline numbers
   sit beneath the introduction as glass chips.
   ----------------------------------------------------------------------- */
.our-team-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(3.5rem, 8vw, 6rem);
	background:
		radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.6px) 0 0 / 20px 20px,
		linear-gradient(172deg, var(--ot-ink-deep), var(--ot-ink) 90%);
	color: #ffffff;
}

.our-team-hero__orb {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}

.our-team-hero__orb--a {
	inset-block-start: -35%;
	inset-inline-end: 6%;
	inline-size: min(60vw, 620px);
	aspect-ratio: 1;
	background: color-mix(in srgb, var(--shivuk-color-accent) 75%, transparent);
	opacity: 0.5;
	animation: ot-drift 18s ease-in-out infinite alternate;
}

.our-team-hero__orb--b {
	inset-block-end: -45%;
	inset-inline-start: 4%;
	inline-size: min(50vw, 520px);
	aspect-ratio: 1;
	background: #5b4be0;
	opacity: 0.32;
	animation: ot-drift 22s ease-in-out -6s infinite alternate-reverse;
}

@keyframes ot-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(-6%, 8%, 0) scale(1.12);
	}
}

.our-team-hero::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}

.our-team-hero *:focus-visible {
	outline-color: #ffffff;
}

.our-team-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.our-team-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.07);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.our-team-hero__kicker::before {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--ot-tint);
	box-shadow: 0 0 10px var(--ot-tint);
}

.our-team-hero__title {
	margin: 1.1rem 0 0;
	max-inline-size: 18ch;
	font-size: clamp(2.5rem, 6vw, 4.2rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
	background: linear-gradient(120deg, #ffffff 35%, var(--ot-tint));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.our-team-hero__lead {
	margin-block-start: 1.4rem;
	max-inline-size: 66ch;
	color: rgba(255, 255, 255, 0.74);
	font-size: clamp(1.02rem, 1.5vw, 1.12rem);
	line-height: 1.85;
}

.our-team-hero__lead p {
	margin: 0;
}

.our-team-hero__lead p + p {
	margin-block-start: 0.9em;
}

.our-team-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
	padding: 0;
}

.our-team-hero__stat {
	display: grid;
	gap: 0.1rem;
	min-inline-size: 8rem;
	padding: 0.85rem 1.4rem;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.our-team-hero__stat dt {
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--ot-tint);
}

.our-team-hero__stat dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.85rem;
	font-weight: 500;
}

/* -----------------------------------------------------------------------
   2. Roster — profile cards

   One pattern for every person, with or without a photo: a tinted head with
   the portrait (or a monogram) and the name, then the story. Each card takes
   the next colour in a six-colour palette, so a roster without portraits is
   still varied. Cards in a row share one height; links sit on the foot.
   ----------------------------------------------------------------------- */
.our-team-grid {
	--ot-cols: 3;

	display: grid;
	grid-template-columns: repeat(var(--ot-cols), minmax(0, 1fr));
	gap: clamp(1.1rem, 2.2vw, 1.6rem);
	align-items: stretch;
}

.our-team-grid--cols-2 {
	--ot-cols: 2;
}

.our-team-grid--cols-4 {
	--ot-cols: 4;
}

@media (max-width: 1100px) {
	.our-team-grid--cols-4 {
		--ot-cols: 3;
	}
}

@media (max-width: 900px) {
	.our-team-grid,
	.our-team-grid--cols-3,
	.our-team-grid--cols-4 {
		--ot-cols: 2;
	}
}

@media (max-width: 600px) {
	.our-team-grid,
	.our-team-grid--cols-2,
	.our-team-grid--cols-3,
	.our-team-grid--cols-4 {
		--ot-cols: 1;
	}
}

/* The palette: --ot-c is the strong colour, --ot-d its deep partner, --ot-t a
   very light tint of it for the head. */
.our-team-card {
	--ot-c: #1a7dbe;
	--ot-d: #10335c;
	--ot-t: #e8f3fb;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	min-inline-size: 0;
	padding: 0 clamp(1.3rem, 2vw, 1.7rem) clamp(1.3rem, 2vw, 1.7rem);
	border: 1px solid var(--shivuk-color-border);
	border-radius: 24px;
	background: var(--shivuk-color-bg);
	box-shadow: 0 1px 2px rgba(14, 17, 32, 0.04), 0 12px 32px -18px rgba(14, 17, 32, 0.22);
	overflow: hidden;
	transition:
		transform var(--ot-dur) var(--ot-ease),
		box-shadow var(--ot-dur) var(--ot-ease),
		border-color var(--ot-dur) var(--ot-ease);
}

.our-team-grid > .our-team-card:nth-child(6n + 2) {
	--ot-c: #5b4be0;
	--ot-d: #231a6b;
	--ot-t: #efedfd;
}

.our-team-grid > .our-team-card:nth-child(6n + 3) {
	--ot-c: #0f9d8a;
	--ot-d: #0b3d44;
	--ot-t: #e6f6f3;
}

.our-team-grid > .our-team-card:nth-child(6n + 4) {
	--ot-c: #c4338a;
	--ot-d: #4a123f;
	--ot-t: #fbebf4;
}

.our-team-grid > .our-team-card:nth-child(6n + 5) {
	--ot-c: #d9731f;
	--ot-d: #4d2310;
	--ot-t: #fdf0e3;
}

.our-team-grid > .our-team-card:nth-child(6n) {
	--ot-c: #3f5a94;
	--ot-d: #17223f;
	--ot-t: #ebeff8;
}

.our-team-card:hover,
.our-team-card:focus-within {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--ot-c) 40%, var(--shivuk-color-border));
	box-shadow: 0 2px 4px rgba(14, 17, 32, 0.05), 0 24px 44px -20px color-mix(in srgb, var(--ot-c) 55%, rgba(14, 17, 32, 0.4));
}

/* The head: a tinted band the portrait overlaps, with a thin line of the
   card's colour along the top. */
.our-team-card__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-inline: calc(-1 * clamp(1.3rem, 2vw, 1.7rem));
	padding: clamp(1.3rem, 2vw, 1.6rem) clamp(1.3rem, 2vw, 1.7rem);
	border-block-start: 4px solid var(--ot-c);
	background:
		radial-gradient(90% 160% at 100% 0%, color-mix(in srgb, var(--ot-c) 14%, transparent), transparent 70%),
		var(--ot-t);
}

.our-team-card__avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 76px;
	block-size: 76px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(145deg, var(--ot-c), var(--ot-d));
	box-shadow: 0 0 0 3px #ffffff, 0 8px 18px -6px color-mix(in srgb, var(--ot-c) 60%, rgba(0, 0, 0, 0.5));
	color: #ffffff;
}

.our-team-card__avatar.is-monogram span {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.our-team-card__photo {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}

.our-team-card__ident {
	min-inline-size: 0;
}

.our-team-card__name {
	margin: 0;
	font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--shivuk-color-text);
	text-wrap: balance;
}

.our-team-card__role {
	margin: 0.3rem 0 0;
	color: color-mix(in srgb, var(--ot-c) 82%, #000000);
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.45;
	text-wrap: pretty;
}

.our-team-card__bio {
	color: var(--shivuk-color-text);
	font-size: 0.95rem;
	line-height: 1.8;
}

.our-team-card__bio p {
	margin: 0;
}

.our-team-card__bio p + p {
	margin-block-start: 0.8em;
}

/* Long bios fold behind "continue reading" (page setting); the script adds
   the state classes, without it the whole bio just shows. */
.our-team-card__bio.is-clamped {
	position: relative;
	max-block-size: var(--ot-clamp, 9.5em);
	overflow: hidden;
}

.our-team-card__bio.is-clamped::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 3.2em;
	background: linear-gradient(to top, var(--shivuk-color-bg), color-mix(in srgb, var(--shivuk-color-bg) 0%, transparent));
	pointer-events: none;
}

.our-team-card__more {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: -0.5rem;
	padding: 0.1rem 0;
	border: 0;
	background: none;
	color: color-mix(in srgb, var(--ot-c) 85%, #000000);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
}

.our-team-card__more::after {
	content: "";
	inline-size: 0.5em;
	block-size: 0.5em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-0.12em) rotate(45deg);
	transition: transform var(--ot-dur) var(--ot-ease);
}

.our-team-card__more[aria-expanded="true"]::after {
	transform: translateY(0.05em) rotate(-135deg);
}

.our-team-card__quote {
	position: relative;
	margin: 0;
	padding: 1rem 1.1rem;
	padding-inline-start: 2.9rem;
	border-radius: 16px;
	background: var(--ot-t);
	color: color-mix(in srgb, var(--ot-c) 75%, #000000);
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.65;
}

.our-team-card__quote p {
	margin: 0;
}

.our-team-card__quote::before {
	content: "\201C";
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.9rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--ot-c);
	opacity: 0.45;
}

.our-team-card__education {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0;
	color: var(--shivuk-color-muted);
	font-size: 0.85rem;
	line-height: 1.6;
}

.our-team-card__education-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: 10px;
	background: var(--ot-t);
	color: var(--ot-c);
}

.our-team-card__education-icon svg {
	inline-size: 17px;
	block-size: 17px;
}

/* Links pinned to the foot, so every card in a row ends on the same line. */
.our-team-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-block-start: auto;
	padding-block-start: 1.1rem;
	border-block-start: 1px solid var(--shivuk-color-border);
}

.our-team-card__link {
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	background: var(--ot-t);
	color: var(--ot-c);
	transition:
		background-color var(--ot-dur) var(--ot-ease),
		color var(--ot-dur) var(--ot-ease),
		transform var(--ot-dur) var(--ot-ease);
}

.our-team-card__link svg {
	inline-size: 17px;
	block-size: 17px;
}

.our-team-card__link:hover,
.our-team-card__link:focus-visible {
	transform: translateY(-3px);
	background: var(--ot-c);
	color: #ffffff;
}

/* -----------------------------------------------------------------------
   Closing call to action
   ----------------------------------------------------------------------- */
.our-team-cta__card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 28px;
	overflow: hidden;
	background:
		radial-gradient(70% 140% at 100% 0%, color-mix(in srgb, var(--shivuk-color-accent) 60%, transparent), transparent 62%),
		linear-gradient(150deg, var(--ot-ink), var(--ot-ink-deep));
	color: #ffffff;
}

.our-team-cta__text {
	flex: 1 1 22rem;
	min-inline-size: 0;
}

.our-team-cta__title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.our-team-cta__desc {
	margin: 0.7rem 0 0;
	max-inline-size: 56ch;
	color: rgba(255, 255, 255, 0.76);
	font-size: 1.02rem;
	line-height: 1.7;
}

.our-team-cta__btn {
	flex: 0 0 auto;
	padding: 0.95rem 1.9rem;
	border-radius: 999px;
	background: #ffffff;
	color: var(--ot-ink);
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
	transition: transform var(--ot-dur) var(--ot-ease), box-shadow var(--ot-dur) var(--ot-ease);
}

.our-team-cta__btn:hover,
.our-team-cta__btn:focus-visible {
	transform: translateY(-3px);
	color: var(--ot-ink);
	box-shadow: 0 20px 38px -12px rgba(0, 0, 0, 0.7);
}

/* -----------------------------------------------------------------------
   3. Editor content appended below the roster
   ----------------------------------------------------------------------- */
.our-team-extra .entry-content {
	max-inline-size: 760px;
	margin-inline: auto;
	font-size: 1.02rem;
	line-height: 1.85;
}

/* -----------------------------------------------------------------------
   Motion
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.our-team-hero__orb {
		animation: none;
	}

	.our-team-card,
	.our-team-card__link,
	.our-team-card__more::after,
	.our-team-cta__btn {
		transition: none;
	}

	.our-team-card:hover,
	.our-team-card:focus-within,
	.our-team-card__link:hover,
	.our-team-card__link:focus-visible,
	.our-team-cta__btn:hover {
		transform: none;
	}
}