/*
 * About Us (Figma 5:895 D-EN, 7:10531 M-EN, 7:9859 D-AR, 7:10211 M-AR).
 * Base = 390 frame; from 1024px = 1440 frame. AR rules are written only where the AR frame is not
 * a plain mirror of EN (overview grid, figures, strengths order, badge, panel text).
 */

/* ---------- Shared bits ---------- */
.tec-about__h2 {
	font-size: 28px;
	font-weight: 800;
	line-height: 37.8px;
	color: var(--tec-navy);
}
.tec-about__h2--center { text-align: center; }

.tec-about__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-bottom: 24px;
}

/* Eyebrow sizes per instance: M-EN 13px (with the 36.62px pill except in Overview), M-AR 13.5px except
   Mission/Strengths (13px, ls 0.0104em); desktop 13.5px except D-EN "Success Partners" (13px). */
.tec-about .tec-label.tec-label--desktop { font-size: 13px; }
[dir="rtl"] .tec-about .tec-label.tec-label--desktop { font-size: 13.5px; }
[dir="rtl"] .tec-about .tec-label.tec-about__lbl--tight { font-size: 13px; letter-spacing: 0.0104em; }

/* ---------- Hero ---------- */
.tec-about__hero { padding-top: 4px; }
.tec-about__hero-top { display: flex; flex-direction: column; }
.tec-about__title {
	font-size: 32px;
	font-weight: 800;
	line-height: 43.2px;
	color: var(--tec-navy);
}
.tec-about__hero-text {
	padding-top: 12px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 23.63px;
	color: var(--tec-grey);
}
.tec-about__hero-media { display: flex; padding-top: 18px; }
.tec-about__hero-b { position: relative; width: 100%; padding-top: 36px; }
.tec-about__hero-b-img { height: 250px; border-radius: 16px; }
/* Arrow Size=Mobile: EN @(236,-5.75), AR @(29,-5.78) of the 350px column (not a mirror). */
.tec-about__badge { position: absolute; top: -5.75px; inset-inline-end: 30px; }
[dir="rtl"] .tec-about__badge { top: -5.78px; inset-inline-end: 29px; }

/* ---------- Overview + figures ---------- */
.tec-about__overview { padding-top: 64px; }
.tec-about__ov-text { display: flex; flex-direction: column; align-items: flex-start; }
.tec-about__ov-text > .tec-about__h2 { padding-top: 12px; }
.tec-about__ov-imgs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	align-self: stretch;
	margin-top: 20px;
}
.tec-about__ov-img--1 { height: 220px; border-radius: 16px; }
.tec-about__ov-img--2 { height: 180px; border-radius: 16px; }
.tec-about__ov-body {
	padding-top: 20px;
	font-size: 15px;
	font-weight: 400;
	line-height: 28.5px;
	color: var(--tec-grey);
}
.tec-about__ov-action { display: flex; padding-top: 20px; }

.tec-about .tec-about__figures {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin-top: 44px;
	padding: 30px 0;
	border-top: 1px solid var(--tec-border);
	border-bottom: 1px solid var(--tec-border);
	text-align: center;
}
.tec-about__fig { display: flex; flex-direction: column; align-items: center; }
/* Text boxes sit offset in their frames (number y -5/-7, labels y +3). */
.tec-about__fig-num {
	position: relative;
	top: -5px;
	height: 48px;
	font-size: 48px;
	font-weight: 800;
	line-height: 48px;
	color: var(--tec-navy);
}
.tec-about__fig-label {
	position: relative;
	top: 3px;
	height: 34.3px;
	padding-top: 8px;
	font-size: 15px;
	font-weight: 500;
	line-height: 26.25px;
	color: var(--tec-green);
}
.tec-about__fig-sub {
	position: relative;
	top: 3px;
	height: 21.88px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 21.88px;
	color: var(--tec-grey);
}

/* ---------- Mission & Vision panel ---------- */
.tec-about__mv { padding-top: 70px; }
.tec-about__panel {
	position: relative;
	overflow: hidden;
	background: var(--tec-placeholder);
	color: var(--tec-white);
}
.tec-about__panel-img { position: absolute; inset: 0; }
.tec-about__panel-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(11, 34, 56, 0.78) 0%, rgba(11, 34, 56, 0) 100%, rgba(11, 34, 56, 0) 100%);
	filter: blur(7.5px);
}
.tec-about__tabs { position: absolute; display: flex; height: 67px; }
.tec-about__tab {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 16px 8px;
	border-top: 2px solid var(--tec-white);
	color: var(--tec-white);
	text-align: start;
}
.tec-about__tab[aria-selected="true"] { border-top-color: var(--tec-green-light); }
/* Tab text is Montserrat (Latin); Arabic labels fall back to Montserrat-Arabic (C28). */
.tec-about__tab-text { font-family: var(--tec-font-latin); font-weight: 700; }
.tec-about__pc { position: absolute; display: flex; flex-direction: column; gap: 20px; }
.tec-about__pc[hidden] { display: none; }
.tec-about__pc-title {
	font-family: var(--tec-font-latin);
	font-size: 20px;
	font-weight: 800;
	line-height: 0.76em;
	color: var(--tec-white);
}
.tec-about__pc-body {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 24.3px;
	color: var(--tec-white);
}

