/* TeamCNF page kit: what the inner pages share. A scoped reset for page blocks, the
   breadcrumb and page hero (with its four visuals: service orbit, photo with badge, photo
   collage, updated-date line), the chapter heading, the feature list with ticks and the
   red call-to-action band. Every page block adds the class tcnf-page to its section. */

/* ---- Scoped reset (WordPress ships none of these) ------------------------ */
.tcnf-page :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
	margin: 0;
}

.tcnf-page [hidden] {
	display: none !important;
}

.tcnf-page :where(ul[role="list"], ol[role="list"]) {
	list-style: none;
	padding: 0;
}

.tcnf-page :where(img, svg, video, picture) {
	display: block;
	max-width: 100%;
}

.tcnf-page :where(img) {
	height: auto;
}

/* Zero specificity, so every button style (filter pills, slider arrows) wins over it */
:where(.tcnf-page button) {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

:where(.tcnf-page input, .tcnf-page textarea, .tcnf-page select) {
	color: inherit;
	font: inherit;
}

/* ---- Breadcrumb ---------------------------------------------------------- */
.tcnf-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

.tcnf-crumbs li {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.tcnf-crumbs li + li::before {
	content: "/";
	color: var(--wp--custom--text--meta);
}

.tcnf-crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.tcnf-crumbs a:hover {
	color: var(--wp--custom--text--primary);
}

.tcnf-crumbs [aria-current="page"] {
	color: var(--wp--custom--text--primary);
}

/* ---- Page hero ----------------------------------------------------------- */
/* Two classes so the hero's own padding beats the generic section padding */
.tcnf-section.tcnf-page-hero {
	position: relative;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--100);
	overflow-x: clip;
}

.tcnf-page-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--80);
	align-items: center;
}

.tcnf-page-hero__copy {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	justify-items: start;
}

.tcnf-page-hero__copy .tcnf-crumbs {
	margin-bottom: var(--wp--preset--spacing--30);
}

.tcnf-page-hero__title {
	max-width: var(--wp--custom--size--measure-title);
}

.tcnf-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
}

@media (min-width: 1100px) {
	.tcnf-page-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--90);
	}
}

/* ---- Chapter head (outlined number + title) ------------------------------ */
.tcnf-chapter {
	display: grid;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	margin-bottom: var(--wp--preset--spacing--80);
}

.tcnf-chapter__num {
	font-size: var(--wp--custom--type--giant);
	font-weight: 600;
	line-height: var(--wp--custom--leading--flat);
	letter-spacing: var(--wp--custom--tracking--tight);
	color: transparent;
	-webkit-text-stroke: 1px var(--wp--custom--text--outline);
	user-select: none;
}

@supports not (-webkit-text-stroke: 1px) {
	.tcnf-chapter__num {
		color: var(--wp--custom--text--outline);
	}
}

.tcnf-chapter__copy {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-content: end;
}

.tcnf-chapter__copy h2 {
	max-width: var(--wp--custom--size--measure-title);
}

.tcnf-chapter__intro {
	max-width: var(--wp--custom--size--measure-copy);
	color: var(--wp--custom--text--secondary);
}

@media (min-width: 900px) {
	.tcnf-chapter {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: end;
	}

	.tcnf-chapter__intro {
		grid-column: 2;
	}
}

@media (min-width: 1100px) {
	.tcnf-chapter {
		grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.9fr);
	}

	.tcnf-chapter__intro {
		grid-column: 3;
	}
}

/* ---- Full-bleed helpers (photo runs to the viewport edge) ---------------- */
/* Distance from the container's content edge to the viewport edge */
.tcnf-bleed-right,
.tcnf-bleed-left {
	--bleed: calc((100vw - min(100vw, var(--wp--style--global--content-size) + var(--wp--custom--gutter) * 2)) / 2 + var(--wp--custom--gutter));
}

/* ---- CTA band (red texture) ---------------------------------------------- */
.tcnf-cta__band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--float);
}

.tcnf-cta__texture {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcnf-cta__band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--custom--overlay--fade-left);
}

.tcnf-cta__ring {
	right: calc(var(--wp--preset--spacing--80) * -1);
	top: calc(var(--wp--preset--spacing--80) * -1);
	z-index: -1;
	width: var(--wp--custom--size--orbit-core);
	height: auto;
	opacity: var(--wp--custom--opacity--muted);
}

.tcnf-cta__copy {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
	max-width: var(--wp--custom--size--measure-copy);
}

.tcnf-cta__copy .tcnf-eyebrow {
	color: var(--wp--custom--text--secondary);
}

