/* =========================================================================
   Twinco Hero — pixel port of nextjs/components/sections/Hero.tsx
   Desktop-first: base = 1440 frame; collapses at 1024 / 768 / 640.
   ========================================================================= */

/* Full-bleed: neutralize Elementor's widget-container padding for this widget. */
.elementor-widget-twinco_hero .elementor-widget-container {
	padding: 0;
}

.twinco-hero,
.twinco-hero * {
	box-sizing: border-box;
}
/* Scoped reset — beat block-theme/Elementor element styles with real specificity
   (a bare :where() reset loses to the theme's `p{}` / `h1{}` rules). Every text
   node in the hero is leading-none in the source, so line-height:1 is safe here. */
.twinco-hero p,
.twinco-hero h1,
.twinco-hero h2,
.twinco-hero h3,
.twinco-hero h4,
.twinco-hero h5,
.twinco-hero h6 {
	margin: 0;
	padding: 0;
	line-height: 1;
	font-family: var(--twinco-font-sans);
	letter-spacing: normal;
	font-synthesis: none;
}
.twinco-hero a {
	text-decoration: none;
	letter-spacing: normal;
}

.twinco-hero {
	position: relative;
	display: flex;
	height: 100dvh;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
	background-color: var(--twinco-navy);
	font-family: var(--twinco-font-sans);
	letter-spacing: normal;
}

/* ---- Background (image / video) ---- */
.twinco-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	background-color: var(--twinco-navy);
	background-repeat: no-repeat;
	background-size: 165% auto;
	background-position: 82% 30%;
}
.twinco-hero__bg--video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 82% 30%;
}
.twinco-hero__bg--embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Layout frame ---- */
.twinco-hero__frame {
	position: relative;
	margin-inline: auto;
	width: 100%;
	max-width: 1440px;
}
.twinco-hero__body {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 128px;
	padding: 150px 80px 104px;
}

/* ---- Tagline ---- */
.twinco-hero__tagline {
	display: flex;
	width: 511px;
	max-width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	line-height: 1;
	word-break: break-word;
}
.twinco-hero__tagline-top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.twinco-hero__eyebrow {
	font-size: var(--twinco-text-title);
	font-weight: 400;
	background-image: linear-gradient(to bottom, var(--twinco-cream), var(--twinco-mist));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.twinco-hero__line {
	font-size: var(--twinco-text-hero);
	font-weight: 400;
	font-style: italic;
	color: #fff;
}
.twinco-hero__display {
	font-size: var(--twinco-text-display);
	font-weight: 700;
	color: var(--twinco-gold);
}

/* ---- CTA + metrics row ---- */
.twinco-hero__row {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.twinco-hero__cta {
	display: inline-flex;
	height: 40px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
	padding: 10px 22px 10px 24px;
	border: 1px solid var(--twinco-steel);
	border-radius: var(--twinco-radius-pill);
	font-size: var(--twinco-text-button);
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	--brand-angle: 132.383deg;
	transition: filter 0.2s ease;
}
.twinco-hero__cta:hover {
	filter: brightness(1.1);
}
/* Extra specificity (0,2,0) so Elementor's `.elementor img{height:auto}` (0,1,1)
   can't stretch the icon. */
.twinco-hero__cta .twinco-hero__cta-icon {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	object-fit: contain;
}

.twinco-hero__metrics {
	display: flex;
	align-items: center;
	gap: 24px;
	/* Dark frosted panel so the metrics separate from the (video) background. */
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.25);
	padding: 18px 36px;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.twinco-hero__metric-group {
	display: flex;
	align-items: center;
	gap: 24px;
}
.twinco-hero__divider {
	height: 50px;
	width: 1px;
	flex-shrink: 0;
	background: #fff;
}
.twinco-hero__metric {
	display: flex;
	width: 132px;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.twinco-hero__metric-value {
	font-size: var(--twinco-text-metric);
	font-weight: 400;
	line-height: 1;
	color: #fff;
}
.twinco-hero__metric-label {
	font-size: var(--twinco-text-body);
	font-weight: 500;
	line-height: 1;
	color: var(--twinco-silver);
}

/* =========================================================================
   Responsive ladder (desktop-first, mirrors the Tailwind max- / min- usage)
   ========================================================================= */

/* max-lg — desktop to tablet/mobile flip (1024px) */
@media (max-width: 1023.98px) {
	.twinco-hero {
		height: auto;
		min-height: 100dvh;
	}
	.twinco-hero__bg {
		background-size: cover;
		background-position: center;
	}
	.twinco-hero__bg--video {
		object-position: center;
	}
	.twinco-hero__tagline {
		width: 100%;
	}
	.twinco-hero__row {
		flex-direction: column;
		align-items: center;
		gap: 32px;
	}
}

/* max-md — tablet → mobile (768px) */
@media (max-width: 767.98px) {
	.twinco-hero__body {
		gap: 64px;
		padding: 112px 24px 104px;
	}
	/* On mobile the headline sits directly over the bright part of the hero artwork,
	   so the gold "WE SUCCEED." loses contrast. Add a soft blurred black shadow behind
	   it to lift it off the background (client request, mobile only). */
	.twinco-hero__display {
		text-shadow:
			0 2px 24px rgba(0, 0, 0, 0.8),
			0 0 46px rgba(0, 0, 0, 0.68),
			0 0 74px rgba(0, 0, 0, 0.5);
	}
}

/* max-sm — phone (640px) */
@media (max-width: 639.98px) {
	/* Fill the section and push the CTA + metrics to the bottom. */
	.twinco-hero__frame {
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	.twinco-hero__body {
		flex: 1;
		justify-content: space-between;
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 44px;
	}
	/* Metrics: one compact row (no wrap), font shrunk to fit one line. */
	.twinco-hero__metrics {
		justify-content: center;
		gap: 10px;
		border-radius: 14px;
		padding: 10px 12px;
	}
	.twinco-hero__metric-group {
		gap: 10px;
	}
	.twinco-hero__divider {
		height: 34px;
	}
	.twinco-hero__metric {
		width: auto;
		gap: 4px;
	}
	.twinco-hero__metric-value {
		font-size: 20px;
	}
	.twinco-hero__metric-label {
		font-size: 11px;
		white-space: nowrap;
	}
	/* CTA fits on one line. */
	.twinco-hero__cta {
		height: 36px;
		gap: 6px;
		padding: 8px 14px 8px 16px;
		font-size: 12px;
	}
	.twinco-hero__cta .twinco-hero__cta-icon {
		width: 18px;
		height: 18px;
		flex-basis: 18px;
	}
}

/* -------------------------------------------------------------------------
   Hebrew (RTL): the translated tagline wraps to more lines than the English
   original, which pushes the metrics + CTA row toward the hero's bottom edge
   and leaves it cramped against the next section on shorter viewports. Pull the
   content block up on desktop so the row keeps breathing room below it.
   English (LTR) is unchanged.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	[dir="rtl"] .twinco-hero__body {
		padding-top: 96px;
		gap: 72px;
	}
}