:root {
	--hli-blue: #172b72;
	--hli-blue-dark: #0a1436;
	--hli-red: #ef274c;
	--hli-ink: #111827;
	--hli-muted: #5f6b7a;
	--hli-line: #d9dee8;
	--hli-bg: #f5f7fb;
	--hli-white: #ffffff;
	--hli-gold: #d49a2a;
	--hli-wrap: min(1180px, calc(100vw - 40px));
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--hli-ink);
	background: var(--hli-white);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wrap {
	width: var(--hli-wrap);
	margin: 0 auto;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid rgba(217, 222, 232, 0.8);
	backdrop-filter: blur(12px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: var(--hli-wrap);
	min-height: 82px;
	margin: 0 auto;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	text-decoration: none;
}

.brand__logo {
	width: 58px;
	max-height: 56px;
	object-fit: contain;
}

.brand__text {
	display: grid;
	line-height: 1.2;
}

.brand__text strong {
	color: var(--hli-blue-dark);
	font-size: 18px;
}

.brand__text span {
	color: var(--hli-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0;
}

.primary-nav ul,
.footer-nav ul {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav a {
	color: var(--hli-blue-dark);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a:focus {
	color: var(--hli-red);
}

.nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	border: 1px solid var(--hli-line);
	border-radius: 6px;
	background: var(--hli-white);
}

.nav-toggle__line {
	width: 18px;
	height: 2px;
	background: var(--hli-blue-dark);
}

.hero {
	min-height: 680px;
	background-image: var(--hero-image);
	background-position: center;
	background-size: cover;
}

.hero__overlay {
	display: flex;
	align-items: center;
	min-height: 680px;
	background:
		linear-gradient(90deg, rgba(8, 17, 48, 0.92) 0%, rgba(8, 17, 48, 0.72) 38%, rgba(8, 17, 48, 0.12) 72%),
		linear-gradient(0deg, rgba(8, 17, 48, 0.36), rgba(8, 17, 48, 0));
}

.hero__content {
	color: var(--hli-white);
	padding: 100px 0 96px;
}

.hero__content h1 {
	max-width: 760px;
	margin: 12px 0 20px;
	font-size: clamp(42px, 6vw, 76px);
	line-height: 1.02;
	letter-spacing: 0;
}

.hero__content p:not(.eyebrow) {
	max-width: 620px;
	margin: 0 0 32px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 20px;
}

.eyebrow {
	margin: 0;
	color: var(--hli-red);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: 6px;
	font-weight: 800;
	text-decoration: none;
}

.button--primary {
	color: var(--hli-white);
	background: var(--hli-red);
	box-shadow: 0 14px 28px rgba(239, 39, 76, 0.24);
}

.section {
	padding: 86px 0;
}

.section--about {
	background: var(--hli-white);
}

.about-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 64px;
	align-items: start;
}

h1,
h2,
h3 {
	color: var(--hli-blue-dark);
	line-height: 1.12;
	letter-spacing: 0;
}

h2 {
	margin: 10px 0 0;
	font-size: clamp(32px, 4vw, 48px);
}

h3 {
	margin: 10px 0 12px;
	font-size: 24px;
}

.lead p {
	margin: 0;
	color: var(--hli-muted);
	font-size: 20px;
}

.section--stats {
	padding: 0;
	background: var(--hli-blue-dark);
}

.stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	color: var(--hli-white);
}

.stat {
	padding: 38px 32px;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.stat:last-child {
	border-right: 0;
}

.stat strong {
	display: block;
	font-size: clamp(34px, 5vw, 58px);
	line-height: 1;
}

.stat span {
	display: block;
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 700;
}

.section--services {
	background: var(--hli-bg);
}

.section-heading {
	max-width: 720px;
	margin-bottom: 34px;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.service-card {
	min-height: 280px;
	padding: 28px;
	background: var(--hli-white);
	border: 1px solid var(--hli-line);
	border-top: 4px solid var(--hli-red);
	border-radius: 8px;
	box-shadow: 0 18px 36px rgba(17, 24, 39, 0.06);
}

.service-card__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 34px;
	color: var(--hli-white);
	background: var(--hli-blue);
	border-radius: 6px;
	font-weight: 800;
}

.service-card p,
.archive-card p {
	color: var(--hli-muted);
}

.section--process {
	background: var(--hli-white);
}

.process {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 56px;
}

.process-list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.process-list li {
	position: relative;
	padding: 24px 24px 24px 76px;
	background: var(--hli-bg);
	border: 1px solid var(--hli-line);
	border-radius: 8px;
}

.process-list li::before {
	position: absolute;
	top: 24px;
	left: 24px;
	width: 34px;
	height: 34px;
	color: var(--hli-white);
	background: var(--hli-gold);
	border-radius: 50%;
	counter-increment: step;
	content: counter(step);
	display: grid;
	place-items: center;
	font-weight: 800;
}

.process-list strong,
.process-list span {
	display: block;
}

.process-list span {
	margin-top: 6px;
	color: var(--hli-muted);
}

.section--contact {
	background: var(--hli-blue);
	color: var(--hli-white);
}

.section--contact h2 {
	color: var(--hli-white);
}

.contact-band {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 46px;
	align-items: start;
}

.contact-details {
	display: grid;
	gap: 14px;
}

.contact-details p {
	margin: 0;
	padding: 18px 20px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
}

.contact-details strong {
	display: block;
	margin-bottom: 4px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
	text-transform: uppercase;
}

.contact-details a {
	color: var(--hli-white);
	font-weight: 800;
}

.site-footer {
	background: var(--hli-blue-dark);
	color: rgba(255, 255, 255, 0.72);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px;
	align-items: center;
	width: var(--hli-wrap);
	margin: 0 auto;
	padding: 36px 0;
}

.site-footer__logo {
	width: 70px;
	margin-bottom: 12px;
	background: var(--hli-white);
	border-radius: 6px;
}

.site-footer p {
	margin: 0;
	max-width: 520px;
}

.site-footer__meta {
	grid-column: 1 / -1;
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
}

.footer-nav a {
	color: rgba(255, 255, 255, 0.82);
	font-weight: 700;
	text-decoration: none;
}

.page-shell {
	padding: 72px 0;
	background: var(--hli-bg);
}

.page-header h1 {
	margin-top: 0;
}

.entry-content {
	font-size: 18px;
}

.entry-content--front {
	width: 100%;
}

.archive-list {
	display: grid;
	gap: 18px;
}

.archive-card {
	padding: 28px;
	background: var(--hli-white);
	border: 1px solid var(--hli-line);
	border-radius: 8px;
}

.hli-block-hero {
	background-color: var(--hli-blue-dark);
	background-image: url("../img/prefab-hero.png");
	background-position: center;
	background-size: cover;
}

.hli-block-hero .hero__overlay {
	background:
		linear-gradient(90deg, rgba(8, 17, 48, 0.96), rgba(23, 43, 114, 0.82)),
		linear-gradient(135deg, rgba(239, 39, 76, 0.18), rgba(212, 154, 42, 0.08)),
		linear-gradient(0deg, rgba(8, 17, 48, 0.36), rgba(8, 17, 48, 0));
}

.hli-block-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
	gap: 44px;
	align-items: center;
}

.hli-process-note {
	color: var(--hli-muted);
	font-size: 18px;
}

.hli-block-button.wp-block-button,
.hli-block-button .wp-block-button__link {
	border-radius: 6px;
}

.hli-block-button .wp-block-button__link {
	color: var(--hli-white);
	background: var(--hli-red);
	font-weight: 800;
	box-shadow: 0 14px 28px rgba(239, 39, 76, 0.24);
}

.stat h2 {
	margin: 0;
	color: var(--hli-white);
	font-size: clamp(34px, 5vw, 58px);
	line-height: 1;
}

.stat p {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 700;
}

.service-card__mark {
	margin: 0;
}

.hli-el-section.elementor-section {
	overflow: hidden;
}

.hli-el-hero.elementor-section {
	background:
		linear-gradient(90deg, rgba(10, 20, 54, 0.98), rgba(23, 43, 114, 0.9)),
		linear-gradient(135deg, rgba(239, 39, 76, 0.18), rgba(212, 154, 42, 0.08));
}

.hli-el-copy-column > .elementor-widget-wrap,
.hli-el-visual-column > .elementor-widget-wrap {
	align-content: center;
	padding: 24px;
}

.hli-el-eyebrow .elementor-heading-title,
.hli-el-eyebrow {
	color: var(--hli-red) !important;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

.hli-el-hero-title .elementor-heading-title {
	max-width: 760px;
	color: var(--hli-white) !important;
	font-size: clamp(42px, 5.8vw, 74px);
	line-height: 1.02;
	letter-spacing: 0;
}

.hli-el-lead,
.hli-el-lead p {
	max-width: 620px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 20px;
}

.hli-el-button .elementor-button {
	min-height: 48px;
	padding: 14px 20px;
	background: var(--hli-red);
	border-radius: 6px;
	font-weight: 800;
	box-shadow: 0 14px 28px rgba(239, 39, 76, 0.24);
}

.hli-motion-site {
	position: relative;
	min-height: 430px;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.2);
}

.hli-motion-site__sky {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.26), transparent 24%),
		linear-gradient(180deg, rgba(150, 183, 216, 0.22), transparent 48%);
}

