@layer components {
	/* Concept & Brand Innovation page components (Phase 20 -- client-
	 * numbered Phase 18). Same tonal-elevation rule as every other page:
	 * no box-shadow. Only properties Elementor does not emit are set
	 * here.
	 */

	/* --- The Innovation Framework: methodology card ------------------------
	 * Border-color hover plus an icon-scale micro-interaction -- the
	 * same icon-scale convention already established on the Services
	 * page (Phase 11, .tf-service-icon), reused here as its own class
	 * per the one-file-per-page convention rather than cross-page
	 * dependency.
	 */
	/* Intro copy under the framework heading. Width (800px) and centring
	 * come from the Elementor container (`boxed_width`), and text-align
	 * from the widget's `align`, because Elementor forces max-width and
	 * text-align unlayered on widgets. Here: readable size, relaxed
	 * leading, muted colour so it does not compete with the heading, and
	 * a gap between the two paragraphs. Logical properties, so RTL needs
	 * no separate rule. */
	.tf-brand-framework__intro {
		font-size: var(--tf-font-size-m);
		line-height: 1.7;
		color: var(--tf-text-muted);
	}

	/* Colour is set on the <p>, not the widget wrapper: Elementor applies
	 * its own unlayered colour to `.elementor-widget-text-editor`, which
	 * beats anything layered on the same element. */
	.tf-brand-framework__intro p {
		margin-block: 0;
		color: var(--tf-text-muted);
	}

	.tf-brand-framework__intro p + p {
		margin-block-start: var(--tf-space-s);
	}

	/* Equal-height cards. Each card sits in its own Elementor container
	 * (a flex column); without this the HTML widget shrinks to its
	 * content and `block-size: 100%` on the card has nothing to resolve
	 * against, so cards in a row end up different heights. */
	.tf-brand-framework .e-con-full > .elementor-widget-html {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
	}

	.tf-brand-framework .elementor-widget-html .tf-framework-card {
		flex: 1 1 auto;
	}

	.tf-framework-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);
		/* Named properties, not `all`: only these change, and `all` would
		 * also animate layout-affecting properties and any future rule. */
		transition:
			transform 300ms ease,
			box-shadow 300ms ease,
			border-color 300ms ease,
			background-color 300ms ease;
	}

	/* Lift + soft floating shadow on every card, light or dark. */
	.tf-framework-card:hover {
		border-color: var(--tf-accent);
		transform: translateY(-8px);
		box-shadow: var(--tf-shadow-l);
	}

	/* Dark variant, applied to the card element itself (the <div> inside
	 * the HTML widget, not the Elementor container) on cards 2, 4, 6 and 8
	 * so the 3x3 grid reads as a checkerboard: light / dark / light,
	 * dark / light / dark, light / dark / light. Background is the accent
	 * (#191e11), text is pure white. */
	.tf-framework-card--dark {
		background-color: var(--tf-accent);
		border-color: var(--tf-accent);
	}

	.tf-framework-card--dark:hover {
		border-color: var(--tf-color-white);
	}

	.tf-framework-card--dark .tf-framework-card__icon,
	.tf-framework-card--dark .tf-framework-card__title,
	.tf-framework-card--dark .tf-framework-card__desc {
		color: var(--tf-color-white);
	}

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

	.tf-framework-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);
		transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.tf-framework-card:hover .tf-framework-card__icon {
		transform: scale(1.1);
	}

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

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

	/* --- Service Deliverables: divider list ---------------------------------
	 * The design system's documented "Lists & Dividers" component:
	 * hairline rules between items, no bullet points. border-block-end
	 * (logical) instead of the source design's per-item bottom border
	 * plus a manual :last-child removal -- same axis either way, but
	 * named for what it is (block-end, not "bottom").
	 */
	.tf-deliverable-item {
		display: flex;
		align-items: flex-start;
		gap: var(--tf-space-m);
		padding-block-end: var(--tf-space-l);
		margin-block-end: var(--tf-space-l);
		border-block-end: 1px solid var(--tf-border-subtle);
	}

	.tf-deliverable-item--last {
		padding-block-end: 0;
		margin-block-end: 0;
		border-block-end: none;
	}

	.tf-deliverable-item__icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		margin-block-start: 0.2em;
		color: var(--tf-accent);
	}

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

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

	/* --- Service Deliverables: image collage --------------------------------
	 * One tall image + a stacked pair -- both children of a single flex
	 * row so the mirror under dir="rtl" is automatic (the established
	 * pattern proven correct on every prior asymmetric two-column
	 * section), no direction-specific rule needed.
	 */
	.tf-collage {
		display: flex;
		gap: var(--tf-space-s);
		block-size: 31.25rem;
	}

	.tf-collage__tall {
		flex: 1 1 50%;
		overflow: hidden;
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
	}

	.tf-collage__stack {
		display: flex;
		flex-direction: column;
		flex: 1 1 50%;
		gap: var(--tf-space-s);
	}

	.tf-collage__stack > * {
		flex: 1 1 50%;
		overflow: hidden;
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
	}

	.tf-collage img,
	.tf-collage__tall img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	@media (max-width: 767px) {
		.tf-collage {
			block-size: auto;
			flex-direction: column;
		}

		.tf-collage__stack {
			flex-direction: row;
		}
	}

	/* --- The TerraForce Edge: tonal metric panel ---------------------------
	 * The design system's documented "Force Metric" component: a large
	 * flat tonal container framing a value + label grid.
	 */
	.tf-edge-panel {
		padding: var(--tf-space-2xl) var(--tf-space-l);
		background-color: var(--tf-surface-muted);
		border-radius: var(--tf-radius-l);
	}

	.tf-edge-eyebrow {
		display: block;
		margin-block-end: 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);
	}

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

	.tf-edge-metric {
		text-align: center;
	}

	.tf-edge-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-edge-metric__label {
		display: block;
		margin-block-start: var(--tf-space-2xs);
		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-edge-metric__label {
		text-transform: none;
		letter-spacing: normal;
	}

	/* --- Ready to Innovate: CTA panel ---------------------------------------
	 * The source design's background is `bg-primary` (#010200, a
	 * near-pure black outside our approved primitives) -- mapped to
	 * --tf-accent (#191e11), the token every other CTA on the site
	 * already uses for this role, rather than introducing a second,
	 * near-indistinguishable "true black". See docs/design-system.md.
	 *
	 * THE WATERMARK IS A ::after PSEUDO-ELEMENT, NOT AN ELEMENTOR
	 * WIDGET -- three things were tried first and discarded, each
	 * confirmed broken live via getBoundingClientRect, not assumed:
	 *   1. An inline <svg class="...watermark"> sized via inline-size/
	 *      block-size: computed width stayed 0 while height resolved
	 *      correctly from block-size -- a browser quirk with logical
	 *      sizing on replaced SVG elements.
	 *   2. Switching to physical width/height (both as CSS and as SVG
	 *      attributes): still computed to 0. Root cause traced to
	 *      Elementor's own `max-width: 100%` reset on every img/svg,
	 *      combined with the "forced position:relative on every
	 *      widget wrapper" trap (Phase 12 and every page since): the
	 *      immediate `.elementor-widget` wrapper is this element's
	 *      containing block, and it collapses to 0 width because
	 *      `cta_inner`'s `flex_align_items: center` makes flex
	 *      children shrink-to-fit their own (here: absolute, so
	 *      contentless) content instead of stretching. `max-width:
	 *      100%` of a 0-width containing block clamps any explicit
	 *      width down to 0 regardless of unit.
	 *   3. Moving the class to a wrapping <div> (sidestepping
	 *      Elementor's img/svg-only reset) fixed the SIZE (confirmed
	 *      300x300 via measurement) but not the POSITION: the
	 *      containing block was still that same 0-width widget
	 *      wrapper, so `inset-inline-end` resolved against its
	 *      near-zero box instead of the real panel, landing the
	 *      watermark near center instead of the corner.
	 * A `::after` on `.tf-innovation-cta-panel` itself -- the same
	 * technique `.tf-hero::after` already uses to avoid Elementor's
	 * own overlay/background collisions -- sidesteps the entire
	 * category: pseudo-elements are never wrapped by Elementor, so
	 * there is no widget wrapper to collapse or compete for the
	 * containing block. The leaf shape is a `mask-image` data URI
	 * (a solid `background-color` cut to the SVG's shape) rather than
	 * an inline SVG element, since only a pseudo-element's `content`
	 * can appear without a real DOM node, and content strings can't
	 * carry markup, only text/images.
	 *
	 * Positioned with inset-inline-end/inset-block-end (logical), so
	 * it mirrors to the opposite corner automatically under dir="rtl"
	 * with zero additional rules -- the same technique proven on the
	 * Pre-Opening testimonial card and the Marketing page's
	 * methodology connector.
	 */
	.tf-innovation-cta-panel {
		position: relative;
		overflow: hidden;
	}

	.tf-innovation-cta-panel::after {
		content: "";
		position: absolute;
		inset-inline-end: -2rem;
		inset-block-end: -2rem;
		z-index: 0;
		width: 18.75rem;
		height: 18.75rem;
		background-color: var(--tf-text-on-dark);
		opacity: 0.1;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1'%3E%3Cpath d='M5 21c8 0 14-6 14-14V5h-2C9 5 5 9 5 17Z'/%3E%3Cpath d='M5 21c0-6 4-10 10-12'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1'%3E%3Cpath d='M5 21c8 0 14-6 14-14V5h-2C9 5 5 9 5 17Z'/%3E%3Cpath d='M5 21c0-6 4-10 10-12'/%3E%3C/svg%3E");
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		pointer-events: none;
	}

	.tf-innovation-cta-panel__content {
		position: relative;
		z-index: 1;
	}
}