/**
 * Contact page — "Let's Talk About Your Dream Project" form section
 * (image left, eyebrow + heading + underline CF7 form right).
 *
 * Enqueued only on the Contact page (ID 69). The form is CF7 id 8, the one
 * shared with the home page CTA; this file only restyles it (.mrb-ff-grid /
 * .mrb-ff-field) for the contact layout.
 *
 * @package MRB
 */

/* Section band: standard 1344px content box, rhythm padding.
   !important beats the Elementor editor's per-page post CSS (1490px box,
   120px padding), which loads after this file. */
.elementor-section.contact-page-form-container {
	padding: 80px 0 !important;
}

/* Width and side gutter come from the site-wide content box in
   containers.css; only the vertical padding is this section's own. */
.elementor-section.contact-page-form-container > .elementor-container {
	padding-top: 0;
	padding-bottom: 0;
}

.contact-page-form-container .elementor-widget-wrap {
	padding: 0 !important;
}

/* Left image: cover the column, portrait crop like the design. */
.contact-page-form-container .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 640px;
	object-fit: cover;
}

/* The heading uses the theme's GSAP SplitText scroll reveal, which can
   leave the text invisible — force every split fragment visible. */
.contact-page-form-container .wa-split-right,
.contact-page-form-container .wa-split-right .split-line,
.contact-page-form-container .wa-split-right .split-line div,
.contact-page-form-container .wa-split-clr,
.contact-page-form-container .wa-split-clr div {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Eyebrow: star icon + "Contact Us", dark, small gap to the heading. */
.contact-page-form-container .bs-subtitle-1 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "DM Sans", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	/* !important: the theme paints .bs-subtitle-1 brand orange. */
	color: #1a1a1a !important;
	margin-bottom: 16px;
}

/* The SplitText reveal wraps each character in a div and colors it orange
   progressively — keep every fragment dark. */
.contact-page-form-container .bs-subtitle-1 div {
	color: #1a1a1a !important;
}

.contact-page-form-container .bs-subtitle-1 .icon img {
	display: block;
	width: 20px;
	height: auto;
}

/* Heading: Albert Sans 700, big and tight per the design. */
.contact-page-form-container .tx-title {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 4.5vw, 64px);
	line-height: 1.1;
	color: #1a1a1a;
	margin-bottom: 0;
}

/* 40px between the heading and the form (widget carries a 30px margin in
   the editor — normalize it). */
.contact-page-form-container .elementor-widget-shortcode {
	margin-top: 40px !important;
}

/* ---------- Form: uppercase labels over underline inputs ---------- */

.contact-page-form-container .mrb-ff-field {
	margin-bottom: 32px;
}

.contact-page-form-container .mrb-ff-field label {
	display: block;
	font-family: "DM Sans", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #1a1a1a;
	margin-bottom: 0;
}

.contact-page-form-container .wpcf7-form-control-wrap {
	display: block;
}

.contact-page-form-container .mrb-ff-field input[type="text"],
.contact-page-form-container .mrb-ff-field input[type="tel"],
.contact-page-form-container .mrb-ff-field input[type="email"],
.contact-page-form-container .mrb-ff-field textarea {
	display: block;
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #d9d9d9;
	border-radius: 0;
	padding: 14px 0;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 21px;
	color: #2d2d2d;
	outline: none;
	transition: border-color 0.3s ease;
}

.contact-page-form-container .mrb-ff-field textarea {
	height: 64px;
	min-height: 64px;
	resize: vertical;
}

.contact-page-form-container .mrb-ff-field input::placeholder,
.contact-page-form-container .mrb-ff-field textarea::placeholder {
	color: #a8a8b0;
	opacity: 1;
}

.contact-page-form-container .mrb-ff-field input:focus,
.contact-page-form-container .mrb-ff-field textarea:focus {
	border-bottom-color: #f5821f;
}

/* Submit: orange pill, uppercase, trailing arrow (inputs can't hold
   pseudo-elements, so the arrow is a background SVG). */