.hli-motion-site__crane {
	position: absolute;
	top: 48px;
	right: 34px;
	width: 72%;
	height: 10px;
	background: var(--hli-gold);
	transform: rotate(-8deg);
	transform-origin: right center;
}

.hli-motion-site__crane span {
	position: absolute;
	right: 0;
	top: -34px;
	width: 14px;
	height: 150px;
	background: #b77a14;
}

.hli-motion-site__cable {
	position: absolute;
	top: 58px;
	right: 230px;
	width: 2px;
	height: 150px;
	background: rgba(255, 255, 255, 0.7);
	animation: hli-cable 4.8s ease-in-out infinite;
}

.hli-motion-site__hook {
	position: absolute;
	top: 196px;
	right: 220px;
	width: 20px;
	height: 20px;
	border-right: 4px solid rgba(255, 255, 255, 0.78);
	border-bottom: 4px solid rgba(255, 255, 255, 0.78);
	border-radius: 0 0 12px 0;
	animation: hli-hook 4.8s ease-in-out infinite;
}

.hli-motion-site__panel {
	position: absolute;
	top: 218px;
	right: 166px;
	width: 122px;
	height: 106px;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 100%),
		#f6f0df;
	background-size: 24px 100%;
	border: 7px solid #273044;
	box-shadow: 0 22px 30px rgba(0, 0, 0, 0.22);
	animation: hli-panel 4.8s ease-in-out infinite;
}

