/* =========================================================================
   Contact Us page — redesigned hero + form
   Loaded only on the "Contact Us" page template (template-contact-us.php).
   Brand palette: BrainsWay Brand Guidelines 2026.
   The HubSpot form ([hubspot_form] shortcode) renders inline in the page DOM
   (the shortcode passes css:"" so it is NOT an iframe), so it is fully
   styleable here. Nothing about the form is changed in HubSpot.
   ========================================================================= */

/* ---------- Section / brand background ---------------------------------- */

.cu-hero {
	position: relative;
	overflow: hidden;
	background: #0A1F2F; /* Deep Ocean — fallback under the layers below */
}

/* thin brand accent strip along the top edge */
.cu-hero__accent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #45B0DA 0%, #005487 60%, #005487 100%);
	z-index: 2;
}

/* layered brand gradient — luminous, inviting, still within the palette */
.cu-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(58% 52% at 10% 16%, rgba(69, 176, 218, 0.20), transparent 60%),
		radial-gradient(48% 60% at 95% 105%, rgba(0, 84, 135, 0.55), transparent 62%),
		linear-gradient(158deg, #073A58 0%, #0A1F2F 58%, #071722 100%);
}

.cu-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	/* top padding clears the transparent site header that floats over the hero */
	padding: 150px 24px 72px;
	display: grid;
	grid-template-columns: 0.9fr 1fr;
	gap: 56px;
	align-items: center;
}

/* grid/flex children must be allowed to shrink below their content size,
   otherwise the HubSpot form's intrinsic width forces horizontal overflow */
.cu-hero__inner > *,
.cu-hero__card .hs-form > *,
.cu-hero__card .hs-form > fieldset > *,
.cu-hero__card .hs-form .hs-form-field,
.cu-hero__card .hs-form .input {
	min-width: 0;
}

/* ---------- Left column: title + HIPAA note ---------------------------- */

.cu-hero__copy {
	color: #FFFFFF;
}

/* the ACF field outputs, in order:
   <h1>Contact Us</h1>
   <p class="text-big">We invite you to contact our experts …</p>
   <p class="text-xsmall font-italic">Please do not leave any confidential …</p>
   Restyle in place — content stays editable in wp-admin. */

.cu-hero__copy h1 {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #75CEDE; /* Aqua Light */
	text-align: left !important;
	line-height: 1.2;
}

.cu-hero__copy .text-big {
	margin: 0;
	font-size: clamp(28px, 3.3vw, 42px);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: #FFFFFF;
	text-align: left !important;
	max-width: 19ch;
}

.cu-hero__copy .text-big::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin-top: 26px;
	border-radius: 2px;
	background: #45B0DA; /* Horizon Blue */
}

.cu-hero__copy .text-xsmall {
	margin: 24px 0 0;
	font-size: 12px;
	line-height: 1.65;
	font-style: italic;
	color: rgba(255, 255, 255, 0.62);
	text-align: left !important;
	max-width: 46ch;
}

/* ---------- Right column: the form card ------------------------------- */

.cu-hero__form-col {
	display: flex;
	justify-content: flex-end;
}

.cu-hero__card {
	width: 100%;
	max-width: 540px;
	background: #FFFFFF;
	border-radius: 12px;
	padding: 32px 32px 30px;
	box-shadow: 0 34px 70px -30px rgba(3, 20, 33, 0.55);
}

/* ---------- HubSpot form: reflow to a 2-column grid ------------------- */

.cu-hero__card .hs-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px 16px;
	width: 100%;
	max-width: 100%;
}

.cu-hero__card .hs-form .hs-input {
	max-width: 100%;
}

.cu-hero__copy .text-big,
.cu-hero__copy .text-xsmall {
	overflow-wrap: break-word;
}

/* let single-field fieldsets be the grid items; strip HubSpot's own widths */
.cu-hero__card .hs-form > fieldset {
	max-width: none !important;
	margin: 0 !important;
	padding: 0;
	border: 0;
}

/* Row 1: First name + Last name (HubSpot renders these in one form-columns-2) */
.cu-hero__card .hs-form > fieldset.form-columns-2 {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px 16px;
}
.cu-hero__card .hs-form > fieldset.form-columns-2 .hs-form-field {
	width: auto !important;
	float: none !important;
}

/* Rows 2–3 flow automatically: email | phone, then company | country */

/* "Are you a…" and the legal consent text span the full width */
.cu-hero__card .hs-form > fieldset:has(.hs_prospect_type),
.cu-hero__card .hs-form > fieldset:has(.legal-consent-container) {
	grid-column: 1 / -1;
}

/* hidden UTM fields carry no layout — drop their fieldsets from the grid */
.cu-hero__card .hs-form > fieldset:has(.hs_utm_campaign),
.cu-hero__card .hs-form > fieldset:has(.hs_utm_source),
.cu-hero__card .hs-form > fieldset:has(.hs_utm_medium),
.cu-hero__card .hs-form > fieldset:has(.hs_utm_term),
.cu-hero__card .hs-form > fieldset:has(.hs_utm_content) {
	display: none !important;
}