.tcnf-cta__copy h2 {
	font-size: var(--wp--preset--font-size--xxx-large);
}

.tcnf-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 640px) {
	.tcnf-cta__band {
		padding: var(--wp--preset--spacing--70);
	}
}

@media (min-width: 900px) {
	.tcnf-cta__band {
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	}
}

/* Copy and buttons sit side by side only once there's room for both; the
	buttons stack so they never crowd the copy */
@media (min-width: 1100px) {
	.tcnf-cta__band {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: var(--wp--preset--spacing--70);
		padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
	}

	.tcnf-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	/* Stacked buttons share one width */
	.tcnf-cta__actions .wp-block-button__link {
		width: 100%;
	}
}

/* ---- Feature list with check icons --------------------------------------- */
.tcnf-spec {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.tcnf-spec li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
	align-items: start;
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--small);
}

.tcnf-spec .tcnf-glyph {
	--tcnf-glyph-size: var(--wp--custom--size--icon--sm);
	margin-top: var(--wp--preset--spacing--10);
}

/* Section intro that sits between two blocks on the same section */
.tcnf-split-head {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--80);
}

.tcnf-split-head__copy {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.tcnf-split-head__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 900px) {
	.tcnf-split-head {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--wp--custom--size--measure-aside));
		align-items: end;
		gap: var(--wp--preset--spacing--70);
	}

	.tcnf-split-head__aside {
		flex-wrap: nowrap;
	}
}

/* ---- Hero visual: service orbit ------------------------------------------ */
.tcnf-orbit {
	position: relative;
}

.tcnf-orbit__rings,
.tcnf-orbit__core {
	display: none;
}

.tcnf-orbit__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.tcnf-orbit__item {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--size--control-sm);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40) var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--glass--fill);
	box-shadow: var(--wp--custom--inset-sheen);
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
	backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: var(--wp--custom--leading--snug);
	text-decoration: none;
	transition:
		border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		scale var(--wp--custom--duration--base) var(--wp--custom--ease--spring);
}

.tcnf-orbit__item .tcnf-glyph {
	--tcnf-glyph-size: var(--wp--custom--size--icon--sm);
}

.tcnf-orbit__item:hover,
.tcnf-orbit__item:focus-visible {
	border-color: var(--wp--custom--glass--border-strong);
}

@keyframes tcnf-orbit-spin {
	to { rotate: 360deg; }
}

/* The circle layout needs CSS trigonometry; older browsers keep the chips */
@supports (top: calc(1px * sin(0deg))) {
	@media (min-width: 1100px) {
		.tcnf-orbit {
			width: 100%;
			max-width: var(--wp--custom--size--orbit);
			aspect-ratio: 1;
			margin-inline: auto;
		}

		.tcnf-orbit__rings {
			display: block;
			position: absolute;
			inset: 0;
			pointer-events: none;
		}

		/* Outer ring runs through the service centres, inner ring frames the core */
		.tcnf-orbit__rings::before,
		.tcnf-orbit__rings::after {
			content: "";
			position: absolute;
			border-radius: 50%;
		}

		.tcnf-orbit__rings::before {
			inset: 8%;
			border: 1px dashed var(--wp--custom--glass--border);
		}

		.tcnf-orbit__rings::after {
			inset: 26%;
			border: 1px solid var(--wp--custom--glass--border-subtle);
			background: radial-gradient(circle, var(--wp--custom--glass--fill) 0%, transparent 70%);
		}

		.tcnf-orbit__ring--spin {
			position: absolute;
			inset: 26%;
			animation: tcnf-orbit-spin var(--wp--custom--duration--drift) linear infinite;
		}

		.tcnf-orbit__ring--spin::before {
			content: "";
			position: absolute;
			left: 50%;
			top: 0;
			width: var(--wp--preset--spacing--20);
			height: var(--wp--preset--spacing--20);
			border-radius: 50%;
			background: var(--wp--custom--text--primary);
			box-shadow: 0 0 var(--wp--preset--spacing--40) var(--wp--custom--text--tertiary);
			translate: -50% -50%;
		}

		.tcnf-orbit__core {
			position: absolute;
			left: 50%;
			top: 50%;
			display: grid;
			place-content: center;
			gap: var(--wp--preset--spacing--10);
			width: var(--wp--custom--size--orbit-core);
			aspect-ratio: 1;
			border-radius: 50%;
			text-align: center;
			translate: -50% -50%;
		}

		.tcnf-orbit__core strong {
			font-size: var(--wp--preset--font-size--stat);
			font-weight: 600;
			line-height: var(--wp--custom--leading--flat);
			letter-spacing: var(--wp--custom--tracking--tight);
		}

		.tcnf-orbit__core span {
			max-width: 8em;
			color: var(--wp--custom--text--tertiary);
			font-size: var(--wp--preset--font-size--tiny);
			font-weight: 600;
			letter-spacing: var(--wp--custom--tracking--wide);
			line-height: var(--wp--custom--leading--snug);
			text-transform: uppercase;
		}

		.tcnf-orbit__list {
			position: absolute;
			inset: 0;
			display: block;
		}

		.tcnf-orbit__list li {
			--a: calc(var(--i, 0) * 360deg / var(--n, 10) - 90deg);
			position: absolute;
			left: calc(50% + cos(var(--a)) * 42%);
			top: calc(50% + sin(var(--a)) * 42%);
			translate: -50% -50%;
		}


		.tcnf-orbit__item {
			flex-direction: column;
			gap: var(--wp--preset--spacing--10);
			padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
			border-radius: var(--wp--custom--radius--lg);
			font-size: var(--wp--preset--font-size--x-small);
			white-space: nowrap;
		}

		.tcnf-orbit__item .tcnf-glyph {
			--tcnf-glyph-size: var(--wp--custom--size--icon--md);
		}

		.tcnf-orbit__item:hover,
		.tcnf-orbit__item:focus-visible {
			scale: 1.08;
		}
	}
}

