/* ═══════════════════════════════════════════════════════════
   Webverix — Services widget
   Base styles. Almost everything is overridable from the
   Elementor panel; these are the brand defaults.
   ═══════════════════════════════════════════════════════════ */

.wvx-svc-sec {
	--wvx-accent: #FF4A17;
	--wvx-text: #F4EFE4;
	--wvx-text-2: #A9A395;
	--wvx-dim: #6F695C;
	--wvx-line: rgba(244, 239, 228, 0.1);
	--wvx-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
	--wvx-hover-dur: 300ms;
	--wvx-reveal-dur: 700ms;
	--wvx-reveal-dist: 34px;
}

/* ── Section header ─────────────────────────── */
.wvx-svc-shead {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	flex-wrap: wrap;
	margin-bottom: 64px;
}
.wvx-svc-kicker {
	display: block;
	font-family: var(--wvx-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wvx-accent);
}
.wvx-svc-heading {
	margin: 12px 0 0;
	font-size: clamp(32px, 5.4vw, 64px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 0.98;
	text-transform: uppercase;
	color: var(--wvx-text);
}
.wvx-svc-heading span,
.wvx-svc-heading em {
	display: block;
}
.wvx-svc-heading em {
	font-style: normal;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wvx-text);
}
.wvx-svc-shead p {
	margin: 0;
	max-width: 38ch;
	color: var(--wvx-text-2);
	font-size: 15px;
	line-height: 1.6;
}

/* ── Stack ──────────────────────────────────── */
.wvx-svc-stack {
	display: grid;
	gap: 26px;
}

/* ── Card ───────────────────────────────────── */
.wvx-svc {
	display: grid;
	grid-template-columns: 55% 1fr;
	min-height: 380px;
	border: 1px solid var(--wvx-line);
	border-radius: 22px;
	background: linear-gradient(165deg, #16140F, #100F0B);
	overflow: hidden;
	color: var(--wvx-text);
	transition:
		border-color var(--wvx-hover-dur) ease,
		box-shadow var(--wvx-hover-dur) ease,
		transform var(--wvx-hover-dur) ease,
		background var(--wvx-hover-dur) ease;
	will-change: transform;
}
.wvx-svc:hover {
	border-color: rgba(255, 74, 23, 0.4);
}

/* Cards WITHOUT an image: clean single column, zero dead space */
.wvx-svc--no-img {
	grid-template-columns: 1fr !important;
}
.wvx-svc--no-img .wvx-svc-desc { max-width: 62ch; }

/* Scroll deck pinning (progress transforms are applied by JS) */
.wvx-svc-stack--deck .wvx-svc {
	position: sticky;
	top: calc(var(--wvx-deck-top, 100px) + var(--wvx-i, 0) * var(--wvx-deck-step, 0px));
	transform-origin: center top;
}

/* Entrance reveal */
.wvx-reveal-yes .wvx-svc {
	opacity: 0;
	translate: 0 var(--wvx-reveal-dist);
	transition:
		opacity var(--wvx-reveal-dur) ease,
		translate var(--wvx-reveal-dur) cubic-bezier(0.2, 0.7, 0.2, 1),
		border-color var(--wvx-hover-dur) ease,
		box-shadow var(--wvx-hover-dur) ease,
		transform var(--wvx-hover-dur) ease,
		background var(--wvx-hover-dur) ease;
}
.wvx-reveal-yes .wvx-svc.wvx-in {
	opacity: 1;
	translate: 0 0;
}

/* ── Content column ─────────────────────────── */
.wvx-svc-content {
	padding: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.wvx-svc-tag-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.wvx-svc-num {
	font-family: var(--wvx-mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--wvx-accent);
	font-variant-numeric: tabular-nums;
	margin-bottom: 0;
}
.wvx-svc-icon {
	display: inline-grid;
	place-items: center;
	font-size: 26px;
	padding: 11px;
	border-radius: 12px;
	color: var(--wvx-accent);
	background: rgba(255, 74, 23, 0.1);
	border: 1px solid rgba(255, 74, 23, 0.25);
	line-height: 1;
	transition: background var(--wvx-hover-dur) ease, color var(--wvx-hover-dur) ease;
}
.wvx-svc-icon svg { display: block; fill: currentColor; }
.wvx-svc-tag {
	font-family: var(--wvx-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wvx-text-2);
	border: 1px solid var(--wvx-line);
	padding: 6px 14px;
	border-radius: 99px;
}
.wvx-svc-title {
	margin: 0 0 12px;
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 850;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--wvx-text);
	transition: color var(--wvx-hover-dur) ease;
}
.wvx-svc-desc {
	margin: 0 0 22px;
	color: var(--wvx-text-2);
	font-size: 15px;
	line-height: 1.65;
	max-width: 46ch;
}
.wvx-svc-feat {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 9px;
}
.wvx-svc-feat li {
	font-family: var(--wvx-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wvx-text-2);
	display: flex;
	gap: 10px;
	align-items: baseline;
	line-height: 1.5;
}
.wvx-svc-feat li::before {
	content: "▸";
	color: var(--wvx-accent);
	font-size: 10px;
	flex: none;
}
.wvx-svc-btn-row { margin-top: 4px; }
.wvx-svc-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-family: var(--wvx-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wvx-accent);
	border: 1px solid var(--wvx-accent);
	background: transparent;
	padding: 13px 24px;
	border-radius: 99px;
	transition:
		background var(--wvx-hover-dur) ease,
		color var(--wvx-hover-dur) ease,
		border-color var(--wvx-hover-dur) ease,
		box-shadow var(--wvx-hover-dur) ease;
}
.wvx-svc-btn:hover {
	background: var(--wvx-accent);
	color: #0B0A08;
}
.wvx-svc-btn-arrow {
	font-style: normal;
	transition: transform var(--wvx-hover-dur) ease;
}
.wvx-svc-btn:hover .wvx-svc-btn-arrow { transform: translateX(4px); }

