.cue-contact-wrapper {
	/*
	 * BUG FIX: color/spacing custom properties (--cue-primary, --cue-card-bg,
	 * --cue-radius, etc.) used to be hardcoded here. Elementor sets its
	 * chosen values one level UP, on the widget's outer `.elementor-element-*`
	 * container (see get_style_depends() usage of `{{WRAPPER}}` selectors in
	 * class-contact-us-widget.php). CSS custom properties only inherit from
	 * an ancestor when the element itself has no declared value for that
	 * property — so re-declaring the same variables here on
	 * .cue-contact-wrapper permanently blocked Elementor's inherited value,
	 * no matter what the user picked in the Style tab.
	 *
	 * Fix: don't declare defaults here at all. Instead every var(--cue-x)
	 * usage below now carries its own fallback, e.g. var(--cue-primary, #0f5c52).
	 * That way Elementor's value (set on the ancestor) is free to inherit
	 * down, and the fallback only kicks in if nothing ever set the variable.
	 */
	box-sizing: border-box;
}
.cue-contact-wrapper *,
.cue-contact-wrapper *::before,
.cue-contact-wrapper *::after {
	box-sizing: border-box;
}

.cue-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.cue-reveal.cue-show { opacity: 1; transform: translateY(0); }

/* Info cards */
.cue-info-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cue-gap, 20px);
	margin-bottom: 26px;
}
.cue-info-card {
	background: var(--cue-card-bg, #faf7f1);
	border-radius: var(--cue-radius, 14px);
	padding: 24px 22px;
	box-shadow: 0 10px 26px rgba(0,171,158,0.18), 0 2px 6px rgba(0,0,0,0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cue-info-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 36px rgba(0,171,158,0.26), 0 4px 10px rgba(0,0,0,0.06);
}
.cue-icon-circle {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--cue-icon-bg, #dcefe9);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	transition: transform 0.4s ease, background 0.4s ease;
	font-size: 22px;
	color: var(--cue-primary, #0f5c52);
}
.cue-info-card:hover .cue-icon-circle {
	transform: rotate(-8deg) scale(1.08);
}
.cue-icon-circle svg { width: 24px; height: 24px; fill: currentColor; }
.cue-icon-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--cue-primary, #0f5c52); display: block; }

.cue-info-card h4.cue-heading {
	font-size: 16px;
	color: var(--cue-heading, #16302c);
	margin: 0 0 8px;
	font-weight: 700;
}
.cue-info-card p.cue-body-text {
	font-size: 13.5px;
	color: var(--cue-body-text, #00AB9e);
	line-height: 1.5;
	margin: 0;
}

/* Main grid: form + connect card */
.cue-main-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--cue-gap, 20px);
	margin-bottom: var(--cue-gap, 20px);
}

.cue-form-card {
	background: var(--cue-card-bg, #faf7f1);
	border-radius: var(--cue-radius, 14px);
	padding: 36px;
}
.cue-form-card h2.cue-heading {
	font-size: 26px;
	color: var(--cue-heading, #16302c);
	margin: 0 0 10px;
}
.cue-underline {
	width: 46px;
	height: 3px;
	background: var(--cue-primary, #0f5c52);
	border-radius: 2px;
	margin-bottom: 26px;
}
.cue-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}
.cue-field { margin-bottom: 14px; }

.cue-contact-form input,
.cue-contact-form textarea {
	width: 100%;
	border: 1px solid #e2e8e6;
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 14px;
	font-family: inherit;
	background: #fbfdfc;
	outline: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cue-contact-form input::placeholder,
.cue-contact-form textarea::placeholder { color: #9aa8a6; }
.cue-contact-form input:focus,
.cue-contact-form textarea:focus {
	border-color: var(--cue-primary, #0f5c52);
	box-shadow: 0 0 0 3px rgba(15,92,82,0.12);
}
.cue-contact-form textarea { min-height: 110px; resize: vertical; margin-bottom: 22px; }

.cue-send-btn {
	width: 100%;
	background: var(--cue-btn-bg, #0f5c52);
	color: var(--cue-btn-text, #faf7f1);
	border: 1.5px solid var(--cue-btn-text, #faf7f1);
	border-radius: 10px;
	padding: 15px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.cue-send-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(15,92,82,0.25);
	filter: brightness(0.92);
}
.cue-send-btn svg { width: 17px; height: 17px; fill: var(--cue-btn-text, #faf7f1); transition: transform 0.3s ease; }
.cue-send-btn:hover svg { transform: translateX(4px) rotate(10deg); }
.cue-form-status { margin-top: 12px; font-size: 13.5px; text-align: center; }

/* Connect card */
.cue-connect-card {
	position: relative;
	border-radius: var(--cue-radius, 14px);
	overflow: hidden;
	min-height: 100%;
	background: linear-gradient(160deg, var(--cue-connect-start, #123f3a) 0%, var(--cue-connect-end, #0b2e2b) 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
}
.cue-connect-text { padding: 34px 32px 20px; z-index: 2; }
.cue-connect-text h2.cue-heading { font-size: 24px; margin: 0 0 12px; color: #faf7f1; }
.cue-connect-text p.cue-body-text { font-size: 13.5px; line-height: 1.6; color: #d7e6e2; max-width: 320px; margin: 0; }

.cue-connect-img-wrap {
	position: relative;
	width: 100%;
	height: 320px;
	overflow: hidden;
}
.cue-connect-img-wrap img {
	--cue-img-scale: 1.08;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transform: scale(var(--cue-img-scale));
	transition: transform 6s ease;
}
.cue-connect-card:hover .cue-connect-img-wrap img {
	transform: scale(calc(var(--cue-img-scale) - 0.08));
}
.cue-connect-img-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11,46,43,0.7), transparent 55%);
}

/* Footer bar */
.cue-footer-bar {
	background: var(--cue-footer-bg, #00AB9e);
	border-radius: var(--cue-radius, 14px);
	padding: 26px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
}
.cue-footer-left { display: flex; align-items: center; gap: 18px; }
.cue-footer-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #d1e6df;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 20px;
	color: var(--cue-primary, #0f5c52);
}
.cue-footer-icon svg { width: 22px; height: 22px; fill: currentColor; }
.cue-footer-left h4.cue-heading { font-size: 15.5px; color: var(--cue-heading, #16302c); margin: 0 0 4px; font-weight: 800; }
.cue-footer-left p.cue-body-text { font-size: 13px; color: #faf7f1; max-width: 400px; line-height: 1.5; margin: 0; }

.cue-footer-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 1.5px solid #faf7f1;
	color: #faf7f1;
	padding: 13px 22px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.cue-footer-btn svg { width: 16px; height: 16px; stroke: var(--cue-primary, #0f5c52); transition: stroke 0.3s ease; fill: none; }
.cue-footer-btn:hover {
	background: var(--cue-primary, #0f5c52);
	color: #fff;
	transform: translateY(-2px);
}
.cue-footer-btn:hover svg { stroke: #fff; }

@media (max-width: 900px) {
	.cue-info-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.cue-main-grid { grid-template-columns: 1fr; }
	.cue-footer-bar { flex-direction: column; align-items: flex-start; }
}