/* submit is a direct child of <form>, not inside a fieldset */
.cu-hero__card .hs-form > .hs_submit {
	grid-column: 1 / -1;
	margin-top: 4px;
}

.cu-hero__card .hs-form .hs-form-field {
	margin: 0 !important;
}
.cu-hero__card .hs-form .input {
	margin: 0 !important;
}

/* ---------- HubSpot form: field styling ------------------------------ */

.cu-hero__card .hs-form .hs-form-field > label {
	display: block;
	margin-bottom: 6px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #5F6E76;
	line-height: 1.3;
}
.cu-hero__card .hs-form .hs-form-field > label .hs-form-required {
	color: #B23A4E;
	margin-left: 2px;
}

.cu-hero__card .hs-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
	box-sizing: border-box;
	width: 100% !important;
	height: 44px;
	padding: 0 13px;
	border: 1px solid rgba(0, 84, 135, 0.22);
	border-radius: 7px;
	background: #FBFDFE;
	color: #17303C;
	font-family: inherit;
	font-size: 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cu-hero__card .hs-form textarea.hs-input {
	height: auto;
	min-height: 92px;
	padding: 11px 13px;
	resize: vertical;
}

.cu-hero__card .hs-form select.hs-input {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	padding-right: 38px !important;
	background-color: #FBFDFE !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23005487' stroke-width='2' d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
}
.cu-hero__card .hs-form select.hs-input.is-placeholder {
	color: #9AA9B0;
}

.cu-hero__card .hs-form .hs-input::placeholder {
	color: #9AA9B0;
}

.cu-hero__card .hs-form .hs-input:focus {
	outline: none;
	border-color: #45B0DA;
	box-shadow: 0 0 0 3px rgba(69, 176, 218, 0.18);
}

/* legal consent / privacy fine print */
.cu-hero__card .hs-form .legal-consent-container,
.cu-hero__card .hs-form .legal-consent-container .hs-richtext,
.cu-hero__card .hs-form .legal-consent-container p {
	font-size: 11px;
	line-height: 1.55;
	color: #6A7880;
}
.cu-hero__card .hs-form .legal-consent-container a {
	color: #005487;
	text-decoration: underline;
}

/* submit button — dark brand CTA */
.cu-hero__card .hs-form .hs-button.primary,
.cu-hero__card .hs-form input[type="submit"].hs-button {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 !important;
	border: 0;
	border-radius: 7px;
	background: #005487 !important; /* Depths Blue */
	color: #FFFFFF !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 50px !important;
	letter-spacing: 0.015em;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.15s ease;
}
.cu-hero__card .hs-form .hs-button.primary:hover,
.cu-hero__card .hs-form input[type="submit"].hs-button:hover {
	background: #0A1F2F !important; /* Deep Ocean */
}
.cu-hero__card .hs-form .hs-button.primary:focus-visible {
	outline: 2px solid #45B0DA;
	outline-offset: 2px;
}
.cu-hero__card .hs-form .actions {
	margin: 0;
	padding: 0;
}

/* validation errors */
.cu-hero__card .hs-form .hs-error-msgs {
	list-style: none;
	margin: 5px 0 0;
	padding: 0;
}
.cu-hero__card .hs-form .hs-error-msgs label,
.cu-hero__card .hs-form .hs-error-msg {
	color: #B23A4E;
	font-size: 11.5px;
	font-weight: 500;
}
.cu-hero__card .hs-form .hs-input.invalid,
.cu-hero__card .hs-form .hs-input.error {
	border-color: #B23A4E;
}
.cu-hero__card .hs-form .hs-input.invalid:focus {
	box-shadow: 0 0 0 3px rgba(178, 58, 78, 0.16);
}

/* post-submit inline message (if HubSpot ever returns one instead of redirecting) */
.cu-hero__card .submitted-message {
	font-size: 14px;
	line-height: 1.6;
	color: #17303C;
}

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

@media (max-width: 920px) {
	.cu-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		min-height: 0;
		padding: 44px 22px 52px;
	}
	.cu-hero__form-col {
		justify-content: stretch;
	}
	.cu-hero__card {
		max-width: none;
	}
	.cu-hero__copy .text-big {
		max-width: none;
	}
	.cu-hero__copy .text-xsmall {
		max-width: none;
	}
}

@media (max-width: 560px) {
	.cu-hero__card {
		padding: 24px 20px 22px;
	}
	.cu-hero__card .hs-form,
	.cu-hero__card .hs-form > fieldset.form-columns-2 {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cu-hero__card .hs-form .hs-input,
	.cu-hero__card .hs-form .hs-button.primary {
		transition: none;
	}
}