/**
 * TCC Group — Case Studies & Solution Pillar front-end styling.
 * Uses theme.json design tokens (var(--wp--preset--…)). WCAG 2.2 AA colour
 * pairs; motion respects prefers-reduced-motion.
 */

/* ===== Shared card grid ===== */
.tcc-cs-grid {
	display: grid;
	/* auto-fit, not auto-fill: a three-card proof strip must expand to fill the
	   row instead of leaving an empty fourth track and bunching left. Grids
	   that fill every track, such as the case studies index, are unaffected. */
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--6);
	margin: var(--wp--preset--spacing--8) 0;
}

.tcc-cs-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 3px 0 rgba(11, 70, 66, 0.06);
	transition:
		border-color var(--tcc-duration-base) var(--tcc-ease-color),
		box-shadow   var(--tcc-duration-base) var(--tcc-ease-out),
		transform    var(--tcc-duration-base) var(--tcc-ease-out);
}

.tcc-cs-card:hover,
.tcc-cs-card:focus-visible {
	border-color: var(--wp--preset--color--teal);
	box-shadow: 0 10px 24px -8px rgba(11, 70, 66, 0.22);
}

.tcc-cs-card:hover {
	transform: translateY(-2px);
}

.tcc-cs-card:focus-visible {
	/* Keyboard focus must not animate (repo motion guidance) — keep the border/
	   shadow affordance but apply it instantly. */
	transition: none;
}

.tcc-cs-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
}

.tcc-cs-card__title {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.25;
}

.tcc-cs-card__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

.tcc-cs-card__more {
	margin-top: auto;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--teal);
}

/* ===== Sector pillars ===== */
.tcc-sector-pillar {
	display: grid;
	gap: 0;
}

.tcc-sector-hero {
	max-width: 56rem;
}

.tcc-sector-hero__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-transform: uppercase;
}

.tcc-sector-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.1;
}

.tcc-sector-hero__question {
	margin: var(--wp--preset--spacing--6) 0 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.35;
}

.tcc-sector-hero__summary {
	margin-top: var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
}

.tcc-sector-section > h2 {
	margin: 0 0 var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--xxxl);
	line-height: 1.2;
}

.tcc-sector-agenda {
	padding: var(--wp--preset--spacing--8);
	background: var(--wp--preset--color--mist);
	border-left: 4px solid var(--wp--preset--color--cyan);
}

.tcc-sector-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--wp--preset--spacing--5);
}

.tcc-sector-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}

.tcc-sector-card__title,
.tcc-sector-card__summary {
	margin: 0;
}

.tcc-sector-card__title {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
}

.tcc-sector-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration-color: var(--wp--preset--color--teal);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------------------
   Interactive card contract (brand)

   Every grid card is a single click target, not a card with a small link
   buried inside it. One real link keeps the accessible name and is stretched
   across the whole card with a positioned pseudo-element, so the card is
   clickable anywhere by pointer while assistive technology still announces
   exactly one link per card and keyboard focus lands on that link.

   The lift, teal border and shadow mirror `.tcc-home-card` in homepage.css,
   which is the reference implementation for this pattern. The lift is
   pointer-only so touch devices never get a stuck hover state, and it is
   removed under prefers-reduced-motion (see animations.css).
   --------------------------------------------------------------------------- */
.tcc-sector-card,
.tcc-sector-service {
	position: relative;
}

.tcc-sector-card__title a::before,
.tcc-sector-service__link::before {
	content: "";
	inset: 0;
	position: absolute;
}

/* Any other interactive descendant must sit above the stretched overlay,
   otherwise the card link would swallow its clicks. */
.tcc-sector-card a:not(.tcc-sector-card__title a),
.tcc-sector-card button,
.tcc-sector-service a:not(.tcc-sector-service__link),
.tcc-sector-service button {
	position: relative;
	z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
	.tcc-sector-card,
	.tcc-sector-service {
		transition:
			border-color var(--tcc-duration-fast) var(--tcc-ease-color),
			box-shadow   var(--tcc-duration-fast) var(--tcc-ease-out),
			transform    var(--tcc-duration-fast) var(--tcc-ease-out);
	}

	.tcc-sector-card:hover,
	.tcc-sector-service:hover {
		border-color: var(--wp--preset--color--teal);
		box-shadow: var(--wp--preset--shadow--md);
		transform: translateY(-3px);
	}
}

/* Keyboard parity: the card carries the same state when its link is focused.
   Never animated, per the motion standards. */
.tcc-sector-card:has(.tcc-sector-card__title a:focus-visible),
.tcc-sector-service:has(.tcc-sector-service__link:focus-visible) {
	border-color: var(--wp--preset--color--teal);
	box-shadow: var(--wp--preset--shadow--md);
	transition: none;
}

.tcc-sector-card__summary {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

.tcc-sector-help-intro {
	max-width: 48rem;
}

.tcc-sector-help-items {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: var(--wp--preset--spacing--7) 0 0;
	padding: 0;
	counter-reset: none;
}

.tcc-sector-help-item {
	display: grid;
	grid-template-columns: minmax(4.5rem, 7.5rem) 1fr;
	gap: var(--wp--preset--spacing--6);
	align-items: start;
	padding: var(--wp--preset--spacing--6) 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.tcc-sector-help-item:first-child {
	border-top: none;
}

.tcc-sector-help-item__index {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--sky);
}

.tcc-sector-help-item__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.01em;
}

.tcc-sector-help-item__text {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.85;
}

.tcc-sector-faq {
	border-top: 1px solid var(--wp--preset--color--line);
}

.tcc-sector-faq:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.tcc-sector-faq summary {
	cursor: pointer;
	padding: var(--wp--preset--spacing--5) 0;
	font-weight: 700;
}

.tcc-sector-faq > div {
	max-width: 48rem;
	padding-bottom: var(--wp--preset--spacing--5);
}

.tcc-sector-review {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--5);
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* ===== Insights ===== */
.tcc-insight-article > .wp-block-post-title {
	max-width: 52rem;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.12;
}

.tcc-insight-summary {
	max-width: 48rem;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
}

.tcc-insight-context {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--8);
}

.tcc-insight-context__reviewed {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.tcc-insight-context__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--wp--preset--spacing--6);
}

.tcc-insight-context__group h2 {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--md);
}

.tcc-insight-context__group ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcc-insight-guided {
	display: grid;
	gap: var(--wp--preset--spacing--8);
	grid-template-columns: minmax(0, 1fr) 320px;
	max-width: 52rem;
	overflow-wrap: anywhere;
}

.tcc-insight-guided > * {
	min-width: 0;
}

.tcc-insight-section > :first-child,
.tcc-insight-sources > :first-child,
.tcc-insight-related > :first-child,
.tcc-insight-faq > :first-child,
.tcc-insight-cta > :first-child {
	margin-top: 0;
}

.tcc-insight-section > :last-child,
.tcc-insight-sources > :last-child,
.tcc-insight-related > :last-child,
.tcc-insight-faq > :last-child,
.tcc-insight-cta > :last-child {
	margin-bottom: 0;
}

@media (max-width: 360px) {

	.tcc-insight-section > h2 {
		font-size: var(--wp--preset--font-size--xxl);
	}
}

