/* ==========================================================================
   Contact page (/contact/). Generated by build/contact.py. Prefix: bw-contact-
   Loaded on this page only.
   ========================================================================== */

.bw-page-contact {
	/* Brand blue (Site Settings). The mockup's link blue is darker (#1F59A3). */
	--bw-contact-link: var(--e-global-color-blue, #3F6FB8);
	--bw-contact-field-border: #DCE3EE;
}

/* --- Hero ----------------------------------------------------------------- */
/* Subtitle size is set in contact.py; keep the body to the design's measure. */
.bw-contact-hero .bw-hero__body p { max-width: 440px; }
@media (max-width: 767px) { .bw-contact-hero .bw-hero__body br { display: none; } }

/* --- Links ---------------------------------------------------------------- */
.bw-contact-link { margin: 0; overflow-wrap: anywhere; }
.bw-contact-link a,
.bw-contact-way__email a { color: var(--bw-contact-link); text-decoration: none; }
.bw-contact-link a:hover { text-decoration: underline; }
.bw-contact-way__phone a,
.bw-contact-team__phone a { color: var(--bw-ink); }
.bw-contact-way__phone a:hover,
.bw-contact-team__phone a:hover { color: var(--bw-contact-link); }

/* --- Icon circles ------------------------------------------------------------ */
.e-con.bw-contact-circle {
	flex: 0 0 auto; border-radius: 50%; aspect-ratio: 1; min-height: 0;
}
.bw-contact-way__icon { background: #fff; border: 1px solid rgba(31, 89, 163, .28); }
.bw-contact-commit__icon { background: rgba(11, 31, 79, .06); }
.bw-contact-tint--gold   { background: color-mix(in srgb, var(--bw-gold) 12%, #fff); }
.bw-contact-tint--blue   { background: color-mix(in srgb, var(--e-global-color-blue, #3F6FB8) 10%, #fff); }
.bw-contact-tint--teal   { background: color-mix(in srgb, var(--e-global-color-teal, #2A8A8C) 10%, #fff); }
.bw-contact-tint--purple { background: color-mix(in srgb, var(--e-global-color-purple, #7A5CB2) 10%, #fff); }

/* --- Other ways card --------------------------------------------------------- */
.bw-contact-way__words { flex: 1 1 0; min-width: 0; }

/* --- Team cards -------------------------------------------------------------- */
.bw-contact-team__desc p { max-width: 212px; margin-inline: auto; }
.bw-contact-team { box-shadow: 0 2px 10px rgba(11, 31, 79, .04); }

/* --- Response commitment ------------------------------------------------------ */
.bw-contact-commit__words { flex: 1 1 0; min-width: 0; }
.bw-contact-commit__check { flex: 0 0 auto; }
.bw-contact-commit__item > .e-con { flex: 1 1 0; min-width: 0; }
@media (min-width: 1240px) {
	/* Keep the design's two-line breaks (explicit <br>) in the narrow columns.
	   Below 1240 the columns are too narrow for nowrap — let it wrap. */
	.bw-contact-commit__item p, .bw-contact-commit__title .elementor-heading-title { white-space: nowrap; }
}

/* --- CTA banner (smaller than the shared component, per the design) --------- */
.bw-contact-cta .e-con.bw-cta__icon { flex-basis: 80px !important; width: 80px; height: 80px; }

/* ==========================================================================
   Forminator "Contact Enquiry" form (design: none — styled here).
   Forminator's CSS is enqueued after this file, so a few declarations need
   !important rather than ever-longer selectors.
   ========================================================================== */
.bw-contact-formwrap .forminator-ui.forminator-custom-form {
	font-family: var(--bw-sans); color: var(--bw-body); margin: 0 !important;
}
.bw-contact-formwrap .forminator-row { margin-bottom: 10px !important; }
.bw-contact-formwrap .forminator-row-last { margin-bottom: 0 !important; margin-top: 6px !important; }

/* Short inputs use their placeholder as the visible label (as designed);
   the <label> stays for screen readers. Consent's "Consent" label too. */
.bw-contact-f--inline .forminator-label,
.bw-contact-f--consent > .forminator-field > .forminator-label {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.bw-contact-formwrap .forminator-label {
	display: block; font-size: 13px; font-weight: 500; color: var(--bw-ink);
	margin: 0 0 8px 6px; line-height: 1.3;
}
.bw-contact-formwrap .forminator-required { color: #C0392B; }

.bw-contact-formwrap .forminator-input,
.bw-contact-formwrap .forminator-textarea,
.bw-contact-formwrap select.forminator-select--field {
	display: block; width: 100% !important; box-sizing: border-box;
	font-family: var(--bw-sans); font-size: 14px; color: var(--bw-ink);
	background: #fff; border: 1px solid var(--bw-contact-field-border) !important;
	border-radius: 4px !important; padding: 0 12px !important; height: 40px;
	box-shadow: none; outline: none; transition: border-color .15s, box-shadow .15s;
}
.bw-contact-formwrap .forminator-textarea {
	height: auto; min-height: 114px !important; padding: 32px 12px 10px !important; resize: vertical;
}
/* "Your Message" sits inside the box, as designed. */
.bw-contact-f--message .forminator-field { position: relative; }
.bw-contact-f--message .forminator-label {
	position: absolute; top: 9px; left: 12px; margin: 0; font-size: 12px; pointer-events: none;
}
.bw-contact-formwrap select.forminator-select--field {
	appearance: none; -webkit-appearance: none; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230B1648' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
	padding-right: 36px !important;
}
.bw-contact-formwrap .forminator-input::placeholder,
.bw-contact-formwrap .forminator-textarea::placeholder { color: #8790A8; opacity: 1; }
.bw-contact-formwrap .forminator-input:focus,
.bw-contact-formwrap .forminator-textarea:focus,
.bw-contact-formwrap select.forminator-select--field:focus {
	border-color: var(--bw-navy) !important; box-shadow: 0 0 0 3px rgba(11, 31, 79, .12);
}

/* Validation */
.bw-contact-formwrap .forminator-has_error .forminator-input,
.bw-contact-formwrap .forminator-has_error .forminator-textarea,
.bw-contact-formwrap .forminator-has_error select.forminator-select--field {
	border-color: #C0392B !important;
}
.bw-contact-formwrap .forminator-error-message {
	display: block; color: #B03A2E; font-size: 13px; margin: 6px 0 0 2px;
}
.bw-contact-formwrap .forminator-error-message:empty { display: none; }
.bw-contact-formwrap .forminator-response-message { font-size: 15px; border-radius: 6px; }
.bw-contact-formwrap .forminator-response-message[aria-hidden="true"] { display: none; }
.bw-contact-formwrap .forminator-response-message.forminator-error:not(:empty) {
	padding: 12px 16px; margin-bottom: 14px; background: #FDF1EF; color: #8E2A1F; border-left: 3px solid #C0392B;
}
.bw-contact-formwrap .forminator-response-message.forminator-success:not(:empty) {
	padding: 16px 18px; margin-bottom: 14px; background: var(--bw-surface); color: var(--bw-ink);
	border-left: 3px solid var(--bw-gold);
}
.bw-contact-formwrap .forminator-response-message p { margin: 0; }

/* Consent checkbox */
.bw-contact-formwrap .forminator-checkbox__wrapper { display: flex; align-items: flex-start; gap: 10px; position: relative; }
.bw-contact-formwrap .forminator-checkbox { position: static; display: inline-flex; flex: 0 0 auto; margin: 1px 0 0; cursor: pointer; }
/* Forminator renders the consent text outside the <label>, so tapping the text
   did nothing. Stretch the label over the whole row; the policy link sits above. */
.bw-contact-formwrap .forminator-consent::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.bw-contact-formwrap .forminator-checkbox__label a { position: relative; z-index: 1; }
.bw-contact-formwrap .forminator-checkbox input[type="checkbox"] {
	width: 16px; height: 16px; margin: 0; accent-color: var(--bw-navy); cursor: pointer;
}
.bw-contact-formwrap .forminator-checkbox-box { display: none; }
.bw-contact-formwrap .forminator-checkbox__label { font-size: 13px; line-height: 1.5; color: var(--bw-body); }
.bw-contact-formwrap .forminator-checkbox__label a { color: var(--bw-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Submit: navy with a white label in every state (Hello Elementor would paint
   it pink on hover/focus). */
.bw-contact-formwrap .forminator-button-submit,
.bw-contact-formwrap .forminator-button-submit:hover,
.bw-contact-formwrap .forminator-button-submit:focus,
.bw-contact-formwrap .forminator-button-submit:active {
	display: inline-flex; align-items: center; gap: 14px;
	min-height: 44px; padding: 0 24px !important; border: 0 !important; border-radius: 4px !important;
	background: var(--bw-navy) !important; color: #fff !important;
	font-family: var(--bw-sans); font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer;
	box-shadow: none; text-transform: none;
}
.bw-contact-formwrap .forminator-button-submit::after {
	content: ""; width: 14px; height: 10px; flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8.5 1.2 12.5 5l-4 3.8' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center;
	transition: transform .2s;
}
.bw-contact-formwrap .forminator-button-submit:hover { background: #142f6e !important; }
.bw-contact-formwrap .forminator-button-submit:hover::after { transform: translateX(3px); }
.bw-contact-formwrap .forminator-button-submit:focus-visible { outline: 2px solid var(--bw-gold); outline-offset: 3px; }

/* Phones: 16px inputs or iOS Safari zooms on focus. */
@media (max-width: 1024px) {
	.bw-contact-formwrap .forminator-input,
	.bw-contact-formwrap .forminator-textarea,
	.bw-contact-formwrap select.forminator-select--field { font-size: 16px; height: 48px; }
	.bw-contact-formwrap .forminator-textarea { height: auto; }
	.bw-contact-formwrap .forminator-checkbox input[type="checkbox"] { width: 22px; height: 22px; }
	.bw-contact-formwrap .forminator-checkbox__label { font-size: 14px; }
	.bw-contact-formwrap .forminator-button-submit { min-height: 48px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.bw-contact-commit__lead, .bw-contact-commit__points { width: 100% !important; }
}
@media (max-width: 767px) {
	/* Commitment: icon above the copy; the three points stack. */
	.bw-contact-commit__words { flex: 1 1 100% !important; }
	.bw-contact-commit__lead br { display: none; }
	.bw-contact-commit__item { width: 100% !important; }
	/* Other-ways rows: smaller ring, more room for the address/email. */
	.bw-contact-way { gap: 16px !important; }
	.e-con.bw-contact-way__icon { width: 60px !important; }
	.bw-contact-way__icon img { width: 44px !important; }
}
/* Air above the Subject label, as designed. */
.bw-contact-formwrap .forminator-row:has(.bw-contact-f--select) { margin-top: 18px !important; }
@media (max-width: 767px) {
	/* CTA: ring above the title so the title gets the full width. */
	.bw-contact-cta .e-con.bw-cta__words { flex: 1 1 100% !important; }
	.bw-contact-cta .bw-cta__words br { display: none; }
	.e-con.bw-contact-way__icon { min-height: 60px; }
}
@media (max-width: 1024px) {
	/* Finger-sized targets without changing the layout. */
	.bw-contact-link a, .bw-contact-way__phone a, .bw-contact-team__phone a {
		display: inline-block; padding: 12px 0; margin: -12px 0;
	}
	.bw-contact-formwrap .forminator-checkbox { padding: 11px; margin: -11px; }
}

/* Phones/tablets: visible form labels at the 14px floor. */
@media (max-width: 1024px) {
	.bw-contact-formwrap .forminator-label { font-size: 14px !important; }
}