.hli-motion-site__building {
	position: absolute;
	left: 64px;
	right: 88px;
	bottom: 86px;
	height: 132px;
	background: #f7f4ea;
	border: 8px solid #273044;
	box-shadow: 18px 22px 0 rgba(0, 0, 0, 0.12);
}

.hli-motion-site__building span {
	position: absolute;
	top: 24px;
	width: 44px;
	height: 54px;
	background: #172b72;
	border: 5px solid #273044;
}

.hli-motion-site__building span:nth-child(1) { left: 34px; }
.hli-motion-site__building span:nth-child(2) { left: 116px; height: 82px; background: #ef274c; }
.hli-motion-site__building span:nth-child(3) { right: 110px; }
.hli-motion-site__building span:nth-child(4) { right: 34px; height: 72px; background: #d49a2a; }

.hli-motion-site__base {
	position: absolute;
	left: 40px;
	right: 46px;
	bottom: 52px;
	height: 34px;
	background: repeating-linear-gradient(90deg, #c8ccd4 0 28px, #aeb5c0 28px 32px);
	border-top: 6px solid #eef1f5;
}

.hli-motion-site__bricks {
	position: absolute;
	left: 64px;
	bottom: 22px;
	display: grid;
	grid-template-columns: repeat(3, 42px);
	gap: 5px;
}

.hli-motion-site__bricks i {
	display: block;
	height: 22px;
	background: #b74b35;
	border: 2px solid rgba(255, 255, 255, 0.16);
	border-radius: 3px;
	animation: hli-brick 2.8s ease-in-out infinite;
}

.hli-motion-site__bricks i:nth-child(2n) {
	background: #8d3a2b;
	animation-delay: 0.24s;
}

.hli-motion-site__ground {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 22px;
	background: linear-gradient(90deg, #7c5730, #9e7242, #70502d);
}

.hli-el-body-large,
.hli-el-body-large p {
	color: var(--hli-muted);
	font-size: 20px;
}

.hli-el-stats.elementor-section,
.hli-el-contact.elementor-section {
	color: var(--hli-white);
}

.hli-el-stat-value .elementor-heading-title {
	color: var(--hli-white) !important;
	font-size: clamp(34px, 4.8vw, 56px);
}

.hli-el-stat-label .elementor-heading-title {
	color: rgba(255, 255, 255, 0.72) !important;
	font-size: 16px;
}

.hli-el-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 26px;
}

.hli-el-card-grid article {
	min-height: 280px;
	padding: 28px;
	background: var(--hli-white);
	border: 1px solid var(--hli-line);
	border-top: 4px solid var(--hli-red);
	border-radius: 8px;
	box-shadow: 0 18px 36px rgba(17, 24, 39, 0.06);
}

.hli-el-card-grid span {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 34px;
	color: var(--hli-white);
	background: var(--hli-blue);
	border-radius: 6px;
	font-weight: 800;
}

.hli-el-card-grid p,
.hli-el-process-list span {
	color: var(--hli-muted);
}

.hli-el-process-list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hli-step;
}

.hli-el-process-list li {
	position: relative;
	padding: 24px 24px 24px 76px;
	background: var(--hli-bg);
	border: 1px solid var(--hli-line);
	border-radius: 8px;
}

.hli-el-process-list li::before {
	position: absolute;
	top: 24px;
	left: 24px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--hli-white);
	background: var(--hli-gold);
	border-radius: 50%;
	counter-increment: hli-step;
	content: counter(hli-step);
	font-weight: 800;
}

.hli-el-process-list strong,
.hli-el-process-list span {
	display: block;
}

.hli-el-white-title .elementor-heading-title {
	color: var(--hli-white) !important;
}

.hli-el-contact-details p {
	margin: 0 0 14px;
	padding: 18px 20px;
	color: var(--hli-white);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
}

.hli-el-contact-details a {
	color: var(--hli-white);
	font-weight: 800;
}

@keyframes hli-panel {
	0%, 100% {
		transform: translate(-18px, -18px) rotate(-4deg);
	}
	50% {
		transform: translate(-72px, 24px) rotate(0deg);
	}
}

@keyframes hli-cable {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-52px);
	}
}

