@layer components {
	/* Marketing & Communications page components (Phase 19 -- client-
	 * numbered Phase 17). Full rewrite (2026-09-02) for the client's
	 * design pivot -- the original 4-card/CTA-only version is retired
	 * entirely, not layered onto. Same tonal-elevation rule as every
	 * other page: no box-shadow anywhere, including where the source
	 * design itself specifies `hover:shadow-xl` (Specialized Verticals
	 * cards) -- translated to a tonal background shift instead, per
	 * the site's established substitution.
	 */

	/* --- Strategic Ecosystem card (3x3 grid) -------------------------------
	 * Border-color + lift hover only in this design -- no per-card link,
	 * unlike the retired version.
	 */
	.tf-ecosystem-card {
		display: flex;
		flex-direction: column;
		block-size: 100%;
		padding: var(--tf-space-l);
		background-color: var(--tf-surface-alt);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
		transition: border-color 300ms ease, transform 300ms ease;
	}

	.tf-ecosystem-card:hover {
		border-color: var(--tf-accent);
		transform: translateY(-0.25rem);
	}

	.tf-ecosystem-card__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		margin-block-end: var(--tf-space-m);
		color: var(--tf-accent);
	}

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

	.tf-ecosystem-card__desc {
		flex-grow: 1;
		margin: 0;
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

	/* --- Quantifiable Results: decorative icon row ------------------------
	 * Three plain, unlabeled icons (shield / trending-up / globe) --
	 * decorative reinforcement only, per the source design. */
	.tf-icon-row {
		display: flex;
		gap: var(--tf-space-m);
		margin-block-start: var(--tf-space-m);
	}

	.tf-icon-row svg {
		inline-size: 2.5rem;
		block-size: 2.5rem;
		color: var(--tf-accent);
	}

	/* --- Quantifiable Results metric tile ----------------------------------
	 * The design system's documented "Force Metric" component: bold
	 * value + uppercase label, framed in a flat tonal container.
	 */
	.tf-impact-metric {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--tf-space-2xs);
		padding: var(--tf-space-l);
		background-color: var(--tf-surface-muted);
		border-radius: var(--tf-radius-l);
		text-align: center;
	}

	.tf-impact-metric__value {
		display: block;
		font-size: var(--tf-font-size-2xl);
		font-weight: 700;
		line-height: var(--tf-line-height-tight);
		color: var(--tf-text);
	}

	.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);
	}

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

	/* --- A Phased Approach to Growth: methodology step ---------------------
	 * Numbered badge + title + desc, connected by a hairline that runs
	 * from one badge to the next. The connector is built with
	 * `inset-inline-end`, not `right` -- the source design hard-codes
	 * `right: -50%`, which is a physical property; the logical
	 * equivalent auto-mirrors to extend toward reading-direction
	 * "forward" under dir="rtl" with no [dir="rtl"] override at all
	 * (unlike the Pre-Opening page's translateX arrow, which genuinely
	 * needed one -- inset-inline-* has no such gap).
	 *
	 * `:not(:last-child)` was tried first and discarded: each step
	 * lives in its own separate Elementor column/widget container, so
	 * every step is its container's only child -- ":last-child" is
	 * always true and the connector never rendered on any step,
	 * confirmed live via getComputedStyle before switching to an
	 * explicit `--last` modifier class set by the build script.
	 */
	.tf-methodology-step {
		position: relative;
		z-index: 1;
	}

	.tf-methodology-step:not(.tf-methodology-step--last)::after {
		content: "";
		position: absolute;
		inset-block-start: 2rem;
		inset-inline-end: -50%;
		z-index: -1;
		inline-size: 100%;
		block-size: 1px;
		background-color: var(--tf-border-subtle);
	}

	@media (max-width: 1023px) {
		/* Matches the source design's own max-width: 1024px cutoff --
		 * the connector would misalign once steps wrap to fewer than
		 * 4 per row. Must repeat the base rule's full selector, not
		 * just `.tf-methodology-step::after`: a media query adds no
		 * specificity of its own, so a lower-specificity override
		 * here loses to the `:not(.tf-methodology-step--last)` rule
		 * above regardless of source order -- confirmed live via
		 * getComputedStyle (content stayed `""` and the connector
		 * still measured full width at 768px) before this fix.
		 */
		.tf-methodology-step:not(.tf-methodology-step--last)::after {
			content: none;
		}
	}

	.tf-methodology-badge {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 4rem;
		block-size: 4rem;
		margin-block-end: var(--tf-space-m);
		background-color: var(--tf-surface-muted);
		color: var(--tf-text);
		border-radius: var(--tf-radius-full);
		font-size: var(--tf-font-size-m);
		font-weight: 700;
	}

	.tf-methodology-badge--active {
		background-color: var(--tf-accent);
		color: var(--tf-on-accent);
	}

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

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

	/* --- Precision Marketing: specialized-vertical card --------------------
	 * The source design's `hover:shadow-xl` is translated to a tonal
	 * background shift -- this design system avoids box-shadow
	 * entirely, per docs/design-system.md.
	 */
	.tf-vertical-card {
		display: flex;
		flex-direction: column;
		block-size: 100%;
		padding: var(--tf-space-l);
		background-color: var(--tf-surface);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
		transition: background-color 300ms ease;
	}

	.tf-vertical-card:hover {
		background-color: var(--tf-surface-alt);
	}

	.tf-vertical-card__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 3rem;
		block-size: 3rem;
		margin-block-end: var(--tf-space-m);
		color: var(--tf-accent);
		opacity: 0.3;
		transition: opacity 300ms ease;
	}

	.tf-vertical-card:hover .tf-vertical-card__icon {
		opacity: 1;
	}

	.tf-vertical-card__title {
		margin: 0 0 var(--tf-space-xs);
		font-size: var(--tf-font-size-xl);
		font-weight: 600;
		color: var(--tf-text);
	}

	.tf-vertical-card__desc {
		margin: 0 0 var(--tf-space-m);
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

	.tf-vertical-card__list {
		display: flex;
		flex-direction: column;
		gap: var(--tf-space-xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.tf-vertical-card__item {
		display: flex;
		align-items: center;
		gap: var(--tf-space-xs);
		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-vertical-card__item {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-vertical-card__dot {
		flex-shrink: 0;
		inline-size: 0.375rem;
		block-size: 0.375rem;
		border-radius: var(--tf-radius-full);
		background-color: var(--tf-accent);
	}

	/* --- Client Logos strip -------------------------------------------------
	 * Bracketed placeholders per client instruction: the structure and
	 * the grayscale-to-color hover are fully built and tested now, real
	 * client wordmarks/SVGs to be swapped in later.
	 */
	.tf-client-logos-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--tf-space-l);
	}

	.tf-client-logo {
		font-size: var(--tf-font-size-l);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: -0.01em;
		color: var(--tf-text-muted);
		filter: grayscale(1);
		opacity: 0.5;
		transition: filter 300ms ease, opacity 300ms ease;
	}

	[dir="rtl"] .tf-client-logo {
		letter-spacing: normal;
	}

	.tf-client-logo:hover {
		filter: grayscale(0);
		opacity: 1;
	}

	/* --- Ready to Elevate: CTA panel ---------------------------------------
	 * Plain dark band -- layout only; heading/text color comes from
	 * each widget's own Elementor title_color/text_color setting.
	 */
	.tf-marketing-cta-panel {
		padding: var(--tf-space-2xl) var(--tf-space-l);
		background-color: var(--tf-surface-dark);
		border-radius: var(--tf-radius-l);
		text-align: center;
	}
}