.tcc-insight-sources {
	padding-top: var(--wp--preset--spacing--6);
	border-top: 1px solid var(--wp--preset--color--line);
}

.tcc-insight-sources ol {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	padding-left: 1.4rem;
}

.tcc-insight-sources time {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.tcc-insight-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--5);
}

.tcc-insight-related__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}

.tcc-insight-related__card h3,
.tcc-insight-related__card p {
	margin: 0;
}

.tcc-insight-related__card h3 {
	font-size: var(--wp--preset--font-size--lg);
}

.tcc-insight-related__card p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.tcc-insight-faq details {
	border-top: 1px solid var(--wp--preset--color--line);
}

.tcc-insight-faq details:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.tcc-insight-faq summary {
	cursor: pointer;
	padding: var(--wp--preset--spacing--5) 0;
	font-weight: 700;
}

.tcc-insight-faq details > div {
	padding-bottom: var(--wp--preset--spacing--5);
}

.tcc-insight-cta {
	padding: var(--wp--preset--spacing--7);
	background: var(--wp--preset--color--mist);
	border-left: 4px solid var(--wp--preset--color--cyan);
}

/* ===== Case Studies index: grid + cards ===== */
.tcc-cs-index-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--wp--preset--spacing--6);
	margin: var(--wp--preset--spacing--8) 0;
}

.tcc-cs-archive-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	height: 100%;
	box-shadow: 0 1px 3px 0 rgba(11, 70, 66, 0.06);
}

.tcc-cs-archive-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.25;
	margin: 0;
}

.tcc-cs-archive-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.tcc-cs-archive-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.tcc-cs-archive-card .wp-block-post-date {
	margin-top: auto;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

/* ===== Case Studies index: filter form ===== */
.tcc-cs-filter {
	margin: var(--wp--preset--spacing--6) 0 0;
}

.tcc-cs-filter__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.tcc-cs-filter__field {
	flex: 1 1 220px;
}

.tcc-cs-filter__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.tcc-cs-filter input[type="search"],
.tcc-cs-filter select {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-size: 0.92rem;
}

.tcc-cs-filter input[type="search"]:focus-visible,
.tcc-cs-filter select:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 1px;
}

.tcc-cs-filter__submit {
	flex: 0 0 auto;
	display: inline-block;
	padding: 0.65rem 1.25rem;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--paper);
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 0.92rem;
	line-height: normal;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

.tcc-cs-filter__submit:hover {
	background: var(--wp--preset--color--teal-dk);
}

.tcc-cs-filter__clear {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: underline;
}

/* ===== Single case study ===== */
.tcc-cs-service {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.tcc-cs-service .tcc-cs-eyebrow {
	margin-right: 0.4rem;
}

.tcc-cs-abstract {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
	border-left: 4px solid var(--wp--preset--color--cyan);
	padding-left: var(--wp--preset--spacing--6);
	margin: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--8);
}

.tcc-case-study-structured {
	display: grid;
	gap: var(--wp--preset--spacing--8);
	grid-template-columns: minmax(0, 1fr) 300px;
}

.tcc-case-study-structured > * {
	min-width: 0;
}

.tcc-cs-section,
.tcc-cs-key-facts,
.tcc-cs-related {
	max-width: 52rem;
}

.tcc-cs-section > :first-child,
.tcc-cs-key-facts > :first-child,
.tcc-cs-related > :first-child {
	margin-top: 0;
}

.tcc-cs-section > :last-child,
.tcc-cs-key-facts > :last-child,
.tcc-cs-related > :last-child {
	margin-bottom: 0;
}

/* Outcome metric stat cards */
.tcc-cs-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--4);
	margin: var(--wp--preset--spacing--8) 0;
}

.tcc-cs-stat {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--mist);
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--line);
}

.tcc-cs-stat__value {
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--teal);
}

.tcc-cs-stat__unit {
	margin-left: 0.3em;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tcc-cs-stat__label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	line-height: 1.35;
}

.tcc-cs-stat__source {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	color: var(--wp--preset--color--teal-dk);
}

.tcc-cs-review {
	margin: 0;
	padding-top: var(--wp--preset--spacing--5);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.tcc-cs-cta {
	max-width: 52rem;
	padding: var(--wp--preset--spacing--7);
	background: var(--wp--preset--color--mist);
	border-left: 4px solid var(--wp--preset--color--cyan);
}

.tcc-cs-cta > :first-child {
	margin-top: 0;
}

.tcc-cs-cta > :last-child {
	margin-bottom: 0;
}

.tcc-cs-card__media {
	display: block;
	margin: -1px -1px 1rem;
	overflow: hidden;
}

/* When the card carries media the service label overlays it, matching the
   design. Navy on cyan measures about 5.8:1; the design's white on cyan is
   about 2.7:1 and would fail at this size. */
.tcc-cs-card:has(.tcc-cs-card__media) {
	position: relative;
}

.tcc-cs-card__media + .tcc-cs-eyebrow {
	background: var(--wp--preset--color--cyan);
	border-radius: 4px;
	color: var(--wp--preset--color--navy);
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	padding: 0.25rem 0.5rem;
	position: absolute;
}

.tcc-cs-card__image {
	aspect-ratio: 5 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* ===== Solution pillar sections ===== */

/* The pillar body owns its own layout so each section can be a full-bleed
   band, matching the design's alternating navy / sky / paper rhythm, while
   its contents stay in the reading column. */
.tcc-solution-pillar .tcc-solution-pillar-body > * {
	border-radius: 0;
	box-sizing: border-box;
	margin-block: 0;
	margin-inline: 0;
	max-width: none;
	padding-block: var(--tcc-band-gap);
	padding-inline: var(--tcc-gutter);
	width: 100%;
}

/* Body copy on a pillar never drops below the base reading size. */
.tcc-solution-pillar .tcc-solution-pillar-body :is(p, li):not(.tcc-sp-section-eyebrow):not(.tcc-sp-eyebrow):not(.tcc-reviewed):not(.tcc-sp-reviewed) {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
}

.tcc-solution-pillar .tcc-solution-pillar-body > * > * {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--tcc-shell);
}

.tcc-solution-pillar .tcc-solution-pillar-body > .tcc-sp-hero-band {
	padding-block: 0;
	padding-inline: var(--tcc-gutter);
}

/* Alternating band surfaces. The practice-lead and last-reviewed credits are
   deliberately not in this list: they are single-line editorial metadata, and
   giving each its own full-bleed coloured band made two quiet credits read as
   two major page sections. */
.tcc-solution-pillar .tcc-sp-fact-box,
.tcc-solution-pillar .tcc-sp-sectors,
.tcc-solution-pillar .tcc-sp-freshness {
	background: var(--wp--preset--color--sky);
}

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

.tcc-solution-pillar .tcc-sp-cta {
	background: var(--wp--preset--color--mist);
}

/* Reading-length copy on a dark band keeps paper text and cyan headings.
   The numbered stage cards are white islands inside that dark band, so their
   own headings must be excluded here: this rule outranks
   `.tcc-sp-stage__heading` on specificity and would otherwise render them
   white on white, leaving a blank gap under each number at 1:1 contrast. */
.tcc-solution-pillar .tcc-sp-service-body :is(h2, h3):not(.tcc-sp-stage__heading) {
	color: var(--wp--preset--color--paper);
}

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

/* Consecutive bands must not inherit the flow gap, or a strip of page
   background appears between two adjacent surfaces. */
.tcc-solution-pillar-body > * + * {
	margin-top: 0;
}

.tcc-sp-hero-band {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
	padding-inline: var(--tcc-gutter);
}

.tcc-sp-hero-band__inner {
	align-items: center;
	box-sizing: border-box;
	column-gap: 3.5rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-inline: auto;
	max-width: var(--tcc-shell);
	padding-block: var(--tcc-hero-gap-top) var(--tcc-hero-gap-bottom);
	row-gap: 2.5rem;
	width: 100%;
}

@media (min-width: 61.25rem) {
	.tcc-sp-hero-band__inner:has(.tcc-sp-hero-band__media) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.tcc-sp-hero-band__copy,
.tcc-sp-hero-band__media {
	min-width: 0;
}

.tcc-sp-hero-band__image {
	border-radius: 6px;
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.tcc-sp-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.5rem;
	margin-block-end: 1.25rem;
}

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

.tcc-sp-breadcrumb a:hover {
	color: var(--wp--preset--color--cyan);
}

.tcc-sp-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--cyan);
}

