@layer components {
	/* About page components (Phase 10).
	 *
	 * DESIGN.md specifies "Elevation & Depth" as tonal layering rather
	 * than drop shadows: cards sit on a lighter surface with a 1px
	 * outline, and hover is signalled by a background shift or a 102%
	 * image scale — never by adding elevation. That is why nothing in
	 * this file uses box-shadow, unlike sections.css.
	 *
	 * As elsewhere, 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.
	 */

	/* --- Eyebrow label ----------------------------------------------
	 * "About Us", "Our Ecosystem" — uppercase, tracked, per the
	 * label-lg role in DESIGN.md.
	 */
	.tf-eyebrow {
		display: inline-block;
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted);
	}

	/* Arabic has no letter case and is a connected script, so tracking
	 * and uppercasing must both be removed (docs/design-system.md §23). */
	[dir="rtl"] .tf-eyebrow {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-eyebrow--on-dark {
		color: var(--tf-text-muted-on-dark);
	}

	/* --- Vision / Mission cards -------------------------------------- */
	.tf-vm-card {
		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: background-color 200ms ease;
	}

	.tf-vm-card:hover {
		background-color: var(--tf-surface-muted);
	}

	.tf-vm-card__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 3rem;
		block-size: 3rem;
		margin-block-end: var(--tf-space-s);
		border-radius: var(--tf-radius-m);
		background-color: var(--tf-surface);
		color: var(--tf-accent);
	}

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

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

	/* --- Phase header (Ten Pillars) ----------------------------------
	 * Label + title + a hairline rule that fills the remaining space.
	 */
	.tf-phase {
		display: flex;
		align-items: center;
		gap: var(--tf-space-s);
		inline-size: 100%;
	}

	.tf-phase__label {
		flex: 0 0 auto;
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted);
	}

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

	.tf-phase__title {
		flex: 0 0 auto;
		margin: 0;
		font-size: var(--tf-font-size-l);
		font-weight: 600;
		color: var(--tf-text);
	}

	/* Hairline divider — grows to fill whatever space is left, and
	 * because it is a flex child it flips sides automatically in RTL. */
	.tf-phase__rule {
		flex: 1 1 auto;
		block-size: 1px;
		min-inline-size: var(--tf-space-l);
		background-color: var(--tf-border-subtle);
	}

	/* --- Pillar card -------------------------------------------------- */
	.tf-pillar {
		block-size: 100%;
		padding: var(--tf-space-m);
		background-color: var(--tf-surface-alt);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
		transition: background-color 200ms ease, border-color 200ms ease;
	}

	.tf-pillar:hover {
		background-color: var(--tf-surface-muted);
		border-color: var(--tf-border-strong);
	}

	.tf-pillar__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--tf-space-s);
		margin-block-end: var(--tf-space-s);
	}

	.tf-pillar__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border-radius: var(--tf-radius-m);
		background-color: var(--tf-surface);
		color: var(--tf-accent);
	}

	/* Pillar numbers stay Western digits in both languages (decision
	 * D10). dir="ltr" on the element keeps "01" from being reordered
	 * inside an RTL paragraph context. */
	.tf-pillar__number {
		font-size: var(--tf-font-size-l);
		font-weight: 700;
		color: var(--tf-border-subtle);
		line-height: 1;
	}

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

	/* DESIGN.md: bullets are replaced by a custom marker in the primary
	 * dark colour. Built with a pseudo-element rather than list-style so
	 * the marker inherits brand colour and sits on the inline-start
	 * side automatically in RTL. */
	.tf-pillar__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--tf-space-3xs);
	}

	.tf-pillar__list li {
		position: relative;
		padding-inline-start: var(--tf-space-s);
		font-size: var(--tf-font-size-s);
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

	.tf-pillar__list li::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0.55em;
		inline-size: 0.375rem;
		block-size: 0.375rem;
		border-radius: var(--tf-radius-full);
		background-color: var(--tf-accent);
	}

	/* --- Collective metric tile --------------------------------------- */
	.tf-metric {
		padding: var(--tf-space-m) var(--tf-space-s);
		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: center;
	}

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

	.tf-metric__label {
		display: block;
		margin-block-start: var(--tf-space-3xs);
		font-size: var(--tf-font-size-s);
		letter-spacing: 0.05em;
		color: var(--tf-text-muted-on-dark);
	}

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

	/* --- Image-led card zoom ------------------------------------------
	 * DESIGN.md: image-led cards get a slight zoom on hover. Scoped to
	 * the About page's own figure so it cannot leak into the homepage
	 * service cards, which use the lift-and-shadow treatment instead.
	 */
	.tf-zoom {
		overflow: hidden;
		border-radius: var(--tf-radius-l);
	}

	.tf-zoom img {
		display: block;
		inline-size: 100%;
		transition: transform 300ms ease;
	}

	.tf-zoom:hover img {
		transform: scale(1.02);
	}

	/* Vision card sits on the dark surface, Mission on the light one, so
	 * the pair reads as a contrast rather than a repetition. Reuses the
	 * dark surface already used by the footer and homepage CTA rather
	 * than the mockup's own near-black, so the site keeps one dark tone.
	 */
	.tf-vm-card--dark {
		background-color: var(--tf-surface-dark);
		border-color: var(--tf-border-on-dark);
	}

	.tf-vm-card--dark:hover {
		background-color: var(--tf-accent);
	}

	.tf-vm-card--dark .tf-vm-card__icon {
		background-color: color-mix(in srgb, var(--tf-text-on-dark) 12%, transparent);
		color: var(--tf-text-on-dark);
	}

	.tf-vm-card--dark .tf-vm-card__title {
		color: var(--tf-text-on-dark);
	}

	.tf-vm-card--dark .tf-vm-card__text {
		color: var(--tf-text-muted-on-dark);
	}

	/* --- Electronic QR Menu showcase ----------------------------------
	 * New section (Phase 27): no existing "Our Services/Tech" section
	 * on this page to fold into (the pillars section is the ten-phase
	 * methodology, not a product list), so this is a standalone
	 * two-column feature per the brief. Text column left (DOM order;
	 * mirrors automatically under dir="rtl" via row layout -- no
	 * separate RTL rule needed), device mockup column right.
	 *
	 * The phone/QR graphic is hand-built from CSS + one inline SVG, not
	 * a photo: no licensed image existed for an actual QR menu on a
	 * phone, so a decorative mockup avoids both an invented product
	 * photo and an extra image request (Core Web Vitals brief).
	 *
	 * EXCEPTION to this file's no-box-shadow rule (see file header):
	 * a phone mockup reads as a physical object sitting in front of the
	 * page, not a content card, so a shadow here signals depth rather
	 * than competing with the tonal card language used elsewhere on
	 * this page. Same reasoning already applied to Home's flip cards
	 * and approved for Concept & Brand Innovation's hover state.
	 */
	.tf-qr-features {
		display: flex;
		flex-direction: column;
		gap: var(--tf-space-s);
		margin: var(--tf-space-m) 0 0;
		padding: 0;
		list-style: none;
	}

	.tf-qr-feature {
		display: flex;
		align-items: flex-start;
		gap: var(--tf-space-s);
	}

	.tf-qr-feature__icon {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		border-radius: var(--tf-radius-m);
		background-color: var(--tf-surface-muted);
		color: var(--tf-accent);
	}

	.tf-qr-feature__title {
		display: block;
		margin: 0;
		font-weight: 600;
		color: var(--tf-text);
	}

	.tf-qr-feature__desc {
		display: block;
		margin: var(--tf-space-3xs) 0 0;
		color: var(--tf-text-muted);
		font-size: var(--tf-font-size-s);
		line-height: var(--tf-line-height-base);
	}

	/* Device mockup */
	.tf-qr-mockup {
		position: relative;
		display: flex;
		justify-content: center;
		inline-size: 100%;
	}

	.tf-qr-phone {
		inline-size: clamp(220px, 22vw, 280px);
		aspect-ratio: 9 / 19;
		padding: var(--tf-space-xs);
		background-color: var(--tf-accent);
		border-radius: 2.5rem;
		box-shadow: var(--tf-shadow-l);
	}

	.tf-qr-phone__notch {
		inline-size: 30%;
		block-size: 0.4rem;
		margin: 0 auto var(--tf-space-xs);
		border-radius: var(--tf-radius-full);
		background-color: var(--tf-surface-dark);
	}

	.tf-qr-phone__screen {
		display: flex;
		align-items: center;
		justify-content: center;
		block-size: calc(100% - 1.4rem);
		padding: var(--tf-space-s);
		background-color: var(--tf-surface);
		border-radius: 1.75rem;
	}

	.tf-qr-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--tf-space-2xs);
		inline-size: 100%;
		padding: var(--tf-space-m) var(--tf-space-s);
		background-color: var(--tf-color-white);
		border-radius: var(--tf-radius-m);
		box-shadow: var(--tf-shadow-s);
		text-align: center;
	}

	.tf-qr-card__brand {
		font-size: var(--tf-font-size-s);
		font-weight: 700;
		letter-spacing: 0.08em;
		color: var(--tf-accent);
	}

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

	.tf-qr-pattern {
		inline-size: 6.5rem;
		block-size: 6.5rem;
		color: var(--tf-accent);
	}

	.tf-qr-card__caption {
		font-size: var(--tf-font-size-s);
		color: var(--tf-text-muted);
	}

	/* Floating "live" badge, positioned outside the phone's edge. */
	.tf-qr-badge {
		position: absolute;
		inset-block-start: var(--tf-space-l);
		inset-inline-end: calc(50% - clamp(220px, 22vw, 280px) / 2);
		display: flex;
		align-items: center;
		gap: var(--tf-space-3xs);
		padding: var(--tf-space-2xs) var(--tf-space-s);
		background-color: var(--tf-accent);
		color: var(--tf-color-white);
		border-radius: var(--tf-radius-full);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		box-shadow: var(--tf-shadow-m);
		white-space: nowrap;
	}

	.tf-qr-badge::before {
		content: "";
		inline-size: 0.5rem;
		block-size: 0.5rem;
		border-radius: var(--tf-radius-full);
		background-color: var(--tf-color-white);
		animation: tf-qr-pulse 2s ease-in-out infinite;
	}

	@keyframes tf-qr-pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.35; }
	}

	@media (prefers-reduced-motion: reduce) {
		.tf-qr-badge::before {
			animation: none;
		}
	}

	@media (max-width: 767px) {
		.tf-qr-badge {
			inset-inline-end: var(--tf-space-m);
		}
	}
}