/* ---- Hero visual: photo with badge --------------------------------------- */
.tcnf-hero-photo__visual {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: var(--wp--custom--size--visual-max);
	padding-bottom: var(--wp--preset--spacing--70);
}

.tcnf-hero-photo__frame {
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--xl);
}

.tcnf-hero-photo__badge {
	position: absolute;
	left: var(--wp--preset--spacing--40);
	bottom: 0;
	z-index: var(--wp--custom--z--raised);
	display: grid;
	gap: var(--wp--preset--spacing--20);
	justify-items: start;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--lg);
}

.tcnf-hero-photo__badge img {
	width: auto;
	height: var(--wp--custom--size--badge-logo-h);
}

/* The badge logo has a version for each theme */
.tcnf-hero-photo__badge .tcnf-hero-photo__mark--on-light,
:root[data-theme="light"] .tcnf-hero-photo__badge .tcnf-hero-photo__mark--on-dark {
	display: none;
}

:root[data-theme="light"] .tcnf-hero-photo__badge .tcnf-hero-photo__mark--on-light {
	display: block;
}

.tcnf-hero-photo__badge span {
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--x-small);
}

.tcnf-hero-photo__ring {
	top: calc(var(--wp--preset--spacing--70) * -1);
	right: calc(var(--wp--preset--spacing--60) * -1);
	width: var(--wp--custom--size--orbit-core);
	opacity: var(--wp--custom--opacity--muted);
}

@media (min-width: 1100px) {
	.tcnf-hero-photo__badge {
		left: calc(var(--wp--preset--spacing--70) * -1);
	}
}

/* ---- Hero visual: photo collage ------------------------------------------ */
.tcnf-collage {
	position: relative;
	width: 100%;
	max-width: var(--wp--custom--size--collage);
	aspect-ratio: 1;
	margin-inline: auto;
}

.tcnf-collage__frame {
	position: absolute;
	margin: 0;
}

.tcnf-collage__frame--1 {
	left: 0;
	top: 6%;
	width: 62%;
	aspect-ratio: 4 / 3;
	rotate: -4deg;
}

.tcnf-collage__frame--2 {
	right: 0;
	top: 0;
	z-index: var(--wp--custom--z--base);
	width: 44%;
	aspect-ratio: 3 / 4;
	rotate: 3deg;
}

.tcnf-collage__frame--3 {
	left: 12%;
	bottom: 4%;
	z-index: var(--wp--custom--z--raised);
	width: 60%;
	aspect-ratio: 16 / 10;
	rotate: 2deg;
}

.tcnf-collage__chip {
	position: absolute;
	right: 0;
	bottom: 16%;
	z-index: var(--wp--custom--z--overlap);
	display: grid;
	gap: var(--wp--custom--nudge);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg);
}

.tcnf-collage__chip strong {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: var(--wp--custom--leading--tight);
}

.tcnf-collage__chip span {
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ---- Hero: short version with an updated date ---------------------------- */
.tcnf-section.tcnf-page-hero--short {
	padding-bottom: var(--wp--preset--spacing--70);
}

.tcnf-page-hero__date {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--small);
}

.tcnf-page-hero__date .tcnf-glyph {
	--tcnf-glyph-size: var(--wp--custom--size--icon--sm);
}