@layer components {
	/* F&B Consultancy & Operations page components (Phase 17 -- client-
	 * numbered Phase 15). Same tonal-elevation rule as every other page:
	 * no box-shadow. Only properties Elementor does not emit are set
	 * here.
	 */

	/* --- Core Services: 5-card CSS grid ----------------------------------
	 * Phase 18 rebuild replaced the old 4-card "Operational Excellence"
	 * row (whose titles didn't match the client's 5 named services) with
	 * a proper CSS grid, rendered as one HTML widget rather than five
	 * Elementor containers -- this project has repeatedly hit a bug
	 * where sibling containers' width percentages plus their gap
	 * silently exceed the boxed width and wrap (Contact page; Concept &
	 * Brand Innovation's QR column); a grid in one widget sidesteps it.
	 *
	 * Hover here is lift + shadow + border colour, per this rebuild's
	 * explicit brief -- a different interaction from this same page's
	 * older dark-invert card hover it replaces.
	 */
	.tf-ops-services__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--tf-space-m);
		inline-size: 100%;
	}

	.tf-ops-service-card {
		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-ops-service-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--tf-shadow-l);
		border-color: var(--tf-accent);
	}

	.tf-ops-service-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-ops-service-card:hover .tf-ops-service-card__icon {
		transform: scale(1.1) rotate(5deg);
	}

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

	.tf-ops-service-card__desc {
		margin: 0;
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

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

		.tf-ops-service-card:hover .tf-ops-service-card__icon {
			transform: none;
		}
	}

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

	@media (max-width: 767px) {
		.tf-ops-services__grid {
			grid-template-columns: 1fr;
		}
	}

	/* --- Our Methodology: 3-step vertical timeline ------------------------
	 * Phase 18, new section. Same connecting-line technique as Design,
	 * Launch & Growth's Execution Roadmap (proven against the width-math
	 * bug above and against RTL), reimplemented with this page's own
	 * classes rather than a cross-page dependency, per the one-file-
	 * per-page convention.
	 */
	.tf-ops-process-wrap {
		max-inline-size: 46rem;
		margin-inline: auto;
		inline-size: 100%;
	}

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

	.tf-ops-process::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-ops-process::before {
		transform: translateX(1px);
	}

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

	.tf-ops-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-ops-step:hover .tf-ops-step__marker {
		background-color: var(--tf-accent);
		color: var(--tf-color-white);
	}

	.tf-ops-step__card {
		flex: 1 1 auto;
		padding: var(--tf-space-l);
		background-color: var(--tf-surface);
		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;
	}

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

	.tf-ops-step__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		margin-block-end: var(--tf-space-s);
		color: var(--tf-accent);
	}

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

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

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

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

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

		.tf-ops-process::before {
			inset-inline-start: 1.25rem;
		}
	}

	/* --- The Impact: 4-card grid -------------------------------------- */
	.tf-ops-impact__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--tf-space-m);
		inline-size: 100%;
	}

	.tf-ops-impact-card {
		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-ops-impact-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--tf-shadow-l);
		border-color: var(--tf-accent);
	}

	.tf-ops-impact-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-ops-impact-card__title {
		margin: 0 0 var(--tf-space-xs);
		font-size: var(--tf-font-size-m);
		font-weight: 600;
		color: var(--tf-text);
	}

	.tf-ops-impact-card__desc {
		margin: 0;
		color: var(--tf-text-muted);
		font-size: var(--tf-font-size-s);
		line-height: var(--tf-line-height-base);
	}

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

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

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

	/* --- Quantifiable Operational Results metric card ---------------------
	 * Value + label, a hairline divider, then an italic supporting line
	 * -- one card richer than every prior metric tile on this site.
	 */
	.tf-ops-metric {
		block-size: 100%;
		padding: var(--tf-space-l);
		background-color: var(--tf-surface-muted);
		border-radius: var(--tf-radius-l);
		text-align: center;
	}

	.tf-ops-metric__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-text);
	}

	.tf-ops-metric__label {
		display: block;
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: color-mix(in srgb, var(--tf-text) 70%, transparent);
	}

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

	.tf-ops-metric__divider {
		margin-block: var(--tf-space-m);
		padding-block-start: var(--tf-space-m);
		border-block-start: 1px solid color-mix(in srgb, var(--tf-text) 10%, transparent);
	}

	.tf-ops-metric__note {
		margin: 0;
		font-style: italic;
		color: color-mix(in srgb, var(--tf-text) 80%, transparent);
		line-height: var(--tf-line-height-base);
	}

	/* --- Ready to elevate: boxed dark CTA panel --------------------------
	 * A plain, large, low-opacity text watermark ("TF") in the corner --
	 * deliberately not an SVG, sidestepping the sizing bug found on the
	 * Design, Launch & Growth page's decorative icon entirely.
	 */
	.tf-ops-cta-panel {
		position: relative;
		overflow: hidden;
		padding: var(--tf-space-2xl) var(--tf-space-l);
		background-color: var(--tf-surface-dark);
		border-radius: var(--tf-radius-l);
	}

	.tf-ops-cta-panel__watermark {
		position: absolute;
		inset-block-end: -0.3em;
		inset-inline-end: -0.05em;
		z-index: 0;
		font-size: 12rem;
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.05em;
		color: var(--tf-text-on-dark);
		opacity: 0.05;
		pointer-events: none;
		user-select: none;
	}

	/* Layout only -- color comes from each widget's own Elementor
	 * title_color/text_color setting, the established pattern for every
	 * other page, so it isn't duplicated (and risk conflicting) here. */
	.tf-ops-cta-panel__content {
		position: relative;
		z-index: 1;
	}

	.tf-ops-cta-panel__title {
		margin: 0 0 var(--tf-space-xs);
		font-size: var(--tf-font-size-xl);
		font-weight: 600;
	}

	.tf-ops-cta-panel__desc {
		margin: 0;
		line-height: var(--tf-line-height-base);
	}

	/* --- Shared dark-card modifier -------------------------------------
	 * Phase 19. One `.tf-card--dark` class, applied directly to specific
	 * cards in the build script (never via :nth-child -- a positional
	 * selector would silently repoint itself if a card were added,
	 * removed or reordered later; a class travels with the card it was
	 * put on). Works across all three card types on this page --
	 * service cards, methodology step cards, impact cards -- because
	 * each one already exposes the same __icon/__title/__desc naming.
	 *
	 * Declared after each component's own rules, so its background and
	 * hover-border overrides win on source order without needing higher
	 * specificity or !important.
	 */
	.tf-card--dark {
		background-color: var(--tf-accent);
		border-color: var(--tf-accent);
	}

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

	.tf-card--dark .tf-ops-service-card__icon,
	.tf-card--dark .tf-ops-step__icon,
	.tf-card--dark .tf-ops-impact-card__icon {
		color: var(--tf-color-white);
	}

	.tf-card--dark .tf-ops-service-card__title,
	.tf-card--dark .tf-ops-step__title,
	.tf-card--dark .tf-ops-impact-card__title {
		color: var(--tf-color-white);
	}

	.tf-card--dark .tf-ops-service-card__desc,
	.tf-card--dark .tf-ops-step__desc,
	.tf-card--dark .tf-ops-impact-card__desc {
		color: color-mix(in srgb, var(--tf-color-white) 75%, transparent);
	}
}