/* =====================================================================
   Site-wide hover effects (taken from the About page):
   A) "Approach" effect  — card lifts, glow border, outlined number fills with gradient, animated dashed connector
   B) "Who We Serve" effect — dark circle expands from the top-right corner, text turns white
   ===================================================================== */

/* ---------- B) Dark circle reveal ---------- */
@property --tmj-r { syntax: '<length-percentage>'; inherits: false; initial-value: -1%; }

.tmj-ucase, .tmj-load, .tmj-feat, .tmj-factor, .tmj-val, .tmj-tips li {
	--tmj-r: -1%;
	background-image: radial-gradient(circle at 92% 8%, #0F172A 0, #13233F var(--tmj-r), transparent var(--tmj-r)) !important;
	transition: --tmj-r .7s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s, border-color .35s !important;
}
.tmj-ucase:hover, .tmj-load:hover, .tmj-feat:hover, .tmj-factor:hover, .tmj-val:hover, .tmj-tips li:hover {
	--tmj-r: 160%;
	transform: translateY(-8px);
	border-color: transparent !important;
	box-shadow: 0 30px 60px rgba(15, 23, 42, .22) !important;
}
/* text flips to white / light on the dark fill */
:is(.tmj-ucase, .tmj-load, .tmj-feat, .tmj-factor, .tmj-val):hover .elementor-heading-title,
.tmj-tips li:hover strong { color: #fff !important; transition: color .35s; }
:is(.tmj-ucase, .tmj-load, .tmj-feat, .tmj-factor, .tmj-val):hover .elementor-widget-text-editor,
:is(.tmj-ucase, .tmj-load, .tmj-feat, .tmj-factor, .tmj-val):hover .elementor-widget-text-editor p,
.tmj-tips li:hover small { color: #CBD5E1 !important; transition: color .35s; }
:is(.tmj-ucase, .tmj-load, .tmj-feat, .tmj-factor, .tmj-val) .elementor-heading-title,
:is(.tmj-ucase, .tmj-load, .tmj-feat, .tmj-factor, .tmj-val) .elementor-widget-text-editor { transition: color .35s; }
/* links + meters inside load cards */
.tmj-load:hover .tmj-more a { color: #4ADE80 !important; }
.tmj-load:hover .tmj-meter { background: rgba(255, 255, 255, .14); }
.tmj-load:hover .tmj-meter__label { color: #94A3B8; }
/* icons: light-tile icons turn into green tiles on the dark fill */
.tmj-ucase:hover .elementor-icon { background: linear-gradient(135deg, #22C55E, #15803D) !important; }
.tmj-ucase:hover .elementor-icon svg { fill: #fff !important; }
.tmj-load:hover .elementor-icon { background: linear-gradient(135deg, #22C55E, #15803D) !important; }
.tmj-load:hover .elementor-icon svg { fill: #fff !important; }
.tmj-factor:hover { background-color: #0F172A !important; }
.tmj-tips li { position: relative; }
.tmj-tips li:hover .tmj-tip__ico { box-shadow: 0 0 0 6px rgba(22, 163, 74, .25); }
/* the top/bottom accent bars still play on top of the dark fill */
.tmj-feat::before, .tmj-val::after { z-index: 2; }

/* ---------- A) Approach effect ---------- */
/* Service process cards: outlined number that fills with gradient */
.tmj-pstep { transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s, border-color .35s !important; }
.tmj-pstep:hover { transform: translateY(-10px) !important; border-color: #86C99D !important; box-shadow: 0 30px 60px rgba(22, 163, 74, .16) !important; }
.tmj-pstep__num .elementor-heading-title {
	opacity: 1 !important; color: transparent !important; -webkit-text-stroke: 1.5px rgba(22, 163, 74, .45);
	background: linear-gradient(90deg, #22C55E, #0D9488); -webkit-background-clip: text; background-clip: text;
	background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .6s ease;
}
.tmj-pstep:hover .tmj-pstep__num .elementor-heading-title { background-size: 100% 100%; }
.tmj-pstep .elementor-icon { transition: box-shadow .4s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.tmj-pstep:hover .elementor-icon { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(22, 163, 74, .14), 0 12px 26px rgba(22, 163, 74, .3); }
/* animated dashed connector behind the process cards */
.elementor-element.tmj-psteps { position: relative; }
.tmj-psteps::before {
	content: ""; position: absolute; top: 62px; left: 12%; width: 76%; height: 2px; z-index: 0;
	background: repeating-linear-gradient(90deg, rgba(22, 163, 74, .5) 0 12px, transparent 12px 24px);
	animation: tmj-dash-x 1.2s linear infinite;
}
.tmj-psteps > .elementor-element { position: relative; z-index: 1; }
@keyframes tmj-dash-x { to { background-position: 24px 0; } }

/* "Every Pickup Includes" dark glass tiles */
.tmj-glass-tile { transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .35s, border-color .35s !important; }
.tmj-glass-tile:hover { transform: translateY(-10px) !important; }
.tmj-glass-tile .elementor-icon { transition: box-shadow .4s; }
.tmj-glass-tile:hover .elementor-icon { box-shadow: 0 0 0 8px rgba(22, 163, 74, .18), 0 14px 30px rgba(22, 163, 74, .45); }
.tmj-glass-tile .elementor-heading-title { transition: color .3s; }
.tmj-glass-tile:hover .elementor-heading-title { color: #4ADE80 !important; }

/* Home "How It Works" timeline: animated connector + glass card on hover + number fill */
.tmj-timeline::before { animation: tmj-dash-x 1.2s linear infinite; }
.tmj-step {
	border-radius: 24px; padding: 26px 16px 24px !important; border: 1px solid transparent;
	transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .35s, border-color .35s !important;
}
.tmj-step:hover {
	transform: translateY(-10px) !important; border-color: rgba(74, 222, 128, .45);
	background: linear-gradient(165deg, rgba(22, 163, 74, .18), rgba(255, 255, 255, .03));
}
.tmj-step__num .elementor-heading-title { transition: background .35s, color .35s; }
.tmj-step:hover .tmj-step__num .elementor-heading-title { background: linear-gradient(90deg, #22C55E, #0D9488) !important; color: #fff !important; }
.tmj-step:hover .tmj-step__dot .elementor-icon { box-shadow: 0 0 0 10px rgba(22, 163, 74, .25), 0 0 0 22px rgba(22, 163, 74, .1), 0 16px 34px rgba(22, 163, 74, .5); }

@media (max-width: 1024px) { .tmj-psteps::before { display: none; } }
@media (hover: none) {
	.tmj-ucase:hover, .tmj-load:hover, .tmj-feat:hover, .tmj-factor:hover, .tmj-val:hover, .tmj-tips li:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tmj-psteps::before, .tmj-timeline::before { animation: none; }
}