/* ─────────────────────────────────────────────────────────────────────────────
   JVR Custom Elementor Widgets - Global Styles
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Overlay Card Image ─────────────────────────── */
.pp-oci {
	position: relative;
	width: 100%;
	padding: 32px 0 56px;
	overflow: visible;
}

.pp-oci__media {
	position: relative;
	margin-left: auto;
	overflow: hidden;
	z-index: 1;
}

.pp-oci__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.pp-oci__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(146,112,88,.85) 0%, rgba(43,41,48,.65) 42%, rgba(2,14,45,.90) 100%);
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
}

.pp-oci__card {
	position: absolute;
	z-index: 3;
}

.pp-oci__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height: 1.3;
	color: #C43B33;
}

.pp-oci__title {
	margin: 0 0 14px;
	font-size: 38px;
	line-height: 1.05;
	color: #fff;
}

.pp-oci__description,
.pp-oci__description p {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: #fff;
}

@media (max-width: 767px) {
	.pp-oci {
		padding-bottom: 24px;
	}
	.pp-oci--stack-mobile .pp-oci__card {
		position: relative !important;
	}
}

/* ── Badge Image ────────────────────────────────── */
.pp-badge-image-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: visible !important;
	display: flex;
	flex-direction: column;
}

.pp-badge-image-container .img-reveal-wrapper {
	position: relative;
	width: 90%;
	margin-top: 5%;
	margin-left: 0;
	margin-right: auto;
	height: 60vh;
	overflow: hidden;
}

.pp-badge-image-container .img-reveal-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.5s ease;
}

.pp-badge-image-container .badge-float {
	position: absolute;
	top: 0;
	right: 0;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: transform 0.3s ease;
}