.contact-page-form-container .wpcf7-submit {
	display: inline-block;
	min-height: 57px;
	background-color: #f5821f;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='M12 0l-1.4 1.4L13.2 4H0v2h13.2l-2.6 2.6L12 10l5-5z' transform='translate(0 1)' fill='%23ffffff'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 28px center;
	color: #ffffff;
	border: 0;
	border-radius: 999px;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	margin-top: 8px;
	padding: 20px 58px 20px 28px;
	transition: background-color 0.3s ease;
}

.contact-page-form-container .wpcf7-submit:hover {
	background-color: #d96f12;
}

/* CF7 chrome: keep validation quiet-looking under the underline fields. */
.contact-page-form-container .wpcf7-not-valid-tip {
	font-size: 13px;
	margin-top: 4px;
}

.contact-page-form-container .wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
}

/* ---------- Contact info cards (Address / Email / Call Us) ---------- */

/* Theme ships pt-125 — use the page rhythm instead. */
.tx_contact_info .bs-core-feature-6-area {
	padding-top: 80px;
}

/* Cards sit on a light band so the three columns read as one block. Open at
   the sides — rules above and below only, so the first and last card run to
   the edge of the content box instead of being closed in by a box border. */
.tx_contact_info .bs-core-feature-6-wrap {
	background: #fafafa;
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	padding: 16px 0;
	align-items: stretch;
}

.tx_contact_info .bs-core-feature-6-wrap .bs-core-feature-4-item {
	display: flex;
	flex-direction: column;
	padding: 40px 48px;
}

/* The theme's WOW reveal freezes the first two cards mid-fade (stuck at
   ~7% opacity), leaving the addresses unreadable — pin them visible. */