/* Mobile: Background/Variant2 (350x470, radius 20), tabs Size=M. */
.tec-about__panel--m { height: 470px; border-radius: 20px; }
.tec-about__panel--m .tec-about__tabs { top: 24.35px; left: 20px; width: calc(100% - 41px); gap: 16px; align-items: flex-start; }
.tec-about__panel--m .tec-about__tab-text { flex: none; width: 80px; font-size: 12px; line-height: 1.07em; }
.tec-about__panel--m .tec-about__pc { left: 20px; width: calc(100% - 41px); text-align: left; }
.tec-about__panel--m .tec-about__pc--ov { top: 193px; }
.tec-about__panel--m .tec-about__pc--mi { top: 316px; }
.tec-about__panel--m .tec-about__pc--vi { top: 314px; }
/* AR (Arabic texts): right-aligned from the RTL start, every tab's text ending on the same line above the
   bottom edge (the Arabic texts differ in length from the EN ones the tops above were set for). */
[dir="rtl"] .tec-about__panel--m .tec-about__pc { top: auto; bottom: 23px; text-align: right; text-shadow: 0 1px 10px rgba(11, 34, 56, 0.55); }

/* ---------- Strengths ---------- */
.tec-about__strengths { padding-top: 70px; }
.tec-about__cards { display: flex; flex-direction: column; gap: 14px; }
.tec-about__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 22px 20px;
	border: 1px solid var(--tec-border);
	border-radius: 16px;
	background: var(--tec-white);
}
.tec-about__card-title { font-size: 18px; font-weight: 700; line-height: 24.3px; color: var(--tec-navy); }
.tec-about__card-body { max-width: 308px; font-size: 13.5px; font-weight: 400; line-height: 24.3px; color: var(--tec-grey); }

/* ---------- Tagline strip ---------- */
.tec-about__strip { padding-top: 50px; }

/* ---------- Clients ---------- */
.tec-about__clients { padding-top: 70px; }
.tec-about__head--clients { padding-bottom: 22px; }
.tec-about__logos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tec-about__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	border-radius: 10px;
	background: var(--tec-surface-2);
	font-size: 11.5px;
	font-weight: 400;
	line-height: 20.13px;
	color: var(--tec-muted-2);
	text-align: center;
}
.tec-about__logo:last-child { grid-column: 1 / -1; }
/* Preview logos: whole logo inside the tile, original colours and proportions, never stretched or cropped. */
.tec-about__logo-img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 9px 14px;
	object-fit: contain;
}

.tec-about__spacer { height: 60px; }

