/*
 * Contact Us (Figma D-EN 5:8362, M-EN 7:11417, D-AR 5:7840, M-AR 5:8622).
 * Base = 390 frame; @media (min-width: 1024px) = 1440 frame. AR frames are a mirror except where
 * an explicit [dir="rtl"] rule says otherwise (hero image row, fixed row heights, positions).
 */

/* ---------- Hero (5:8389 / 7:11428 / 5:7867 / 5:8633) ---------- */
.tec-contact__hero { padding-top: 4px; }
.tec-contact__hero-top { display: flex; flex-direction: column; }
.tec-contact__h1 {
	font-size: 32px;
	font-weight: 800;
	line-height: 43.2px;
	color: var(--tec-navy);
}
.tec-contact__intro {
	padding-top: 12px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 23.63px;
	color: var(--tec-grey);
}

.tec-contact__hero-media { padding-top: 18px; }
.tec-contact__media-a { position: relative; padding-top: 36px; }
.tec-contact__img-a { height: 250px; border-radius: 16px; }
/* Arrow EN/Mobile @(229,-5.99) of the 350 column = 37px from its right edge; AR/Mobile @(34,-6.29). */
.tec-contact__badge-m { position: absolute; top: -5.99px; right: 37px; }
[dir="rtl"] .tec-contact__badge-m { top: -6.29px; right: auto; left: 34px; }

/* ---------- Contact section (5:8420 / 7:11454 / 5:7898 / 5:8659) + spacer 60 / 110 ---------- */
.tec-contact__main { padding-top: 60px; padding-bottom: 60px; }

.tec-contact__head-inner { display: flex; flex-direction: column; }
.tec-contact__h2 {
	padding-top: 12px;
	font-size: 26px;
	font-weight: 800;
	line-height: 35.1px;
	color: var(--tec-navy);
}
.tec-contact__lead {
	padding-top: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 24.5px;
	color: var(--tec-grey);
}

/* Info card wrapper: padding-top 22, fixed height 378.6 (M-EN) / 354.1 (M-AR); the card may overflow it as in Figma. */
.tec-contact__aside { padding-top: 22px; height: 378.6px; }
[dir="rtl"] .tec-contact__aside { height: 354.1px; }

.tec-contact__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 20px;
	border-radius: 16px;
	background: var(--tec-surface);
}
.tec-contact__h3 {
	font-size: 19px;
	font-weight: 600;
	line-height: 25.65px;
	color: var(--tec-navy);
}
.tec-contact__rows { display: flex; flex-direction: column; gap: 14px; }
.tec-contact__row { display: flex; gap: 10px; align-items: flex-start; }
.tec-contact__ico { flex: none; width: 18px; height: 22px; padding-top: 4px; }
.tec-contact__txt {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 21px;
	color: var(--tec-grey);
}
.tec-contact__lbl { display: block; }
.tec-contact__val {
	display: block;
	font-size: 14px;
	line-height: 24.5px;
	color: var(--tec-navy);
}
/* M-EN address: "Address{ts2}…" in one run (no line break). */
@media (max-width: 1023.98px) {
	.tec-contact__row--inline-m .tec-contact__lbl,
	.tec-contact__row--inline-m .tec-contact__val { display: inline; }
}

/* Fixed row heights from the frames (text may overflow them, as in Figma). */
.tec-contact__row--address { height: 74px; }
[dir="rtl"] .tec-contact__row--address { height: 86px; }
[dir="rtl"] .tec-contact__row--phone { height: 59px; }

/* Phone: 123px box, label line 21px, number at y=24 (TEXT 123x25), number LEFT-aligned in AR too. */
.tec-contact__row--phone .tec-contact__txt { flex: none; width: 123px; height: 45.5px; }
.tec-contact__val--phone { margin-top: 3px; text-align: left; white-space: nowrap; }

/* ---------- Form (7:11504 / 5:8709) ---------- */
.tec-contact__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 498.5px; /* 593 in Figma, less the removed verification row (80.5 + 14 gap) */
	padding-top: 24px;
}
[dir="rtl"] .tec-contact__form { height: 531px; padding-top: 56px; } /* 616, less 71 + 14 */

