/* =========================================================================
   Twinco Methodology Steps + Twinco Edge — port of Methodology.tsx sub-blocks
   ========================================================================= */
.elementor-widget-twinco_methodology_steps .elementor-widget-container,
.elementor-widget-twinco_edge .elementor-widget-container { padding: 0; }

/* ---- shared section shell ---- */
.twinco-msteps,
.twinco-edge {
	width: 100%;
	background-color: var(--twinco-ink);
	font-family: var(--twinco-font-sans);
}
.twinco-msteps__frame,
.twinco-edge__frame {
	position: relative;
	margin-inline: auto;
	width: 100%;
	max-width: 1440px;
	padding: 100px 80px;
}

/* =========================================================================
   Methodology Steps
   ========================================================================= */
.twinco-msteps__content { position: relative; display: flex; width: 100%; flex-direction: column; align-items: center; gap: 80px; }
.twinco-msteps__head { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.twinco-msteps__heading { width: 100%; font-size: var(--twinco-text-h1); font-weight: 700; line-height: 1; color: var(--twinco-gold); }
.twinco-msteps__sub { width: 100%; font-size: var(--twinco-text-title); color: #fff; }
.twinco-msteps__sub-normal { font-weight: 400; line-height: 1.2; }
.twinco-msteps__sub-bold { font-weight: 700; line-height: 1.2; }

.twinco-msteps__row { display: flex; width: 100%; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }

.twinco-mstep {
	display: flex;
	height: 400px;
	width: 302px;
	flex-shrink: 0;
	align-items: center;
	overflow: hidden;
	border-radius: var(--twinco-radius-card);
	padding: 24px;
	background-image:
		linear-gradient(-33.914deg, 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%);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	will-change: transform;
}
.twinco-mstep:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 34px 0 rgba(20, 123, 254, 0.28); }
.twinco-mstep__inner { display: flex; height: 100%; min-width: 1px; flex: 1; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.twinco-mstep__num { width: 100%; font-size: 40px; font-weight: 500; line-height: 1; color: #fff; }
.twinco-mstep__mid { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 24px; }
.twinco-mstep__mid-top { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 24px; }
.twinco-msteps .twinco-mstep__icon { width: 60px; height: 60px; flex-shrink: 0; display: block; transition: transform 0.3s ease; }
.twinco-mstep:hover .twinco-mstep__icon { transform: scale(1.1); }
.twinco-mstep__title { width: 222px; text-align: center; font-size: var(--twinco-text-title); font-weight: 500; line-height: 1.2; color: #fff; }
.twinco-mstep__tline { display: block; }
.twinco-msteps .twinco-mstep__divider { height: 2px; width: 100px; flex-shrink: 0; display: block; }
.twinco-mstep__desc { width: 100%; font-size: var(--twinco-text-label); font-weight: 400; line-height: 1.3; color: #fff; }
.twinco-mstep__desc p { margin: 0; }

.twinco-mstep__caret { position: relative; display: none; width: 16px; height: 16px; flex-shrink: 0; }
.twinco-mstep__caret-a { position: absolute; inset: 18.75% 31.25% 18.75% 37.5%; }
.twinco-mstep__caret-a-in { position: absolute; inset: -7.5% -15%; }
.twinco-msteps .twinco-mstep__caret img { display: block; width: 100%; height: 100%; max-width: none; }

@media (min-width: 1440px) {
	.twinco-msteps__row { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
	.twinco-mstep__caret { display: block; }
}
@media (max-width: 767.98px) {
	.twinco-msteps__frame, .twinco-edge__frame { padding: 48px 24px; }
	.twinco-mstep__num { font-size: 28px; }
}
@media (max-width: 639.98px) {
	.twinco-msteps__frame, .twinco-edge__frame { padding-left: 16px; padding-right: 16px; }
	.twinco-mstep { height: auto; width: 100%; }
}

/* =========================================================================
   Twinco Edge
   ========================================================================= */
.twinco-edge__content { position: relative; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 60px; }
.twinco-edge__head { position: relative; display: flex; width: 100%; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.twinco-edge__title { width: 100%; line-height: 1; }
.twinco-edge__title-gold { font-size: var(--twinco-text-h1); font-weight: 700; line-height: 1; color: var(--twinco-gold); }
.twinco-edge__title-white { font-size: var(--twinco-text-h1); font-weight: 400; line-height: 1; color: #fff; }
.twinco-edge__subtitle { width: 100%; font-size: var(--twinco-text-title); font-weight: 400; line-height: 1.2; color: var(--twinco-fog); }

.twinco-edge__imagewrap {
	position: relative;
	display: flex;
	height: 680px;
	width: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: var(--twinco-radius-card);
	padding: 24px;
}
.twinco-edge .twinco-edge__image {
	pointer-events: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: var(--twinco-radius-card);
	object-fit: cover;
}
.twinco-edge__cards { position: relative; display: flex; width: 100%; flex-direction: column; align-items: center; gap: 24px; }
.twinco-edge__scrim {
	pointer-events: none;
	position: absolute;
	left: 50%;
	top: -20px;
	height: 286px;
	width: 1280px;
	max-width: none;
	transform: translateX(-50%);
	border-bottom-left-radius: var(--twinco-radius-card);
	border-bottom-right-radius: var(--twinco-radius-card);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	background-image: linear-gradient(180.053deg, rgba(0, 0, 0, 0) 4.6386%, rgb(0, 0, 0) 87.545%);
}
.twinco-edge__card {
	position: relative;
	display: flex;
	min-width: 1px;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
	border-radius: 8px;
	padding: 24px;
	background-image:
		linear-gradient(-11.4959deg, 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%);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	will-change: transform;
}
.twinco-edge__card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 34px 0 rgba(20, 123, 254, 0.28); }
.twinco-edge__card-in { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 24px; }
.twinco-edge__card-top { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 16px; }
.twinco-edge .twinco-edge__b-icon { width: 40px; height: 40px; flex-shrink: 0; display: block; transition: transform 0.3s ease; }
.twinco-edge__card:hover .twinco-edge__b-icon { transform: scale(1.1); }
.twinco-edge__b-title { width: 100%; font-size: 36px; font-weight: 600; line-height: 1; color: #fff; }
.twinco-edge__b-line { display: block; }
.twinco-edge__b-desc { width: 100%; font-size: var(--twinco-text-body); font-weight: 400; line-height: 1.3; color: #fff; }

.twinco-edge__glow { pointer-events: none; position: absolute; display: flex; align-items: center; justify-content: center; height: 612.182px; width: 1172.443px; mix-blend-mode: exclusion; }
.twinco-edge__glow--a { left: 389px; top: -11px; }
.twinco-edge__glow--b { left: -442px; top: 393px; }
.twinco-edge__glow-rot { flex: none; transform: rotate(4.77deg); }
.twinco-edge__glow-box { position: relative; height: 519.666px; width: 1133.119px; }
.twinco-edge__glow-in { position: absolute; inset: -76.97% -35.3%; }
.twinco-edge .twinco-edge__glow-in img { display: block; width: 100%; height: 100%; max-width: none; }

@media (min-width: 768px) {
	.twinco-edge__cards { flex-direction: row; }
}
@media (max-width: 767.98px) {
	.twinco-edge__imagewrap { height: auto; }
	.twinco-edge__b-title { font-size: 28px; }
	/* The scrim is sized (286px tall) for the desktop single-row card layout. When the
	   cards stack on mobile they run taller than the scrim, so its hard black bottom
	   edge lands mid-section against the bright background image — a visible seam, with
	   the lower card left unreadable on the bright photo. Stretch the scrim to cover the
	   whole stacked column (image edge to edge) and darken evenly so both cards sit on a
	   consistent backdrop with no hard line. */
	.twinco-edge__scrim {
		top: -24px;
		left: -24px;
		width: calc(100% + 48px);
		height: calc(100% + 48px);
		transform: none;
		border-radius: var(--twinco-radius-card);
		background-image: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.35) 0%,
			rgba(0, 0, 0, 0.75) 45%,
			rgba(0, 0, 0, 0.85) 100%
		);
	}
}