/* =================== Desktop (1440 frame) =================== */
@media (min-width: 1024px) {
	.tec-about__h2 { font-size: 42px; line-height: 56.7px; }
	.tec-about__head { gap: 14px; padding-bottom: 40px; }

	.tec-about .tec-label.tec-label--desktop { font-size: 13.5px; }
	[dir="rtl"] .tec-about .tec-label.tec-about__lbl--tight { font-size: 13.5px; letter-spacing: 0.01em; }
	[dir="ltr"] .tec-about .tec-label.tec-about__lbl--clients { font-size: 13px; }
	/* D-EN Overview eyebrow (5:961) has no in-flow gradient line. */
	[dir="ltr"] .tec-about__lbl--overview .tec-label__line { display: none; }

	/* Hero */
	.tec-about__hero { padding-top: 10px; }
	.tec-about__hero-top { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; }
	.tec-about__hero-head { flex: 0 1 880px; min-width: 0; }
	.tec-about__title { font-size: 56px; line-height: 75.6px; }
	.tec-about__hero-text { flex: 0 0 280px; width: 280px; padding-top: 18px; }
	.tec-about__hero-media { gap: 34px; align-items: flex-end; height: 436px; padding-top: 36px; }
	.tec-about__hero-a { flex: 0 1 480px; min-width: 0; height: 400px; border-radius: 18px; }
	.tec-about__hero-b { flex: 0 1 686px; min-width: 0; width: auto; padding-top: 44px; }
	.tec-about__hero-b-img { height: 356px; border-radius: 18px; }
	/* Arrow Size=Desk: EN @(510,6), AR @(62,-8) of the 686px column (not a mirror). */
	.tec-about__badge { top: 6px; inset-inline-end: 76px; }
	[dir="rtl"] .tec-about__badge { top: -8px; inset-inline-end: 62px; }
	/* D-AR: row centred; H1 frame 533 wide x227, its 624px text box at (-91,56) overflows to the left (C27). */
	[dir="rtl"] .tec-about__hero-top { align-items: center; }
	[dir="rtl"] .tec-about__hero-head { flex-basis: 533px; }
	[dir="rtl"] .tec-about__title { width: 624px; min-height: 227px; padding-top: 56px; }

	/* Overview */
	.tec-about__overview { padding-top: 110px; }
	.tec-about__ov-grid {
		display: grid;
		grid-template-columns: minmax(0, 520fr) minmax(0, 624fr);
		grid-template-rows: minmax(360px, auto);
		gap: 56px;
	}
	.tec-about__ov-imgs { gap: 18px; margin-top: 0; }
	.tec-about__ov-img--1 { height: 360px; border-radius: 18px; }
	.tec-about__ov-img--2 { height: 290px; border-radius: 18px; }
	.tec-about__ov-text { align-items: stretch; gap: 18px; }
	.tec-about__ov-text > .tec-label { align-self: flex-start; }
	.tec-about__ov-text > .tec-about__h2 { padding-top: 0; }
	.tec-about__ov-body { padding-top: 0; font-size: 16px; line-height: 31.2px; }
	.tec-about__ov-action { padding-top: 0; }
	/* D-AR keeps the EN column order (images left, text right). */
	[dir="rtl"] .tec-about__ov-grid { direction: ltr; }
	[dir="rtl"] .tec-about__ov-grid > * { direction: rtl; }

	.tec-about .tec-about__figures { flex-direction: row; gap: 0; margin-top: 80px; padding: 40px 0; }
	.tec-about__fig { flex: 1 1 0; min-width: 0; }
	.tec-about__fig-num { top: -7px; height: 58px; font-size: 58px; line-height: 58px; }
	.tec-about__fig-label { height: 36.3px; padding-top: 10px; }
	/* Figures are not mirrored in D-AR (8 · 3 · 2 left to right). */
	[dir="rtl"] .tec-about__figures { direction: ltr; }
	[dir="rtl"] .tec-about__fig { direction: rtl; }

	/* Mission & Vision: D-EN frame 5:1010 / D-AR Slider 1 (1200x480, radius 24). */
	.tec-about__mv { padding-top: 110px; }
	.tec-about__panel--d { height: 480px; border-radius: 24px; }
	.tec-about__panel--d .tec-about__tabs { top: 19.92px; left: 3.666667%; width: 92.666667%; gap: 40px; align-items: center; }
	.tec-about__panel--d .tec-about__tab-text { flex: 1 1 auto; min-width: 0; font-size: 20px; line-height: 0.76em; }
	/* D-EN overlay stops at 62% (5:1012); Slider 1 uses 100%. */
	[dir="ltr"] .tec-about__panel--d .tec-about__panel-shade {
		background: linear-gradient(0deg, rgba(11, 34, 56, 0.78) 0%, rgba(11, 34, 56, 0) 62%, rgba(11, 34, 56, 0) 100%);
	}
	/* Text block, every tab, both languages: the full width between the outer tab labels (52-1148 of
	   1200), ending on the same line along the bottom of the image (Overview's former bottom), from the
	   reading start (left in EN, right in AR). Figma placed Mission and Vision as narrow 480/336px (EN)
	   and 344/336px (AR) blocks under their own tabs; widened on request so they read like Overview. A
	   soft navy shadow keeps the white text clear of light areas of the grayscale photo. */
	.tec-about__panel--d .tec-about__pc {
		bottom: 65px;
		left: 4.333333%;
		width: 91.333333%;
		text-shadow: 0 1px 10px rgba(11, 34, 56, 0.55);
	}
	[dir="rtl"] .tec-about__panel--d .tec-about__pc { align-items: flex-start; text-align: right; }

	/* Strengths */
	.tec-about__strengths { padding-top: 110px; }
	/* Four equal cards (TEC_Gas_UI_Edits.pdf, edit 09): one grid row, so every card takes the tallest
	   card's height, and each card spans three shared rows (icon, title, text) through subgrid, so
	   icons, titles and texts start at the same positions in every card. */
	.tec-about__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 18px; row-gap: 0; }
	.tec-about__card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; align-items: start; justify-items: start; min-width: 0; padding: 26px 22px; border-radius: 18px; }
	.tec-about__card-title { font-size: 19px; line-height: 25.65px; }
	.tec-about__card-body { max-width: 241px; }
	/* Card order is not mirrored in D-AR (Expert Team first, left). */
	[dir="rtl"] .tec-about__cards { direction: ltr; }
	[dir="rtl"] .tec-about__card { direction: rtl; }

	.tec-about__strip { padding-top: 90px; }

	/* Clients */
	.tec-about__clients { padding-top: 110px; }
	.tec-about__head--clients { padding-bottom: 34px; }
	.tec-about__logos { display: flex; gap: 20px; }
	.tec-about__logo { flex: 1 1 0; min-width: 0; height: 80px; border-radius: 12px; font-size: 12px; line-height: 21px; }
	/* D-AR tiles keep the EN order (5a9d926b left, 7:10100); M-AR mirrors them (7:10423). */
	[dir="rtl"] .tec-about__logos { direction: ltr; }
	[dir="rtl"] .tec-about__logo { direction: rtl; }

	.tec-about__spacer { height: 110px; }
}