/* Keeps the hero on the same visual grid as the content sections. */
.hero {
	width: calc(100% - var(--zabdi-hero-margin-left, 0px) - var(--zabdi-hero-margin-right, 0px));
	margin: var(--zabdi-hero-margin-top, 0px) var(--zabdi-hero-margin-right, 0px) var(--zabdi-hero-margin-bottom, 0px) var(--zabdi-hero-margin-left, 0px);
	padding: var(--zabdi-hero-padding-top, 0px) var(--zabdi-hero-padding-right, 0px) var(--zabdi-hero-padding-bottom, 0px) var(--zabdi-hero-padding-left, 0px);
	background-position: var(--zabdi-hero-position-x, center) var(--zabdi-hero-position-y, center);
	overflow: hidden;
}

#metal .media-frame {
	margin: var(--zabdi-metal-margin-top, 0px) var(--zabdi-metal-margin-right, 0px) var(--zabdi-metal-margin-bottom, 0px) var(--zabdi-metal-margin-left, 0px);
	padding: var(--zabdi-metal-padding-top, 0px) var(--zabdi-metal-padding-right, 0px) var(--zabdi-metal-padding-bottom, 0px) var(--zabdi-metal-padding-left, 0px);
	background-position: var(--zabdi-metal-position-x, center) var(--zabdi-metal-position-y, center);
}

#industrial .media-frame {
	margin: var(--zabdi-industrial-margin-top, 0px) var(--zabdi-industrial-margin-right, 0px) var(--zabdi-industrial-margin-bottom, 0px) var(--zabdi-industrial-margin-left, 0px);
	padding: var(--zabdi-industrial-padding-top, 0px) var(--zabdi-industrial-padding-right, 0px) var(--zabdi-industrial-padding-bottom, 0px) var(--zabdi-industrial-padding-left, 0px);
	background-position: var(--zabdi-industrial-position-x, center) var(--zabdi-industrial-position-y, center);
}

.hero-content {
	width: min(calc(100% - 40px), var(--container));
	max-width: none;
	margin-inline: auto;
}

.hero h1 {
	max-width: 520px;
}

html,
body {
	overflow-x: hidden;
}

@media (max-width: 1100px) {
	.header-inner { gap: 18px; }
	.main-menu { gap: 20px; }
	.hero h1 { font-size: clamp(46px, 5.2vw, 56px); }
	.service-intro { gap: 35px; }
	.footer-grid { gap: 18px; }
}

@media (max-width: 850px) {
	.header-inner { gap: 14px; }
	.main-menu { width: 100%; }
	.hero-content { max-width: none; }
	.service-content,
	.industrial .service-content { padding-inline: 0; }
	.service-title { gap: 16px; }
	.project-card h3 { font-size: 15px; }
	.footer-grid { gap: 28px 18px; }
}

@media (max-width: 767px) {
	.hero {
		width: calc(100% - var(--zabdi-hero-margin-left-mobile, 0px) - var(--zabdi-hero-margin-right-mobile, 0px));
		margin: var(--zabdi-hero-margin-top-mobile, 0px) var(--zabdi-hero-margin-right-mobile, 0px) var(--zabdi-hero-margin-bottom-mobile, 0px) var(--zabdi-hero-margin-left-mobile, 0px);
		padding: var(--zabdi-hero-padding-top-mobile, 0px) var(--zabdi-hero-padding-right-mobile, 0px) var(--zabdi-hero-padding-bottom-mobile, 0px) var(--zabdi-hero-padding-left-mobile, 0px);
		background-position: var(--zabdi-hero-position-x-mobile, center) var(--zabdi-hero-position-y-mobile, center);
	}
	#metal .media-frame {
		margin: var(--zabdi-metal-margin-top-mobile, 0px) var(--zabdi-metal-margin-right-mobile, 0px) var(--zabdi-metal-margin-bottom-mobile, 0px) var(--zabdi-metal-margin-left-mobile, 0px);
		padding: var(--zabdi-metal-padding-top-mobile, 0px) var(--zabdi-metal-padding-right-mobile, 0px) var(--zabdi-metal-padding-bottom-mobile, 0px) var(--zabdi-metal-padding-left-mobile, 0px);
		background-position: var(--zabdi-metal-position-x-mobile, center) var(--zabdi-metal-position-y-mobile, center);
	}
	#industrial .media-frame {
		margin: var(--zabdi-industrial-margin-top-mobile, 0px) var(--zabdi-industrial-margin-right-mobile, 0px) var(--zabdi-industrial-margin-bottom-mobile, 0px) var(--zabdi-industrial-margin-left-mobile, 0px);
		padding: var(--zabdi-industrial-padding-top-mobile, 0px) var(--zabdi-industrial-padding-right-mobile, 0px) var(--zabdi-industrial-padding-bottom-mobile, 0px) var(--zabdi-industrial-padding-left-mobile, 0px);
		background-position: var(--zabdi-industrial-position-x-mobile, center) var(--zabdi-industrial-position-y-mobile, center);
	}
}

@media (max-width: 640px) {
	.site-header { height: 72px; }
	.brand { font-size: 22px; }
	.brand-mark { width: 39px; height: 39px; font-size: 24px; }
	.main-menu { top: 72px; }
	.hero { min-height: auto; }
	.hero-content { padding-block: 48px; }
	.hero h1 { font-size: clamp(35px, 10vw, 43px); line-height: 1.04; }
	.hero-actions { width: 100%; }
	.hero-actions .button { flex: 1 1 190px; }
	.section-heading { align-items: flex-start; }
	.service-icon { min-width: 42px; font-size: 38px; }
	.cta-title { align-items: flex-start; }
	.cta .button { width: 100%; }
	.footer-column h3 { margin-top: 0; }
}

@media (max-width: 560px) {
	.hero-content {
		width: min(calc(100% - 30px), var(--container));
	}
	.project-card__content { padding: 14px 15px; }
	.project-card h3 { font-size: 16px; }
	.checklist { gap: 9px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
	.wrap { width: min(calc(100% - 24px), var(--container)); }
	.hero-content { width: min(calc(100% - 24px), var(--container)); }
	.hero-content { padding-block: 38px; }
	.hero h1 { font-size: 34px; }
	.hero-actions .button { padding: 13px 14px; font-size: 12px; gap: 8px; }
	.service-title { display: block; }
	.service-icon { display: block; margin-bottom: 10px; }
	.footer-grid { grid-template-columns: 1fr; }
	.footer-brand { grid-column: auto; }
}