.tec-contact__field { display: flex; flex-direction: column; gap: 6px; }
.tec-contact__label {
	font-size: 14px;
	font-weight: 500;
	line-height: 24.5px;
	color: var(--tec-navy);
}
.tec-contact__input {
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: var(--tec-surface);
	font-size: 14px;
	font-weight: 400;
	line-height: normal; /* lh UNKNOWN */
	color: var(--tec-navy);
	appearance: none;
}
/* Placeholder: #757575 14px; SemiBold 600 on mobile, Regular 400 on desktop (C11). */
.tec-contact__input::placeholder { color: var(--tec-muted); font-weight: 600; opacity: 1; }
/* AR inputs: alignItems flex-end (right), including the tel/email inputs browsers set LTR. */
[dir="rtl"] .tec-contact__input { text-align: right; }
.tec-contact__textarea { padding: 12px 14px; resize: none; overflow: auto; }

.tec-contact__submit { width: 100%; height: 50px; flex: none; }

/* ---------- Map (7:11536 / 5:8741) ---------- */
.tec-contact__map { padding-top: 24px; }
.tec-contact__map-bg {
	position: relative;
	overflow: hidden;
	height: 300px;
	border-radius: 16px;
	background: #E6E8E2; /* the artwork is transparent; this paints the map ground */
}
.tec-contact__map-art { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tec-contact__pin-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: max-content;
	transform: translate(-50%, -50%);
}
.tec-contact__map-card {
	width: 503px;
	padding: 10px 16px;
	border-radius: 12px;
	background: var(--tec-white);
	box-shadow: 0px 4px 18px 0px rgba(11, 34, 56, 0.12);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 23.63px;
	color: var(--tec-navy);
	text-align: center;
}
[dir="rtl"] .tec-contact__map-card { width: 337px; }
.tec-contact__map-link { font-weight: 500; color: var(--tec-green); }

/* Mobile card 273x77.5 (AR 189x77.5): line @(14,9.6), Link frame 143x35 (AR 133) @ y 32.8, centred. */
.tec-contact__map-card--m,
[dir="rtl"] .tec-contact__map-card--m {
	position: relative;
	width: 273px;
	height: 77.5px;
	padding: 0;
	font-size: 13px;
	line-height: 22.75px;
}
[dir="rtl"] .tec-contact__map-card--m { width: 189px; }
.tec-contact__map-line {
	position: absolute;
	top: 9.6px;
	left: 14px;
	width: 239px;
	text-align: left;
	white-space: nowrap;
}
[dir="rtl"] .tec-contact__map-line { left: 14px; width: 159px; text-align: center; }
.tec-contact__map-link--m {
	position: absolute;
	top: 32.8px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 143px;
	height: 35px;
	transform: translateX(-50%);
	white-space: nowrap;
}
[dir="rtl"] .tec-contact__map-link--m { width: 133px; }

.tec-contact__map-badge {
	position: absolute;
	top: 14px;
	inset-inline-start: 12px;
	height: 22px;
	padding: 0 10px;
	border-radius: 99px;
	background: rgba(11, 34, 56, 0.6);
	font-size: 11.5px;
	font-weight: 400;
	line-height: 22px;
	color: var(--tec-white);
	white-space: nowrap;
}