/* ── Media column ───────────────────────────── */
.wvx-svc-media {
	position: relative;
	min-width: 0;
	border-left: 1px solid var(--wvx-line);
	border-style: none none none solid;
	overflow: hidden;
	display: flex;
}
.wvx-svc-img {
	flex: 1;
	overflow: hidden;
	position: relative;
}
.wvx-svc-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform calc(var(--wvx-hover-dur) * 3) cubic-bezier(0.2, 0.7, 0.2, 1), filter var(--wvx-hover-dur) ease;
}
/* Image hover effects */
.wvx-imgfx-zoom .wvx-svc:hover .wvx-svc-img img {
	transform: scale(calc(1 + var(--wvx-imgfx, 8) / 100));
}
.wvx-imgfx-scroll .wvx-svc:hover .wvx-svc-img img {
	transform: translateY(calc(-1% * var(--wvx-imgfx, 8)));
}

/* Image on the left variant */
.wvx-svcimg-left .wvx-svc--has-img .wvx-svc-content { order: 2; }
.wvx-svcimg-left .wvx-svc--has-img .wvx-svc-media {
	order: 1;
	border-style: none solid none none;
}

/* ── Tablet ─────────────────────────────────── */
@media (max-width: 1024px) {
	.wvx-svc-content { padding: 34px; }
	/* "Disable deck on tablet" switch */
	.wvx-deck-tab-off-yes .wvx-svc-stack--deck .wvx-svc { position: static; }
}

/* ── Mobile ─────────────────────────────────── */
@media (max-width: 767px) {
	.wvx-svc {
		grid-template-columns: 1fr !important;
		min-height: 0;
	}
	.wvx-svc-content { padding: 28px 24px; }
	.wvx-svc--has-img .wvx-svc-media {
		order: 2;
		min-height: 220px;
		border-style: solid none none none;
	}
	.wvx-svcimg-left .wvx-svc--has-img .wvx-svc-content { order: 1; }
	/* "Disable deck on mobile" switch */
	.wvx-deck-mob-off-yes .wvx-svc-stack--deck .wvx-svc { position: static; }
}

/* ── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.wvx-svc,
	.wvx-svc-img img,
	.wvx-svc-title,
	.wvx-svc-btn,
	.wvx-svc-btn-arrow {
		transition: none !important;
	}
	.wvx-reveal-yes .wvx-svc {
		opacity: 1;
		translate: 0 0;
	}
}