/* Orion Contact Form ("Let's Connect") — matches the real section markup
   exactly, using this project's real breakpoints:
   sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752. */

.orion-cf {
	width: 100%;
	position: relative;
	z-index: 1;
	margin-bottom: 32px;
}
@media (min-width: 769px) { .orion-cf { margin-bottom: 50px; } }
@media (min-width: 992px) { .orion-cf { margin-bottom: 60px; } }
@media (min-width: 1380px) { .orion-cf { margin-bottom: 80px; } }
@media (min-width: 1752px) { .orion-cf { margin-bottom: 100px; } }

.orion-cf__container {
	width: 100%;
	margin: 0 auto;
	/* HTML: .container.pl-0 — left pad 0 so the primary bleed reaches the edge. */
	padding: 0 16px 0 0;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}
@media (max-width: 768px) {
	/* On stacked mobile, restore horizontal inset. */
	.orion-cf__container { padding: 0 16px; }
}
@media (min-width: 640px) { .orion-cf__container { max-width: 640px; } }
@media (min-width: 769px) { .orion-cf__container { max-width: 769px; flex-direction: row; } }
@media (min-width: 992px) { .orion-cf__container { max-width: 992px; gap: 65px; } }
@media (min-width: 1199px) { .orion-cf__container { max-width: 1199px; gap: 70px; } }
@media (min-width: 1380px) { .orion-cf__container { max-width: 1380px; gap: 100px; } }
@media (min-width: 1752px) { .orion-cf__container { max-width: 1752px; gap: 120px; } }

/* Left column */
.orion-cf__left {
	position: relative;
	background-color: var(--orion-primary);
	width: 100%;
}
@media (min-width: 769px) { .orion-cf__left { width: 44%; } }
@media (min-width: 992px) { .orion-cf__left { width: 50%; } }
@media (min-width: 1199px) { .orion-cf__left { width: 32%; } }

/* Bleed the teal background past this column's own edges so it reaches
   the true left edge of the page (container has its left padding removed)
   without relying on 100vw (which risks horizontal scrollbars). */
.orion-cf__left::before,
.orion-cf__left::after {
	content: '';
	position: absolute;
	top: 0;
	width: 500%;
	height: 100%;
	background-color: var(--orion-primary);
	z-index: 0;
}
.orion-cf__left::before { left: 0; margin-left: -499%; }
.orion-cf__left::after { left: 0; margin-right: -499%; }
@media (min-width: 769px) { .orion-cf__left::after { display: none; } }

.orion-cf__left-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
/* Scoped past ".elementor img { height: auto }", which otherwise collapses
   the decorative panel art to its intrinsic ratio instead of filling. */
.orion-cf .orion-cf__left-bg img { width: 100%; height: 100% !important; object-fit: cover; }

.orion-cf__left-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 0;
}
@media (min-width: 640px) { .orion-cf__left-inner { align-items: flex-start; padding: 50px 0; } }
@media (min-width: 769px) { .orion-cf__left-inner { padding-right: 16px; } }
@media (min-width: 1199px) { .orion-cf__left-inner { padding-top: 65px; padding-bottom: 75px; } }
@media (min-width: 1380px) { .orion-cf__left-inner { padding-top: 70px; } }
@media (min-width: 1752px) { .orion-cf__left-inner { padding-top: 115px; padding-bottom: 110px; } }

