@layer components {
	/* Design, Launch & Growth page components (Phase 16 -- client-numbered
	 * Phase 14). Same tonal-elevation rule as every other page: no
	 * box-shadow. Only properties Elementor does not emit are set here.
	 */

	/* --- Section header rule -------------------------------------------
	 * Short centered underline beneath "The Blueprint for Dominance".
	 */
	.tf-dl-rule {
		inline-size: 4rem;
		block-size: 4px;
		margin-inline: auto;
		background-color: var(--tf-accent);
		border-radius: var(--tf-radius-full);
	}

	/* --- Execution roadmap: vertical timeline ---------------------------
	 * Phase 28 replaced the four-card "Blueprint" grid with a five-step
	 * timeline, one step per client-provided service (these read as
	 * sequential project phases, not a set of independent offerings, so
	 * a timeline communicates the order; a grid would not). Rendered as
	 * a single HTML widget (one <ol>), not five separate Elementor
	 * containers -- this project has twice hit the same bug where
	 * sibling container width percentages plus their gap silently
	 * exceed the boxed width and wrap (Contact page, Concept & Brand
	 * Innovation's QR-mockup column); a hand-built list sidesteps that
	 * class of bug entirely and is lighter DOM besides.
	 *
	 * EXCEPTION to this file's no-box-shadow rule (see file header): the
	 * client asked specifically for a lift + shadow hover on these
	 * cards, the same treatment already approved for Concept & Brand
	 * Innovation's service cards.
	 */
	.tf-dl-timeline-wrap {
		max-inline-size: 46rem;
		margin-inline: auto;
		inline-size: 100%;
	}

	.tf-dl-timeline {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--tf-space-xl);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Single connecting line running through every marker's centre,
	 * behind the markers (z-index 0 vs. the marker's 1). Logical
	 * inset-inline-start so it sits correctly without an RTL override. */
	.tf-dl-timeline::before {
		content: "";
		position: absolute;
		inset-block: 1.5rem;
		inset-inline-start: 1.5rem;
		inline-size: 2px;
		background-color: var(--tf-border-subtle);
		transform: translateX(-1px);
	}

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

	.tf-dl-step {
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: var(--tf-space-m);
	}

	.tf-dl-step__marker {
		position: relative;
		z-index: 1;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 3rem;
		block-size: 3rem;
		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;
	}

	.tf-dl-step:hover .tf-dl-step__marker {
		background-color: var(--tf-accent);
		color: var(--tf-color-white);
	}

	.tf-dl-step__card {
		flex: 1 1 auto;
		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:
			transform 300ms ease,
			box-shadow 300ms ease,
			border-color 300ms ease,
			background-color 300ms ease;
	}

	.tf-dl-step:hover .tf-dl-step__card {
		transform: translateY(-6px);
		box-shadow: var(--tf-shadow-l);
		border-color: var(--tf-accent);
		background-color: var(--tf-surface-muted);
	}

	.tf-dl-step__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		margin-block-end: var(--tf-space-s);
		color: var(--tf-accent);
		transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.tf-dl-step:hover .tf-dl-step__icon {
		transform: scale(1.1) rotate(5deg);
	}

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

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

	@media (prefers-reduced-motion: reduce) {
		.tf-dl-step:hover .tf-dl-step__card {
			transform: none;
		}

		.tf-dl-step:hover .tf-dl-step__icon {
			transform: none;
		}
	}

	@media (max-width: 767px) {
		.tf-dl-timeline {
			gap: var(--tf-space-l);
		}

		.tf-dl-step__marker {
			inline-size: 2.5rem;
			block-size: 2.5rem;
		}

		.tf-dl-timeline::before {
			inset-inline-start: 1.25rem;
		}
	}

	/* --- Performance at Scale: metric card grid -------------------------
	 * Phase 30 redesign. The original layout put the section header in
	 * a narrow 31%-width column beside a 65%-width column of metrics --
	 * the only section on this page not built as centred-header-then-
	 * full-width-content, which read as uncoordinated next to Impact
	 * Stats and Why Partner With Us just above and below it. Rebuilt to
	 * match their pattern: centred header, then a full-width card grid
	 * below.
	 *
	 * Left-aligned text inside each card, unlike Impact Stats'
	 * centred tiles -- an explicit client choice for this section, kept
	 * as its own distinct component rather than reusing `.tf-dl-stat`.
	 */
	.tf-dl-performance__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--tf-space-m);
		inline-size: 100%;
	}

	.tf-dl-performance-card {
		padding: var(--tf-space-xl) var(--tf-space-l);
		background-color: color-mix(in srgb, var(--tf-text-on-dark) 8%, transparent);
		border: 1px solid var(--tf-border-on-dark);
		border-radius: var(--tf-radius-l);
		text-align: start;
		transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease, background-color 300ms ease;
	}

	/* A dark drop shadow would be invisible on this section's own dark
	 * background, so hover lifts with a pale glow (a light colour at
	 * low opacity) instead of the light-surface pages' --tf-shadow-*
	 * tokens -- same lift + soft-shadow language, adapted for a dark
	 * surface. */
	.tf-dl-performance-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 12px 32px color-mix(in srgb, var(--tf-color-white) 15%, transparent);
		border-color: var(--tf-text-on-dark);
		background-color: color-mix(in srgb, var(--tf-text-on-dark) 12%, transparent);
	}

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

	.tf-dl-performance-card__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-dl-performance-card__label {
		text-transform: none;
		letter-spacing: normal;
	}

	@media (prefers-reduced-motion: reduce) {
		.tf-dl-performance-card:hover {
			transform: none;
		}
	}

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

	@media (max-width: 480px) {
		.tf-dl-performance__grid {
			grid-template-columns: 1fr;
		}
	}

	/* --- Ready to Scale: bounded CTA panel ------------------------------
	 * Unlike the site's usual full-bleed CTA sections, this one is a
	 * contained rounded panel with a faint decorative icon in the
	 * corner -- purely decorative, not content, so it carries no
	 * semantic meaning and is hidden from assistive tech via the SVG's
	 * own aria-hidden attribute (set in the markup, not here).
	 */
	.tf-dl-cta-panel {
		position: relative;
		overflow: hidden;
		padding: var(--tf-space-2xl) var(--tf-space-l);
		background-color: var(--tf-surface-muted);
		border-radius: var(--tf-radius-l);
		text-align: center;
	}

	.tf-dl-cta-panel__icon {
		position: absolute;
		inset-block-start: var(--tf-space-m);
		inset-inline-end: var(--tf-space-m);
		inline-size: 6rem;
		block-size: 6rem;
		color: var(--tf-text);
		opacity: 0.1;
	}

	/* Phase 29 upgraded this panel from a bounded light box to a bold
	 * dark closer -- the client asked for the page's final CTA to be
	 * "bold, attention-grabbing," and a landing page's very last section
	 * reads strongest as the darkest thing on the page. Title/text
	 * colour and button colours are set per-widget in Elementor (same
	 * "set anything Elementor emits, in Elementor" rule as everywhere
	 * else); only the decorative icon's colour needs a CSS override,
	 * since it is plain markup with no Elementor control of its own. */
	.tf-dl-cta-panel--dark {
		background-color: var(--tf-surface-dark);
	}

	.tf-dl-cta-panel--dark .tf-dl-cta-panel__icon {
		color: var(--tf-text-on-dark);
	}

	/* --- Impact Stats -----------------------------------------------
	 * Phase 29. A trust-building counter row directly under the hero,
	 * distinct from "Performance at Scale" further down the page: this
	 * one is about scale/volume (projects, locations, experience), that
	 * one about outcomes (revenue, retention) -- deliberately different
	 * metrics so the two sections don't repeat each other. Numbers are
	 * bracketed per the project's no-hallucination policy until the
	 * client supplies verified figures.
	 */
	.tf-dl-stats__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--tf-space-m);
		inline-size: 100%;
	}

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

	.tf-dl-stat:hover {
		transform: translateY(-4px);
		box-shadow: var(--tf-shadow-m);
		border-color: var(--tf-accent);
	}

	.tf-dl-stat__value {
		display: block;
		margin-block-end: var(--tf-space-3xs);
		font-size: var(--tf-font-size-2xl);
		font-weight: 700;
		line-height: var(--tf-line-height-tight);
		color: var(--tf-accent);
	}

	.tf-dl-stat__label {
		display: block;
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		color: var(--tf-text-muted);
	}

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

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

	@media (max-width: 480px) {
		.tf-dl-stats__grid {
			grid-template-columns: 1fr;
		}
	}

	/* --- Mini case study: two-column text + visual --------------------
	 * Phase 29. The story is written content, not a real client's data:
	 * the outcome and timeline are bracketed per the no-hallucination
	 * policy, the visual side is an explicit CSS placeholder rather
	 * than a photo (the client asked for "Text + Image placeholder"),
	 * and a small disclaimer line under the copy makes the illustrative
	 * nature explicit to any reader, not just implied by the brackets.
	 */
	.tf-dl-case__visual {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--tf-space-xs);
		aspect-ratio: 4 / 3;
		padding: var(--tf-space-l);
		background-color: var(--tf-surface);
		border: 2px dashed var(--tf-border-strong);
		border-radius: var(--tf-radius-l);
		text-align: center;
	}

	.tf-dl-case__visual-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 3rem;
		block-size: 3rem;
		color: var(--tf-text-muted);
	}

	.tf-dl-case__visual-label {
		font-weight: 600;
		color: var(--tf-text);
	}

	.tf-dl-case__visual-caption {
		font-size: var(--tf-font-size-s);
		color: var(--tf-text-muted);
	}

	.tf-dl-case__blocks {
		display: flex;
		flex-direction: column;
		gap: var(--tf-space-m);
		margin-block-start: var(--tf-space-m);
	}

	.tf-dl-case__block-label {
		display: block;
		margin-block-end: var(--tf-space-3xs);
		font-size: var(--tf-font-size-s);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-accent);
	}

	[dir="rtl"] .tf-dl-case__block-label {
		text-transform: none;
		letter-spacing: normal;
	}

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

	.tf-dl-case__disclaimer {
		margin: var(--tf-space-m) 0 0;
		font-size: var(--tf-font-size-s);
		font-style: italic;
		color: var(--tf-text-muted);
	}

	/* --- Why Partner With Us -------------------------------------------
	 * Phase 29. Three-up on desktop, same lift + shadow hover language
	 * as the execution timeline's step cards above, for a consistent
	 * feel across this page's card-like elements.
	 */
	.tf-dl-why__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--tf-space-m);
		inline-size: 100%;
	}

	.tf-dl-reason {
		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,
			background-color 300ms ease;
	}

	.tf-dl-reason:hover {
		transform: translateY(-6px);
		box-shadow: var(--tf-shadow-l);
		border-color: var(--tf-accent);
		background-color: var(--tf-surface-muted);
	}

	.tf-dl-reason__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		margin-block-end: var(--tf-space-m);
		color: var(--tf-accent);
		transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.tf-dl-reason:hover .tf-dl-reason__icon {
		transform: scale(1.1) rotate(5deg);
	}

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

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

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

		.tf-dl-reason:hover .tf-dl-reason__icon {
			transform: none;
		}
	}

	@media (max-width: 1024px) {
		.tf-dl-why__grid {
			grid-template-columns: 1fr;
		}
	}
}