.tcc-sp-eyebrow {
	color: var(--wp--preset--color--cyan);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.tcc-sp-hero-routes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-block-start: 2rem;
}

.tcc-sp-hero-cta {
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 4px;
	color: var(--wp--preset--color--paper);
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.875rem 2rem;
	text-decoration: none;
	transition:
		background-color var(--tcc-duration-fast) var(--tcc-ease-color),
		border-color     var(--tcc-duration-fast) var(--tcc-ease-color),
		color            var(--tcc-duration-fast) var(--tcc-ease-color);
}

/* Every hero route shares one resting style. The reversed cyan fill in the
   design is the hover state, not a second button variant. Navy on cyan clears
   5.58:1, where white on cyan is about 2.3:1 and fails. */
.tcc-sp-hero-cta:hover,
.tcc-sp-hero-cta:focus-visible {
	background: var(--wp--preset--color--cyan);
	border-color: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--navy);
}

.tcc-solution-pillar h1.wp-block-heading,
.tcc-solution-pillar .tcc-sp-hero {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 var(--wp--preset--spacing--6);
}

.tcc-solution-pillar .tcc-sp-hero-band .tcc-sp-hero {
	color: var(--wp--preset--color--paper);
}

.tcc-solution-pillar-body > .tcc-sp-hero-band + * {
	margin-top: 0;
}

/* Section eyebrow: teal on paper and sky bands, cyan on the navy band so it
   stays legible against a dark surface. */
.tcc-sp-section-eyebrow {
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.tcc-sp-service-body .tcc-sp-section-eyebrow {
	color: var(--wp--preset--color--cyan);
}

.tcc-sp-answer {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.5;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--8);
}

/* The Service pillar shows its full answer-first summary inside the navy hero,
   unlike the Solution pillar which renders it as its own band below. The
   light-surface ink colour above measures 1.08:1 on navy, so the hero copy was
   effectively invisible. Match the sibling hero treatment. */
.tcc-sp-hero-band .tcc-sp-answer,
.tcc-sp-hero-band .tcc-sp-answer p {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
}

/* The hero now carries a single short answer line; the longer `.tcc-sp-answer`
   passage renders as its own band beneath the fact strip. */
.tcc-sp-hero-band .tcc-sp-hero-answer {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
	margin: 0;
	max-width: 34rem;
}

/* ── Service pillar hero ───────────────────────────────────────────────────
   The Service design puts its hero on the cyan brand surface rather than the
   navy one the Solution pillar uses, so every override below is scoped to
   `.tcc-delivery-pillar`. Cyan forces the copy to reverse: white on cyan is
   only ~2.7:1, while navy on cyan reaches ~5.8:1 and clears WCAG AA for both
   the display heading and the body copy. */
.tcc-delivery-pillar .tcc-sp-hero-band {
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--navy);
}

.tcc-delivery-pillar .tcc-sp-hero-band .tcc-sp-hero,
.tcc-delivery-pillar .tcc-sp-hero-band .tcc-sp-eyebrow,
.tcc-delivery-pillar .tcc-sp-hero-band .tcc-sp-answer,
.tcc-delivery-pillar .tcc-sp-hero-band .tcc-sp-answer p,
.tcc-delivery-pillar .tcc-sp-hero-band .tcc-sp-hero-answer {
	color: var(--wp--preset--color--navy);
}

.tcc-delivery-pillar .tcc-sp-hero-band .tcc-sp-hero {
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.tcc-delivery-pillar .tcc-sp-hero-band .tcc-sp-breadcrumb a,
.tcc-delivery-pillar .tcc-sp-hero-band .tcc-sp-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--navy);
}

.tcc-delivery-pillar .tcc-sp-hero-band .tcc-sp-breadcrumb a:hover {
	color: var(--wp--preset--color--deep);
}

/* The design's two hero routes are one button shown with and without its hover
   state, not two variants, so both share a single resting style exactly as the
   other pillar heroes do. The solid deep fill carries white at ~12.2:1, which
   white on the cyan band itself could never reach. */
.tcc-delivery-pillar .tcc-sp-hero-cta {
	background: var(--wp--preset--color--deep);
	border-color: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--paper);
	font-weight: 700;
}

.tcc-delivery-pillar .tcc-sp-hero-cta:hover,
.tcc-delivery-pillar .tcc-sp-hero-cta:focus-visible {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}

/* The Solution pillar reverses its prose band out on navy. On a Service page
   that band sits between the deep credibility strip and the white capability
   band, where a third dark surface breaks the paper/dark alternation the brand
   system calls for, so the Service prose reads on paper. */
.tcc-delivery-pillar .tcc-sp-service-body {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

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

/* Services covered: an optional title and standfirst introduce the list so the
   band no longer opens on a bare two-column set of bullets. */
.tcc-sp-services__title {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 var(--wp--preset--spacing--4);
	max-width: 46rem;
}

.tcc-sp-services__intro {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
	margin: 0 0 var(--wp--preset--spacing--6);
	max-width: 54rem;
}

.tcc-sp-services__intro > :last-child {
	margin-bottom: 0;
}

/* What we help with: the band header places the deliberately broken heading
   on the left and the Service Pillar routes on the right, then the numbered
   stage cards below. Sizes follow the approved design at its own scale. */
.tcc-sp-service-body__head {
	align-items: start;
	column-gap: var(--wp--preset--spacing--10);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-block-end: var(--wp--preset--spacing--10);
	row-gap: var(--wp--preset--spacing--6);
}

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

.tcc-sp-service-body__title {
	font-size: var(--wp--preset--font-size--xxl);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
	text-align: left;
}

.tcc-sp-service-body__title span {
	display: block;
}

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

/* Routes into the four Service Pillar pages. These invert the hero route
   treatment: a cyan fill at rest, dropping to the outline style on hover and
   keyboard focus. Navy on cyan clears 5.58:1 and paper on navy 15.02:1, so
   both states stay legible on the dark band. The selector is scoped to the
   band because the band's own link colour is cyan, which would otherwise win
   on specificity and render cyan text on the cyan fill. */
.tcc-solution-pillar .tcc-sp-service-body a.tcc-sp-mode {
	background: var(--wp--preset--color--cyan);
	border: 1px solid var(--wp--preset--color--cyan);
	border-radius: 4px;
	color: var(--wp--preset--color--navy);
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.5rem 0.875rem;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--tcc-duration-fast) var(--tcc-ease-color),
		border-color     var(--tcc-duration-fast) var(--tcc-ease-color),
		color            var(--tcc-duration-fast) var(--tcc-ease-color);
}

