/* Header banner — shared pattern for every non-home page's first section (see project note:
   the header stays fixed/transparent over this photo, same as the home hero). Contacts is the
   one exception where the banner also has to fit the whole lead-capture form, so its height is
   driven by content, not a fixed value — .imageBg keeps a tall min-height only as a floor. */
.contacts .block-header {position: relative;}

.contacts .block-header .imageBg {
	min-height: 34rem; background-color: var(--color-secondary);
	background-size: cover; background-position: center;
}

.contacts .block-header .content {
	position: absolute; inset: 0; z-index: 1;
	padding: calc(var(--layout-header-height-mobile) + 2rem) 0 2rem;
}

.contacts .block-header .content .sectionTitle {margin-top: 1rem;}

.contacts .block-header .content .crumbs {margin-top: .5rem; font-size: .8rem; color: rgba(255,255,255,.7);}
.contacts .block-header .content .crumbs a {color: rgba(255,255,255,.7);}
.contacts .block-header .content .crumbs a:hover {color: #fff;}
.contacts .block-header .content .crumbs .sep {margin: 0 .4rem;}
.contacts .block-header .content .crumbs .current {font-weight: 700; color: #fff;}

.contacts .block-header .formPanel {
	margin-top: 2rem; padding: 2rem 1.5rem; border-radius: .75rem; background-color: var(--color-primary);
}
.contacts .block-header .formPanel .top h2 {line-height: 1.35; font-size: 1.3rem; font-weight: 700; color: #fff;}
.contacts .block-header .formPanel .top p {margin-top: .75rem; line-height: 1.7; font-size: .85rem; color: rgba(255,255,255,.75);}

.contacts .block-header .formPanel .cols {display: flex; flex-direction: column-reverse; gap: 2rem; margin-top: 2rem;}
.contacts .block-header .formPanel .col {display: flex; flex-direction: column;}

.contacts .block-header .formPanel .info .details {display: flex; flex-direction: column; gap: .5rem;}
.contacts .block-header .formPanel .info .details p {font-size: .85rem; line-height: 1.6; color: rgba(255,255,255,.75);}
.contacts .block-header .formPanel .info .details .label {margin-left: .3rem; font-weight: 700; color: #fff;}
.contacts .block-header .formPanel .info .details .email .value {direction: ltr; unicode-bidi: embed; display: inline-block;}

.contacts .block-header .formPanel .info .socials {
	display: flex; align-items: center; gap: 1rem;
	margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15);
}
.contacts .block-header .formPanel .info .hashtag {direction: ltr; font-size: .85rem; color: rgba(255,255,255,.7);}
.contacts .block-header .formPanel .info .icons {display: flex; gap: .75rem;}
.contacts .block-header .formPanel .info .icons a {
	display: flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: 50%; background-color: rgba(255,255,255,.12);
}
.contacts .block-header .formPanel .info .icons a:hover {background-color: rgba(255,255,255,.22);}
.contacts .block-header .formPanel .info .icons img {display: block; width: auto; height: 1rem; object-fit: contain;}

.contacts .block-header .formPanel .form .scrollLink {
	display: flex; align-items: center; gap: .6rem; align-self: flex-start;
	margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15);
	font-size: .85rem; font-weight: 600; text-decoration: underline; color: var(--color-accent);
}
.contacts .block-header .formPanel .form .scrollLink i {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 1.75rem; height: 1.75rem; border: 1px solid var(--color-accent); border-radius: 50%; font-size: .75rem;
}

@media screen and (min-width: 40em) {
	.contacts .block-header .imageBg {min-height: 77.3rem;} /* design: exactly 1237px */
	.contacts .block-header .content {padding: calc(var(--layout-header-height) + 4rem) 0 3rem;}
	.contacts .block-header .formPanel {width: 62%; margin-left: auto; padding: 3rem;}
	.contacts .block-header .formPanel .top h2 {font-size: 1.75rem;}
	.contacts .block-header .formPanel .cols {flex-direction: row; gap: 3rem;}
	.contacts .block-header .formPanel .info {flex: 0 0 15rem;}
	.contacts .block-header .formPanel .form {flex: 1 1 auto;}
	.contacts .block-header .formPanel .form .scrollLink {border-top: 0; padding-top: 0;}
}