/*
 * Guided page-model presentation.
 *
 * Matches the supplied Figma/PNG visual language: a pale sky hero band, a
 * bordered card grid with eyebrow chips and a teal "Read" affordance, and a
 * constrained measure for prose. Layout is fluid from 1440 through the
 * 1024 intermediate range to 390 and 320, and reflows without a second
 * scroll axis at 200% and 400% zoom.
 *
 * WCAG 2.2 AA: every interactive control keeps a visible focus indicator and
 * a 24px minimum target; motion is opt-out via prefers-reduced-motion.
 */

/* Shell and band tokens are canonical in layout.css so every template shares
   one system; only the values specific to guided pages are set here.

   These are bound to the page wrapper rather than to one template's main
   element. A template that renders outside `.tcc-guided-main` -- the Service
   pillar and the People index among them -- otherwise inherits none of them,
   so `gap: var(--tcc-card-gap)` and `border-radius: var(--tcc-radius)` resolve
   to invalid: every card grid collapses to a zero gap with square corners and
   every section loses its vertical rhythm. Every page model carries
   `.tcc-page`, so binding the tokens there fixes the whole family at once
   rather than one template at a time as each defect is noticed. */
.tcc-page,
.tcc-guided-main,
.tcc-delivery-pillar {
	--tcc-section-gap: var(--tcc-band-gap);
	--tcc-card-gap: clamp(1rem, 2vw, 1.5rem);
	--tcc-radius: 0.5rem;
}

/* Guided pages set reading colour on their shell. The Service pillar is
   deliberately excluded: its bands set their own reversed text colours. */
.tcc-guided-main {
	color: var(--wp--preset--color--ink);
}

/* ── Shell ────────────────────────────────────────────────────────────── */

.tcc-section__inner,
.tcc-hero__inner,
.tcc-breadcrumbs,
.tcc-filters__inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--tcc-shell);
	padding-inline: var(--tcc-gutter);
	width: 100%;
}

.tcc-section {
	padding-block: var(--tcc-section-gap);
}

/*
 * Two plain sections meeting on the same surface each contribute a full band
 * of padding, so the gap between them rendered at twice the design's rhythm.
 * This was being corrected page by page; it belongs here as the default.
 *
 * A section that paints its own background keeps its leading padding, because
 * that space sits inside the coloured band and its content would otherwise
 * hug the band edge. Only `--cta` and `--governance` do so.
 */
.tcc-section + .tcc-section {
	padding-block-start: 0;
}

.tcc-section + .tcc-section--cta,
.tcc-section + .tcc-section--governance {
	padding-block-start: var(--tcc-section-gap);
}

.tcc-section__title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.2;
	margin: 0 0 1rem;
}

.tcc-section__intro,
.tcc-prose {
	max-width: 68ch;
}

.tcc-prose > * + * {
	margin-block-start: 1rem;
}

.tcc-prose--policy {
	max-width: 74ch;
}

.tcc-section__inner--split {
	align-items: start;
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.tcc-section__image,
.tcc-hero__image {
	border-radius: var(--tcc-radius);
	display: block;
	height: auto;
	max-width: 100%;
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */

.tcc-breadcrumbs {
	padding-block: 1.5rem 0;
}

.tcc-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-breadcrumbs__item + .tcc-breadcrumbs__item::before {
	color: var(--wp--preset--color--muted);
	content: "/";
	margin-inline-end: 0.5rem;
}

.tcc-breadcrumbs__item {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.tcc-hero {
	background: var(--wp--preset--color--sky);
	padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}

.tcc-breadcrumbs + .tcc-hero {
	padding-block-start: 1rem;
}

.tcc-hero__inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 1fr);
}

.tcc-hero--media .tcc-hero__inner {
	align-items: center;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.tcc-hero__eyebrow {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

.tcc-hero__eyebrow-label {
	color: var(--wp--preset--color--navy);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tcc-hero__eyebrow-meta {
	color: var(--wp--preset--color--steel);
	font-size: 0.875rem;
}

.tcc-hero__eyebrow-meta::before {
	content: "· ";
}

.tcc-hero__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
	max-width: 20ch;
}

.tcc-hero__summary {
	border-inline-start: 3px solid var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--ink);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.65;
	margin-block-start: 1.75rem;
	max-width: 52ch;
	padding-inline-start: 1.25rem;
}

.tcc-hero__summary p {
	margin: 0;
}

.tcc-hero__summary p + p {
	margin-block-start: 0.75rem;
}

/* ── Filters ──────────────────────────────────────────────────────────── */

.tcc-filters {
	background: var(--wp--preset--color--sky);
	padding-block: 0 clamp(1.5rem, 4vw, 2.5rem);
}

.tcc-filters__inner {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
}

.tcc-filters__control {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tcc-filters__label {
	color: var(--wp--preset--color--navy);
	font-size: 0.875rem;
	font-weight: 600;
}

.tcc-filters__select {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--tcc-radius);
	color: var(--wp--preset--color--ink);
	font: inherit;
	min-height: 2.75rem;
	min-width: 12rem;
	padding: 0.5rem 0.75rem;
}

.tcc-filters__count {
	color: var(--wp--preset--color--steel);
	font-size: 0.875rem;
	margin: 0;
	margin-inline-start: auto;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.tcc-card-grid {
	display: grid;
	gap: var(--tcc-card-gap);
	grid-template-columns: repeat(var(--tcc-cards, 3), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-card-grid--2 {
	--tcc-cards: 2;
}

.tcc-card-grid--3 {
	--tcc-cards: 3;
}

.tcc-card-grid--4 {
	--tcc-cards: 4;
}

.tcc-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--tcc-radius);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	position: relative;
}

.tcc-card:focus-within,
.tcc-card:hover {
	border-color: var(--wp--preset--color--cyan);
}

.tcc-card__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin: 0 0 1rem;
}

.tcc-eyebrow-chip {
	background: var(--wp--preset--color--sky);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--navy);
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0.25rem 0.5rem;
	text-transform: uppercase;
}

.tcc-card__date {
	color: var(--wp--preset--color--steel);
	font-size: 0.8125rem;
}

.tcc-card__title {
	font-size: 1.0625rem;
	line-height: 1.35;
	margin: 0;
}

.tcc-card__link {
	color: inherit;
	text-decoration: none;
}

/* The whole card is the click target; the link keeps the accessible name. */
.tcc-card__link::after {
	content: "";
	inset: 0;
	position: absolute;
}

.tcc-card__link:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--teal);
	text-underline-offset: 0.2em;
}