/* HTML h3 schedule: 26→30→36→45; weight 500; white on primary panel. */
html body h3.orion-cf__left-title,
.orion-cf__left-title {
	color: #fff !important;
	flex-shrink: 0;
	margin: 0 0 30px;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-weight: 500 !important;
	font-size: 26px !important;
	line-height: 30px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
@media (min-width: 640px) {
	html body h3.orion-cf__left-title,
	.orion-cf__left-title { font-size: 26px !important; line-height: 32px !important; }
}
@media (min-width: 769px) {
	html body h3.orion-cf__left-title,
	.orion-cf__left-title { font-size: 30px !important; line-height: 38px !important; }
}
@media (min-width: 1199px) {
	html body h3.orion-cf__left-title,
	.orion-cf__left-title { margin-bottom: 40px; line-height: 40px !important; }
}
@media (min-width: 1380px) {
	html body h3.orion-cf__left-title,
	.orion-cf__left-title {
		margin-bottom: 44px;
		font-size: 36px !important;
		line-height: 40px !important;
	}
}
@media (min-width: 1752px) {
	html body h3.orion-cf__left-title,
	.orion-cf__left-title {
		margin-bottom: 50px;
		font-size: 45px !important;
		line-height: 60px !important;
	}
}

.orion-cf__address { margin-bottom: 28px; }
@media (min-width: 992px) { .orion-cf__address { margin-bottom: 38px; } }
@media (min-width: 1380px) { .orion-cf__address { margin-bottom: 42px; } }

.orion-cf__address-header {
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 10px;
	color: #fff;
}
@media (min-width: 640px) { .orion-cf__address-header { justify-content: flex-start; } }
@media (min-width: 1199px) { .orion-cf__address-header { gap: 16px; } }
@media (min-width: 1380px) { .orion-cf__address-header { margin-bottom: 12px; } }
@media (min-width: 1752px) { .orion-cf__address-header { margin-bottom: 15px; } }

.orion-cf__flag { width: 25px; height: 25px; object-fit: contain; }
@media (min-width: 1380px) { .orion-cf__flag { width: 27px; height: 27px; } }
@media (min-width: 1752px) { .orion-cf__flag { width: 30px; height: 30px; } }

.orion-cf__address-text,
.orion-cf__contact-item {
	display: block;
	width: 100%;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
	text-align: center;
	color: #fff;
	text-decoration: none;
}
@media (min-width: 992px) {
	.orion-cf__address-text,
	.orion-cf__contact-item { font-size: 15px; line-height: 25px; }
}
@media (min-width: 1199px) {
	.orion-cf__address-text,
	.orion-cf__contact-item { line-height: 26px; }
}
@media (min-width: 1380px) {
	.orion-cf__address-text,
	.orion-cf__contact-item { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-cf__address-text,
	.orion-cf__contact-item { font-size: 18px; line-height: 32px; }
}
@media (min-width: 640px) { .orion-cf__address-text { text-align: left; } }
@media (min-width: 769px) { .orion-cf__address-text { width: 95%; } }
@media (min-width: 992px) { .orion-cf__address-text { width: 80%; } }
@media (min-width: 1752px) { .orion-cf__address-text { width: 65%; } }
.orion-cf__address-text:hover { text-decoration: underline; color: #fff; }

/* Children stretch and are aligned by text-align, as in the reference; setting
   align-items here would shrink-wrap them and break the centred mobile layout. */
.orion-cf__contact-info { display: flex; flex-direction: column; }

.orion-cf__contact-label { font-weight: 500; margin: 0 0 8px; color: #fff; text-align: center; }
@media (min-width: 640px) { .orion-cf__contact-label { text-align: left; } }
@media (min-width: 992px) { .orion-cf__contact-label { margin-bottom: 15px; } }

@media (min-width: 640px) { .orion-cf__contact-item { text-align: left; } }
.orion-cf__contact-item:hover { text-decoration: underline; color: #fff; }

.orion-cf__social {
	display: flex;
	gap: 18px;
	margin-top: 28px;
}
@media (min-width: 640px) { .orion-cf__social { margin-top: 38px; } }
@media (min-width: 992px) { .orion-cf__social { gap: 22px; margin-top: 47px; } }
@media (min-width: 1752px) { .orion-cf__social { gap: 25px; } }

.orion-cf__social-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #fff;
	color: var(--orion-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.3s ease;
}
@media (min-width: 640px) { .orion-cf__social-icon { width: 40px; height: 40px; } }
@media (min-width: 1199px) { .orion-cf__social-icon { width: 44px; height: 44px; } }
@media (min-width: 1752px) { .orion-cf__social-icon { width: 50px; height: 50px; } }
.orion-cf__social-icon:hover { color: #000; }
.orion-cf__social-svg { width: 20px; height: 20px; fill: currentColor; }
@media (min-width: 1752px) { .orion-cf__social-svg { width: 22px; height: 22px; } }

/* Right column */
.orion-cf__right {
	background-color: #fff;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (min-width: 769px) { .orion-cf__right { width: 53%; } }
@media (min-width: 1199px) { .orion-cf__right { width: 61%; } }

.orion-cf__right-inner { margin-bottom: 0; }

/* HTML h2 schedule on form title. */
html body h2.orion-cf__right-title,
.orion-cf__right-title {
	margin: 0 0 8px;
	font-family: var(--orion-font-heading, "El Messiri", serif);
	font-weight: 500;
	font-size: 26px;
	line-height: 36px;
	color: #000;
	text-transform: none;
	letter-spacing: normal;
}
@media (min-width: 640px) {
	html body h2.orion-cf__right-title,
	.orion-cf__right-title { font-size: 30px; line-height: 40px; }
}
@media (min-width: 769px) {
	html body h2.orion-cf__right-title,
	.orion-cf__right-title { font-size: 35px; line-height: 40px; }
}
@media (min-width: 1199px) {
	html body h2.orion-cf__right-title,
	.orion-cf__right-title { font-size: 40px; line-height: 50px; }
}
@media (min-width: 1380px) {
	html body h2.orion-cf__right-title,
	.orion-cf__right-title {
		margin-bottom: 12px;
		font-size: 46px;
		line-height: 55px;
	}
}
@media (min-width: 1752px) {
	html body h2.orion-cf__right-title,
	.orion-cf__right-title { font-size: 60px; line-height: 70px; }
}

/* HTML body copy: black Lexend 300. */
.orion-cf__right-description,
.orion-svc-detail .orion-cf__right-description,
.orion-proj-detail .orion-cf__right-description {
	margin: 0 !important;
	color: #000;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 992px) {
	.orion-cf__right-description,
	.orion-svc-detail .orion-cf__right-description,
	.orion-proj-detail .orion-cf__right-description { font-size: 15px; line-height: 25px; }
}
@media (min-width: 1199px) {
	.orion-cf__right-description,
	.orion-svc-detail .orion-cf__right-description,
	.orion-proj-detail .orion-cf__right-description { line-height: 26px; }
}
@media (min-width: 1380px) {
	.orion-cf__right-description,
	.orion-svc-detail .orion-cf__right-description,
	.orion-proj-detail .orion-cf__right-description { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-cf__right-description,
	.orion-svc-detail .orion-cf__right-description,
	.orion-proj-detail .orion-cf__right-description { font-size: 18px; line-height: 32px; }
}

/* The reference groups title + subtitle in a wrapper whose bottom margin
   sets the gap to the form; CF7 owns the form element here, so the same
   schedule is carried on the form's top margin instead. */
.orion-cf__form-wrap .wpcf7-form { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 22px; }
@media (min-width: 640px) { .orion-cf__form-wrap .wpcf7-form { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1199px) { .orion-cf__form-wrap .wpcf7-form { gap: 20px; margin-top: 28px; } }
@media (min-width: 1380px) { .orion-cf__form-wrap .wpcf7-form { gap: 24px; } }
@media (min-width: 1752px) { .orion-cf__form-wrap .wpcf7-form { gap: 30px; margin-top: 38px; } }

.orion-cf__form-group { position: relative; margin: 0; }
/* CF7 auto-inserts a <br> between label and control, which adds a stray
   line-box the reference does not have. */
.orion-cf__form-group > br { display: none; }
.orion-cf__form-group--full { grid-column: 1 / -1; }

/* CF7 puts the submit in its own paragraph, so it becomes a grid row and picks
   up the row gap on top of the button's own margin. The reference places the
   button outside the grid, so the gap is cancelled back out here. */
.orion-cf__form-group:has(.orion-cf__submit-btn) { margin-top: -15px; }
@media (min-width: 1199px) { .orion-cf__form-group:has(.orion-cf__submit-btn) { margin-top: -20px; } }
@media (min-width: 1380px) { .orion-cf__form-group:has(.orion-cf__submit-btn) { margin-top: -24px; } }
@media (min-width: 1752px) { .orion-cf__form-group:has(.orion-cf__submit-btn) { margin-top: -30px; } }

.orion-cf__label { display: block; margin-bottom: 6px; color: #000; }
@media (min-width: 1199px) { .orion-cf__label { margin-bottom: 12px; } }

.orion-cf__input,
.orion-cf__textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #000;
	outline: none;
	background: transparent;
	font-family: inherit;
}
@media (min-width: 1199px) { .orion-cf__input, .orion-cf__textarea { padding: 10px 12px; } }
@media (min-width: 1752px) { .orion-cf__input, .orion-cf__textarea { padding: 14px 12px; } }
.orion-cf__input:focus,
.orion-cf__textarea:focus { border-color: var(--orion-primary); }

/* CF7 emits rows="10", which makes the intrinsic height far taller than the
   reference box; height is pinned to the min-height so the two agree while
   the field stays user-resizable. */
.orion-cf__textarea { min-height: 90px; height: 90px; resize: vertical; }
@media (min-width: 640px) { .orion-cf__textarea { min-height: 100px; height: 100px; } }
@media (min-width: 992px) { .orion-cf__textarea { min-height: 130px; height: 130px; } }
@media (min-width: 1199px) { .orion-cf__textarea { min-height: 148px; height: 148px; } }
@media (min-width: 1380px) { .orion-cf__textarea { min-height: 160px; height: 160px; } }

/* Contact Form 7's own native per-field validation tip and response
   output — replaces the old custom .orion-cf__error-message/
   .orion-cf__form-status markup, which no longer exists now that this
   widget renders a CF7 shortcode instead of a hand-built <form>. */
.orion-cf__form-wrap .wpcf7-not-valid-tip {
	color: #ef4444;
	font-size: 13px;
	margin-top: 6px;
	display: block;
}
.orion-cf__form-wrap .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 8px 0 0;
	font-size: 14px;
	padding: 10px 14px;
	border: 1px solid var(--orion-primary);
}
.orion-cf__form-wrap form.invalid .wpcf7-response-output { border-color: #ef4444; color: #ef4444; }
.orion-cf__form-wrap form.sent .wpcf7-response-output { border-color: var(--orion-primary); color: var(--orion-primary); }

/* The theme's generic ".btn" loads after the utility sheet and flattens the
   reference's responsive padding/size schedule, so it is restated here. */
.orion-cf__submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	white-space: nowrap;
	font-family: Lexend, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: normal;
	padding: 5px 16px;
	margin-top: 16px;
	border: none;
	cursor: pointer;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	border: solid;
	border-width: 1px;
}
@media (min-width: 640px) { .orion-cf__submit-btn { padding: 8px 20px; } }
@media (min-width: 1199px) { .orion-cf__submit-btn { font-size: 15px; padding: 10px 28px; margin-top: 26px; } }
@media (min-width: 1380px) { .orion-cf__submit-btn { padding: 10px 34px; } }
@media (min-width: 1752px) { .orion-cf__submit-btn { font-size: 18px; padding: 12px 40px; } }
.orion-cf__submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* CF7's spinner is only visibility-hidden, so it still reserves a line below
   the button. Taking it out of flow keeps the button row at its true height. */
.orion-cf__form-wrap .wpcf7-spinner { position: absolute; margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.orion-cf__social-icon { transition: none; }
}