/**
 * Hero button hover effects, ported from the Next.js site (.btn-teal / .btn-outline).
 * Add "btn-teal" or "btn-outline" in the Elementor button's Advanced > CSS Classes field.
 *
 * ponytail: hover state only — Elementor keeps owning the resting look.
 */

/* Hero buttons are also matched by their Elementor element ids, so the effect
   works without touching the page in the editor. */
.elementor-element-a1343c9 .elementor-button,
.elementor-element-f4db023 .elementor-button,
.btn-teal .elementor-button,
.btn-teal.elementor-button,
.btn-outline .elementor-button,
.btn-outline.elementor-button {
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	will-change: transform;
}

/* Elementor colours the label/icon separately — let them follow the button. */
.elementor-element-a1343c9 .elementor-button:hover .elementor-button-text,
.elementor-element-a1343c9 .elementor-button:hover svg,
.elementor-element-f4db023 .elementor-button:hover .elementor-button-text,
.btn-teal .elementor-button:hover .elementor-button-text,
.btn-teal .elementor-button:hover svg,
.btn-outline .elementor-button:hover .elementor-button-text {
	color: inherit !important;
	fill: currentColor !important;
}

/* Solid teal: lifts 2px and darkens. */
.elementor-element-a1343c9 .elementor-button:hover,
.elementor-element-a1343c9 .elementor-button:focus,
.btn-teal .elementor-button:hover,
.btn-teal .elementor-button:focus,
.btn-teal.elementor-button:hover,
.btn-teal.elementor-button:focus {
	background-color: #055c62 !important;
	color: #fff !important;
	transform: translateY(-2px) !important;
}

/* Ghost/outline: fills white, text flips to teal. */
.elementor-element-f4db023 .elementor-button,
.btn-outline .elementor-button,
.btn-outline.elementor-button {
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	color: #fff !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.elementor-element-f4db023 .elementor-button:hover,
.elementor-element-f4db023 .elementor-button:focus,
.btn-outline .elementor-button:hover,
.btn-outline .elementor-button:focus,
.btn-outline.elementor-button:hover,
.btn-outline.elementor-button:focus {
	background-color: #fff !important;
	color: #077e86 !important;
	border-color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element-a1343c9 .elementor-button:hover,
	.btn-teal .elementor-button:hover,
	.btn-teal.elementor-button:hover {
		transform: none !important;
	}
}