.tcc-solution-pillar .tcc-sp-service-body a.tcc-sp-mode:hover,
.tcc-solution-pillar .tcc-sp-service-body a.tcc-sp-mode:focus-visible {
	background: transparent;
	border-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--paper);
}

.tcc-sp-stages {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-sp-stage {
	background: var(--wp--preset--color--paper);
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--6);
}

.tcc-sp-stage__number {
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 800;
	line-height: 1;
}

/* Scoped to the band so it cannot be outranked by the band's own heading
   colour rule. The card is white, so this heading is always navy. */
.tcc-solution-pillar .tcc-sp-service-body .tcc-sp-stage__heading,
.tcc-sp-stage__heading {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.3;
	margin: 0;
}

.tcc-sp-stage__body {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

.tcc-sp-services__list {
	columns: 2;
	column-gap: var(--wp--preset--spacing--10);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-sp-services__list li {
	break-inside: avoid;
	padding-left: 1.25rem;
	padding-block: 0.35rem;
	position: relative;
}

.tcc-sp-services__list li::before {
	background: var(--wp--preset--color--cyan);
	border-radius: 50%;
	content: "";
	height: 0.45rem;
	left: 0;
	position: absolute;
	top: 0.8rem;
	width: 0.45rem;
}

@media (max-width: 47.9375rem) {
	.tcc-sp-services__list {
		columns: 1;
	}
}

/* Trust statistics band: a white card inset on the sky surface, carrying the   eyebrow and four large figures, as the approved design shows. */
.tcc-sp-fact-box {
	background: var(--wp--preset--color--sky);
}

.tcc-sp-fact-box__card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--10);
}

.tcc-sp-fact-box__label {
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--8);
	text-transform: uppercase;
}

.tcc-sp-fact-box__list {
	display: grid;
	gap: var(--wp--preset--spacing--8);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-sp-stat {
	border-left: 3px solid var(--wp--preset--color--cyan);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding-left: var(--wp--preset--spacing--4);
}

.tcc-sp-stat__value {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.tcc-sp-stat__label {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.tcc-sp-stat__detail {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

/* Byline. The byline and the last-reviewed line sit together as one quiet
   editorial footer: the byline carries the rule above, the reviewed line
   closes it below, and there is no gap between them.
   These two must also opt out of the full band padding that
   `.tcc-solution-pillar-body > *` applies to every child, or a single line of
   credit is given the vertical space of a major section. The inline gutter is
   inherited from that rule so they stay aligned with the bands above. */
.tcc-solution-pillar .tcc-solution-pillar-body > .tcc-sp-byline {
	padding-block: var(--wp--preset--spacing--4) 0;
}

.tcc-solution-pillar .tcc-solution-pillar-body > .tcc-sp-reviewed {
	padding-block: 0 var(--wp--preset--spacing--4);
}

.tcc-sp-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	border-top: 1px solid var(--wp--preset--color--line);
	margin: var(--wp--preset--spacing--8) 0 0;
}

.tcc-sp-byline__label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}

.tcc-sp-byline__name {
	font-weight: 700;
}

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

.tcc-sp-byline__job {
	color: var(--wp--preset--color--muted);
}

/* Freshness */
.tcc-sp-reviewed {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin: 0 0 var(--wp--preset--spacing--8);
}

.tcc-sp-reviewed span {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.tcc-fresh-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--wp--preset--spacing--4);
	margin: var(--wp--preset--spacing--4) 0 var(--wp--preset--spacing--8);
}

.tcc-fresh-item {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition:
		background   var(--tcc-duration-base) var(--tcc-ease-color),
		border-color var(--tcc-duration-base) var(--tcc-ease-color);
}

.tcc-fresh-item:hover,
.tcc-fresh-item:focus-visible {
	border-color: var(--wp--preset--color--teal);
	background: var(--wp--preset--color--mist);
}

.tcc-fresh-item__date {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tcc-fresh-item__title {
	font-weight: 600;
	line-height: 1.35;
}

/* Service body */
.tcc-sp-service-body__heading {
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: var(--wp--preset--spacing--8) 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--ink);
}

.tcc-sp-service-body p {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	margin: 0 0 var(--wp--preset--spacing--4);
}

/* Section titles */
.tcc-sp-faqs__title,
.tcc-sp-proof__title,
.tcc-sp-freshness__title,
.tcc-sp-sectors__title,
.tcc-sp-links__title {
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--ink);
}

/* FAQ accordions */
.tcc-sp-faq {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--paper);
	overflow: hidden;
}

.tcc-sp-faq > summary {
	list-style: none;
	cursor: pointer;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.tcc-sp-faq > summary::-webkit-details-marker {
	display: none;
}

.tcc-sp-faq > summary::after {
	content: "+";
	font-size: 1.288rem;
	line-height: 1;
	color: var(--wp--preset--color--teal);
	transition: transform var(--tcc-duration-base) var(--tcc-ease-out);
}

.tcc-sp-faq[open] > summary::after {
	content: "\2212";
}

.tcc-sp-faq > summary:hover {
	color: var(--wp--preset--color--teal);
}

.tcc-sp-faq > p {
	margin: 0;
	padding: 0 var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* Proof strip */
.tcc-sp-proof {
	padding: var(--wp--preset--spacing--8) 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Relevant Sectors */
.tcc-sp-sectors {
	padding: var(--wp--preset--spacing--8) 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Internal link slots */
.tcc-sp-links {
	padding: var(--wp--preset--spacing--8) 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.tcc-sp-links__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--6);
}

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

.tcc-sp-links__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.tcc-sp-links__col a {
	color: var(--wp--preset--color--teal);
	text-decoration: none;
}

.tcc-sp-links__col a:hover,
.tcc-sp-links__col a:focus-visible {
	text-decoration: underline;
}

/* Next step */
.tcc-sp-cta {
	padding: var(--wp--preset--spacing--7);
	margin-top: var(--wp--preset--spacing--8);
	background: var(--wp--preset--color--mist);
	border-left: 4px solid var(--wp--preset--color--cyan);
}

.tcc-sp-cta > :first-child {
	margin-top: 0;
}

.tcc-sp-cta > :last-child {
	margin-bottom: 0;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.tcc-cs-card,
	.tcc-fresh-item {
		transition: none;
	}

	.tcc-cs-card:hover,
	.tcc-cs-card:focus-visible {
		transform: none;
	}

	.tcc-sp-faq > summary::after {
		transition: none;
	}
}

/* ─── Sector pillar bands ───────────────────────────────────────────── */
/* Mirrors the Solution Pillar treatment: the body owns its layout so each
   section is a full-bleed band whose contents stay in the reading column. */
.tcc-sector-pillar > * {
	box-sizing: border-box;
	margin-block: 0;
	max-width: none;
	padding-block: var(--tcc-band-gap);
	padding-inline: var(--tcc-gutter);
	width: 100%;
}

/* Centre one real wrapper per band. Centring every child individually breaks
   the moment a child sets a `margin` shorthand -- which the eyebrow and the
   headings do -- leaving those flush to the viewport edge while their siblings
   stayed centred. */
.tcc-sector-section__inner,
.tcc-sector-hero__inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--tcc-shell);
	width: 100%;
}

.tcc-sector-pillar .tcc-sector-hero {
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--paper);
	max-width: none;
	padding: 64px 32px 80px;
}

