/* =========================================================================
   Twinco Ready to Engineer — port of components/sections/ReadyToEngineer.tsx
   ========================================================================= */
.elementor-widget-twinco_ready_to_engineer .elementor-widget-container { padding: 0; }

.twinco-rte {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--twinco-ink);
	font-family: var(--twinco-font-sans);
}
.twinco-rte__frame {
	position: relative;
	margin-inline: auto;
	width: 100%;
	max-width: 1440px;
	padding: 100px 158px;
}

/* ---- Content row (stacked by default, side-by-side >=1024) ---- */
.twinco-rte__row {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 60px;
}
.twinco-rte__left {
	display: flex;
	width: 511px;
	max-width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	word-break: break-word;
}
.twinco-rte__heading { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; }
.twinco-rte__h1 { width: 100%; font-size: var(--twinco-text-h1); font-weight: 400; font-style: italic; line-height: 1; color: #fff; }
.twinco-rte__h2 { width: 100%; font-size: var(--twinco-text-hero); font-weight: 700; line-height: 1; color: var(--twinco-gold); }
.twinco-rte__sub { white-space: nowrap; font-size: var(--twinco-text-title); line-height: 1.2; color: var(--twinco-fog); }
.twinco-rte__sub-normal { font-weight: 400; }
.twinco-rte__sub-bold { font-weight: 700; }

/* ---- Form card ---- */
.twinco-rte__card {
	display: flex;
	width: 552px;
	max-width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	border-radius: var(--twinco-radius-card);
	padding: 24px;
	background-image:
		linear-gradient(-21.6658deg, rgba(20, 123, 254, 0.2) 2.4415%, rgba(0, 0, 0, 0.2) 73.352%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
}
.twinco-rte__form-title { width: 100%; font-size: 36px; font-weight: 400; line-height: normal; color: #fff; }
.twinco-rte__form { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 32px; }
.twinco-rte__fields { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 24px; }
.twinco-rte__field { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 8px; }
.twinco-rte__label { font-size: var(--twinco-text-label); font-weight: 500; line-height: normal; color: #fff; }
.twinco-rte .twinco-rte__input {
	width: 100%;
	border: none;
	outline: none;
	border-radius: var(--twinco-radius-card);
	background: rgba(255, 255, 255, 0.2);
	padding: 8px 12px;
	font-size: var(--twinco-text-body);
	font-weight: 400;
	line-height: normal;
	color: #fff;
	-webkit-appearance: none;
	appearance: none;
}
.twinco-rte__input::placeholder { color: #e9e9e9; opacity: 1; }
.twinco-rte__input:focus { box-shadow: 0 0 0 2px var(--twinco-sky); }
.twinco-rte__submit {
	display: flex;
	height: 40px;
	width: 100%;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--twinco-steel);
	border-radius: var(--twinco-radius-pill);
	padding: 10px 24px;
	font-size: var(--twinco-text-button);
	font-weight: 600;
	color: #fff;
	background-image: linear-gradient(160.809deg, var(--twinco-navy) 1.0434%, var(--twinco-cyan) 149.94%);
	transition: filter 0.2s ease;
}
.twinco-rte__submit:hover { filter: brightness(1.1); }

/* ---- Elementor Pro Form (when wired) — styled to match the design ---- */
.twinco-rte__proform { width: 100%; }
.twinco-rte__proform .elementor-form { display: flex; flex-direction: column; gap: 32px; }
.twinco-rte__proform .elementor-form-fields-wrapper { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.twinco-rte__proform .elementor-field-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
/* Match the Next design: white labels, translucent (20% white) rounded-card fields with
   white text. Elementor Pro paints inputs solid-white with grey labels, so force at
   (0,3,0) + !important and kill background-image. */
.twinco-rte .twinco-rte__proform .elementor-field-label {
	font-family: var(--twinco-font-inter) !important;
	font-size: var(--twinco-text-label) !important;
	font-weight: 500 !important;
	line-height: normal !important;
	color: #fff !important;
}
.twinco-rte .twinco-rte__proform .elementor-field-textual,
.twinco-rte .twinco-rte__proform input.elementor-field-textual,
.twinco-rte .twinco-rte__proform textarea.elementor-field-textual,
.twinco-rte .twinco-rte__proform select.elementor-field-textual {
	width: 100% !important;
	height: auto !important;
	border: none !important;
	outline: none !important;
	border-radius: var(--twinco-radius-card) !important;
	background-color: rgba(255, 255, 255, 0.2) !important;
	background-image: none !important;
	padding: 8px 12px !important;
	font-family: var(--twinco-font-inter) !important;
	font-size: var(--twinco-text-body) !important;
	font-weight: 400 !important;
	color: #fff !important;
	box-shadow: none !important;
}
.twinco-rte .twinco-rte__proform .elementor-field-textual::placeholder { color: #e9e9e9 !important; opacity: 1 !important; }
.twinco-rte .twinco-rte__proform .elementor-field-textual:focus {
	box-shadow: 0 0 0 2px var(--twinco-sky) !important;
	background-color: rgba(255, 255, 255, 0.2) !important;
}
/* Acceptance (privacy consent): hide the "Consent" field label, white text, white link. */
.twinco-rte .twinco-rte__proform .elementor-field-type-acceptance > .elementor-field-label { display: none !important; }
.twinco-rte .twinco-rte__proform .elementor-field-type-acceptance,
.twinco-rte .twinco-rte__proform .elementor-field-type-acceptance .elementor-field-option,
.twinco-rte .twinco-rte__proform .elementor-field-type-acceptance .elementor-field-option label,
.twinco-rte .twinco-rte__proform .elementor-field-type-acceptance span {
	color: #fff !important;
	font-family: var(--twinco-font-inter) !important;
	font-size: var(--twinco-text-label) !important;
}
.twinco-rte .twinco-rte__proform .elementor-field-type-acceptance a {
	color: #fff !important;
	text-decoration: underline !important;
}
/* Elementor Pro paints the submit button with the site Accent (pink) + its own
   radius/shadow — force our navy→cyan pill at (0,3,0) + !important (beats inline too). */
.twinco-rte .twinco-rte__proform .elementor-button,
.twinco-rte .twinco-rte__proform button[type="submit"],
.twinco-rte .twinco-rte__proform .elementor-button:hover,
.twinco-rte .twinco-rte__proform .elementor-button:focus,
.twinco-rte .twinco-rte__proform button[type="submit"]:hover {
	display: flex !important;
	height: 40px !important;
	min-height: 40px !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: var(--twinco-radius-pill) !important;
	border: 1px solid var(--twinco-steel) !important;
	font-size: var(--twinco-text-button) !important;
	font-weight: 600 !important;
	color: #fff !important;
	background-color: transparent !important;
	background-image: linear-gradient(160.809deg, var(--twinco-navy) 1.0434%, var(--twinco-cyan) 149.94%) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: filter 0.2s ease;
}
.twinco-rte .twinco-rte__proform .elementor-button:hover { filter: brightness(1.1) !important; }

/* ---- Decorative ellipse glows ---- */
.twinco-rte__glow {
	pointer-events: none;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	mix-blend-mode: exclusion;
}
.twinco-rte__glow--right { left: 818px; top: 47px; height: 396.491px; width: 759.354px; }
.twinco-rte__glow--left { left: -371px; top: 120px; height: 353.198px; width: 676.441px; }
.twinco-rte__glow-rot { flex: none; transform: rotate(4.77deg); }
.twinco-rte__glow-box { position: relative; }
.twinco-rte__glow-box--right { height: 336.571px; width: 733.885px; }
.twinco-rte__glow-box--left { height: 299.821px; width: 653.753px; }
.twinco-rte__glow-in { position: absolute; inset: -76.97% -35.3%; }
.twinco-rte .twinco-rte__glow-in img { display: block; width: 100%; height: 100%; max-width: none; }

/* ---- Responsive ---- */
@media (min-width: 1024px) {
	.twinco-rte__row { flex-direction: row; }
}
@media (max-width: 1023.98px) {
	.twinco-rte__left,
	.twinco-rte__card { width: 100%; }
}
@media (max-width: 767.98px) {
	.twinco-rte__frame { padding: 48px 24px; }
	.twinco-rte__sub { white-space: normal; }
	.twinco-rte__form-title { font-size: 28px; }
}
@media (max-width: 639.98px) {
	.twinco-rte__frame { padding-left: 16px; padding-right: 16px; }
}