.tx_contact_info .bs-core-feature-6-wrap .bs-core-feature-4-item.wow {
	animation: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* The theme's 45px/43px gaps leave the columns feeling disconnected. */
.tx_contact_info .bs-core-feature-4-item .item-title {
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #060606;
	margin-bottom: 22px;
}

.tx_contact_info .bs-core-feature-4-item .item-title:hover {
	color: #060606;
	transform: none;
}

.tx_contact_info .bs-core-feature-4-item .item-icon {
	display: flex;
	align-items: flex-end;
	min-height: 64px;
	margin-bottom: 24px;
}

.tx_contact_info .bs-core-feature-4-item .item-icon img {
	max-height: 56px;
	width: auto;
}

/* The widget outputs a <p> inside a <p>; the browser splits that into an
   empty .item-disc plus a bare sibling <p> holding the real copy. Hide the
   empty shells so they don't add stray gaps. */
.tx_contact_info .bs-core-feature-4-item > p:empty {
	display: none;
}

.tx_contact_info .bs-core-feature-4-item > p {
	font-size: 17px;
	line-height: 1.75;
	color: #4a4a4a;
	margin-bottom: 0;
}

.tx_contact_info .bs-core-feature-4-item > p p:last-child {
	margin-bottom: 0;
}

/* "Email" / "Contact" read as labels above their values, not body copy. */
.tx_contact_info .bs-core-feature-4-item > p strong {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a8a8a;
	margin-bottom: 2px;
}

/* Mail + phone links: neutral like the rest of the copy, no orange. */
.tx_contact_info .bs-core-feature-4-item > p a {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	color: #1a1a1a;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease, color 0.3s ease;
}

.tx_contact_info .bs-core-feature-4-item > p a:hover,
.tx_contact_info .bs-core-feature-4-item > p a:focus-visible {
	color: #060606;
	border-bottom-color: #060606;
}

/* The Connect column is a <br>-separated blob. Now that its labels and
   links are block-level, drop the <br>s and let margins set the rhythm.
   Scoped with :has(strong) so the address columns keep their line breaks. */
.tx_contact_info .bs-core-feature-4-item > p:has(strong) br {
	display: none;
}

/* Zeroing the font on the wrapper kills the stray whitespace text nodes
   left between the removed <br>s (children re-declare their own size). */
.tx_contact_info .bs-core-feature-4-item > p:has(strong) {
	font-size: 0;
	line-height: 0;
}

.tx_contact_info .bs-core-feature-4-item > p:has(strong) a {
	font-size: 17px;
	line-height: 1.6;
}

.tx_contact_info .bs-core-feature-4-item > p a + a {
	margin-top: 4px;
}

.tx_contact_info .bs-core-feature-4-item > p strong:not(:first-child) {
	margin-top: 22px;
}

.tx_contact_info .bs-core-feature-4-item:not(:last-child) {
	border-right: 1px solid #e4e4e4;
}

@media (min-width: 768px) and (max-width: 1399px) {
	.tx_contact_info .bs-core-feature-6-wrap .bs-core-feature-4-item {
		padding: 32px 28px;
	}
}

@media (max-width: 1199px) {
	.tx_contact_info .bs-core-feature-6-area {
		padding-top: 60px;
	}
}

/* The theme locks the cards to 3 columns at every width — stack them on
   phones with a divider between cards instead of the side borders. */
@media (max-width: 767px) {
	.tx_contact_info .bs-core-feature-6-area {
		padding-top: 40px;
	}

	.tx_contact_info .bs-core-feature-6-wrap {
		grid-template-columns: 1fr;
		padding: 8px 24px;
	}

	.tx_contact_info .bs-core-feature-6-wrap .bs-core-feature-4-item {
		padding: 28px 0;
	}

	.tx_contact_info .bs-core-feature-6-wrap .bs-core-feature-4-item:not(:last-child) {
		border-right: none;
		border-bottom: 1px solid #e4e4e4;
	}

	/* Compress the theme's 45/43px gaps under the title and icon. */
	.tx_contact_info .bs-core-feature-4-item .item-title {
		margin-bottom: 16px;
	}

	.tx_contact_info .bs-core-feature-4-item .item-icon {
		margin-bottom: 16px;
	}

	.tx_contact_info .bs-core-feature-4-item .item-icon img {
		max-height: 56px;
		width: auto;
	}
}

/* ---------- Responsive ---------- */

/* Elementor stacks these columns anywhere below 1025px, which left the
   layout inconsistent (stacked at 1024, side-by-side at 768). Force a
   single behavior: two columns down to 992px, stacked below that. */
@media (min-width: 992px) and (max-width: 1024px) {
	.contact-page-form-container > .elementor-container {
		flex-wrap: nowrap;
	}

	.contact-page-form-container .elementor-element-491b070 {
		width: 45% !important;
	}

	.contact-page-form-container .elementor-element-d074dcf {
		width: 55% !important;
	}
}

@media (max-width: 1199px) {
	.elementor-section.contact-page-form-container {
		padding: 60px 0 !important;
	}

	/* The editor's 60px column gutter lives on the inner widget-wrap
	   (.elementor-element-populated), not the column — narrow it here. */
	.contact-page-form-container .elementor-element-d074dcf > .elementor-element-populated {
		margin-left: 30px !important;
	}
}

@media (max-width: 991px) {
	/* Image stacks above the form (Elementor only stacks below 768 when
	   columns carry custom inline sizes — force it from 991 down). */
	.contact-page-form-container > .elementor-container {
		flex-wrap: wrap;
	}

	.contact-page-form-container .elementor-element-491b070,
	.contact-page-form-container .elementor-element-d074dcf {
		width: 100% !important;
	}

	.elementor-section.contact-page-form-container {
		padding: 40px 0 !important;
	}

	.contact-page-form-container .elementor-element-d074dcf {
		margin-top: 32px !important;
	}

	/* Kill the stacked form's leftover 60px editor gutter. */
	.contact-page-form-container .elementor-element-d074dcf > .elementor-element-populated {
		margin-left: 0 !important;
	}

	.contact-page-form-container .elementor-widget-image img {
		min-height: 0;
		max-height: 420px;
	}

	.contact-page-form-container .elementor-widget-shortcode {
		margin-top: 32px !important;
	}
}

@media (max-width: 767px) {
	.contact-page-form-container .mrb-ff-field {
		margin-bottom: 24px;
	}
}