@keyframes hli-hook {
	0%, 100% {
		transform: translateX(0) rotate(8deg);
	}
	50% {
		transform: translateX(-52px) rotate(0deg);
	}
}

@keyframes hli-brick {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-7px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hli-motion-site__cable,
	.hli-motion-site__hook,
	.hli-motion-site__panel,
	.hli-motion-site__bricks i {
		animation: none;
	}
}

@media (max-width: 860px) {
	:root {
		--hli-wrap: min(100vw - 28px, 1180px);
	}

	.site-header__inner {
		min-height: 74px;
	}

	.brand__text span {
		display: none;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.primary-nav {
		position: absolute;
		top: 74px;
		left: 0;
		right: 0;
		display: none;
		padding: 14px;
		background: var(--hli-white);
		border-bottom: 1px solid var(--hli-line);
	}

	.primary-nav.is-open {
		display: block;
	}

	.primary-nav ul {
		display: grid;
		gap: 10px;
		width: var(--hli-wrap);
		margin: 0 auto;
	}

	.primary-nav a {
		display: block;
		padding: 10px 0;
	}

	.hero,
	.hero__overlay {
		min-height: 620px;
	}

	.hero__overlay {
		background:
			linear-gradient(90deg, rgba(8, 17, 48, 0.94), rgba(8, 17, 48, 0.76)),
			linear-gradient(0deg, rgba(8, 17, 48, 0.25), rgba(8, 17, 48, 0));
	}

	.hero__content h1 {
		font-size: 42px;
	}

	.hero__content p:not(.eyebrow) {
		font-size: 18px;
	}

	.about-grid,
	.process,
	.contact-band,
	.service-grid,
	.hli-block-hero__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.stats {
		grid-template-columns: 1fr;
	}

	.stat {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	}

	.stat:last-child {
		border-bottom: 0;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
	}

	.footer-nav ul {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.hli-el-card-grid {
		grid-template-columns: 1fr;
	}

	.hli-motion-site {
		min-height: 360px;
	}
}

@media (max-width: 520px) {
	.hero,
	.hero__overlay {
		min-height: 600px;
	}

	.hero__content {
		padding: 80px 0;
	}

	.hero__content h1 {
		font-size: 36px;
	}

	.section {
		padding: 64px 0;
	}

	.service-card,
	.process-list li {
		padding: 22px;
	}

	.process-list li {
		padding-left: 64px;
	}

	.process-list li::before {
		left: 18px;
	}

	.hli-el-copy-column > .elementor-widget-wrap,
	.hli-el-visual-column > .elementor-widget-wrap {
		padding: 10px;
	}

	.hli-el-hero-title .elementor-heading-title {
		font-size: 36px;
	}

	.hli-motion-site__building {
		left: 28px;
		right: 28px;
	}

	.hli-motion-site__crane {
		right: 18px;
		width: 86%;
	}

	.hli-motion-site__cable {
		right: 148px;
	}

	.hli-motion-site__hook {
		right: 138px;
	}

	.hli-motion-site__panel {
		right: 88px;
	}
}
