/* Haul Pros — small extras that Elementor's controls don't cover. */

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 100px; }
body { -webkit-font-smoothing: antialiased; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor p { margin-top: 0; }

/* Sticky header */
.jb-header { position: sticky !important; top: 0; z-index: 99 !important; border-bottom: 1px solid rgba(0,0,0,.06); }
.admin-bar .jb-header { top: 32px; }
.jb-logo img { display: block; height: auto; }
.jb-nav-link a { color: inherit; transition: color .2s; }
.jb-nav-link a:hover { color: #f07800; }

/* Menu button and drop-down for phones and tablets (built by haul-pros.js) */
.jb-burger { display: none; }
.jb-menu { display: none; }
@media (max-width: 1024px) {
	.jb-header-bar { gap: 12px !important; }
	.jb-burger {
		display: inline-flex; align-items: center; justify-content: center; flex: none;
		width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px;
		background: #eaf5fa; color: #0b2559; cursor: pointer;
	}
	/* Keep the theme's pink button hover/focus colors off the menu button. */
	.jb-burger:hover, .jb-burger:focus, .jb-burger:active { background: #d6ecf5 !important; color: #0b2559 !important; }
	.is-menu-open .jb-burger, .is-menu-open .jb-burger:hover, .is-menu-open .jb-burger:focus { background: #0b2559 !important; color: #fff !important; }
	.jb-burger:focus-visible { outline: 3px solid #f07800; outline-offset: 2px; }
	.jb-burger-lines, .jb-burger-lines::before, .jb-burger-lines::after {
		display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor;
		transition: transform .25s, background .25s;
	}
	.jb-burger-lines { position: relative; }
	.jb-burger-lines::before, .jb-burger-lines::after { content: ""; position: absolute; left: 0; }
	.jb-burger-lines::before { top: -6px; }
	.jb-burger-lines::after { top: 6px; }
	.is-menu-open .jb-burger-lines { background: transparent; }
	.is-menu-open .jb-burger-lines::before { transform: translateY(6px) rotate(45deg); }
	.is-menu-open .jb-burger-lines::after { transform: translateY(-6px) rotate(-45deg); }
	.jb-menu {
		display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
		padding: 8px 24px 24px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.06);
		box-shadow: 0 24px 40px rgba(11,37,89,.12);
		max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .2s, transform .2s, visibility 0s .2s;
	}
	.is-menu-open .jb-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
	.jb-menu a {
		display: flex; align-items: center; min-height: 52px; color: #0b2559; font-size: 18px; font-weight: 500;
		border-bottom: 1px solid rgba(11,37,89,.08);
	}
	.jb-menu a[aria-current] { color: #f07800; }
	.jb-menu a.jb-menu-cta {
		justify-content: center; margin-top: 20px; border: 0; border-radius: 12px;
		background: #f07800; color: #fff; font-size: 16px;
	}
	/* Bigger touch areas without changing the layout */
	.elementor-heading-title a, .elementor-icon-list-item > a, .elementor-widget-text-editor a[href^="tel:"],
	.elementor-widget-text-editor a[href^="mailto:"] { display: inline-block; padding-block: 10px; margin-block: -10px; }
	.elementor-icon-list-item > a { display: flex; }
}

/* Buttons */
.jb-btn .elementor-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s, transform .2s; }
.jb-btn .elementor-button:hover { transform: translateY(-1px); }
.jb-btn-light .elementor-button { box-shadow: 0 2px 8px rgba(11,37,89,.1); }

/* Hero */
.jb-avatars { display: flex; margin: 0; }
.jb-avatars-w { flex-shrink: 0 !important; width: auto !important; }
.jb-avatars-w .jb-avatars img { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #eaf5fa; margin-left: -10px; }
.jb-avatars-w .jb-avatars img:first-child { margin-left: 0; }
.jb-stars { margin: 0; letter-spacing: 2px; }
.jb-hero-text { max-width: 600px; }
.jb-hero-media { position: relative; }
.jb-badge {
	position: absolute !important; left: -48px; bottom: 40px; width: auto !important;
	box-shadow: 0 2px 8px rgba(11,37,89,.1);
}
.jb-badge .elementor-icon { border-radius: 10px; }
.jb-badge h6 { white-space: nowrap; }

/* Cards */
.jb-card { transition: transform .25s, box-shadow .25s; }
.jb-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(11,37,89,.08); }
.jb-card .elementor-icon { border-radius: 10px; }
.jb-arrow-link a { display: inline-flex; gap: 8px; align-items: center; color: inherit; }
.jb-arrow-link i { font-size: .8em; transition: transform .2s; }
.jb-arrow-link a:hover { color: #f07800; }
.jb-arrow-link a:hover i { transform: translateX(3px); }

/* Team: name card sits inside the bottom of the photo */
.jb-team { position: relative; overflow: hidden !important; border-radius: 20px; }
.jb-team img { transition: transform .5s; }
.jb-team:hover img { transform: scale(1.03); }
.jb-team-info { position: absolute !important; left: 12px; right: 12px; bottom: 12px; width: auto !important; }

/* Process numbers (navy, from the logo) */
.jb-step-num .elementor-heading-title {
	width: 48px; height: 48px; border-radius: 50%; background: #0b2559; display: grid; place-items: center;
}

/* Testimonials: two rows scrolling in opposite directions */
.jb-reviews-section > .e-con-inner > .e-con:first-child { padding-left: 24px; padding-right: 24px; }
.jb-marquee { overflow: hidden !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.jb-track { width: max-content !important; flex-wrap: nowrap !important; padding-right: 24px !important; }
.jb-review { width: 450px !important; flex-shrink: 0; }
.jb-avatar img { width: 56px !important; height: 56px !important; border-radius: 50% !important; object-fit: cover; }
.jb-avatar { width: 56px !important; flex-shrink: 0; }
.jb-marquee.is-running .jb-track { animation: jb-scroll 60s linear infinite; }
.jb-marquee.is-running .jb-track-rev { animation-direction: reverse; }
.jb-marquee:hover .jb-track { animation-play-state: paused; }
@keyframes jb-scroll { to { transform: translateX(-50%); } }

/* Gallery + blog images */
.jb-post img, .elementor-widget-image img { display: block; }
.jb-post .elementor-heading-title a { color: inherit; }
.jb-post .elementor-heading-title a:hover { color: #f07800; }

/* Before / after slider. Layered only once the page script runs (is-ready); in the editor the
   two photos simply stack. --pos is how much of the "before" photo shows, from the left. */
.jb-ba.is-ready {
	--pos: 50%; display: block !important; position: relative; aspect-ratio: 3 / 2; overflow: hidden !important;
	border-radius: 24px; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
	box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.jb-ba.is-ready > .elementor-element { position: absolute !important; inset: 0; width: 100% !important; margin: 0 !important; }
.jb-ba.is-ready .elementor-widget-container, .jb-ba.is-ready .elementor-image { height: 100%; }
.jb-ba.is-ready img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; pointer-events: none; -webkit-user-drag: none; }
.jb-ba.is-ready .jb-ba-after { clip-path: inset(0 0 0 var(--pos)); }
.jb-ba.is-ready > .jb-ba-label { inset: 20px auto auto auto; width: auto !important; z-index: 2; pointer-events: none; }
.jb-ba.is-ready > .jb-ba-label-before { left: 20px; }
.jb-ba.is-ready > .jb-ba-label-after { right: 20px; }
.jb-ba-label .elementor-heading-title {
	padding: 9px 14px; border-radius: 999px; background: rgba(11,37,89,.7);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.jb-ba-label-after .elementor-heading-title { background: #f07800; }
.jb-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 3; outline: none; }
.jb-ba-handle::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff;
	box-shadow: 0 0 14px rgba(0,0,0,.35);
}
.jb-ba-knob {
	position: absolute; top: 50%; left: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
	background: #fff; color: #0b2559; display: flex; align-items: center; justify-content: center; gap: 6px;
	font: 700 22px/1 "Inter", sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: transform .2s, box-shadow .2s;
}
.jb-ba:hover .jb-ba-knob, .jb-ba.is-dragging .jb-ba-knob { transform: scale(1.08); }
.jb-ba-handle:focus-visible .jb-ba-knob { box-shadow: 0 0 0 4px #f07800, 0 6px 20px rgba(0,0,0,.3); }

/* FAQ */
.jb-faq .elementor-accordion-item {
	background: transparent; border-radius: 16px !important; margin-bottom: 12px; overflow: hidden; border: 0 !important;
}
.jb-faq .elementor-tab-title { border: 0 !important; }
.jb-faq .elementor-tab-content { border: 0 !important; }

/* Service detail: quick facts with dividers */
.jb-svc-stat { padding: 0 32px; }
.jb-svc-stat + .jb-svc-stat { border-left: 1px solid rgba(11,37,89,.12); }

/* Blog article body */
.jb-article { color: #4a5568; }
.jb-article h2 {
	font-family: "Plus Jakarta Sans", sans-serif; font-size: 28px; line-height: 1.25; font-weight: 700;
	color: #0b2559; margin: 48px 0 16px;
}
.jb-article p, .jb-article ul { margin: 0 0 20px; }
.jb-article ul { padding-left: 1.2em; }
.jb-article li { margin-bottom: 10px; }
.jb-article li::marker { color: #f07800; }
.jb-article strong { color: #0b2559; }
.jb-article a { color: #f07800; text-decoration: underline; text-underline-offset: 3px; }
.jb-article blockquote {
	margin: 32px 0; padding: 20px 28px; border-left: 4px solid #f07800; background: #eaf5fa;
	border-radius: 0 16px 16px 0; font-size: 20px; color: #0b2559; font-style: normal;
}
.jb-article blockquote p { margin: 0; }

/* Quote form */
.jb-form { display: grid; gap: 16px; margin: 0; }
.jb-form label { display: block; margin: 0; }
.jb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jb-form input, .jb-form select, .jb-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: #0b2559;
	background: #eaf5fa; border: 1px solid rgba(11,37,89,.12); border-radius: 12px; padding: 14px 16px;
	transition: border-color .2s, box-shadow .2s;
}
.jb-form select { appearance: auto; }
.jb-form textarea { resize: vertical; min-height: 140px; }
.jb-form input:focus, .jb-form select:focus, .jb-form textarea:focus {
	outline: none; border-color: #f07800; box-shadow: 0 0 0 3px rgba(240,120,0,.15);
}
.jb-form[hidden], .jb-form-done[hidden] { display: none; }
.jb-form-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jb-form-submit {
	width: 100%; min-height: 52px; border: 0; border-radius: 12px; background: #f07800; color: #fff;
	font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; transition: background .2s, transform .2s;
}
.jb-form-submit:hover { background: #0b2559; transform: translateY(-1px); }
.jb-form-done { text-align: center; padding: 24px 0; color: #4a5568; }
.jb-form-done strong { display: block; font-size: 22px; color: #0b2559; margin-bottom: 8px; }
.jb-form-error { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #fdecea; color: #a12a1a; }

/* Footer */
.jb-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.jb-social .elementor-social-icon { background: rgba(255,255,255,.1) !important; }
.jb-social .elementor-social-icon:hover { background: #f07800 !important; }

/* Scroll-in animations. Hidden only once the page script has confirmed it is running (html.jb-js),
   so content is never stuck invisible. "backwards" fill releases the element after it plays,
   which keeps the card hover effects working. */
.jb-anim { --jb-y: 32px; --jb-s: 1; }
.jb-anim-up-sm { --jb-y: 20px; }
.jb-anim-down { --jb-y: -16px; }
.jb-anim-rise { --jb-y: 80px; }
.jb-anim-drop { --jb-y: -80px; }
.jb-anim-pop { --jb-y: 24px; --jb-s: .97; }
.jb-anim-fade { --jb-y: 0px; }
.jb-js .jb-anim:not(.is-in), .jb-js .jb-words:not(.is-split) { opacity: 0; }
.jb-js .jb-anim.is-in { animation: jb-in .9s cubic-bezier(.22, 1, .36, 1) var(--jb-d, 0s) backwards; }
@keyframes jb-in { from { opacity: 0; transform: translateY(var(--jb-y)) scale(var(--jb-s)); } }

/* Headlines: words blur in one after another */
.jb-word { display: inline-block; }
.jb-js .jb-words:not(.is-in) .jb-word { opacity: 0; }
.jb-js .jb-words.is-in .jb-word {
	animation: jb-word .8s cubic-bezier(.22, 1, .36, 1) calc(var(--jb-d, 0s) + var(--i) * 70ms) backwards;
}
@keyframes jb-word { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } }

/* Buttons: letters roll up on hover (a copy of each letter waits just below, drawn with text-shadow) */
.jb-roll { display: inline-flex; overflow: hidden; vertical-align: top; margin: -.1em 0; }
.jb-roll > span {
	display: block; white-space: pre; line-height: 1.2em; text-shadow: 0 1.2em 0 currentColor;
	transition: transform .5s cubic-bezier(.65, 0, .35, 1) calc(var(--i) * 18ms);
}
.jb-btn .elementor-button:hover .jb-roll > span,
.jb-btn .elementor-button:focus-visible .jb-roll > span { transform: translateY(-1.2em); }
.elementor-editor-active .jb-anim, .elementor-editor-active .jb-words { opacity: 1 !important; animation: none !important; }

/* Mobile call bar */
.jb-callbar { display: none !important; }

@media (max-width: 1024px) {
	.jb-badge { left: 16px; bottom: 16px; }
}
@media (max-width: 767px) {
	body { padding-bottom: 72px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
	.jb-menu { padding-inline: 16px; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); }
	.jb-badge { left: 12px; right: 12px; bottom: 12px; }
	.jb-badge h6 { white-space: normal; }
	.jb-review { width: 300px !important; }
	.jb-form-row { grid-template-columns: 1fr; }
	.jb-ba.is-ready { aspect-ratio: 4 / 3; border-radius: 16px; }
	.jb-ba.is-ready > .jb-ba-label { top: 12px; }
	.jb-ba.is-ready > .jb-ba-label-before { left: 12px; }
	.jb-ba.is-ready > .jb-ba-label-after { right: 12px; }
	.jb-ba-label .elementor-heading-title { padding: 7px 11px; font-size: 11px; }
	.jb-ba-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; font-size: 18px; }
	.jb-svc-stat { padding: 16px 0; }
	.jb-svc-stat + .jb-svc-stat { border-left: 0; border-top: 1px solid rgba(11,37,89,.12); }
	.jb-callbar {
		display: flex !important; position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 100;
		background: #fff; border-top: 1px solid rgba(0,0,0,.08); padding: 10px 12px !important;
		padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
	}
	.jb-callbar-inner > .elementor-widget-button { flex: 1; }
	.jb-callbar .elementor-button { width: 100%; padding: 13px 10px; }
	.admin-bar .jb-header { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.jb-card, .jb-team img { transition: none; }
	.jb-marquee.is-running .jb-track { animation: none; }
	.jb-marquee { overflow-x: auto !important; }
	.jb-js .jb-anim, .jb-js .jb-words, .jb-js .jb-word { opacity: 1 !important; animation: none !important; }
	.jb-roll > span { transition: none; }
}