/* ================= Desktop (1440 frame) ================= */
@media (min-width: 1024px) {
	/* Hero */
	.tec-contact__hero { padding-top: 10px; }
	.tec-contact__hero-top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
	.tec-contact__title-col { flex: 0 0 369px; }
	[dir="rtl"] .tec-contact__title-col { flex: 0 0 auto; }
	.tec-contact__h1 { font-size: 56px; line-height: 75.6px; }
	/* D-AR H1 is 351 wide and LEFT-aligned (spec, C20). */
	[dir="rtl"] .tec-contact__h1 { width: 351px; text-align: left; }
	.tec-contact__intro { flex: 0 1 280px; padding-top: 18px; }
	[dir="rtl"] .tec-contact__intro { flex-basis: 269px; }

	.tec-contact__hero-media {
		display: flex;
		align-items: flex-end;
		gap: 34px;
		height: 436px;
		padding-top: 36px;
	}
	/* D-AR keeps Image A on the left (not mirrored in the AR frame). */
	[dir="rtl"] .tec-contact__hero-media { flex-direction: row-reverse; }
	.tec-contact__media-a { flex: 0 1 480px; min-width: 0; padding-top: 0; }
	.tec-contact__img-a { height: 400px; border-radius: 18px; }
	.tec-contact__media-b { position: relative; flex: 0 1 686px; min-width: 0; padding-top: 44px; }
	.tec-contact__img-b { height: 356px; border-radius: 18px; }
	/* Arrow EN/Desk @(522,-6.09) of the 686 column = 64px from its right; AR/Desk @(70,0). */
	.tec-contact__badge-d { position: absolute; top: -6.09px; right: 64px; }
	[dir="rtl"] .tec-contact__badge-d { top: 0; right: auto; left: 70px; }

	/* Contact section */
	.tec-contact__main { padding-top: 110px; padding-bottom: 110px; }
	/* Container padding 0 0 0 368 (EN) / 0 368 0 0 (AR) of 1200 = 30.6667%. */
	.tec-contact__head { padding-inline-start: 30.6667%; }
	.tec-contact__head-inner { gap: 14px; max-width: 832px; padding-bottom: 36px; }
	.tec-contact__h2 { padding-top: 0; font-size: 40px; line-height: 54px; }
	.tec-contact__lead { max-width: 620px; padding-top: 0; font-size: 14.5px; line-height: 25.38px; }

	.tec-contact__body { display: flex; gap: 28px; align-items: stretch; }
	.tec-contact__aside,
	[dir="rtl"] .tec-contact__aside {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 0 0 340px;
		height: auto;
		padding-top: 0;
	}
	.tec-contact__card { gap: 16px; padding: 28px; border-radius: 18px; }
	.tec-contact__h3 { font-size: 20px; line-height: 27px; }
	.tec-contact__rows { gap: 16px; }
	.tec-contact__row--address { height: 87px; }
	[dir="rtl"] .tec-contact__row--address { height: 70px; }
	[dir="rtl"] .tec-contact__row--phone { height: auto; }
	/* D-EN email TEXT sits at y 2.31 inside its 45.5 box. */
	html:not([dir="rtl"]) .tec-contact__row--email .tec-contact__txt { position: relative; top: 2.31px; }
	.tec-contact__side-img { flex: none; height: 220px; border-radius: 18px; }

	/* Form 832x632.5, free layout: absolute positions of the D-EN frame (D-AR is the mirror). */
	.tec-contact__form,
	[dir="rtl"] .tec-contact__form {
		position: relative;
		display: block;
		flex: 0 1 832px;
		min-width: 0;
		height: 436px; /* Send ends the form now (632.5 with the removed verification row) */
		padding-top: 0;
	}
	[dir="rtl"] .tec-contact__form { height: 438px; }
	.tec-contact__form > .tec-contact__field { position: absolute; top: 0; inset-inline-start: 0; width: 100%; }
	.tec-contact__form > .tec-contact__field--email { top: 96.5px; width: 49.0385%; }
	.tec-contact__form > .tec-contact__field--phone { top: 96.5px; inset-inline-start: 50.9615%; width: 49.0385%; }
	.tec-contact__form > .tec-contact__field--subject { top: 193px; }
	.tec-contact__form > .tec-contact__field--note { top: 289.5px; }
	.tec-contact__input::placeholder { font-weight: 400; }
	/* D-AR Textarea is v=hug (12px padding around one line); D-EN is fixed 40. */
	[dir="rtl"] .tec-contact__textarea { height: auto; }

	/* Send sits under the Note field with the form's 26px field spacing (the designed verification
	   row between them is removed): Note ends at 360 (EN) / 362 (AR, hug-height textarea). */
	.tec-contact__submit { position: absolute; top: 386px; left: 0; right: 0; }
	[dir="rtl"] .tec-contact__submit { top: 388px; }

	/* Map 1200x414 (padding-top 34) */
	.tec-contact__map { padding-top: 34px; }
	.tec-contact__map-bg { height: 380px; border-radius: 18px; }
	.tec-contact__pin-wrap { gap: 10px; }
}