.pp-badge-image-container .badge-float span {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.pp-badge-image-container .badge-float strong {
	font-size: 3rem;
	line-height: 1;
	margin-top: -2px;
}

.pp-badge-image-container:hover .badge-float {
	transform: scale(1.05);
}

.pp-badge-image-container:hover .img-reveal-wrapper img {
	filter: none;
}

/* ── Service Accordion ──────────────────────────── */
.elementor-widget-pp_service_accordion .pp-service-accordion {
	width: 100%;
	border-top: 1px solid rgba(10, 10, 11, 0.1);
	display: flex;
	flex-direction: column;
}

.elementor-widget-pp_service_accordion .svc-item {
	display: grid !important;
	grid-template-columns: 60px 1fr 60px !important;
	align-items: center !important;
	padding: 50px 0 !important;
	border-bottom: 1px solid rgba(10, 10, 11, 0.1);
	position: relative !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.4s ease;
	z-index: 1;
}

.elementor-widget-pp_service_accordion .svc-item:hover {
	z-index: 10;
}

.elementor-widget-pp_service_accordion .svc-num {
	font-size: 0.9rem;
	font-weight: 600;
	opacity: 0.5;
	transition: opacity 0.4s ease;
}

.elementor-widget-pp_service_accordion .svc-item:hover .svc-num {
	opacity: 1;
}

.elementor-widget-pp_service_accordion .svc-text {
	position: relative !important;
	z-index: 20 !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.elementor-widget-pp_service_accordion .svc-text h3 {
	margin: 0;
	transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	text-transform: uppercase;
	font-size: clamp(1.5rem, 4vw, 3.5rem);
	line-height: 1.1;
	color: inherit;
}

.elementor-widget-pp_service_accordion .svc-item:hover .svc-text h3 {
	transform: translateX(15px);
}

.elementor-widget-pp_service_accordion .svc-text p {
	margin: 0;
	max-width: clamp(300px, 45vw, 600px);
	opacity: 0;
	transform: translateY(15px);
	transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	max-height: 0;
	overflow: hidden;
	font-size: 1.15rem;
	line-height: 1.6;
}

.elementor-widget-pp_service_accordion .svc-arrow {
	width: 60px;
	height: 60px;
	border: 1px solid rgba(10,10,11,0.1);
	border-radius: 50%;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	z-index: 30;
	background: transparent;
}

.elementor-widget-pp_service_accordion .svc-item:hover .svc-arrow {
	transform: scale(1.1);
}

.elementor-widget-pp_service_accordion .svc-arrow svg {
	width: 16px !important;
	height: 16px !important;
	transition: transform 0.4s;
}

.elementor-widget-pp_service_accordion .svc-img-hover {
	position: absolute !important;
	right: calc(60px + 2vw) !important;
	top: 50% !important;
	transform: translate(30px, -50%) scale(0.9) !important;
	width: 32vw !important;
	max-width: 450px;
	height: 80% !important;
	min-height: 350px;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	z-index: 10 !important;
	transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
	border-radius: 2px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.elementor-widget-pp_service_accordion .svc-img-hover img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

@media (min-width: 1025px) {
	.elementor-widget-pp_service_accordion .svc-item:hover .svc-text h3 {
		transform: translateX(15px);
	}
	.elementor-widget-pp_service_accordion .svc-item:hover .svc-text p {
		opacity: 1;
		transform: translateY(0);
		max-height: 300px;
		margin-top: 25px;
	}
	.elementor-widget-pp_service_accordion .svc-item:hover .svc-arrow {
		transform: rotate(-45deg);
		border-color: rgba(10,10,11,0.5);
	}
	.elementor-widget-pp_service_accordion .svc-item:hover .svc-img-hover {
		opacity: 1 !important;
		transform: translate(0, -50%) scale(1) !important;
	}
}

@media (max-width: 1024px) {
	.elementor-widget-pp_service_accordion .svc-item {
		grid-template-columns: 40px 1fr 40px !important;
		padding: 30px 0 !important;
		align-items: flex-start !important;
	}
	.elementor-widget-pp_service_accordion .svc-num {
		margin-top: 5px;
	}
	.elementor-widget-pp_service_accordion .svc-text p {
		max-width: 100%;
		font-size: 1rem;
		line-height: 1.5;
	}
	.elementor-widget-pp_service_accordion .svc-arrow {
		width: 36px;
		height: 36px;
		margin-top: 0px;
	}
	.elementor-widget-pp_service_accordion .svc-arrow svg {
		width: 12px !important;
		height: 12px !important;
	}
	.elementor-widget-pp_service_accordion .svc-img-hover {
		position: relative !important;
		right: auto !important;
		top: auto !important;
		transform: translateY(10px) !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 0 !important;
		min-height: 0 !important;
		opacity: 0 !important;
		transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
		margin: 0 !important;
		grid-column: 1 / 4 !important;
		border-radius: 4px;
	}
	.elementor-widget-pp_service_accordion .svc-item:hover .svc-text p,
	.elementor-widget-pp_service_accordion .svc-item:active .svc-text p {
		opacity: 1;
		transform: translateY(0);
		max-height: 300px;
		margin-top: 15px;
		margin-bottom: 20px;
	}
	.elementor-widget-pp_service_accordion .svc-item:hover .svc-arrow,
	.elementor-widget-pp_service_accordion .svc-item:active .svc-arrow {
		transform: rotate(90deg);
	}
	.elementor-widget-pp_service_accordion .svc-item:hover .svc-img-hover,
	.elementor-widget-pp_service_accordion .svc-item:active .svc-img-hover {
		opacity: 1 !important;
		height: 300px !important;
		margin-top: 10px !important;
	}
}

/* ── Scroll Indicator ───────────────────────────── */
.scroll-ind {
	display: flex !important;
	width: 100% !important;
	pointer-events: none;
}

.scroll-ind-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 20px !important;
	width: fit-content !important;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease !important;
	pointer-events: auto;
}

.scroll-ind-inner:hover {
	transform: translateY(-5px) !important;
	opacity: 0.8;
}

.scroll-ind-inner span {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	writing-mode: vertical-rl;
	font-weight: 500;
	display: block;
}

.scroll-line {
	width: 1px;
	height: 100px;
	background: rgba(255, 255, 255, 0.2);
	position: relative;
	overflow: hidden;
}

.scroll-line::after {
	content: '';
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	animation: ppScrollDown 2s infinite;
}

@media (max-width: 768px) {
	.scroll-ind-inner {
		gap: 10px !important;
	}
	.scroll-line {
		height: 50px;
	}
}

.pp-anim-fade-in-up {
	animation: ppFadeInUp 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
	animation-delay: 0.5s;
}

.pp-anim-fade-in {
	animation: ppFadeIn 1.5s ease both;
}

.pp-anim-slide-reveal {
	overflow: hidden;
}

.pp-anim-slide-reveal .scroll-ind-inner {
	animation: ppSlideReveal 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes ppFadeInUp {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes ppFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ppSlideReveal {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

@keyframes ppScrollDown {
	0% { top: -100%; }
	20% { top: -100%; }
	80% { top: 100%; }
	100% { top: 100%; }
}

.elementor-widget-pp_scroll_indicator {
	width: auto;
	z-index: 10;
}

/* ── USP Marquee ────────────────────────────────── */
.metrics-strip {
	width: 100%;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: transparent;
	padding: 4vh 0;
}

.marquee-wrapper {
	width: 100%;
}

.marquee-track {
	display: flex;
	width: max-content;
	animation: ppMarquee 35s linear infinite;
	will-change: transform;
}

.metrics-strip.pause-on-hover:hover .marquee-track {
	animation-play-state: paused;
}

.marquee-content {
	display: flex;
	align-items: center;
	padding-right: 0;
	min-width: 100vw;
}

.m-stat {
	font-size: 3.5rem;
	line-height: 1;
	margin: 0 2vw;
	display: flex;
	align-items: center;
	gap: 15px;
	white-space: nowrap;
}

.m-stat span {
	font-size: 2.5rem;
}

.m-stat small {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 500;
}

.m-dot {
	font-size: 2rem;
	color: rgba(255, 255, 255, 0.3);
	margin: 0 1vw;
}

@keyframes ppMarquee {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-16.6666%, 0, 0); }
}

@media (max-width: 768px) {
	.m-stat {
		font-size: 2.5rem;
		gap: 10px;
	}
	.m-stat span {
		font-size: 1.8rem;
	}
}