@layer components {
	/* Our Force page components (Phase 14 — formerly numbered Phase 12
	 * by the client; the repo's own phase count had already reached 13,
	 * so this is filed as Phase 14 in docs/phase-status.md to avoid
	 * colliding with the existing Phase 12 entry).
	 *
	 * Same tonal-elevation rule as about.css/services.css: no
	 * box-shadow anywhere. Only properties Elementor does not emit are
	 * set here; Elementor's generated CSS is unlayered and would
	 * outrank this file on anything it also sets.
	 */

	/* --- Core Pillars: 6-card CSS grid ----------------------------------
	 * Phase 20 rebuild replaced the old 3-card "Our DNA" row with the
	 * client's 6 named pillars, as one CSS-grid HTML widget rather than
	 * six Elementor containers (this project has repeatedly hit a bug
	 * where sibling containers' width percentages plus their gap
	 * silently exceed the boxed width and wrap -- a grid in one widget
	 * sidesteps it entirely).
	 *
	 * Hover: lift + shadow + icon colour swap, per this rebuild's brief.
	 */
	.tf-pillars__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--tf-space-m);
		inline-size: 100%;
	}

	.tf-pillar-tile {
		padding: var(--tf-space-l);
		background-color: var(--tf-surface-alt);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
		text-align: start;
		transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
	}

	.tf-pillar-tile:hover {
		transform: translateY(-5px);
		box-shadow: var(--tf-shadow-l);
		border-color: var(--tf-accent);
	}

	.tf-pillar-tile__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 3.5rem;
		block-size: 3.5rem;
		margin-block-end: var(--tf-space-m);
		border-radius: var(--tf-radius-m);
		background-color: var(--tf-accent);
		color: var(--tf-text-on-dark);
		transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.tf-pillar-tile:hover .tf-pillar-tile__icon {
		transform: scale(1.08) rotate(-4deg);
	}

	.tf-pillar-tile__title {
		margin: 0 0 var(--tf-space-xs);
		font-size: var(--tf-font-size-l);
		font-weight: 600;
		color: var(--tf-text);
	}

	.tf-pillar-tile__desc {
		margin: 0;
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

	@media (prefers-reduced-motion: reduce) {
		.tf-pillar-tile:hover {
			transform: none;
		}

		.tf-pillar-tile:hover .tf-pillar-tile__icon {
			transform: none;
		}
	}

	@media (max-width: 1024px) {
		.tf-pillars__grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 600px) {
		.tf-pillars__grid {
			grid-template-columns: 1fr;
		}
	}

	/* Centred pull-quote line under the pillar grid. */
	.tf-pillars__closing {
		max-inline-size: 32rem;
		margin: 0;
		font-size: var(--tf-font-size-l);
		font-weight: 600;
		font-style: italic;
		color: var(--tf-text);
	}

	/* --- Methodology pipeline: connected-node flow ----------------------
	 * Phase 20, new section. Mobile/tablet: a vertical list with a
	 * single connecting line, the same proven technique used on Design,
	 * Launch & Growth and Consultancy & Operations. Desktop (>=1024px):
	 * the same markup reflows into a horizontal row with a single
	 * full-width connecting line -- both orientations use one
	 * full-span line (not per-step segments), so nothing needs to
	 * measure or mirror unevenly, and a plain horizontal bar reads
	 * correctly in RTL without adjustment.
	 */
	.tf-force-pipeline {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--tf-space-l);
		margin: 0;
		padding: 0;
		list-style: none;
		inline-size: 100%;
	}

	.tf-force-pipeline::before {
		content: "";
		position: absolute;
		inset-block: 1.25rem;
		inset-inline-start: 1.25rem;
		inline-size: 2px;
		background-color: var(--tf-border-subtle);
		transform: translateX(-1px);
	}

	[dir="rtl"] .tf-force-pipeline::before {
		transform: translateX(1px);
	}

	.tf-force-pipeline__step {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: var(--tf-space-m);
	}

	.tf-force-pipeline__node {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		background-color: var(--tf-surface);
		border: 2px solid var(--tf-accent);
		border-radius: var(--tf-radius-full);
		font-weight: 700;
		color: var(--tf-accent);
		transition: background-color 300ms ease, color 300ms ease, transform 300ms ease;
	}

	.tf-force-pipeline__step:hover .tf-force-pipeline__node {
		background-color: var(--tf-accent);
		color: var(--tf-color-white);
		transform: scale(1.1);
	}

	.tf-force-pipeline__label {
		font-size: var(--tf-font-size-m);
		font-weight: 600;
		color: var(--tf-text);
	}

	@media (prefers-reduced-motion: reduce) {
		.tf-force-pipeline__step:hover .tf-force-pipeline__node {
			transform: none;
		}
	}

	@media (min-width: 1024px) {
		.tf-force-pipeline {
			flex-direction: row;
			gap: var(--tf-space-xs);
		}

		.tf-force-pipeline::before {
			inset-block-start: 1.25rem;
			inset-block-end: auto;
			inset-inline: 1.25rem;
			inline-size: auto;
			block-size: 2px;
			transform: none;
		}

		[dir="rtl"] .tf-force-pipeline::before {
			transform: none;
		}

		.tf-force-pipeline__step {
			flex: 1 1 0;
			flex-direction: column;
			gap: var(--tf-space-s);
			padding-inline: var(--tf-space-3xs);
			text-align: center;
		}

		.tf-force-pipeline__label {
			font-size: var(--tf-font-size-s);
		}
	}

	/* --- Team card -------------------------------------------------- */
	.tf-team-card__figure {
		overflow: hidden;
		margin: 0 0 var(--tf-space-m);
		border-radius: var(--tf-radius-l);
		background-color: var(--tf-surface-muted);
	}

	.tf-team-card__figure img {
		display: block;
		aspect-ratio: 4 / 5;
		inline-size: 100%;
		object-fit: cover;
		transition: transform 300ms ease;
	}

	.tf-team-card:hover .tf-team-card__figure img {
		transform: scale(1.02);
	}

	.tf-team-card__name {
		margin: 0 0 var(--tf-space-3xs);
		font-size: var(--tf-font-size-l);
		font-weight: 600;
		color: var(--tf-text);
	}

	.tf-team-card__title {
		margin: 0;
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted);
	}

	[dir="rtl"] .tf-team-card__title {
		text-transform: none;
		letter-spacing: normal;
	}

	/* --- Impact metrics band --------------------------------------------
	 * Dark full-bleed band with three tiles separated by a hairline
	 * divider on the inline-end edge of every tile but the last --
	 * `:last-child` plus logical properties means this flips correctly
	 * in RTL with zero extra rules.
	 */
	.tf-impact-metric {
		padding: var(--tf-space-l);
		text-align: center;
		border-inline-end: 1px solid var(--tf-border-on-dark);
	}

	.tf-impact-metric:last-child {
		border-inline-end: none;
	}

	.tf-impact-metric__value {
		display: block;
		margin-block-end: var(--tf-space-2xs);
		font-size: var(--tf-font-size-3xl);
		font-weight: 700;
		line-height: var(--tf-line-height-tight);
		color: var(--tf-surface-muted);
	}

	.tf-impact-metric__label {
		display: block;
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted-on-dark);
	}

	[dir="rtl"] .tf-impact-metric__label {
		text-transform: none;
		letter-spacing: normal;
	}
}