.tcc-sector-hero__inner {
	padding-block: var(--tcc-hero-gap-top) var(--tcc-hero-gap-bottom);
}

.tcc-sector-hero__copy {
	max-width: 46rem;
}

.tcc-sector-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.5rem;
	margin-block-end: 1.25rem;
}

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

.tcc-sector-breadcrumb a:hover {
	color: var(--wp--preset--color--cyan);
}

.tcc-sector-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--cyan);
}

.tcc-sector-pillar .tcc-sector-hero__eyebrow {
	color: var(--wp--preset--color--paper);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.32px;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.tcc-sector-pillar .tcc-sector-hero__title {
	color: var(--wp--preset--color--cyan-lt);
	font-size: 48px;
	font-weight: 800;
	letter-spacing: -1.44px;
	line-height: 1.1;
	margin: 0 0 20px;
	max-width: 736px;
}

.tcc-sector-pillar .tcc-sector-hero__summary {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	max-width: 40rem;
}

.tcc-sector-hero-routes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-block-start: 2rem;
}

/* One resting style; the reversed fill is the hover state. Navy on cyan
   clears 5.58:1 and paper on navy 15.02:1. */
.tcc-sector-pillar a.tcc-sector-hero-cta {
	background: var(--wp--preset--color--sky);
	border: 0;
	border-radius: 4px;
	color: var(--wp--preset--color--deep);
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	padding: 14px 32px;
	text-decoration: none;
	transition:
		background-color var(--tcc-duration-fast) var(--tcc-ease-color),
		border-color     var(--tcc-duration-fast) var(--tcc-ease-color),
		color            var(--tcc-duration-fast) var(--tcc-ease-color);
}

.tcc-sector-pillar a.tcc-sector-hero-cta:hover,
.tcc-sector-pillar a.tcc-sector-hero-cta:focus-visible {
	background: var(--wp--preset--color--cyan-lt);
	color: var(--wp--preset--color--deep);
}

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

/* Alternating band surfaces, as the design does. */
/* The approved sector design keeps these three sections on paper and carries
   the sky tint on their inner cards and rows instead, so the deep and sky
   full-bleed bands stay visually distinct. */
.tcc-sector-pillar .tcc-sector-agenda,
.tcc-sector-pillar .tcc-sector-body {
	background: var(--wp--preset--color--paper);
}

/* Regulatory pressures read as chips, not a bulleted list. */
.tcc-sector-pressures {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-sector-pressures li {
	margin: 0;
}

.tcc-sector-pillar .tcc-sector-pressure {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	color: var(--wp--preset--color--navy);
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.375rem 0.75rem;
	text-decoration: none;
	transition:
		background-color var(--tcc-duration-fast) var(--tcc-ease-color),
		border-color     var(--tcc-duration-fast) var(--tcc-ease-color),
		color            var(--tcc-duration-fast) var(--tcc-ease-color);
}

.tcc-sector-pillar a.tcc-sector-pressure:hover,
.tcc-sector-pillar a.tcc-sector-pressure:focus-visible {
	background: var(--wp--preset--color--cyan);
	border-color: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--navy);
}

/* Decorative continuation cue. The card title link owns the accessible name,
   so this is aria-hidden and must never be the only affordance. */
.tcc-sector-card__cue {
	align-items: center;
	color: var(--wp--preset--color--teal);
	display: flex;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	gap: 0.5rem;
	margin: auto 0 0;
	padding-block-start: 1.25rem;
}

/* `--tcc-ease-motion` is not a defined motion token (see animations.css), so
   this transition was invalid at computed-value time and the arrow snapped
   instead of easing. `--tcc-ease-out` is the token this was reaching for.
   `inline-block` is required for the transform to apply to the span at all. */
.tcc-sector-card__cue-arrow {
	display: inline-block;
	transition: transform var(--tcc-duration-fast) var(--tcc-ease-out);
}

.tcc-sector-card:hover .tcc-sector-card__cue-arrow,
.tcc-sector-card:focus-within .tcc-sector-card__cue-arrow {
	transform: translateX(0.25rem);
}

@media (prefers-reduced-motion: reduce) {
	.tcc-sector-card__cue-arrow {
		transition: none;
	}

	.tcc-sector-card:hover .tcc-sector-card__cue-arrow,
	.tcc-sector-card:focus-within .tcc-sector-card__cue-arrow {
		transform: none;
	}
}

.tcc-sector-pillar .tcc-sector-faqs {
	background: var(--wp--preset--color--paper);
}

/* =====================================================================
 * Approved design alignment — single Insight and single Case Study.
 * Values are taken from the approved design measured at a 1600px viewport;
 * the two rail widths differ deliberately (Insight 816/320, Case Study
 * 836/300) and must not be unified.
 * ===================================================================== */

.tcc-insight-hero,
.tcc-cs-hero {
	background-color: rgba(210, 246, 255, 0.5);
	padding: 48px 32px;
}

.tcc-insight-hero__inner,
.tcc-cs-hero__inner {
	max-width: 716px;
	margin-inline: auto;
	padding: 16px 0 48px;
}

.tcc-insight .wp-block-post-title,
.tcc-case-study .wp-block-post-title {
	max-width: none;
	margin: 0 0 24px;
	color: #0e2841;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -1.26px;
}

.tcc-insight .tcc-insight-summary,
.tcc-case-study .tcc-cs-abstract {
	max-width: none;
	margin: 0 0 32px;
	color: #4b5563;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
}

.tcc-insight .tcc-insight-summary p,
.tcc-case-study .tcc-cs-abstract p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.tcc-insight .tcc-post-meta,
.tcc-case-study .tcc-post-meta {
	align-items: baseline;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 16px;
	color: rgb(74, 122, 138);
	font-size: 13px;
	line-height: 1.5;
	row-gap: 8px;
}

.tcc-insight .tcc-post-meta a,
.tcc-case-study .tcc-post-meta a {
	color: inherit;
}

.tcc-insight .tcc-cs-eyebrow,
.tcc-case-study .tcc-cs-eyebrow {
	display: inline-block;
	margin: 0 0 16px;
	padding: 4px 10px;
	border-radius: 3px;
	background-color: #fff;
	color: #0e2841;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.55px;
}

.tcc-insight-hero__media,
.tcc-cs-hero__media {
	display: flex;
	margin: 0;
	min-height: 260px;
}