.tcc-card__summary,
.tcc-card__body {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 1rem 0 0;
	/* A card column is narrow, so an unbreakable run in authored copy must
	   wrap rather than overflow the card border. */
	overflow-wrap: anywhere;
}

/* The group business cards carry a short discipline line beneath the brand
   name, matching the approved design. It is genuine content rather than
   decoration, so it stays in the accessibility tree. */
.tcc-card__eyebrow {
	color: var(--wp--preset--color--teal);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin: 0.5rem 0 0;
	text-transform: uppercase;
}

.tcc-card__body-name,
.tcc-card__recipient {
	color: var(--wp--preset--color--steel);
	font-size: 0.875rem;
	margin: 0.5rem 0 0;
}

.tcc-card__footer {
	align-items: center;
	border-block-start: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--steel);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	gap: 0.75rem;
	justify-content: space-between;
	margin: 1.25rem 0 0;
	padding-block-start: 1rem;
}

.tcc-card__cta {
	color: var(--wp--preset--color--teal);
	font-weight: 600;
}

.tcc-card__icon,
.tcc-card__logo {
	display: block;
	height: auto;
	margin: 0 0 1rem;
	max-height: 4rem;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.tcc-card-grid__empty {
	color: var(--wp--preset--color--muted);
	margin-block-start: 1.5rem;
}

/*
 * The filter controller hides non-matching cards with the `hidden` attribute.
 * `.tcc-card` and `.tcc-role` set `display: flex`, which overrides the user
 * agent's `[hidden] { display: none }`, so the attribute must be honoured
 * explicitly here. Attribute selectors raise specificity without `!important`.
 */
.tcc-card[hidden],
.tcc-role[hidden],
.tcc-card-grid__empty[hidden],
.tcc-people-grid > [hidden] {
	display: none;
}

.tcc-metric-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.tcc-metric-chip {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	padding: 0.25rem 0.5rem;
}

/* ── Stats, steps, facts and lists ────────────────────────────────────── */

.tcc-stat-grid {
	display: grid;
	gap: var(--tcc-card-gap);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-stat__value {
	color: var(--wp--preset--color--teal);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.tcc-stat__label {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	margin: 0.5rem 0 0;
}

.tcc-steps {
	counter-reset: tcc-step;
	display: grid;
	gap: var(--tcc-card-gap);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-steps__item {
	border-block-start: 3px solid var(--wp--preset--color--cyan);
	counter-increment: tcc-step;
	padding-block-start: 1rem;
}

.tcc-steps__item::before {
	color: var(--wp--preset--color--steel);
	content: counter(tcc-step, decimal-leading-zero);
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-block-end: 0.5rem;
}

.tcc-steps__title {
	font-size: 1.0625rem;
	margin: 0;
}

.tcc-steps__body {
	color: var(--wp--preset--color--muted);
	margin: 0.5rem 0 0;
}

.tcc-facts {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--tcc-radius);
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	margin: 0;
	overflow: hidden;
}

.tcc-facts__row {
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding: 1rem 1.25rem;
}

.tcc-facts__label {
	color: var(--wp--preset--color--steel);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tcc-facts__value {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	margin: 0.35rem 0 0;
}

.tcc-link-list,
.tcc-jump-tiles,
.tcc-logo-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-jump-tile a {
	background: var(--wp--preset--color--sky);
	border-radius: var(--tcc-radius);
	/*
	 * The minimum target size has to include the padding. Left as content-box
	 * the 2.75rem floor stacked on top of the 0.75rem padding and rendered a
	 * 68px tile, far taller than any other control on the page.
	 */
	box-sizing: border-box;
	color: var(--wp--preset--color--navy);
	display: inline-block;
	font-weight: 600;
	min-height: 2.75rem;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
}

.tcc-jump-tile a:hover {
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--ink);
}

.tcc-logo-row__image {
	height: auto;
	max-height: 3.5rem;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/* ── Roles ────────────────────────────────────────────────────────────── */

.tcc-role-list {
	display: grid;
	gap: var(--tcc-card-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-role {
	align-items: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--tcc-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	padding: clamp(1.25rem, 2vw, 1.75rem);
}

.tcc-role__title {
	font-size: 1.125rem;
	margin: 0;
}

.tcc-role__facts,
.tcc-role__reference {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin: 0.5rem 0 0;
}

.tcc-role__summary {
	color: var(--wp--preset--color--ink);
	margin: 0.75rem 0 0;
	max-width: 44rem;
}

/* Published when no vacancy is live, and reused when filters exclude them all. */
.tcc-role-list__zero {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--tcc-radius);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.tcc-role-list__zero > :first-child {
	margin-block-start: 0;
}

.tcc-role-list__zero > :last-child {
	margin-block-end: 0;
}

.tcc-role-list__zero p {
	max-width: 44rem;
}

.tcc-role__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.tcc-btn {
	border-radius: 0.375rem;
	/*
	 * The minimum target size has to include the padding. Left as content-box
	 * the 2.75rem floor stacked on top of the 0.75rem padding and rendered a
	 * 68px button on every page that uses one.
	 */
	box-sizing: border-box;
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	min-height: 2.75rem;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
}

.tcc-btn--primary {
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--ink);
}

.tcc-btn--primary:hover,
.tcc-btn--primary:focus-visible {
	background: var(--wp--preset--color--teal-dk);
	color: var(--wp--preset--color--paper);
}

.tcc-btn--ghost {
	background: transparent;
	border: 1px solid var(--wp--preset--color--teal);
	color: var(--wp--preset--color--teal);
}

.tcc-btn--ghost:hover,
.tcc-btn--ghost:focus-visible {
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--paper);
}

/* ── CTA, FAQ, governance ─────────────────────────────────────────────── */

.tcc-section--cta {
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--paper);
}

.tcc-cta__heading {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin: 0;
	max-width: 24ch;
}

.tcc-cta__body {
	margin-block-start: 1rem;
	max-width: 60ch;
}

.tcc-cta__body a {
	color: var(--wp--preset--color--sky);
}

.tcc-cta__action {
	margin-block-start: 1.75rem;
}

/* The design sets the copy against the action rather than stacking them, so
   the band reads as one line of intent at desk widths. */
@media (min-width: 48rem) {
	.tcc-section--cta .tcc-cta {
		align-items: center;
		display: grid;
		gap: 2rem 3rem;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.tcc-cta__heading {
		grid-column: 1;
		grid-row: 1;
	}

	.tcc-cta__body {
		grid-column: 1;
		grid-row: 2;
		margin-block-start: 0;
	}

	.tcc-cta__action {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-block-start: 0;
	}
}

/* Heading and supporting copy sit beside the questions, as the design does. */
@media (min-width: 60rem) {
	.tcc-faq-layout {
		display: grid;
		gap: 3rem 4rem;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

	.tcc-faq-layout__intro {
		align-self: start;
	}
}

.tcc-faq-layout__intro > :first-child {
	margin-block-start: 0;
}

.tcc-faq {
	display: grid;
	gap: 0;
	max-width: none;
}

/* Rules between questions rather than boxed cards. */
.tcc-faq__item {
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--sky);
	border-radius: 0;
	padding: 1.25rem 0;
}

.tcc-faq__item:first-child {
	border-block-start: 1px solid var(--wp--preset--color--sky);
}

.tcc-faq__question {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-weight: 600;
	gap: 1.5rem;
	justify-content: space-between;
	list-style: none;
	min-height: 1.5rem;
}

.tcc-faq__question::-webkit-details-marker {
	display: none;
}

/* A plus that becomes a minus, matching the design's toggle affordance. */
.tcc-faq__question::after {
	color: var(--wp--preset--color--teal);
	content: "+";
	flex: 0 0 auto;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
}

.tcc-faq__item[open] .tcc-faq__question::after {
	content: "\2212";
}

.tcc-faq__answer {
	color: var(--wp--preset--color--muted);
	margin-block-start: 0.75rem;
	max-width: 68ch;
}

/* The trail now sits on the hero surface, so it needs no page-level spacing. */
.tcc-hero .tcc-breadcrumbs {
	margin-block-end: 1.5rem;
	padding: 0;
}

.tcc-section--governance {
	background: var(--wp--preset--color--sky);
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding-block: var(--tcc-band-gap-quiet);
}

/* ── Editorial governance strip ────────────────────────────────────────────
   Every page carrying an editorial strapline closes on the same full-width
   band as the homepage editorial footer, with its content on the shared shell
   measure so the byline and the reviewed line align. */
.tcc-section--governance .tcc-reviewed {
	margin-block-end: 0;
}

/* The pillar body sets a base size on every paragraph, which would enlarge the
   reviewed line back out of step with the homepage. */
.tcc-solution-pillar .tcc-solution-pillar-body .tcc-reviewed,
.tcc-section--governance .tcc-reviewed {
	font-size: var(--wp--preset--font-size--xs);
}

.tcc-byline__linkedin {
	align-items: center;
	color: var(--wp--preset--color--teal);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	gap: 0.5rem;
	margin-inline-start: auto;
	text-decoration: none;
}

.tcc-byline__linkedin:hover,
.tcc-byline__linkedin:focus-visible {
	color: var(--wp--preset--color--teal-dk);
	text-decoration: underline;
}

.tcc-byline__linkedin svg {
	block-size: 1.25rem;
	inline-size: 1.25rem;
}

.tcc-reviewed {
	color: var(--wp--preset--color--steel);
	/* The smallest step in the type scale. Going below it would mean a one-off
	   size outside the presets and would fall under the ~12px floor where small
	   supporting text starts to fail low-vision readers. */
	font-size: var(--wp--preset--font-size--xs);
	margin: 0 0 1rem;
}

/* Preserve the shared review type for legacy content that still invokes the
   historical Solution shortcode directly. */
.tcc-solution-pillar .tcc-solution-pillar-body .tcc-sp-reviewed {
	color: var(--wp--preset--color--steel);
	font-size: var(--wp--preset--font-size--xs);
}

.tcc-reviewed__label {
	font-weight: 600;
}

.tcc-byline__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}

.tcc-byline__body {
	min-width: 0;
}

.tcc-byline__eyebrow {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 0.125rem;
	text-transform: uppercase;
}

.tcc-byline__avatar {
	align-items: center;
	background: var(--wp--preset--color--navy);
	border-radius: 50%;
	color: var(--wp--preset--color--cyan);
	display: flex;
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 700;
	height: 40px;
	justify-content: center;
	letter-spacing: 0.02em;
	width: 40px;
}

.tcc-byline__name {
	font-weight: 700;
	margin: 0;
}

.tcc-byline__name a {
	color: var(--wp--preset--color--teal);
}

.tcc-byline__statement {
	color: var(--wp--preset--color--muted);
	margin-block-start: 0.5rem;
	max-width: 60ch;
}

.tcc-contact,
.tcc-contact-grid {
	display: grid;
	font-style: normal;
	gap: 0.5rem;
}

.tcc-contact-grid {
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.tcc-hours dl {
	margin: 0;
}

.tcc-hours__row {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	max-width: 22rem;
}

.tcc-cookie-panel {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--tcc-radius);
	margin-block-start: 1.5rem;
	padding: clamp(1.25rem, 2vw, 1.75rem);
}

.tcc-cookie-panel__note {
	color: var(--wp--preset--color--muted);
	margin: 0 0 1rem;
}

.tcc-doc-link {
	margin-block-start: 1.5rem;
}

.tcc-form-privacy {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin-block-start: 1.5rem;
	max-width: 60ch;
}

/* ── Focus visibility (WCAG 2.2 AA, 2.4.11/2.4.13) ────────────────────── */

.tcc-guided-main a:focus-visible,
.tcc-guided-main button:focus-visible,
.tcc-guided-main select:focus-visible,
.tcc-guided-main summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

.tcc-section--cta a:focus-visible {
	outline-color: var(--wp--preset--color--sky);
}

/* ── Responsive: 1024 intermediate ────────────────────────────────────── */

@media (max-width: 64rem) {
	.tcc-card-grid--4 {
		--tcc-cards: 2;
	}

	.tcc-hero--media .tcc-hero__inner,
	.tcc-section__inner--split {
		grid-template-columns: minmax(0, 1fr);
	}

	.tcc-hero__title {
		max-width: none;
	}
}

/* ── Responsive: 768 and below ────────────────────────────────────────── */

@media (max-width: 48rem) {
	.tcc-card-grid {
		--tcc-cards: 1;
	}

	.tcc-filters__inner {
		align-items: stretch;
		flex-direction: column;
	}

	.tcc-filters__control {
		align-items: stretch;
		flex-direction: column;
		gap: 0.35rem;
	}

	.tcc-filters__select {
		min-width: 0;
		width: 100%;
	}

	.tcc-filters__count {
		margin-inline-start: 0;
	}

	.tcc-role {
		align-items: stretch;
		flex-direction: column;
	}
}

/*
 * Reflow guarantee: at 320px and at 400% zoom the grid is single column and
 * every fixed minimum collapses, so content never requires a second scroll
 * axis (WCAG 1.4.10).
 */
@media (max-width: 25rem) {
	.tcc-guided-main {
		--tcc-gutter: 1rem;
	}

	.tcc-stat-grid,
	.tcc-steps,
	.tcc-facts,
	.tcc-contact-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tcc-hero__title {
		font-size: 1.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tcc-card,
	.tcc-btn,
	.tcc-jump-tile a,
	.tcc-card__link {
		transition: none !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.tcc-card,
	.tcc-btn,
	.tcc-jump-tile a {
		transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
	}
}

/* ----- Group proof statistics band -----
   Mirrors the Case Study outcome-metrics strip, restated here because
   case-studies.css is not enqueued on guided page models. */

.tcc-proof-band {
	background-color: var(--wp--preset--color--navy);
	padding: 0 32px;
}

.tcc-proof-band__list {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-inline: auto;
	max-width: 1200px;
}

.tcc-proof-stat {
	padding: 32px 24px;
}

.tcc-proof-stat__value {
	color: var(--wp--preset--color--cyan-lt);
	display: block;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.tcc-proof-stat__label {
	color: #fff;
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 8px;
}

@media (max-width: 600px) {

	.tcc-proof-band {
		padding: 0 20px;
	}

	.tcc-proof-stat {
		padding: 24px 0;
	}
}

/* ----- Section eyebrow ----- */

.tcc-section__eyebrow {
	color: var(--wp--preset--color--teal);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

/* ----- Hero and CTA action rows ----- */

.tcc-hero__actions,
.tcc-cta__action {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

/* ==========================================================================
   TCC Group overview page
   The approved design alternates dark and light full-bleed bands rather than
   using the default light-on-white guided page rhythm, so the treatment is
   scoped to .tcc-page--group and never leaks to another guided model.
   ========================================================================== */

/* ----- Hero: full-bleed navy with a centred column ----- */

.tcc-page--group .tcc-hero {
	background-color: #021f47;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	padding-block: clamp(64px, 8vw, 120px);
	position: relative;
	text-align: center;
}

/* The photograph carries the approved two-layer treatment: a flat navy veil
   that guarantees heading contrast, then a diagonal blue-to-teal wash that
   supplies the brand tint. Both values are taken from the approved design, so
   the stored asset stays an unmodified original and remains reusable. */
.tcc-page--group .tcc-hero::before {
	background-color: rgba(4, 22, 65, 0.72);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.tcc-page--group .tcc-hero::after {
	background-image: linear-gradient(135deg, rgba(0, 60, 120, 0.35) 0%, rgba(0, 179, 190, 0.08) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

/* Deliberately unpositioned: the hero backdrop is a child of this wrapper, so
   any stacking context here would trap the image above the veil. Content is
   lifted above the veil child-by-child instead. */
.tcc-page--group .tcc-hero__inner {
	position: static;
}

.tcc-page--group .tcc-hero__inner > *:not(.tcc-hero__media) {
	position: relative;
	z-index: 2;
}

.tcc-page--group .tcc-hero__text {
	margin-inline: auto;
	max-width: 58rem;
}

/* The approved design breaks the heading over two lines and keeps the
   standfirst narrower than the heading. */
.tcc-page--group .tcc-hero__title {
	color: #fff;
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	margin-inline: auto;
	max-width: 46rem;
}

.tcc-page--group .tcc-hero__eyebrow,
.tcc-page--group .tcc-hero__eyebrow-label {
	color: var(--wp--preset--color--cyan-lt);
}

/* The eyebrow is a flex row, so it needs explicit centring: text-align alone
   cannot centre a flex item. */
.tcc-page--group .tcc-hero__eyebrow {
	justify-content: center;
}

/* Hero and closing-CTA buttons follow the approved design metrics exactly.
   The default theme button carries a min-height that makes it 70px tall, so it
   is reset here. */
.tcc-page--group .tcc-hero__actions .tcc-btn,
.tcc-page--group .tcc-section--cta .tcc-btn {
	border-radius: 4px;
	font-size: 0.875rem;
	line-height: 1.5;
	min-height: 0;
	padding: 14px 32px;
}

.tcc-page--group .tcc-hero__actions .tcc-btn--ghost,
.tcc-page--group .tcc-section--cta .tcc-btn--ghost,
.tcc-page--group .tcc-hero__actions .tcc-btn--ghost:hover,
.tcc-page--group .tcc-section--cta .tcc-btn--ghost:hover {
	font-weight: 600;
}

/* The shared hero renders its summary as a bordered callout. On the group
   hero the approved design is a plain centred paragraph. */
.tcc-page--group .tcc-hero__summary {
	background: none;
	border: 0;
	color: #e6f7fa;
	font-size: 1.125rem;
	margin-inline: auto;
	max-width: 44rem;
	padding: 0;
}

.tcc-page--group .tcc-hero__actions {
	justify-content: center;
}

/* Text is navy, not white: white-on-#00B3BE measures ~2.56:1, below the 3:1
   AA floor even for this large bold label. Navy on the same teal measures
   ~5.9:1, so the approved background colour is kept unchanged. */
.tcc-page--group .tcc-hero__actions .tcc-btn--primary {
	background: var(--wp--preset--color--cyan);
	border-color: var(--wp--preset--color--cyan);
	color: #0e2841;
	font-weight: 700;
}

.tcc-page--group .tcc-hero__actions .tcc-btn--ghost {
	background: #fff;
	border-color: #fff;
	color: #021f47;
}

/* ----- Proof band: bright teal, four equal centred columns ----- */

.tcc-page--group .tcc-proof-band {
	background-color: var(--wp--preset--color--cyan);
}

.tcc-page--group .tcc-proof-band__list {
	grid-template-columns: repeat(4, 1fr);
}

.tcc-page--group .tcc-proof-stat {
	text-align: center;
}

.tcc-page--group .tcc-proof-stat__value {
	color: #0e2841;
}

.tcc-page--group .tcc-proof-stat__label {
	color: #0e2841;
	font-weight: 500;
}

@media (max-width: 900px) {

	.tcc-page--group .tcc-proof-band__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {

	.tcc-page--group .tcc-proof-band__list {
		grid-template-columns: 1fr;
	}
}

/* ----- Alternating band backgrounds ----- */

/* The band tint is specific to the Group Overview page. The card rules below
   are deliberately unscoped: the brands section also renders on Talk to Us, and
   binding them to one page wrapper left the stat value and label as bare inline
   spans there, so they ran together as "25+years". */
.tcc-page--group .tcc-section--brands {
	background-color: #f4fdff;
}

.tcc-page--group .tcc-section--sectors {
	background-color: #edfbff;
}

.tcc-page--group .tcc-section--insights {
	background-color: var(--wp--preset--color--sky);
}

/* Section head row: heading with a trailing "All insights" link, matching the
   approved design. Generic (not group-only) so any caller that supplies a
   link gets the same treatment. */
.tcc-section__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	margin: 0 0 1.5rem;
}

.tcc-section__head .tcc-section__title {
	margin: 0;
}

.tcc-section__head-link {
	color: var(--wp--preset--color--cyan);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.tcc-section__head-link:hover {
	text-decoration: underline;
}

/* The approved design shows a plain date above a bold navy title with no
   category pill on the shared "Latest insights" strip -- confirmed by Figma
   on every guided page that embeds it (TCC Group, Case Studies, Insights,
   Careers), so this is generic rather than scoped to one page. */
.tcc-section--insights .tcc-eyebrow-chip {
	display: none;
}

.tcc-section--insights .tcc-card__meta {
	justify-content: flex-start;
	margin-block-end: 0.5rem;
}

.tcc-section--insights .tcc-card__date {
	color: var(--wp--preset--color--steel);
}

.tcc-section--insights .tcc-card__title {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

/* ----- Delivery capabilities: dark navy band ----- */

.tcc-page--group .tcc-section--capabilities {
	background-color: var(--wp--preset--color--navy);
}

.tcc-page--group .tcc-section--capabilities .tcc-section__title {
	color: #fff;
}

.tcc-page--group .tcc-section--capabilities .tcc-section__eyebrow {
	color: var(--wp--preset--color--cyan-lt);
}

.tcc-page--group .tcc-section--capabilities .tcc-section__intro {
	color: #cfe2ec;
}

.tcc-page--group .tcc-section--capabilities .tcc-card {
	background: transparent;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0;
}

.tcc-page--group .tcc-section--capabilities .tcc-card__title {
	color: #fff;
}

.tcc-page--group .tcc-section--capabilities .tcc-card__title a,
.tcc-page--group .tcc-section--capabilities .tcc-card__link {
	color: #fff;
}

.tcc-page--group .tcc-section--capabilities .tcc-card__summary {
	color: #cfe2ec;
}

.tcc-page--group .tcc-section--capabilities .tcc-card__cta {
	color: var(--wp--preset--color--cyan-lt);
}

/* ----- Group business cards: teal accent beside the brand name ----- */

.tcc-section--brands .tcc-card__title {
	border-left: 4px solid var(--wp--preset--color--cyan);
	font-size: 1.375rem;
	padding-left: 0.75rem;
}

.tcc-section--brands .tcc-card__eyebrow {
	padding-left: 1rem;
}

.tcc-section--brands .tcc-card__stats {
	border-top: 1px solid var(--wp--preset--color--line);
	display: flex;
	gap: 1.5rem;
	margin-block-start: 1.25rem;
	padding-block-start: 1rem;
}

.tcc-section--brands .tcc-card__stat {
	display: flex;
	flex-direction: column;
}

.tcc-section--brands .tcc-card__stat-value {
	color: var(--wp--preset--color--navy);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
}

.tcc-section--brands .tcc-card__stat-label {
	color: var(--wp--preset--color--steel);
	font-size: 0.75rem;
}

/* ----- Sector cards: compact row with a trailing arrow ----- */

.tcc-page--group .tcc-section--sectors .tcc-card {
	align-items: center;
	background: #fff;
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
}

.tcc-page--group .tcc-section--sectors .tcc-card__cta {
	font-size: 0;
	margin: 0;
}

.tcc-page--group .tcc-section--sectors .tcc-card__cta::after {
	content: "\2192";
	font-size: 1.125rem;
}

/* ----- Closing call to action: navy, not the default teal ----- */

.tcc-page--group .tcc-section--cta {
	background-color: var(--wp--preset--color--navy);
	padding-block: clamp(56px, 7vw, 96px);
}

.tcc-page--group .tcc-section--cta .tcc-btn--primary {
	background: var(--wp--preset--color--cyan);
	border-color: var(--wp--preset--color--cyan);
	color: #0e2841;
	font-weight: 700;
}

.tcc-page--group .tcc-section--cta .tcc-btn--ghost {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

/* ----- Group hero photograph -----
   The hero image is bound through the ordinary Core media field, so it keeps
   its signed URL and rendition srcset. Rather than sitting beside the text as
   the default guided hero does, it is promoted to a full-bleed backdrop behind
   the navy veil. */

/* The media element is emitted inside the hero inner wrapper, so the wrapper
   must stay unpositioned: that lets the backdrop resolve against the hero
   itself and cover the full band rather than just the text column. The inner
   children are then lifted above the veil individually. */
.tcc-page--group .tcc-hero--media .tcc-hero__inner {
	display: block;
}

.tcc-page--group .tcc-hero__media {
	inset: 0;
	margin: 0;
	position: absolute;
	z-index: 0;
}

.tcc-page--group .tcc-hero__media img {
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	width: 100%;
}

/* ── Service pillar: credibility strip ─────────────────────────────────────
   Authored proof points shown directly beneath the hero. The Service design
   anchors these on the deep brand surface as a full-bleed figure row, not as a
   floating card: white on `deep` measures ~13:1, comfortably past WCAG AA. */
.tcc-dp-credibility {
	background: var(--wp--preset--color--deep);
	padding-block: 2rem;
	padding-inline: var(--tcc-gutter);
}

.tcc-dp-credibility__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
}

/* The band eyebrow inherits the light-surface `teal`, which measures only
   1.63:1 on `deep`. The light accent token reaches ~10.7:1. */
.tcc-dp-credibility .tcc-sp-section-eyebrow {
	color: var(--wp--preset--color--cyan-lt);
}

.tcc-dp-credibility__list {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-dp-credibility__item {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.tcc-dp-credibility__value {
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
}

.tcc-dp-credibility__label {
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.5;
}

/* The "all case studies" link sits under its grid rather than beside the
   heading, so it needs its own spacing. */
.tcc-section__head-link-wrap {
	margin-block-start: 1.5rem;
}

@media (max-width: 900px) {
	.tcc-dp-credibility__list {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── Service pillar: structured content bands ──────────────────────────────
   These rules are scoped to `.tcc-delivery-pillar` so the Solution and Sector
   pillars, which share the `.tcc-sp-*` system, keep their own treatments. */

.tcc-dp-band {
	padding-block: 4rem;
	padding-inline: var(--tcc-gutter);
}

.tcc-dp-band + .tcc-dp-band {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.tcc-dp-band--paper {
	background: var(--wp--preset--color--paper);
}

/* A half-strength sky tint separates the engagement steps from the white band
   above it without competing with the full-strength proof strip below. */
.tcc-dp-band--sky {
	background: color-mix(in srgb, var(--wp--preset--color--sky) 50%, var(--wp--preset--color--paper));
}

.tcc-dp-band--navy {
	background: var(--wp--preset--color--navy);
}

.tcc-dp-band .tcc-section__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
}

.tcc-dp-band__head {
	margin-block-end: 2.5rem;
}

/* The design pairs a tight two-line heading with a supporting paragraph beside
   it, so the intro becomes a second column only when it is actually authored. */
@media (min-width: 61.25rem) {
	.tcc-dp-band__head--split {
		align-items: start;
		column-gap: 4rem;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.tcc-dp-band .tcc-section__title {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0;
}

.tcc-dp-band__intro {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
}

.tcc-dp-band__intro p {
	margin: 0;
}

.tcc-dp-band--navy .tcc-section__title {
	color: var(--wp--preset--color--paper);
}

/* On the dark band the section eyebrow switches from `teal` to `cyan`, which
   reaches ~5.8:1 on navy where `teal` would fall below AA. */
.tcc-dp-band--navy .tcc-sp-section-eyebrow {
	color: var(--wp--preset--color--cyan);
}

.tcc-dp-band--navy .tcc-dp-band__intro {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 85%, transparent);
}

/* "What we help with": bordered capability cards on the white band. */
.tcc-card--help {
	background: transparent;
	border-color: color-mix(in srgb, var(--wp--preset--color--cyan) 25%, var(--wp--preset--color--paper));
	gap: 0.5rem;
	padding: 1.5rem;
}

/* The Solution icon repeats the homepage card media at a restrained size, so
   the card stays led by its title rather than its artwork. */
.tcc-card--help .tcc-card__icon-frame {
	display: block;
	margin-block-end: 0.75rem;
}

.tcc-card--help .tcc-card__icon {
	display: block;
	height: auto;
	margin: 0;
	max-height: 2.5rem;
	max-width: 2.5rem;
	object-fit: contain;
	width: auto;
}

.tcc-card--help .tcc-card__summary {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

.tcc-card--help .tcc-card__cta {
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-block-start: auto;
	padding-block-start: 1rem;
}

/* Engagement steps: an open column set divided by rules, not cards. */
.tcc-card-grid--steps {
	gap: 0;
}

.tcc-card--step {
	background: transparent;
	border: 0;
	padding: 2.5rem;
}

.tcc-card--step + .tcc-card--step {
	border-inline-start: 1px solid var(--wp--preset--color--line);
}

.tcc-card--step:hover,
.tcc-card--step:focus-within {
	border-color: var(--wp--preset--color--line);
}

.tcc-card__step-number {
	color: var(--wp--preset--color--navy);
	display: block;
	font-size: clamp(3rem, 5vw, 4rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	margin-block-end: 1.5rem;
}

/* The design sets this stage label in cyan, which reaches only 2.4:1 on the
   sky band. Reversing it into a navy chip keeps the brand pairing and measures
   about 5.8:1, following the existing eyebrow-chip precedent. */
.tcc-card__step-eyebrow {
	align-self: flex-start;
	background: var(--wp--preset--color--navy);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--cyan);
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.5;
	margin-block-end: 0.75rem;
	padding: 0.25rem 0.5rem;
	text-transform: uppercase;
}

.tcc-card--step .tcc-card__title {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
}

.tcc-card--step .tcc-card__summary {
	color: var(--wp--preset--color--muted);
	line-height: 1.75;
	margin-block-start: 0.75rem;
}

/* "Why firms choose TCC": reversed cards on the navy band. */
.tcc-card--why {
	background: transparent;
	border: 0;
	padding: 0;
}

.tcc-card--why:hover,
.tcc-card--why:focus-within {
	border-color: transparent;
}

.tcc-card--why .tcc-card__title {
	color: var(--wp--preset--color--cyan-lt);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
}

.tcc-card--why .tcc-card__summary {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 90%, transparent);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.65;
	margin-block-start: 0.5rem;
}

@media (max-width: 900px) {
	.tcc-card--step {
		padding: 1.5rem 0;
	}

	.tcc-card--step + .tcc-card--step {
		border-block-start: 1px solid var(--wp--preset--color--line);
		border-inline-start: 0;
	}
}

/* ── Service pillar: lower-page band system ────────────────────────────────
   The Service frame alternates paper and sky bands beneath the structured
   sections, separates each with a hairline rule, and closes on a navy call to
   action. Scoped to `.tcc-delivery-pillar` so the Solution and Sector pillars,
   which share these section classes, keep their own treatments. */

.tcc-delivery-pillar .tcc-section--proof,
.tcc-delivery-pillar .tcc-section--insights {
	background: var(--wp--preset--color--sky);
}

/* The related-services strip carries a lighter wash so two full-strength sky
   bands never sit next to each other. */
.tcc-delivery-pillar .tcc-sp-links {
	background: color-mix(in srgb, var(--wp--preset--color--sky) 30%, var(--wp--preset--color--paper));
}

.tcc-delivery-pillar .tcc-section--industries,
.tcc-delivery-pillar .tcc-sp-faqs {
	background: var(--wp--preset--color--paper);
}

.tcc-delivery-pillar .tcc-section--proof,
.tcc-delivery-pillar .tcc-section--industries,
.tcc-delivery-pillar .tcc-sp-links,
.tcc-delivery-pillar .tcc-sp-faqs,
.tcc-delivery-pillar .tcc-section--insights {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/* Section headings: the structured bands carry the larger step, the supporting
   bands the smaller one, both in the design's navy rather than body ink. */
.tcc-delivery-pillar .tcc-dp-band .tcc-section__title {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--xxxl);
}

.tcc-delivery-pillar :is(.tcc-section--proof, .tcc-section--industries, .tcc-sp-links, .tcc-sp-faqs, .tcc-section--insights) :is(.tcc-section__title, .tcc-sp-faqs__title, .tcc-sp-links__title) {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.5;
}

/* The band-level heading colour above is deliberately broad, so the reversed
   navy band and the prose band restate their own colours at a higher weight.
   Without these the "Why firms choose TCC" heading renders navy on navy and the
   prose heading renders paper on paper. */
.tcc-delivery-pillar.tcc-solution-pillar-body .tcc-dp-band--navy .tcc-section__title {
	color: var(--wp--preset--color--paper);
}

.tcc-delivery-pillar.tcc-solution-pillar-body .tcc-sp-service-body .tcc-sp-service-body__heading {
	color: var(--wp--preset--color--navy);
}

/* Same cause as the headings above: the broad Service card colour would render
   the reversed differentiator titles navy on navy. */
.tcc-delivery-pillar.tcc-solution-pillar-body .tcc-card--why .tcc-card__title {
	color: var(--wp--preset--color--cyan-lt);
}

/* The prose band previously reversed out on navy, so its headings, copy and
   links still carried light colours. Now that it sits on paper they must all
   restate dark values; cyan links measure 2.7:1 on paper, so links take teal. */
.tcc-delivery-pillar.tcc-solution-pillar-body .tcc-sp-service-body :is(h2, h3, h4, h5) {
	color: var(--wp--preset--color--navy);
}

.tcc-delivery-pillar.tcc-solution-pillar-body .tcc-sp-service-body :is(p, li, span, strong, em) {
	color: var(--wp--preset--color--ink);
}

.tcc-delivery-pillar.tcc-solution-pillar-body .tcc-sp-service-body a {
	color: var(--wp--preset--color--teal);
}

/* Section head links inherit cyan, which measures 2.4:1 on the sky bands these
   sections now use. Teal reaches about 6.6:1. Card titles keep their own
   colour, so they are excluded. */
.tcc-delivery-pillar.tcc-solution-pillar-body :is(.tcc-section--proof, .tcc-section--insights) a:not(.tcc-card__link) {
	color: var(--wp--preset--color--teal);
}

/* Card typography across the Service bands follows the design's compact step. */
.tcc-delivery-pillar .tcc-card__title {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--base);
}

.tcc-delivery-pillar .tcc-card__summary {
	font-size: var(--wp--preset--font-size--xs);
}

.tcc-delivery-pillar .tcc-card__cta {
	font-size: var(--wp--preset--font-size--xs);
}

/* Closing call to action: the design reverses this band out on navy. */
.tcc-delivery-pillar .tcc-sp-cta {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}

.tcc-delivery-pillar .tcc-sp-cta :is(h2, p) {
	color: var(--wp--preset--color--paper);
}

.tcc-delivery-pillar .tcc-sp-cta h2 {
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.35;
}

/* The design fills the lead action with cyan. White on cyan is about 2.7:1, so
   the label takes brand ink at about 5.3:1, matching the button contract in the
   brand system. Both actions carry one identical style, exactly as the hero
   routes do. */
.tcc-delivery-pillar .tcc-sp-cta__inner,
.tcc-solution-pillar .tcc-sp-cta__inner {
	align-items: center;
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 1fr);
	margin-inline: auto;
	max-width: var(--tcc-shell);
	padding-inline: var(--tcc-gutter);
}

.tcc-solution-pillar .tcc-sp-cta__inner {
	padding-inline: 0;
}

@media (min-width: 61.25rem) {
	.tcc-delivery-pillar .tcc-sp-cta__inner,
	.tcc-solution-pillar .tcc-sp-cta__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.tcc-delivery-pillar .tcc-sp-cta__copy > :first-child,
.tcc-solution-pillar .tcc-sp-cta__copy > :first-child {
	margin-block-start: 0;
}

.tcc-delivery-pillar .tcc-sp-cta__actions,
.tcc-solution-pillar .tcc-sp-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.tcc-delivery-pillar .tcc-sp-cta__action,
.tcc-solution-pillar .tcc-sp-cta__action {
	background: var(--wp--preset--color--cyan);
	border: 1px solid var(--wp--preset--color--cyan);
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	text-decoration: none;
	white-space: nowrap;
}

/* Every action carries the one canonical button contract from theme.json, and
   hover swaps the foreground and background rather than adding an underline,
   matching every other button on the site. */
.tcc-delivery-pillar .tcc-sp-cta__action:hover,
.tcc-delivery-pillar .tcc-sp-cta__action:focus-visible,
.tcc-solution-pillar .tcc-sp-cta__action:hover,
.tcc-solution-pillar .tcc-sp-cta__action:focus-visible {
	background: var(--wp--preset--color--teal-dk);
	border-color: var(--wp--preset--color--teal-dk);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

/* The engagement steps and the differentiators are presentational, not links,
   so they must not carry the interactive card lift and shadow that
   animations.css gives every `.tcc-card`. */
.tcc-delivery-pillar :is(.tcc-card--step, .tcc-card--why):hover,
.tcc-delivery-pillar :is(.tcc-card--step, .tcc-card--why):focus-within {
	box-shadow: none;
	transform: none;
}

/* ==========================================================================
   Talk to Us - enquiry form placement
   The enquiry form is owned by the canonical Contact pattern, which the
   marketing-forms contract pins to the end of `page-talk-to-us.html` so the
   form is mounted exactly once. The approved design places it directly beneath
   the "What to expect" band instead of below every other band. Reordering the
   template shell visually achieves that without moving the pattern, so the
   contract, the single mount and the form markup are all untouched.
   ========================================================================== */
.tcc-main--talk {
	display: flex;
	flex-direction: column;
}

/* The page model wrapper only carries layout tokens, which still inherit, so
   dropping its box lets its bands take part in the shell ordering. */
.tcc-main--talk .tcc-page--talk {
	display: contents;
}

.tcc-main--talk .tcc-page--talk > * {
	order: 3;
}

.tcc-main--talk .tcc-hero,
.tcc-main--talk .tcc-section--metrics,
.tcc-main--talk .tcc-section--steps {
	order: 1;
}

.tcc-main--talk .tcc-contact-surface--pattern {
	order: 2;
}

/* `.tcc-section + .tcc-section` collapses the leading band padding on DOM
   adjacency, which no longer matches what the reader sees. The band that now
   follows the form regains the rhythm the collapse removed. */
.tcc-main--talk .tcc-section--contact {
	padding-block-start: var(--tcc-section-gap);
}

/* --------------------------------------------------------------------------
   Talk to Us - band geometry
   Every other guided template puts its bands directly in <main>, where
   .tcc-section paints edge to edge and .tcc-section__inner constrains the
   content. This template used to wrap everything in a constrained group, so
   each band stopped at the shell width and any band background became a
   floating panel rather than a full-width stripe. The wrapper is gone; the
   Contact pattern now needs the same band treatment the sections already have.
   -------------------------------------------------------------------------- */
.tcc-main--talk .tcc-contact-surface--pattern {
	padding-inline: 0;
	width: 100%;
}

.tcc-main--talk .tcc-contact-surface__grid {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--tcc-shell);
	padding-inline: var(--tcc-gutter);
	width: 100%;
}