.tcc-insight-hero__media img,
.tcc-cs-hero__media img {
	border-radius: 4px;
	display: block;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/* ----- Two-column reading layouts ----- */

.tcc-main .tcc-insight-shell,
.tcc-main .tcc-cs-shell {
	padding: 56px 32px;
	background-color: #fff;
}

.tcc-main .tcc-insight-shell .tcc-insight-article,
.tcc-main .tcc-cs-shell .tcc-case-study-article {
	max-width: 1200px;
	margin-inline: auto;
}

.tcc-insight-guided,
.tcc-case-study-structured {
	display: grid;
	gap: 64px;
	align-items: start;
	max-width: none;
}

.tcc-insight-main,
.tcc-cs-main {
	min-width: 0;
}

.tcc-insight-rail,
.tcc-cs-rail {
	position: sticky;
	top: 84px;
	display: grid;
	gap: 24px;
	min-width: 0;
}

/* ----- Editorial typography ----- */

.tcc-insight-section,
.tcc-cs-section {
	padding-bottom: 40px;
}

.tcc-insight-main h2,
.tcc-cs-main h2 {
	margin: 0 0 16px;
	color: #0e2841;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.38px;
}

.tcc-insight-main p,
.tcc-cs-main p,
.tcc-insight-main li,
.tcc-cs-main li {
	color: #374151;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.85;
}

.tcc-insight-main p,
.tcc-cs-main p {
	margin: 0 0 17.6px;
}

.tcc-insight-main > :last-child,
.tcc-cs-main > :last-child {
	padding-bottom: 0;
}

.tcc-insight-main blockquote,
.tcc-cs-main blockquote {
	margin: 24px 0;
	padding: 20px 24px;
	border-left: 2.4px solid #00b3be;
	background-color: rgba(210, 246, 255, 0.5);
	font-style: normal;
}

.tcc-insight-main blockquote p,
.tcc-cs-main blockquote p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.tcc-insight-main blockquote cite,
.tcc-cs-main blockquote cite {
	display: block;
	margin-top: 12px;
	color: #4b5563;
	font-size: 12px;
	font-style: normal;
	line-height: 1.5;
}

/* ----- Sticky rail blocks ----- */

.tcc-insight-jump,
.tcc-insight-rail .tcc-insight-context__links,
.tcc-insight-rail .tcc-insight-related,
.tcc-cs-rail .tcc-cs-related {
	margin: 0;
	padding: 20px;
	border: 1px solid rgba(14, 40, 65, 0.12);
	border-radius: 4px;
	background-color: rgba(210, 246, 255, 0.35);
}

.tcc-insight-rail h2,
.tcc-cs-rail h2 {
	margin: 0 0 12px;
	color: #0e2841;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.65px;
}

.tcc-insight-jump ol,
.tcc-insight-rail ul,
.tcc-cs-rail ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcc-insight-jump a,
.tcc-insight-rail a,
.tcc-cs-rail a {
	color: #0e2841;
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
}

.tcc-insight-jump a:hover,
.tcc-insight-jump a:focus-visible,
.tcc-insight-rail a:hover,
.tcc-insight-rail a:focus-visible,
.tcc-cs-rail a:hover,
.tcc-cs-rail a:focus-visible {
	text-decoration: underline;
}

.tcc-insight-rail .tcc-insight-cta,
.tcc-cs-rail .tcc-cs-cta {
	max-width: none;
	margin: 0;
	padding: 20px;
	border-radius: 4px;
	background-color: #0e2841;
	color: #fff;
}

.tcc-insight-rail .tcc-insight-cta h2,
.tcc-cs-rail .tcc-cs-cta h2 {
	color: #fff;
	font-size: 16px;
	text-transform: none;
	letter-spacing: -0.32px;
}

.tcc-insight-rail .tcc-insight-cta p,
.tcc-cs-rail .tcc-cs-cta p {
	margin: 0 0 16px;
	color: #d2f6ff;
	font-size: 14px;
	line-height: 1.6;
}

.tcc-insight-rail .tcc-insight-cta .wp-element-button,
.tcc-cs-rail .tcc-cs-cta .wp-element-button {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 3px;
	background-color: #00b3be;
	color: #0e2841;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.tcc-insight-rail .tcc-insight-context__reviewed,
.tcc-cs-rail .tcc-cs-review {
	margin: 0;
	color: #4b5563;
	font-size: 12px;
	line-height: 1.5;
}

/* ----- Case study outcome metrics band ----- */

.tcc-cs-metrics-band {
	padding: 0 32px;
	background-color: #0e2841;
}

.tcc-cs-metrics-band .tcc-cs-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0;
	max-width: 1200px;
	/* The base .tcc-cs-stats rule carries `margin: 32px 0`. The band has no
	   vertical padding or border, so that margin collapses out of it and
	   opens white gaps above and below the full-bleed navy strip. The stat
	   padding already supplies the internal rhythm. */
	margin-block: 0;
	margin-inline: auto;
}

.tcc-cs-metrics-band .tcc-cs-stat {
	display: block;
	padding: 32px 24px;
	border: 0;
	background: none;
}

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

.tcc-cs-metrics-band .tcc-cs-stat__unit {
	font-size: inherit;
	font-weight: inherit;
	color: var(--wp--preset--color--footer-meta);
	letter-spacing: 0.01em;
}

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

.tcc-cs-metrics-band .tcc-cs-stat__source {
	display: inline-block;
	margin-top: 4px;
	color: #d2f6ff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
}

/* Quantity queries: the metrics band is a fixed 1200px, so each additional
   stat shrinks its column. Values such as "8000+ASSOCIATES" are a single
   unbreakable token that overflows and collides with the next stat at the
   default 32px, so step the value type down as stats are added. nowrap keeps
   multi-word values on one line. One and two stat strips keep 32px. Rules are
   ordered so the four-stat tier overrides the three-stat tier. */
.tcc-cs-metrics-band .tcc-cs-stats:has(.tcc-cs-stat:nth-child(3)) .tcc-cs-stat__value {
	font-size: 28px;
	letter-spacing: -0.7px;
	white-space: nowrap;
}

.tcc-cs-metrics-band .tcc-cs-stats:has(.tcc-cs-stat:nth-child(4)) .tcc-cs-stat {
	padding-inline: 16px;
}

.tcc-cs-metrics-band .tcc-cs-stats:has(.tcc-cs-stat:nth-child(4)) .tcc-cs-stat__value {
	font-size: 24px;
	letter-spacing: -0.5px;
	white-space: nowrap;
}

.tcc-main .tcc-cs-shell .tcc-cs-footer-terms {
	grid-column: 1 / -1;
	margin-top: 24px;
}

/* ----- Responsive collapse ----- */

@media (max-width: 1023px) {

	.tcc-insight-guided,
	.tcc-case-study-structured {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.tcc-insight-rail,
	.tcc-cs-rail {
		position: static;
	}

	.tcc-cs-metrics-band .tcc-cs-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

	.tcc-insight-hero,
	.tcc-cs-hero,
	.tcc-main .tcc-insight-shell,
	.tcc-main .tcc-cs-shell {
		padding-inline: 20px;
	}

	.tcc-insight .wp-block-post-title,
	.tcc-case-study .wp-block-post-title {
		font-size: 32px;
		letter-spacing: -0.96px;
	}

	.tcc-cs-metrics-band .tcc-cs-stats {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =====================================================================
 * Hero, chips and rail tab control — approved design.
 * ===================================================================== */

.tcc-main .tcc-insight-hero__inner,
.tcc-main .tcc-cs-hero__inner {
	align-items: stretch;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
	gap: 56px;
	max-width: 1200px;
	margin-inline: auto;
	padding: 0;
}

.tcc-main .tcc-insight-hero__text,
.tcc-main .tcc-cs-hero__text {
	min-width: 0;
}

.tcc-breadcrumbs {
	margin: 0 0 24px;
}

.tcc-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #4b5563;
	font-size: 12px;
	line-height: 1.5;
}

.tcc-breadcrumbs__item + .tcc-breadcrumbs__item::before {
	margin-right: 8px;
	content: "/";
	color: rgba(75, 85, 99, 0.6);
}

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

.tcc-breadcrumbs__item a:hover,
.tcc-breadcrumbs__item a:focus-visible {
	text-decoration: underline;
}

/* The standfirst carries a teal rule in the design rather than sitting as
 * plain grey text. */
.tcc-main .tcc-insight-summary,
.tcc-main .tcc-cs-abstract {
	padding-left: 20px;
	border-left: 2.4px solid #00b3be;
}

.tcc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcc-chip {
	padding: 5px 12px;
	border: 1px solid rgba(14, 40, 65, 0.18);
	border-radius: 3px;
	background-color: #fff;
	color: #0e2841;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
}

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

.tcc-chip a:hover,
.tcc-chip a:focus-visible {
	text-decoration: underline;
}

/* ----- Rail tab control ----- */

.tcc-rail-tabs__list {
	display: flex;
	gap: 20px;
	border-bottom: 1px solid rgba(14, 40, 65, 0.14);
}

.tcc-rail-tabs__tab {
	margin: 0;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: #4b5563;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
}

.tcc-rail-tabs__tab[aria-selected="true"] {
	border-bottom-color: #00b3be;
	color: #0e2841;
}

.tcc-rail-tabs__tab:focus-visible {
	outline: 2px solid #00b3be;
	outline-offset: 2px;
}

.tcc-rail-panel {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcc-rail-card {
	padding: 16px 0;
	border-bottom: 1px solid rgba(14, 40, 65, 0.1);
}

.tcc-rail-card:last-child {
	border-bottom: 0;
}

.tcc-rail-card a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.tcc-rail-card__title {
	display: block;
	color: #0e2841;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.tcc-rail-card__summary {
	display: block;
	margin-top: 4px;
	color: #4b5563;
	font-size: 12px;
	line-height: 1.5;
}

.tcc-rail-card__arrow {
	display: block;
	margin-top: 6px;
	color: #00b3be;
	font-size: 13px;
	line-height: 1;
}

.tcc-rail-card a:hover .tcc-rail-card__title,
.tcc-rail-card a:focus-visible .tcc-rail-card__title {
	text-decoration: underline;
}

/* Without the enhancement script every panel stays visible, so each one is
 * labelled by its tab. The tab strip itself is only meaningful once the
 * script can switch panels. */
.tcc-rail-tabs:not(.is-enhanced) .tcc-rail-tabs__list {
	display: none;
}

.tcc-rail-tabs:not(.is-enhanced) .tcc-rail-panel + .tcc-rail-panel {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(14, 40, 65, 0.14);
}

@media (max-width: 1023px) {

	.tcc-main .tcc-insight-hero__inner,
	.tcc-main .tcc-cs-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

/* Not every Insight or Case Study carries a featured image. Without one the
 * media column would hold open an empty 620px track, so the hero falls back
 * to a single column and the text keeps the design's reading measure. */
.tcc-main .tcc-insight-hero__inner:not(:has(.tcc-insight-hero__media img)),
.tcc-main .tcc-cs-hero__inner:not(:has(.tcc-cs-hero__media img)) {
	grid-template-columns: minmax(0, 716px);
}

.tcc-main .tcc-insight-hero__media:empty,
.tcc-main .tcc-cs-hero__media:empty {
	display: none;
}

/* A layout rule that sets `display` on a rail list outranks the user-agent
 * `[hidden] { display: none }` rule, which silently defeats the hidden
 * attribute the tab script toggles. Restate it with enough specificity. */
.tcc-rail-panel[hidden] {
	display: none;
}

/* =====================================================================
 * Sector Pillar — approved design alignment.
 * Measured from the prototype at a 1600px viewport. The hero uses the deep
 * brand surface rather than navy, and answers its own question twice: a short
 * line inside the hero, then the fuller answer-first summary in its own band
 * directly beneath it.
 * ===================================================================== */

.tcc-sector-pillar .tcc-sector-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 736px) 400px;
	gap: 64px;
	align-items: center;
	padding-block: 0;
}

.tcc-sector-pillar .tcc-sector-hero__copy {
	max-width: none;
	min-width: 0;
}

/* Without a featured image the media column would hold open an empty track. */
.tcc-sector-pillar .tcc-sector-hero__inner:not(:has(.tcc-sector-hero__media)) {
	grid-template-columns: minmax(0, 736px);
}

.tcc-sector-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.tcc-sector-pillar .tcc-sector-hero__answer {
	max-width: 520px;
	margin: 0;
	color: var(--wp--preset--color--paper);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.75;
}

.tcc-sector-pillar a.tcc-sector-hero-cta--primary {
	background: var(--wp--preset--color--paper);
	font-weight: 700;
	letter-spacing: 0.56px;
}

/* Answer-first summary band. */
.tcc-sector-pillar .tcc-sector-lead {
	background: var(--wp--preset--color--paper);
	padding: 40px 32px;
}

.tcc-sector-lead__text {
	max-width: 860px;
}

.tcc-sector-lead__text p {
	margin: 0 0 16px;
	color: #4b5563;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.8;
}

.tcc-sector-lead__text p:last-child {
	margin-bottom: 0;
}

/* The navy default must not out-rank the coloured band variants below.
   These structural selectors are (0,3,1), so a plain
   `.tcc-sector-section--deep h2` override at (0,1,1) would lose and leave a
   navy heading on the deep band at 1.23:1. Excluding the dark variants here
   keeps the default honest for every current and future band. */
.tcc-sector-pillar .tcc-sector-section:not(.tcc-sector-section--deep) > h2,
.tcc-sector-pillar .tcc-sector-section:not(.tcc-sector-section--deep) .tcc-sector-section__inner > h2,
.tcc-sector-pillar .tcc-sector-section:not(.tcc-sector-section--deep) .tcc-sector-section__head > h2 {
	margin: 0 0 24px;
	color: var(--wp--preset--color--navy);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.52px;
}

/* The "All case studies"/"All insights" index links share the row with
   their section heading in the approved design, and the FAQ heading gets
   a "still stuck?" escape hatch directly beneath it. */
.tcc-sector-pillar .tcc-sector-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
}

.tcc-sector-pillar .tcc-sector-section__head > h2 {
	margin-bottom: 0;
}

.tcc-sector-section__all-link {
	flex-shrink: 0;
	margin-bottom: 24px;
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.tcc-sector-section__all-link:hover,
.tcc-sector-section__all-link:focus-visible {
	text-decoration: underline;
}

.tcc-sector-faqs__escape {
	margin: 0 0 24px;
}

.tcc-sector-faqs__escape a {
	color: var(--wp--preset--color--teal);
	font-weight: 700;
	text-decoration: none;
}

.tcc-sector-faqs__escape a:hover,
.tcc-sector-faqs__escape a:focus-visible {
	text-decoration: underline;
}

/* Regulatory pressures are description cards in the design, not chips. */
.tcc-sector-pillar .tcc-sector-pressures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.tcc-sector-pillar .tcc-sector-pressures li.tcc-sector-pressure {
	display: block;
	margin: 0;
	padding: 22px;
	border: 0;
	border-radius: 4px;
	background: rgba(210, 246, 255, 0.25);
}

.tcc-sector-pillar .tcc-sector-pressure__title {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: normal;
	text-decoration: none;
}

.tcc-sector-pillar a.tcc-sector-pressure__title:hover,
.tcc-sector-pillar a.tcc-sector-pressure__title:focus-visible {
	text-decoration: underline;
}

.tcc-sector-pressure__text {
	margin: 8px 0 0;
	color: #4b5563;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
}

@media (max-width: 1023px) {

	.tcc-sector-pillar .tcc-sector-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.tcc-sector-pillar .tcc-sector-pressures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

	.tcc-sector-pillar .tcc-sector-hero {
		padding: 40px 20px 48px;
	}

	.tcc-sector-pillar .tcc-sector-hero__title {
		font-size: 32px;
		letter-spacing: -0.96px;
	}

	.tcc-sector-pillar .tcc-sector-lead {
		padding-inline: 20px;
	}

	.tcc-sector-pillar .tcc-sector-pressures {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =====================================================================
 * Sector Pillar bands - approved design.
 * The page alternates white, deep brand (#003b49) and sky (#d2f6ff)
 * full-bleed bands. Section padding lives on the band so the inner
 * measure stays centred and the colour runs edge to edge.
 * ===================================================================== */

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

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

.tcc-sector-section--deep h2,
.tcc-sector-section--deep h3 {
	color: var(--wp--preset--color--paper);
}

.tcc-sector-section--deep .tcc-sector-section__eyebrow {
	color: var(--wp--preset--color--cyan-lt);
}

/* Cards keep the paper surface on the deep band so body copy retains
   its 15:1 contrast rather than relying on a tinted overlay. */
.tcc-sector-section--deep .tcc-sector-card {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.tcc-sector-section--deep .tcc-home-card {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.tcc-sector-section--deep .tcc-sector-card :is(h3, h4, .tcc-sector-card__title) {
	color: var(--wp--preset--color--teal);
}

/* ----- Our services band ----- */

.tcc-sector-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcc-sector-service {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
}

.tcc-sector-service__chip {
	align-self: flex-start;
	margin: 0;
	padding: 4px 10px;
	background: var(--wp--preset--color--cyan);
	border-radius: 3px;
	color: var(--wp--preset--color--navy);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tcc-sector-service__title {
	margin: 0;
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.3;
}

.tcc-sector-service__text {
	color: var(--wp--preset--color--footer-link);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

.tcc-sector-service__text p {
	margin: 0;
}

.tcc-sector-service__link {
	margin-top: auto;
	color: var(--wp--preset--color--cyan-lt);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

.tcc-sector-service__link::after {
	content: " \2192";
}

.tcc-sector-service__link:hover,
.tcc-sector-service__link:focus-visible {
	text-decoration: underline;
}

/* ----- Get help CTA band ----- */

.tcc-sector-cta__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--6);
	align-items: center;
	justify-content: space-between;
}

.tcc-sector-cta__copy {
	flex: 1 1 28rem;
	min-width: 0;
}

.tcc-sector-cta__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1.2;
}

.tcc-sector-cta__text {
	margin: 0;
	max-width: 44rem;
	color: var(--wp--preset--color--footer-link);
	line-height: 1.6;
}

.tcc-sector-cta__actions {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	flex: 0 0 auto;
}

.tcc-sector-cta__button {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.tcc-sector-cta__button--primary {
	background: var(--wp--preset--color--sky);
	border: 1px solid var(--wp--preset--color--sky);
	color: var(--wp--preset--color--deep);
}

.tcc-sector-cta__button--ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: var(--wp--preset--color--paper);
}

.tcc-sector-cta__button:hover,
.tcc-sector-cta__button:focus-visible {
	text-decoration: underline;
}

@media (max-width: 782px) {

	.tcc-sector-cta__actions {
		width: 100%;
	}
}

/* Regulatory pressure cards carry the sky tint at 25% on the paper band,
   matching the approved design where the band itself stays white. The radius
   and padding must agree with the card rule defined earlier in this file;
   the two blocks style the same element, so a divergent value here would
   silently win or lose depending only on selector order. */
.tcc-sector-pillar .tcc-sector-agenda .tcc-sector-pressure {
	background: rgba(210, 246, 255, 0.25);
	border: 0;
	border-radius: 4px;
	padding: 22px;
}

/* The 3-up grid and its breakpoints are declared once, earlier in this file.
   A second `.tcc-sector-pressures` grid rule previously sat here: being later
   in source order at equal specificity it silently replaced the approved
   3-column layout with a 4-column auto-fit track, and — because it came after
   the tablet and mobile media queries — it disabled both of them too. */

/* =====================================================================
 * Case study / insight hero media sizing.
 * The hero is a two-column grid whose height is set by whichever column
 * is taller. Previously the image kept its intrinsic aspect ratio, so a
 * landscape source left white space beside taller text and a portrait
 * source overhung it, and the two columns never aligned at the top.
 * Stretching the media cell and cropping with object-fit makes the image
 * exactly match the text height in both directions. A min-height floor
 * stops a very short abstract collapsing the image to a sliver.
 * ===================================================================== */

@media (max-width: 1023px) {

	.tcc-insight-hero__media,
	.tcc-cs-hero__media,
	.tcc-insight-hero__media img,
	.tcc-cs-hero__media img {
		min-height: 200px;
	}
}

/* =====================================================================
 * Case study / insight hero meta row alignment.
 * The eyebrow chip carries a 16px bottom margin for the stacked contexts
 * it also appears in. Inside the flex meta row that margin inflates the
 * service paragraph to 41px while the date box is only 20px, so
 * `align-items: center` pushed the date about 7px below the chip and the
 * service name. Drop the margin in this row and align on the shared text
 * baseline so the chip, service name and date sit on one line.
 * ===================================================================== */

.tcc-insight .tcc-post-meta .tcc-cs-eyebrow,
.tcc-case-study .tcc-post-meta .tcc-cs-eyebrow {
	margin-block: 0;
}

.tcc-insight .tcc-post-meta .tcc-cs-service,
.tcc-case-study .tcc-post-meta .tcc-cs-service {
	margin: 0;
}

@media (max-width: 600px) {

	.tcc-insight-hero,
	.tcc-cs-hero {
		padding-bottom: 32px;
	}
}