/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme for Hongli Machinery built on Astra.
Author: Hongli Machinery
Template: astra
Version: 1.0.3
Text Domain: astra-child
*/

/* === HL Site Layout Controls === */
:root {
	--hl-site-gutter: 28px;
	--hl-site-max: 1220px;
	--hl-site-width: min(100% - (var(--hl-site-gutter) * 2), var(--hl-site-max));
}

/* === HL Top Bar === */
.hl-topbar {
	background: #0D1B2A;
	height: 40px;
	width: 100%;
	position: relative;
	z-index: 99999;
}

.hl-topbar__inner {
	padding: 0 24px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hl-topbar__item {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #AAAAAA;
	font-size: 13px;
	text-decoration: none;
	transition: color 0.15s ease;
	font-family: Inter, "Open Sans", sans-serif;
}

.hl-topbar__item:hover,
.hl-topbar__item:focus-visible {
	color: #E8500A;
}

.hl-topbar__left {
	display: flex;
	align-items: center;
	gap: 24px;
}

.hl-topbar__right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.hl-topbar__social {
	display: flex;
	align-items: center;
	gap: 5px;
}

.hl-topbar__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	text-decoration: none;
	opacity: .9;
	transition: opacity .2s, transform .2s;
	flex-shrink: 0;
}

.hl-topbar__social-link:hover {
	opacity: 1;
	transform: translateY(-1px);
}

/* ── Nav Search box (fills right empty space in nav) ──── */
.hl-nav-search-item {
	flex: 0 0 auto !important;
	float: none !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 16px 0 8px !important;
	min-width: 0 !important;
}

.hl-nav-search {
	display: flex;
	align-items: center;
	gap: 7px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 20px;
	padding: 0 14px;
	height: 32px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	align-self: center;
}

.hl-nav-search:focus-within,
.hl-nav-search:hover {
	border-color: rgba(255,255,255,.3);
	background: rgba(255,255,255,.1);
}

.hl-nav-search__icon {
	color: rgba(255,255,255,.6);
	flex-shrink: 0;
}

.hl-nav-search__input {
	display: block !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 13px;
	width: 100px;
	padding: 0;
}

.hl-nav-search__input::placeholder {
	color: rgba(255,255,255,.35);
}

/* ── Nav Language pill (参考站右侧 Language 按钮) ─────── */
.hl-nav-lang-item {
	float: none !important;
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 16px 0 8px !important;
	background: none !important;
}

.hl-nav-lang {
	position: relative;
}

.hl-nav-lang__btn {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	background: transparent;
	border: 1.5px solid rgba(255,255,255,.7);
	border-radius: 20px;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .2s, background .2s;
}

.hl-nav-lang__btn:hover {
	border-color: #fff;
	background: rgba(255,255,255,.08);
}

.hl-nav-lang__dropdown {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	background: #0d1b2a;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 6px;
	padding: 4px 0;
	min-width: 110px;
	list-style: none;
	margin: 0;
	z-index: 99999;
}

.hl-nav-lang__dropdown.is-open { display: block; }

.hl-nav-lang__dropdown li a {
	display: block;
	padding: 8px 16px;
	color: rgba(255,255,255,.8);
	font-size: 13px;
	text-decoration: none;
	transition: color .15s, background .15s;
}

.hl-nav-lang__dropdown li a:hover {
	color: #fff;
	background: rgba(255,255,255,.07);
}

.hl-topbar__lang {
	position: relative;
}

.hl-topbar__lang-btn {
	background: none;
	border: none;
	color: #AAAAAA;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	font-family: Inter, "Open Sans", sans-serif;
	transition: color 0.15s ease;
	display: flex;
	align-items: center;
	gap: 4px;
}

.hl-topbar__lang-btn:hover,
.hl-topbar__lang-btn:focus-visible,
.hl-topbar__lang-btn[aria-expanded="true"] {
	color: #E8500A;
}

.hl-topbar__lang-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 4px;
	list-style: none;
	margin: 0;
	padding: 4px 0;
	min-width: 100px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 99999;
}

.hl-topbar__lang-dropdown.is-open {
	display: block;
}

.hl-topbar__lang-dropdown a {
	display: block;
	padding: 8px 16px;
	color: #333333;
	font-size: 13px;
	text-decoration: none;
}

.hl-topbar__lang-dropdown a:hover,
.hl-topbar__lang-dropdown a:focus-visible {
	background: #F8F9FA;
	color: #E8500A;
}

@media (max-width: 768px) {
	.hl-topbar {
		display: none;
	}
}

/* === HL Sticky Header === */

/* ── Header: deeper background to contrast with topbar ── */
#masthead,
.site-header {
	position: sticky;
	top: 0;
	z-index: 99997;
	background: #0D1B2A !important;
	transition: box-shadow 250ms ease;
}

/* Kill any injected backgrounds — everything is transparent, masthead sets the color */
#masthead .ast-primary-header-bar,
#masthead .ast-desktop-header-content,
#masthead .site-primary-header-wrap,
#masthead .ast-builder-grid-row,
#masthead .mega-menu-wrap,
#masthead .max-mega-menu,
.site-header .ast-primary-header-bar,
.site-header .ast-desktop-header-content,
.site-header .site-primary-header-wrap,
.site-header .ast-builder-grid-row,
.site-header .mega-menu-wrap,
.site-header .max-mega-menu {
	background: transparent !important;
	background-color: transparent !important;
}

#masthead .ast-primary-header-bar {
	min-height: 72px;
}

/* Scrolled: add shadow only (bg already dark) */
#masthead.hl-header--scrolled,
.site-header.hl-header--scrolled {
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.40) !important;
}

#masthead.hl-header--scrolled .ast-primary-header-bar {
	min-height: 60px;
}

/* Logo image */
#masthead .site-branding img,
#masthead .ast-site-identity img,
.site-header .site-branding img,
.site-header .ast-site-identity img,
.hl-logo img,
.custom-logo {
	height: 40px;
	width: auto;
	display: block;
	transition: transform 250ms ease, opacity 250ms ease;
}

.hl-header--scrolled .hl-logo img,
.hl-header--scrolled .custom-logo {
	transform: scale(0.9);
}

/* ── Logo: CSS image-replacement on the site-title link ── */
.ast-site-identity .site-title a,
#masthead .site-title a,
.site-header .site-title a {
	display: block !important;
	width: 220px !important;
	height: 44px !important;
	overflow: hidden !important;
	text-indent: -9999px !important;
	font-size: 0 !important;
	background: url('images/hongli-logo.svg') left center / contain no-repeat !important;
}

.ast-site-identity .site-title a *,
#masthead .site-title a *,
.site-header .site-title a * {
	display: none !important;
}

/* ── Style C: vertical divider + orange active ───────── */
#masthead .mega-menu-link,
.site-header .mega-menu-link,
#masthead .main-header-menu > .menu-item > a,
#masthead .main-header-menu > .menu-item > .menu-link {
	padding: 0 18px !important;
	color: rgba(255,255,255,.68) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	background: transparent !important;
	border-bottom: none !important;
	transition: color .15s !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
}

#masthead .mega-menu-link:hover,
.site-header .mega-menu-link:hover,
#masthead .main-header-menu > .menu-item > a:hover,
#masthead .main-header-menu > .menu-item > .menu-link:hover {
	color: #fff !important;
	background: rgba(255,255,255,.06) !important;
}

/* Hover state: subtle highlight on the LI container */
#masthead .max-mega-menu > li:hover > .mega-menu-link,
.site-header .max-mega-menu > li:hover > .mega-menu-link,
#masthead .max-mega-menu > li.is-megamenu-open > .mega-menu-link {
	color: #fff !important;
	background: rgba(255,255,255,.08) !important;
}

/* Bottom accent line on hover/open */
#masthead .max-mega-menu > li > .mega-menu-link::after,
.site-header .max-mega-menu > li > .mega-menu-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 10%;
	right: 10%;
	height: 2px;
	background: #E8500A;
	transform: scaleX(0);
	transition: transform .2s ease;
}

#masthead .max-mega-menu > li:hover > .mega-menu-link::after,
.site-header .max-mega-menu > li:hover > .mega-menu-link::after,
#masthead .max-mega-menu > li.is-megamenu-open > .mega-menu-link::after,
#masthead .max-mega-menu > li.mega-current-menu-item > .mega-menu-link::after {
	transform: scaleX(1);
}

/* Vertical divider between items via ::before on each LI (except first) */
#masthead .max-mega-menu > li + li::before,
.site-header .max-mega-menu > li + li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 20%;
	height: 60%;
	width: 1px;
	background: rgba(255,255,255,.15);
	pointer-events: none;
}

/* Active / current page item → orange (Max Mega Menu uses mega-current-* classes) */
#masthead .max-mega-menu > li.mega-current-menu-item > .mega-menu-link,
#masthead .max-mega-menu > li.mega-current-menu-item > a,
#masthead .max-mega-menu > li.mega-current_page_ancestor > .mega-menu-link,
#masthead .max-mega-menu > li.mega-current_page_ancestor > a,
.site-header .max-mega-menu > li.mega-current-menu-item > .mega-menu-link,
.site-header .max-mega-menu > li.mega-current-menu-item > a {
	color: #E8500A !important;
}

/* Stretch all nav wrappers to fill available width (let mega menu handle display internally) */
#masthead .ast-builder-layout-element.ast-builder-menu-1,
.site-header .ast-builder-layout-element.ast-builder-menu-1 {
	flex: 1 1 0% !important;
}

#masthead .ast-main-header-bar-alignment,
#masthead .mega-menu-wrap,
.site-header .ast-main-header-bar-alignment,
.site-header .mega-menu-wrap {
	width: 100% !important;
}

#masthead .max-mega-menu > li,
.site-header .max-mega-menu > li {
	float: none !important;
	flex-shrink: 0 !important;
	position: relative !important;
}

/* Force header and all its Astra wrappers to be full viewport width */
#masthead,
.site-header,
#masthead .ast-main-header-wrap,
#masthead .main-header-bar-wrap,
#masthead .ast-primary-header-bar,
#masthead .site-primary-header-wrap {
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Astra grid: logo left, nav fills middle, search anchors right */
#masthead .ast-builder-grid-row,
.site-header .ast-builder-grid-row {
	grid-template-columns: 240px 1fr !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Nav items: compact group, centered-right */
#masthead .max-mega-menu,
.site-header .max-mega-menu {
	display: flex !important;
	justify-content: center !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	gap: 0 !important;
	padding-right: 24px !important;
	box-sizing: border-box !important;
}

/* Push search to far right */
#masthead .max-mega-menu > .hl-nav-search-item,
.site-header .max-mega-menu > .hl-nav-search-item {
	margin-left: auto !important;
}

/* Right-section fills remaining header space */
.site-header-primary-section-right,
.ast-builder-grid-row-has-sides .site-header-primary-section-right {
	flex: 1 1 0% !important;
	justify-content: flex-end;
	display: flex;
	align-items: center;
	min-width: 0;
}

/* Nav links right-aligned (Astra default, no overrides needed) */

/* All nav links white (standard + mega menu) */
#masthead .mega-menu-link,
.site-header .mega-menu-link,
#masthead .main-header-menu > .menu-item > .menu-link,
#masthead .main-header-menu > .menu-item > a,
.site-header .main-header-menu > .menu-item > .menu-link,
.site-header .main-header-menu > .menu-item > a {
	color: rgba(255,255,255,.85) !important;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .3px;
	transition: color .2s ease;
}

#masthead .main-header-menu > .menu-item > .menu-link:hover,
#masthead .main-header-menu > .menu-item > a:hover,
.site-header .main-header-menu > .menu-item > .menu-link:hover,
.site-header .main-header-menu > .menu-item > a:hover,
#masthead .main-header-menu > .menu-item.current-menu-item > a {
	color: #E8500A !important;
}

.hl-header--scrolled .main-header-menu > .menu-item > .menu-link,
.hl-header--scrolled .main-header-menu > .menu-item > a,
.hl-header--scrolled .ast-builder-menu .main-header-menu .menu-link {
	color: #FFFFFF !important;
}

/* === HL Mega Menu === */


/* ── Panel shell ─────────────────────────────────────────────────── */


/* Transparent upward bridge — fills the gap between nav bar and panel */


/* JS controls .is-megamenu-open on the <li>; :focus-within is keyboard fallback */


/* ── Layout: cols left + featured right ──────────────────────────── */




/* Row divider between the two grid rows */


/* About Us: 2 columns */


/* ── Each category column ────────────────────────────────────────── */


/* Thumbnail image per category */


/* Category title link */








/* Sub-items */












/* ── Right: featured panel ───────────────────────────────────────── */










/* ── CTA button ──────────────────────────────────────────────────── */
.hl-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	padding: 9px 20px;
	border-radius: 4px;
	font-family: Inter, "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: none;
	transition: background 200ms ease, color 200ms ease, transform 150ms ease;
}

.hl-btn--primary {
	background: #E8500A;
	color: #FFFFFF;
}

.hl-btn--primary:hover,
.hl-btn--primary:focus-visible {
	background: #0D1B2A;
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	
}

/* ================================================================
   HL HOMEPAGE SECTIONS
   ================================================================ */

/* ── Shared tokens ─────────────────────────────────────────────── */
:root {
	--hl-navy:   #0D1B2A;
	--hl-orange: #E8500A;
	--hl-grey:   #F4F5F7;
	--hl-text:   #333333;
	--hl-muted:  #6C757D;
	--hl-max:    1280px;
	--hl-pad:    clamp(20px, 4vw, 60px);
}

.hl-container {
	max-width: var(--hl-max);
	margin: 0 auto;
	padding: 0 var(--hl-pad);
}

.hl-section {
	padding: clamp(56px, 8vw, 100px) 0;
}

.hl-section__header {
	text-align: center;
	margin-bottom: 48px;
}

.hl-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hl-orange);
	margin-bottom: 10px;
}

.hl-label--accent {
	color: var(--hl-navy);
}

.hl-section__title {
	font-size: clamp(26px, 3.5vw, 40px);
	font-weight: 700;
	color: var(--hl-navy) !important;
	margin: 0 0 14px;
	line-height: 1.2;
}

.hl-section__sub {
	font-size: 16px;
	color: var(--hl-muted);
	max-width: 560px;
	margin: 0 auto;
	line-height: 1.6;
}

.hl-section__more {
	text-align: center;
	margin-top: 40px;
}

/* ── Shared buttons (homepage extends mega-menu btn) ──────────── */
.hl-btn--lg {
	padding: 14px 28px;
	font-size: 15px;
}

.hl-btn--outline {
	background: transparent;
	color: #FFFFFF;
	border: 2px solid rgba(255,255,255,.7);
}

.hl-btn--outline:hover,
.hl-btn--outline:focus-visible {
	background: rgba(255,255,255,.12);
	border-color: #FFFFFF;
	color: #FFFFFF;
}

.hl-btn--dark {
	background: var(--hl-navy);
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 200ms ease;
}

.hl-btn--dark:hover {
	background: #1a2e42;
	color: #FFFFFF;
}

.hl-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--hl-orange);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: gap 160ms ease, color 160ms ease;
}

.hl-link-arrow:hover {
	gap: 10px;
	color: #c43f00;
}

/* ════════════════════════════════════════════════════════════════
   §1  HERO
════════════════════════════════════════════════════════════════ */
.hl-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	color: #FFFFFF;
}

.hl-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--hl-navy);
}

.hl-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .55;
}

.hl-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(13,27,42,.5) 0%, rgba(13,27,42,.75) 100%);
}

.hl-hero__body {
	position: relative;
	z-index: 1;
	max-width: 780px;
	padding: 0 24px;
}

.hl-hero__eyebrow {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255,255,255,.75);
	margin-bottom: 18px;
}

.hl-hero__title {
	font-size: clamp(36px, 6vw, 72px);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 20px;
	letter-spacing: -.5px;
	color: #FFFFFF !important;
	text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.hl-hero__sub {
	font-size: clamp(15px, 1.8vw, 18px);
	color: rgba(255,255,255,.8);
	line-height: 1.6;
	margin-bottom: 36px;
}

.hl-hero__ctas {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.hl-hero__scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	animation: hl-bounce 2s ease-in-out infinite;
	opacity: .7;
}

@keyframes hl-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%       { transform: translateX(-50%) translateY(6px); }
}

/* ════════════════════════════════════════════════════════════════
   §2  PRODUCTS (Tab switching)
════════════════════════════════════════════════════════════════ */
.hl-products {
	background: var(--hl-grey);
}

/* Tab nav */
.hl-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 36px;
	border-bottom: 2px solid #E4E6EA;
	padding-bottom: 0;
}

.hl-tabs__btn {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hl-muted);
	cursor: pointer;
	transition: color 150ms ease, border-color 150ms ease;
	white-space: nowrap;
}

.hl-tabs__btn.is-active,
.hl-tabs__btn:hover {
	color: var(--hl-orange);
	border-bottom-color: var(--hl-orange);
}

/* Tab panels */
.hl-tabs__panel {
	display: none;
}

.hl-tabs__panel.is-active {
	display: block;
}

/* Product card grid — 5 per row desktop, 2 mobile */
.hl-prod-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

@media (max-width: 1100px) { .hl-prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .hl-prod-grid { grid-template-columns: repeat(2, 1fr); } }

.hl-prod-card {
	background: #FFFFFF;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	transition: box-shadow 200ms ease, transform 200ms ease;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.hl-prod-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	transform: translateY(-3px);
}

.hl-prod-card__img-wrap {
	background: #E9ECEF;
	aspect-ratio: 4/3;
	overflow: hidden;
}

.hl-prod-card__img-wrap.no-img {
	background: linear-gradient(135deg, #e0e3e7, #cdd1d6);
}

.hl-prod-card__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

.hl-prod-card:hover .hl-prod-card__img-wrap img {
	transform: scale(1.04);
}

.hl-prod-card__body {
	padding: 14px 14px 10px;
	flex: 1;
}

.hl-prod-card__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--hl-navy);
	margin: 0 0 5px;
	line-height: 1.3;
}

.hl-prod-card__spec {
	font-size: 12px;
	color: var(--hl-muted);
	margin: 0;
}

.hl-prod-card__cta {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--hl-orange);
	border-top: 1px solid #F0F0F0;
	transition: gap 150ms ease;
}

.hl-prod-card:hover .hl-prod-card__cta {
	gap: 8px;
}

.hl-tabs__footer {
	margin-top: 28px;
	text-align: right;
}

/* ════════════════════════════════════════════════════════════════
   §3  ABOUT US
════════════════════════════════════════════════════════════════ */
.hl-about__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

@media (max-width: 900px) {
	.hl-about__inner { grid-template-columns: 1fr; gap: 40px; }
	.hl-about__media { order: -1; }
}

.hl-about__desc {
	font-size: 15.5px;
	color: #444;
	line-height: 1.75;
	margin-bottom: 28px;
}

.hl-timeline {
	border-left: 2px solid #EBEBEB;
	padding-left: 20px;
	margin-bottom: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hl-timeline__item {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.hl-timeline__year {
	font-size: 13px;
	font-weight: 700;
	color: var(--hl-orange);
	min-width: 38px;
}

.hl-timeline__event {
	font-size: 14px;
	color: #555;
}

.hl-about__actions {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.hl-about__img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 10px;
	background: linear-gradient(135deg, #dce0e6, #c8cdd4);
}

.hl-about__media.no-img .hl-about__img {
	background: linear-gradient(135deg, #dce0e6, #c8cdd4);
}

/* Trust bar */
.hl-trust-bar {
	background: var(--hl-navy);
	padding: 32px 0;
	margin-top: clamp(56px, 8vw, 100px);
}

.hl-trust-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	flex-wrap: wrap;
}

.hl-trust-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 40px;
	text-align: center;
}

.hl-trust-bar__num {
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 800;
	color: #FFFFFF;
	line-height: 1;
	display: block;
	margin-bottom: 6px;
}

.hl-trust-bar__label {
	font-size: 12px;
	color: rgba(255,255,255,.65);
	letter-spacing: .5px;
	text-transform: uppercase;
}

.hl-trust-bar__sep {
	width: 1px;
	height: 48px;
	background: rgba(255,255,255,.15);
}

@media (max-width: 640px) {
	.hl-trust-bar__sep { display: none; }
	.hl-trust-bar__item { padding: 12px 20px; }
}

/* ════════════════════════════════════════════════════════════════
   §4  APPLICATION SCENARIOS — full-width split-panel strip
════════════════════════════════════════════════════════════════ */
.hl-apps {
	background: #fff;
	padding-bottom: 0;
}

.hl-apps .hl-section__header {
	padding-bottom: 48px;
}

.hl-apps__strip {
	display: flex;
	width: 100%;
	height: 300px;
	background: url('images/hero-product-banner-1920x560.jpg') center / cover no-repeat;
	overflow: hidden;
	position: relative;
}

.hl-apps__panel {
	position: relative;
	flex: 1;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	border-right: 1px solid rgba(255, 255, 255, .2);
}

.hl-apps__panel:last-child {
	border-right: none;
}

.hl-apps__panel:focus-visible {
	outline: 2px solid #E8500A;
	outline-offset: -2px;
}

/* Overlay: dark by default, orange on hover */
.hl-apps__panel-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(13,27,42,.82) 0%,
		rgba(13,27,42,.42) 50%,
		rgba(13,27,42,.14) 100%);
	transition: background .32s ease;
}

.hl-apps__panel:hover .hl-apps__panel-overlay,
.hl-apps__panel:focus-visible .hl-apps__panel-overlay {
	background: linear-gradient(to top,
		rgba(232,80,10,.92) 0%,
		rgba(13,27,42,.55) 55%,
		rgba(13,27,42,.18) 100%);
}

/* Content sits at bottom, slides up on hover */
.hl-apps__panel-content {
	position: relative;
	z-index: 2;
	padding: 0 22px 22px;
	color: #fff;
	width: 100%;
	transform: translateY(0);
}

.hl-apps__panel-icon {
	display: block;
	width: 34px;
	height: 34px;
	margin-bottom: 10px;
	color: #fff;
	opacity: .85;
	transition: transform .28s ease, opacity .28s ease;
}

.hl-apps__panel:hover .hl-apps__panel-icon,
.hl-apps__panel:focus-visible .hl-apps__panel-icon {
	opacity: 1;
	transform: scale(1.08) translateY(-2px);
}

.hl-apps__panel-title {
	font-size: clamp(13px, 1.2vw, 16px);
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.3;
}

/* Fit + desc + cta: hidden below, slide up on hover */
.hl-apps__panel-fit,
.hl-apps__panel-desc,
.hl-apps__panel-cta {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
}

.hl-apps__panel-fit {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .4px;
	color: rgba(255,255,255,.75);
	margin: 6px 0 0;
	transition: max-height .32s ease .05s, opacity .26s ease .05s;
}

.hl-apps__panel-desc {
	font-size: 12.5px;
	color: rgba(255,255,255,.88);
	line-height: 1.55;
	margin: 8px 0 0;
	transition: max-height .35s ease .1s, opacity .28s ease .1s;
}

.hl-apps__panel-cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 14px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,.55);
	padding-bottom: 2px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .28s ease .16s, transform .28s ease .16s;
}

.hl-apps__panel:hover .hl-apps__panel-fit,
.hl-apps__panel:focus-visible .hl-apps__panel-fit {
	max-height: 36px;
	opacity: 1;
}

.hl-apps__panel:hover .hl-apps__panel-desc,
.hl-apps__panel:focus-visible .hl-apps__panel-desc {
	max-height: 80px;
	opacity: 1;
}

.hl-apps__panel:hover .hl-apps__panel-cta,
.hl-apps__panel:focus-visible .hl-apps__panel-cta {
	max-height: 36px;
	opacity: 1;
	transform: translateY(0);
}

/* Mobile: vertical accordion */
@media (max-width: 700px) {
	.hl-apps__strip {
		flex-direction: column;
		height: auto;
	}
	.hl-apps__panel {
		flex: none;
		height: 64px;
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,.18);
		transition: height .4s ease;
		align-items: center;
	}
	.hl-apps__panel:last-child { border-bottom: none; }
	.hl-apps__panel.is-active {
		height: 180px;
		align-items: flex-end;
	}
	.hl-apps__panel.is-active .hl-apps__panel-fit,
	.hl-apps__panel.is-active .hl-apps__panel-desc {
		max-height: 80px;
		opacity: 1;
	}
	.hl-apps__panel.is-active .hl-apps__panel-cta {
		max-height: 36px;
		opacity: 1;
		transform: translateY(0);
	}
	.hl-apps__panel-content { padding: 0 18px 16px; }
	.hl-apps__panel-title { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════
   §5  CUSTOMER CASES
════════════════════════════════════════════════════════════════ */
.hl-cases__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 900px) { .hl-cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hl-cases__grid { grid-template-columns: 1fr; } }

.hl-case-card {
	border-radius: 8px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 2px 12px rgba(0,0,0,.07);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.hl-case-card:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,.13);
	transform: translateY(-3px);
}

.hl-case-card__img-wrap {
	position: relative;
	aspect-ratio: 16/10;
	background: #E0E3E7;
	overflow: hidden;
}

.hl-case-card__img-wrap.no-img {
	background: linear-gradient(135deg, #dce0e6, #c8cdd4);
}

.hl-case-card__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hl-case-card__flag {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 24px;
	line-height: 1;
	background: rgba(255,255,255,.9);
	border-radius: 4px;
	padding: 2px 4px;
}

.hl-case-card__body {
	padding: 16px;
}

.hl-case-card__qty {
	font-size: 18px;
	font-weight: 700;
	color: var(--hl-orange);
	margin: 0 0 4px;
}

.hl-case-card__product {
	font-size: 15px;
	font-weight: 600;
	color: var(--hl-navy);
	margin: 0 0 8px;
}

.hl-case-card__country {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--hl-muted);
	margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   §6  WHY CHOOSE US / DEALER
════════════════════════════════════════════════════════════════ */
.hl-why {
	background: var(--hl-grey);
}

.hl-why__grid {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	gap: 60px;
	align-items: start;
}

@media (max-width: 900px) {
	.hl-why__grid { grid-template-columns: 1fr; gap: 48px; }
	.hl-why__divider { display: none; }
}

.hl-why__divider {
	background: #DDDFE3;
	align-self: stretch;
}

.hl-why__title {
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: 700;
	color: var(--hl-navy);
	margin: 8px 0 20px;
	line-height: 1.25;
}

.hl-why__dealer-intro {
	font-size: 15px;
	color: #444;
	margin-bottom: 20px;
	line-height: 1.6;
}

.hl-why__list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hl-why__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.hl-why__icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.hl-why__item-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--hl-navy);
	display: block;
	margin-bottom: 3px;
}

.hl-why__item-desc {
	font-size: 13px;
	color: var(--hl-muted);
	margin: 0;
	line-height: 1.5;
}

.hl-why__dealer-ctas {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════
   §7  BLOG / RESOURCE CENTRE
════════════════════════════════════════════════════════════════ */
.hl-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

@media (max-width: 900px) { .hl-blog__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hl-blog__grid { grid-template-columns: 1fr; } }

.hl-blog-card {
	border-radius: 8px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 2px 12px rgba(0,0,0,.07);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.hl-blog-card:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,.13);
	transform: translateY(-3px);
}

.hl-blog-card__img-wrap {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.hl-blog-card__no-img {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e0e3e7, #cdd1d6);
}

.hl-blog-card__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

.hl-blog-card:hover .hl-blog-card__img-wrap img {
	transform: scale(1.04);
}

.hl-blog-card__cat {
	position: absolute;
	bottom: 10px;
	left: 10px;
	background: var(--hl-orange);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 3px;
}

.hl-blog-card__body {
	padding: 18px 18px 12px;
	flex: 1;
}

.hl-blog-card__date {
	font-size: 12px;
	color: var(--hl-muted);
	margin: 0 0 8px;
}

.hl-blog-card__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--hl-navy);
	margin: 0 0 10px;
	line-height: 1.4;
}

.hl-blog-card__excerpt {
	font-size: 13px;
	color: #666;
	margin: 0;
	line-height: 1.55;
}

.hl-blog-card__footer {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 12px 18px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hl-orange);
	border-top: 1px solid #F0F0F0;
}

/* ── Remove Astra container constraints on homepage ─────────────── */
body.home .ast-container,
body.home #content > .ast-container,
body.home #primary {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
}

/* Astra applies container width to <main> — override for our homepage */
body.home main.hl-home,
body.home #hl-home {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.home #content,
body.home .site-content {
	padding: 0 !important;
}

body.home .entry-header,
body.home .page-header,
body.home .ast-breadcrumbs-wrapper {
	display: none !important;
}

body.home .entry-content {
	padding: 0 !important;
	margin: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   STICKY FAB — Get a Quote
════════════════════════════════════════════════════════════════ */
#hl-fab {
	position: fixed;
	bottom: 32px;
	right: 24px;
	z-index: 9000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: opacity 280ms ease, transform 280ms ease;
}

#hl-fab.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.hl-fab__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--hl-orange);
	color: #FFFFFF !important;
	padding: 12px 18px;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 4px 20px rgba(232,80,10,.45);
	transition: background 180ms ease, box-shadow 180ms ease, transform 150ms ease;
	white-space: nowrap;
}

.hl-fab__btn:hover {
	background: #c43f00;
	box-shadow: 0 6px 28px rgba(232,80,10,.55);
	transform: translateY(-2px);
	color: #FFFFFF !important;
}

.hl-fab__btn svg {
	flex-shrink: 0;
}

@media (max-width: 640px) {
	#hl-fab {
		bottom: 70px; /* above mobile bar */
		right: 16px;
	}
	.hl-fab__btn span { display: none; }
	.hl-fab__btn {
		padding: 14px;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		justify-content: center;
	}
}

/* ════════════════════════════════════════════════════════════════
   TABS — panel fade transition
════════════════════════════════════════════════════════════════ */
.hl-tabs__panel {
	animation: none;
}

.hl-tabs__panel.is-active {
	animation: hl-fadeIn 220ms ease;
}

@keyframes hl-fadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   ABOUT SECTION — image placeholder improvement
════════════════════════════════════════════════════════════════ */
.hl-about__media {
	position: relative;
}

.hl-about__media::before {
	content: '';
	position: absolute;
	inset: -12px -12px 12px 12px;
	background: var(--hl-orange);
	opacity: .08;
	border-radius: 12px;
	z-index: 0;
}

.hl-about__img {
	position: relative;
	z-index: 1;
}

/* Placeholder gradient when no image */
.hl-about__media.no-img::after {
	content: '🏭';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 72px;
	opacity: .3;
	z-index: 2;
}

/* ════════════════════════════════════════════════════════════════
   PRODUCT CARD — ensure no-img state shows properly
════════════════════════════════════════════════════════════════ */
.hl-prod-card__img-wrap.no-img {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	opacity: .4;
	background: linear-gradient(135deg, #e5e8ec 0%, #d0d4da 100%);
}

/* ════════════════════════════════════════════════════════════════
   APPLICATION CARDS — no-image default gradient backgrounds
════════════════════════════════════════════════════════════════ */
.hl-app-card:nth-child(1) { background-color: #1a2e42; }
.hl-app-card:nth-child(2) { background-color: #1e3a28; }
.hl-app-card:nth-child(3) { background-color: #1a3020; }
.hl-app-card:nth-child(4) { background-color: #2a1e18; }
.hl-app-card:nth-child(5) { background-color: #1e1e30; }

/* ════════════════════════════════════════════════════════════════
   TRUST BAR — larger, more impactful
════════════════════════════════════════════════════════════════ */
.hl-trust-bar {
	padding: 40px 0;
	margin-top: 0;
}

.hl-trust-bar__num {
	font-size: clamp(28px, 4vw, 42px) !important;
}

/* ════════════════════════════════════════════════════════════════
   HERO — additional overrides for Astra h1/h2 color reset
════════════════════════════════════════════════════════════════ */
.hl-hero .hl-hero__body h1,
.hl-hero .hl-hero__body h2 {
	color: #FFFFFF !important;
}

.hl-hero__sub {
	color: rgba(255,255,255,.85) !important;
}

/* ── Tab panel heading (h3 inside product cards) ───────────── */
.hl-prod-card__name {
	color: var(--hl-navy) !important;
}

/* === 2026 visual refresh: premium machinery hero + restrained application chooser === */
.hl-hero {
	min-height: calc(100svh - 140px);
	justify-content: stretch;
	text-align: left;
	background: #081321;
}

.hl-hero__bg {
	background: #081321;
}

.hl-hero__family {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
	transform: scale(1.01);
}

.hl-hero__video {
	display: none;
}

.hl-hero__overlay {
	background:
		linear-gradient(90deg, rgba(6, 14, 24, .98) 0%, rgba(6, 14, 24, .86) 28%, rgba(6, 14, 24, .42) 58%, rgba(6, 14, 24, .18) 100%),
		linear-gradient(180deg, rgba(6, 14, 24, .78) 0%, rgba(6, 14, 24, .1) 34%, rgba(6, 14, 24, .86) 100%);
}

.hl-hero__layout {
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: calc(100svh - 140px);
	display: grid;
	grid-template-columns: minmax(360px, 560px) 1fr;
	align-items: center;
	gap: clamp(36px, 6vw, 92px);
	padding-top: clamp(44px, 6vw, 88px);
	padding-bottom: clamp(48px, 7vw, 86px);
}

.hl-hero__body {
	max-width: 560px;
	padding: 0;
}

.hl-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(10px);
	font-size: 12px;
	letter-spacing: 1.4px;
	color: rgba(255, 255, 255, .78);
	margin-bottom: 22px;
}

.hl-hero__title {
	max-width: 620px;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1;
	letter-spacing: 0;
	margin-bottom: 24px;
	text-shadow: 0 18px 50px rgba(0, 0, 0, .42);
}

.hl-hero__sub {
	max-width: 540px;
	font-size: clamp(15px, 1.35vw, 18px);
	line-height: 1.68;
	color: rgba(255, 255, 255, .82) !important;
	margin-bottom: 34px;
}

.hl-hero__ctas {
	justify-content: flex-start;
	margin-bottom: 30px;
}

.hl-hero__proof {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	max-width: 620px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .14);
}

.hl-hero__proof span {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: rgba(8, 19, 33, .72);
	color: rgba(255, 255, 255, .68);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .6px;
}

.hl-hero__proof strong {
	color: #FFFFFF;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0;
}

.hl-hero__visual {
	align-self: stretch;
	position: relative;
	min-height: 520px;
}

.hl-hero__visual-tag {
	position: absolute;
	right: clamp(10px, 2vw, 32px);
	bottom: clamp(32px, 6vw, 84px);
	padding: 10px 14px;
	border-left: 3px solid var(--hl-orange);
	background: rgba(8, 19, 33, .76);
	color: rgba(255, 255, 255, .78);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

/* hl-apps overrides for this breakpoint context — handled in §4 above */

.site-title,
.site-title a {
	font-size: clamp(18px, 1.7vw, 24px);
	line-height: 1.18;
	letter-spacing: 0;
}

.ast-primary-header-bar {
	min-height: 66px;
}

.main-header-menu > .menu-item > .menu-link,
.main-header-menu > .menu-item > a,
.ast-builder-menu .main-header-menu .menu-link {
	font-size: 14px;
}

#masthead.hl-header--scrolled .site-title,
#masthead.hl-header--scrolled .site-title a,
.site-header.hl-header--scrolled .site-title,
.site-header.hl-header--scrolled .site-title a {
	color: #FFFFFF !important;
	opacity: .9;
}

#masthead.hl-header--scrolled .site-description,
.site-header.hl-header--scrolled .site-description {
	color: rgba(255, 255, 255, .62) !important;
}

.hl-app-card__overlay,
.hl-app-card__icon {
	display: none;
}

.hl-app-card__body {
	display: grid;
	grid-template-columns: 52px minmax(150px, .62fr) 1fr auto;
	align-items: center;
	gap: 18px;
	padding: 22px 24px;
	color: var(--hl-navy);
}

.hl-app-card__num {
	color: var(--hl-orange);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1px;
}

.hl-app-card__title {
	color: var(--hl-navy);
	font-size: 18px;
	line-height: 1.2;
	margin: 0;
}

.hl-app-card__fit {
	margin: 0;
	color: #657180;
	font-size: 13px;
	line-height: 1.45;
}

.hl-app-card__desc {
	max-height: none;
	opacity: 1;
	margin: 0;
	color: #4E5968;
	font-size: 13px;
	line-height: 1.5;
}

.hl-app-card__link {
	opacity: 1;
	transform: none;
	color: var(--hl-orange);
	white-space: nowrap;
}

.hl-app-card:hover .hl-app-card__title,
.hl-app-card:hover .hl-app-card__desc,
.hl-app-card:hover .hl-app-card__fit,
.hl-app-card.is-hover .hl-app-card__title,
.hl-app-card.is-hover .hl-app-card__desc,
.hl-app-card.is-hover .hl-app-card__fit,
.hl-app-card:focus-visible .hl-app-card__title,
.hl-app-card:focus-visible .hl-app-card__desc,
.hl-app-card:focus-visible .hl-app-card__fit {
	color: rgba(255, 255, 255, .86);
}

.hl-app-card:hover .hl-app-card__title,
.hl-app-card.is-hover .hl-app-card__title,
.hl-app-card:focus-visible .hl-app-card__title {
	color: #FFFFFF;
}

@media (max-width: 1100px) {
	.hl-hero__layout {
		grid-template-columns: 1fr;
	}

	.hl-hero__visual {
		display: none;
	}

	.hl-apps__layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.hl-hero,
	.hl-hero__layout {
		min-height: 760px;
	}

	.hl-hero__family {
		object-position: 63% center;
	}

	.hl-hero__overlay {
		background:
			linear-gradient(180deg, rgba(6, 14, 24, .68) 0%, rgba(6, 14, 24, .76) 44%, rgba(6, 14, 24, .98) 100%),
			linear-gradient(90deg, rgba(6, 14, 24, .88), rgba(6, 14, 24, .44));
	}

	.hl-hero__body {
		align-self: end;
		padding-bottom: 28px;
	}

	.hl-hero__proof {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hl-apps__feature {
		min-height: 340px;
	}

	.hl-app-card__body {
		grid-template-columns: 40px 1fr;
		gap: 10px 14px;
	}

	.hl-app-card__fit,
	.hl-app-card__desc,
	.hl-app-card__link {
		grid-column: 2;
	}
}

/* Compact 1920x400 banner treatment */
.hl-hero {
	min-height: 370px;
}

.hl-hero__layout {
	min-height: 370px;
	padding-top: 24px;
	padding-bottom: 24px;
	grid-template-columns: minmax(320px, 520px) 1fr;
	max-width: 100%;
	padding-left: clamp(28px, 4.6vw, 88px);
	padding-right: clamp(28px, 4.6vw, 88px);
}

.hl-hero__family {
	object-position: center center;
}

.hl-hero__overlay {
	background:
		linear-gradient(90deg, rgba(6, 14, 24, .97) 0%, rgba(6, 14, 24, .84) 30%, rgba(6, 14, 24, .36) 58%, rgba(6, 14, 24, .08) 100%),
		linear-gradient(180deg, rgba(6, 14, 24, .28) 0%, rgba(6, 14, 24, .1) 46%, rgba(6, 14, 24, .42) 100%);
}

.hl-hero__eyebrow {
	margin-bottom: 14px;
	padding: 7px 11px;
	font-size: 11px;
}

.hl-hero__title {
	max-width: 500px;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.04;
	margin-bottom: 16px;
}

.hl-hero__sub {
	max-width: 470px;
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 18px;
}

.hl-hero__ctas {
	margin-bottom: 0;
}

.hl-hero__proof {
	display: none;
}

.hl-hero__visual {
	min-height: 300px;
}

.hl-hero__visual-tag {
	display: none;
}

.hl-hero__scroll {
	display: none;
}

@media (max-width: 760px) {
	.hl-hero,
	.hl-hero__layout {
		min-height: 520px;
	}

	.hl-hero__layout {
		padding-top: 44px;
		padding-bottom: 38px;
	}

	.hl-hero__family {
		object-position: 84% center;
	}

	.hl-hero__overlay {
		background:
			linear-gradient(180deg, rgba(6, 14, 24, .56) 0%, rgba(6, 14, 24, .72) 42%, rgba(6, 14, 24, .98) 100%),
			linear-gradient(90deg, rgba(6, 14, 24, .84), rgba(6, 14, 24, .46));
	}

	.hl-hero__title {
		font-size: clamp(32px, 10vw, 44px);
	}

	.hl-hero__sub {
		font-size: 14px;
	}
}


.hl-hero__eyebrow,
.hl-hero__sub {
	display: none;
}

.hl-hero__layout {
	padding-top: 18px;
	padding-bottom: 18px;
}

.hl-hero__title {
	max-width: 440px;
	font-size: clamp(30px, 3.2vw, 44px);
	margin-bottom: 24px;
}

.hl-products {
	padding-top: 38px;
}

.hl-products .hl-section__header {
	margin-bottom: 30px;
}

@media (max-width: 760px) {
	.site-title,
	.site-title a {
		max-width: 280px;
		white-space: normal;
	}

	.hl-hero,
	.hl-hero__layout {
		min-height: 430px;
	}
}

/* Taller 1920x560 hero image pass */
.hl-hero {
	min-height: 520px;
}

.hl-hero__layout {
	min-height: 520px;
	padding-top: 42px;
	padding-bottom: 42px;
}

.hl-hero__family {
	object-position: center center;
}

.hl-hero__overlay {
	background:
		linear-gradient(90deg, rgba(6, 14, 24, .98) 0%, rgba(6, 14, 24, .86) 32%, rgba(6, 14, 24, .36) 58%, rgba(6, 14, 24, .1) 100%),
		linear-gradient(180deg, rgba(6, 14, 24, .22) 0%, rgba(6, 14, 24, .06) 48%, rgba(6, 14, 24, .5) 100%);
}

.hl-hero__title {
	max-width: 500px;
	font-size: clamp(36px, 3.7vw, 54px);
	line-height: 1.04;
	margin-bottom: 28px;
}

.hl-products {
	padding-top: 28px;
}

.hl-products .hl-section__header {
	margin-bottom: 24px;
}

@media (max-width: 760px) {
	.hl-hero,
	.hl-hero__layout {
		min-height: 560px;
	}

	.hl-hero__family {
		object-position: 82% center;
	}

	.hl-hero__title {
		font-size: clamp(32px, 9.6vw, 44px);
	}
}

/* Premium compact header pass */
.hl-topbar {
	background: #0b1a28 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
	color: rgba(255, 255, 255, .78) !important;
	min-height: 42px;
}

.hl-topbar__inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1440px;
	min-height: 42px;
	padding: 0 clamp(28px, 5.4vw, 88px);
	width: 100%;
}

.hl-topbar__left,
.hl-topbar__right,
.hl-topbar__social {
	align-items: center;
	display: flex;
	gap: 22px;
}

.hl-topbar__item {
	align-items: center;
	color: rgba(255, 255, 255, .78) !important;
	display: inline-flex;
	font-size: 13px;
	font-weight: 500;
	gap: 8px;
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
}

.hl-topbar__item svg {
	color: #f36c21;
	height: 14px;
	width: 14px;
}

.hl-topbar__social {
	border-left: 1px solid rgba(255, 255, 255, .14);
	border-right: 1px solid rgba(255, 255, 255, .14);
	gap: 8px;
	padding: 0 18px;
}

.hl-topbar__social-link {
	align-items: center;
	/* background comes from inline style on each link — do NOT override */
	border: 0 !important;
	border-radius: 50% !important;
	color: #fff !important;
	display: inline-flex;
	font-size: 0;
	height: 24px;
	justify-content: center;
	opacity: .9 !important;
	text-decoration: none !important;
	width: 24px;
	flex-shrink: 0;
	transition: opacity .2s, transform .2s;
}

.hl-topbar__social-link:hover {
	opacity: 1 !important;
	transform: translateY(-1px);
}

.hl-topbar__social-link svg {
	fill: #fff !important;
	height: 13px;
	width: 13px;
}

.hl-topbar__social-link:hover,
.hl-topbar__item:hover {
	color: #ffffff !important;
}

/* old duplicate block removed */

.main-header-menu > .menu-item > .menu-link,
.main-header-menu > .menu-item > a,
.ast-builder-menu .main-header-menu .menu-link {
	align-items: center;
	color: rgba(255, 255, 255, .9) !important;
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	height: 100%;
	letter-spacing: 0;
	padding-left: 14px;
	padding-right: 14px;
	white-space: nowrap;
}

.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu .main-header-menu .menu-link:hover {
	background: rgba(255, 255, 255, .1) !important;
	color: #ffffff !important;
}

.main-header-menu > .menu-item.current-menu-item > .menu-link::after,
.main-header-menu > .menu-item > .menu-link:hover::after {
	background: #f36c21;
	bottom: 0;
	content: "";
	height: 2px;
	left: 16px;
	position: absolute;
	right: 16px;
}

.main-header-menu > .menu-item > .menu-link {
	position: relative;
}

@media (max-width: 1024px) {
	.hl-topbar__inner {
		padding-left: 22px;
		padding-right: 22px;
	}

	.hl-topbar__left {
		gap: 14px;
	}

	.hl-topbar__item {
		font-size: 12px;
	}

	.custom-logo-link img,
	.hl-logo img,
	img.custom-logo {
		max-width: 160px !important;
		width: 160px !important;
	}
}

@media (max-width: 760px) {
	.hl-topbar__inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.hl-topbar__left,
	.hl-topbar__right {
		flex-wrap: wrap;
		gap: 12px;
	}

	.hl-topbar__social {
		border-left: 0;
		padding-left: 0;
	}
}

/* Header polish fix: logo crop and nav wrap */
.site-header .ast-builder-grid-row,
#masthead .ast-builder-grid-row {
	box-sizing: border-box;
	padding-left: clamp(28px, 5.4vw, 88px) !important;
}

.main-header-menu,
.ast-builder-menu .main-header-menu {
	flex-wrap: nowrap !important;
}


@media (max-width: 1024px) {
	.site-header .ast-builder-grid-row,
	#masthead .ast-builder-grid-row {
		padding-left: 22px !important;
	}

	.custom-logo-link,
	.hl-logo,
	.custom-logo-link img,
	.hl-logo img,
	img.custom-logo {
		max-width: 150px !important;
		width: 150px !important;
	}
}

/* Final approved header: scheme 3 + reverse logo */
body .hl-topbar {
	background: #0a1826 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
	height: 50px !important;
	min-height: 50px !important;
}

body .hl-topbar__inner {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	margin: 0 auto;
	max-width: 1440px;
	min-height: 50px !important;
	padding: 0 72px 0 372px !important;
	width: 100%;
}

body .hl-topbar__left,
body .hl-topbar__right {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 22px;
}

body .hl-topbar__left {
	margin-right: 22px;
}

body .hl-topbar__item {
	align-items: center;
	color: rgba(255, 255, 255, .78) !important;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 7px;
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
}

body .hl-topbar__item span {
	color: #ffffff;
}

body .hl-topbar__item span::first-letter {
	color: inherit;
}

body .hl-topbar__item svg {
	color: #f06423 !important;
	height: 14px;
	width: 14px;
}

body .hl-topbar__social {
	align-items: center;
	border-left: 1px solid rgba(255, 255, 255, .14);
	border-right: 1px solid rgba(255, 255, 255, .14);
	display: flex;
	gap: 8px;
	padding: 0 16px;
}

body .hl-topbar__social-link {
	align-items: center;
	border: 0 !important;
	border-radius: 50% !important;
	display: inline-flex;
	height: 22px;
	justify-content: center;
	opacity: .9 !important;
	text-decoration: none !important;
	transition: opacity .2s ease, transform .2s ease;
	width: 22px;
}

body .hl-topbar__social-link:hover {
	opacity: 1 !important;
	transform: translateY(-1px);
}

body .hl-topbar__social-link svg {
	fill: #ffffff !important;
	height: 12px;
	width: 12px;
}

body .hl-topbar__lang-text {
	color: rgba(255, 255, 255, .86);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

body #masthead,
body .site-header,
body #masthead .ast-primary-header-bar,
body .site-header .ast-primary-header-bar {
	background: #0d1f31 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
	box-shadow: none !important;
}

body #masthead .ast-primary-header-bar,
body .site-header .ast-primary-header-bar {
	min-height: 94px !important;
}

body .site-header .ast-builder-grid-row,
body #masthead .ast-builder-grid-row,
body .ast-primary-header-bar .ast-builder-grid-row {
	align-items: center !important;
	box-sizing: border-box;
	display: grid !important;
	grid-template-columns: 300px minmax(0, 1fr) !important;
	min-height: 94px !important;
	padding-left: 72px !important;
	padding-right: 72px !important;
}

body .site-branding,
body .ast-site-identity {
	padding: 0 !important;
}

body .site-title,
body .site-title a {
	display: block !important;
	font-size: 0 !important;
	height: 44px !important;
	line-height: 0 !important;
	margin: 0 !important;
	max-width: 230px !important;
	overflow: visible !important;
	text-indent: 0 !important;
	width: 230px !important;
}

body .site-title a::before {
	background: url("images/hongli-logo-reverse.png") left center / contain no-repeat !important;
	content: "" !important;
	display: block !important;
	height: 44px !important;
	width: 220px !important;
}

body .custom-logo-link img,
body .hl-logo img,
body img.custom-logo {
	content: url("images/hongli-logo-reverse.png") !important;
	height: auto !important;
	max-height: 34px !important;
	max-width: 220px !important;
	width: 220px !important;
}

body .main-header-bar-navigation,
body .ast-builder-menu-1,
body .ast-builder-menu,
body .ast-main-header-bar-alignment {
	justify-self: end !important;
	width: auto !important;
}

body .main-header-menu,
body .ast-builder-menu .main-header-menu {
	align-items: center;
	background: transparent !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 2px;
	height: 94px;
	justify-content: flex-end;
}

body .main-header-menu > .menu-item > .menu-link,
body .main-header-menu > .menu-item > a,
body .ast-builder-menu .main-header-menu .menu-link {
	align-items: center;
	background: transparent !important;
	border-bottom: 2px solid transparent;
	color: rgba(255, 255, 255, .9) !important;
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	height: auto !important;
	line-height: 1;
	padding: 14px 12px !important;
	position: relative;
	text-decoration: none !important;
	white-space: nowrap;
}

body .main-header-menu > .menu-item.current-menu-item > .menu-link,
body .main-header-menu > .menu-item > .menu-link:hover,
body .ast-builder-menu .main-header-menu .menu-link:hover {
	background: transparent !important;
	border-bottom-color: #f06423;
	color: #ffffff !important;
}

body .main-header-menu > .menu-item.current-menu-item > .menu-link::after,
body .main-header-menu > .menu-item > .menu-link:hover::after {
	display: none !important;
}

body .hl-nav-search-item,
body .hl-nav-lang-item {
	display: none !important;
}

body .hl-nav-quote-item {
	margin-left: 18px !important;
}

body .main-header-menu > .hl-nav-quote-item > .hl-nav-quote,
body .ast-builder-menu .main-header-menu .hl-nav-quote {
	background: #ffffff !important;
	border: 0 !important;
	border-radius: 4px;
	color: #0b1a28 !important;
	font-size: 13px;
	font-weight: 800;
	padding: 15px 18px !important;
}

body .main-header-menu > .hl-nav-quote-item > .hl-nav-quote:hover {
	background: #f06423 !important;
	color: #ffffff !important;
}

@media (max-width: 1120px) {
	body .hl-topbar__inner {
		padding-left: 260px !important;
		padding-right: 28px !important;
	}

	body .site-header .ast-builder-grid-row,
	body #masthead .ast-builder-grid-row,
	body .ast-primary-header-bar .ast-builder-grid-row {
		grid-template-columns: 220px minmax(0, 1fr) !important;
		padding-left: 28px !important;
		padding-right: 28px !important;
	}

	body .main-header-menu > .menu-item > .menu-link,
	body .main-header-menu > .menu-item > a,
	body .ast-builder-menu .main-header-menu .menu-link {
		font-size: 13px;
		padding-left: 9px !important;
		padding-right: 9px !important;
	}
}

@media (max-width: 760px) {
	body .hl-topbar {
		display: none !important;
	}

	body .site-header .ast-builder-grid-row,
	body #masthead .ast-builder-grid-row,
	body .ast-primary-header-bar .ast-builder-grid-row {
		display: flex !important;
		min-height: 72px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	body .site-title,
	body .site-title a,
	body .site-title a::before {
		height: 36px !important;
		width: 180px !important;
	}
}

/* Final header QA tweaks */
body .site-title,
body .site-title a {
	height: 36px !important;
	max-width: 205px !important;
	width: 205px !important;
}

body .site-title a::before {
	height: 36px !important;
	width: 196px !important;
}

body .custom-logo-link img,
body .hl-logo img,
body img.custom-logo {
	max-height: 30px !important;
	max-width: 196px !important;
	width: 196px !important;
}

body .main-header-menu > li.hl-nav-quote-item > a,
body .main-header-menu > li.hl-nav-quote-item > a.menu-link,
body .ast-builder-menu .main-header-menu > li.hl-nav-quote-item > a,
body .ast-builder-menu .main-header-menu > li.hl-nav-quote-item > a.menu-link {
	align-items: center !important;
	background: #ffffff !important;
	border: 0 !important;
	border-radius: 4px !important;
	color: #0b1a28 !important;
	display: inline-flex !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	height: auto !important;
	line-height: 1 !important;
	margin-left: 10px !important;
	padding: 15px 18px !important;
	text-transform: uppercase;
}

body .main-header-menu > li.hl-nav-quote-item > a:hover,
body .main-header-menu > li.hl-nav-quote-item > a.menu-link:hover,
body .ast-builder-menu .main-header-menu > li.hl-nav-quote-item > a:hover,
body .ast-builder-menu .main-header-menu > li.hl-nav-quote-item > a.menu-link:hover {
	background: #f06423 !important;
	color: #ffffff !important;
}

/* Remove old logo background and style Mega Menu CTA */
body .ast-site-identity .site-title a,
body #masthead .site-title a,
body .site-header .site-title a {
	background: none !important;
	text-indent: 0 !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item {
	align-items: center !important;
	display: inline-flex !important;
	margin-left: 18px !important;
	vertical-align: middle !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a.hl-nav-quote,
body #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a {
	align-items: center !important;
	background: #ffffff !important;
	border: 0 !important;
	border-radius: 4px !important;
	color: #0b1a28 !important;
	display: inline-flex !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	height: auto !important;
	line-height: 1 !important;
	padding: 15px 18px !important;
	text-decoration: none !important;
	text-transform: uppercase;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a.hl-nav-quote:hover,
body #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a:hover {
	background: #f06423 !important;
	color: #ffffff !important;
}

/* Navigation interaction polish: instant, consistent hover feedback */
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item,
body #mega-menu-wrap-primary #mega-menu-primary > li.menu-item {
	position: relative !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
body #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item) > a,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item) > a,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item) > .menu-link {
	border-radius: 4px !important;
	overflow: hidden;
	transition:
		background-color 80ms ease,
		color 80ms ease,
		transform 80ms ease,
		box-shadow 80ms ease !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after,
body #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item) > a::after,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item) > a::after,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item) > .menu-link::after {
	background: #f06423 !important;
	border-radius: 999px;
	bottom: 6px !important;
	content: "" !important;
	display: block !important;
	height: 2px !important;
	left: 12px !important;
	opacity: 0;
	position: absolute !important;
	right: 12px !important;
	transform: scaleX(.35);
	transform-origin: center;
	transition: opacity 80ms ease, transform 80ms ease !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:focus-within > a.mega-menu-link,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link,
body #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item):hover > a,
body #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item):focus-within > a,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item):hover > a,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item):focus-within > a,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item):hover > .menu-link,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item):focus-within > .menu-link {
	background: rgba(255, 255, 255, .105) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link::after,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:focus-within > a.mega-menu-link::after,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link::after,
body #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item):hover > a::after,
body #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item):focus-within > a::after,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item):hover > a::after,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item):focus-within > a::after,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item):hover > .menu-link::after,
body .main-header-menu > .menu-item:not(.hl-nav-quote-item):focus-within > .menu-link::after {
	opacity: 1;
	transform: scaleX(1);
}

body #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a.hl-nav-quote,
body #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a,
body .main-header-menu > li.hl-nav-quote-item > a {
	transition:
		background-color 80ms ease,
		color 80ms ease,
		transform 80ms ease,
		box-shadow 80ms ease !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a.hl-nav-quote:hover,
body #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a:hover,
body .main-header-menu > li.hl-nav-quote-item > a:hover {
	box-shadow: 0 10px 22px rgba(240, 100, 35, .22) !important;
	transform: translateY(-1px);
}

/* Make custom mega-menu panels feel immediate */






body #mega-menu-wrap-primary #mega-menu-primary[data-event="hover_intent"] {
	pointer-events: auto;
}

/* Codex final homepage hero v7 - synced to server media */
body.home .hl-topbar {
	background:
		linear-gradient(90deg, rgba(5, 13, 23, .76) 0%, rgba(5, 13, 23, .52) 54%, rgba(5, 13, 23, .26) 100%),
		url("http://47.82.96.209/wp-content/uploads/2026/06/hero-product-banner-v7-1920x700-2.jpg") center top / cover no-repeat !important;
}

body.home .site-header,
body.home #masthead,
body.home .ast-primary-header-bar,
body.home .main-header-bar {
	background:
		linear-gradient(90deg, rgba(5, 13, 23, .78) 0%, rgba(5, 13, 23, .52) 54%, rgba(5, 13, 23, .24) 100%),
		url("http://47.82.96.209/wp-content/uploads/2026/06/hero-product-banner-v7-1920x700-2.jpg") center -48px / cover no-repeat !important;
	background-color: transparent !important;
}

body.home #masthead .ast-primary-header-bar,
body.home #masthead .ast-desktop-header-content,
body.home #masthead .site-primary-header-wrap,
body.home #masthead .ast-builder-grid-row,
body.home #masthead .mega-menu-wrap,
body.home #masthead .max-mega-menu,
body.home .site-header .ast-primary-header-bar,
body.home .site-header .ast-desktop-header-content,
body.home .site-header .site-primary-header-wrap,
body.home .site-header .ast-builder-grid-row,
body.home .site-header .mega-menu-wrap,
body.home .site-header .max-mega-menu {
	background: transparent !important;
	background-color: transparent !important;
}

body.home .hl-hero {
	min-height: 660px;
}

body.home .hl-hero__layout {
	min-height: 660px;
	padding-top: 154px;
	padding-bottom: 34px;
}

body.home .hl-hero__family {
	object-position: center top;
	transform: none;
}

body.home .hl-hero__overlay {
	background:
		linear-gradient(90deg, rgba(5, 13, 23, .9) 0%, rgba(5, 13, 23, .7) 29%, rgba(5, 13, 23, .22) 56%, rgba(5, 13, 23, 0) 100%),
		linear-gradient(180deg, rgba(5, 13, 23, .08) 0%, rgba(5, 13, 23, 0) 48%, rgba(5, 13, 23, .2) 100%);
}

body.home .hl-hero__body {
	max-width: 500px;
}

body.home .hl-hero__title {
	font-size: clamp(34px, 3vw, 48px);
	line-height: 1.08;
	margin-bottom: 24px;
	max-width: 470px;
}

body.home .hl-btn--lg {
	font-size: 15px;
	padding: 15px 22px;
}
/* Product Center layout pass: selection matrix instead of simple product cards */
body.home .hl-products {
	background:
		linear-gradient(180deg, #f5f6f8 0%, #eef1f4 100%) !important;
	padding-top: 54px !important;
	padding-bottom: 72px !important;
}

body.home .hl-products .hl-container {
	max-width: 1260px;
}

body.home .hl-products .hl-section__header {
	display: grid;
	grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
	align-items: end;
	gap: 48px;
	margin-bottom: 28px !important;
	text-align: left;
}

body.home .hl-products .hl-label {
	grid-column: 1 / -1;
	margin-bottom: -10px;
}

body.home .hl-products .hl-section__title {
	font-size: clamp(34px, 3.4vw, 50px);
	line-height: 1;
	margin: 0;
}

body.home .hl-products .hl-section__sub {
	color: #586679;
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 4px;
	max-width: 520px;
}

body.home .hl-tabs {
	background: #ffffff;
	border: 1px solid rgba(13, 31, 49, .08) !important;
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(13, 31, 49, .05);
	display: grid;
	gap: 0 !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin-bottom: 26px !important;
	overflow: hidden;
	padding: 0 !important;
}

body.home .hl-tabs__btn {
	align-items: center;
	background: #ffffff !important;
	border: 0 !important;
	border-right: 1px solid rgba(13, 31, 49, .08) !important;
	color: #233246 !important;
	display: flex;
	font-size: 14px;
	font-weight: 750;
	justify-content: center;
	margin: 0 !important;
	min-height: 58px;
	padding: 0 18px !important;
	position: relative;
}

body.home .hl-tabs__btn:last-child {
	border-right: 0 !important;
}

body.home .hl-tabs__btn::after {
	background: #f06423;
	bottom: 0;
	content: "";
	height: 3px;
	left: 22px;
	opacity: 0;
	position: absolute;
	right: 22px;
	transform: scaleX(.36);
	transition: opacity 140ms ease, transform 140ms ease;
}

body.home .hl-tabs__btn.is-active,
body.home .hl-tabs__btn:hover {
	background: #f8fafc !important;
	color: #0d1f31 !important;
}

body.home .hl-tabs__btn.is-active::after,
body.home .hl-tabs__btn:hover::after {
	opacity: 1;
	transform: scaleX(1);
}

body.home .hl-tabs__panel {
	background: #ffffff;
	border: 1px solid rgba(13, 31, 49, .08);
	border-radius: 8px;
	box-shadow: 0 18px 42px rgba(13, 31, 49, .06);
	padding: 22px;
}

body.home .hl-prod-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(340px, 1.15fr) repeat(2, minmax(190px, .72fr));
}

body.home .hl-prod-card {
	background: #f7f8fa !important;
	border: 1px solid rgba(13, 31, 49, .08);
	border-radius: 8px !important;
	box-shadow: none !important;
	display: grid !important;
	grid-template-rows: auto auto auto;
	min-height: 255px;
	overflow: hidden;
	position: relative;
	transform: none !important;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.home .hl-prod-card:first-child {
	grid-row: span 2;
	min-height: 0;
}

body.home .hl-prod-card:hover {
	border-color: rgba(240, 100, 35, .48);
	box-shadow: 0 18px 34px rgba(13, 31, 49, .12) !important;
	transform: translateY(-2px) !important;
}

body.home .hl-prod-card__img-wrap {
	background:
		linear-gradient(135deg, #ffffff 0%, #eef1f4 100%) !important;
	aspect-ratio: 16 / 10 !important;
	border-bottom: 1px solid rgba(13, 31, 49, .08);
}

body.home .hl-prod-card:first-child .hl-prod-card__img-wrap {
	aspect-ratio: 16 / 12 !important;
}

body.home .hl-prod-card__img-wrap img {
	object-fit: contain !important;
	padding: 14px;
}

body.home .hl-prod-card:first-child .hl-prod-card__img-wrap img {
	padding: 18px;
}

body.home .hl-prod-card__body {
	padding: 16px 16px 12px !important;
}

body.home .hl-prod-card:first-child .hl-prod-card__body {
	padding: 22px 22px 14px !important;
}

body.home .hl-prod-card__name {
	color: #0d1f31 !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: 0;
	line-height: 1.25 !important;
	margin-bottom: 8px !important;
}

body.home .hl-prod-card:first-child .hl-prod-card__name {
	font-size: 24px !important;
}

body.home .hl-prod-card__spec {
	color: #5d6b7c !important;
	font-size: 13px !important;
}

body.home .hl-prod-card__cta {
	background: #ffffff;
	border-top: 1px solid rgba(13, 31, 49, .08);
	color: #f06423 !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	justify-content: space-between;
	padding: 13px 16px !important;
}

body.home .hl-prod-card:first-child .hl-prod-card__cta {
	padding: 16px 22px !important;
}

body.home .hl-tabs__footer {
	border-top: 1px solid rgba(13, 31, 49, .08);
	margin-top: 22px !important;
	padding-top: 18px;
	text-align: center;
}

body.home .hl-tabs__footer .hl-link-arrow {
	align-items: center;
	background: #0d1f31;
	border-radius: 4px;
	color: #ffffff !important;
	display: inline-flex;
	font-size: 14px;
	font-weight: 800;
	gap: 10px;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	text-decoration: none;
}

body.home .hl-tabs__footer .hl-link-arrow:hover {
	background: #f06423;
	color: #ffffff !important;
}

@media (max-width: 980px) {
	body.home .hl-products .hl-section__header {
		display: block;
		text-align: center;
	}

	body.home .hl-products .hl-section__sub {
		margin: 12px auto 0;
	}

	body.home .hl-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.home .hl-prod-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.home .hl-prod-card:first-child {
		grid-column: 1 / -1;
		min-height: auto;
	}
}

@media (max-width: 640px) {
	body.home .hl-tabs,
	body.home .hl-prod-grid {
		grid-template-columns: 1fr;
	}

	body.home .hl-tabs__panel {
		padding: 14px;
	}
}

/* Product Center premium showroom pass */
body.home .hl-products {
	background:
		radial-gradient(circle at 82% 12%, rgba(240, 100, 35, .07), transparent 28%),
		linear-gradient(180deg, #f7f8fa 0%, #eef1f4 100%) !important;
	padding-top: clamp(48px, 5vw, 72px) !important;
	padding-bottom: clamp(64px, 6vw, 92px) !important;
	scroll-margin-top: 132px;
}

body.home .hl-products .hl-container {
	max-width: 1240px;
}

body.home .hl-products .hl-section__header {
	display: grid;
	grid-template-columns: minmax(300px, 470px) minmax(0, 1fr);
	align-items: end;
	gap: clamp(28px, 6vw, 72px);
	margin-bottom: 30px !important;
	text-align: left;
}

body.home .hl-products .hl-section__title {
	font-size: clamp(34px, 3.2vw, 48px);
	letter-spacing: 0;
}

body.home .hl-products .hl-section__sub {
	color: #5d6977;
	font-size: 15px;
	line-height: 1.75;
	margin-bottom: 6px;
	max-width: 520px;
}

body.home .hl-tabs {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	gap: 10px !important;
	margin-bottom: 18px !important;
	overflow-x: auto;
	padding: 2px 2px 10px !important;
	scrollbar-width: thin;
}

body.home .hl-tabs__btn {
	background: rgba(255, 255, 255, .76) !important;
	border: 1px solid rgba(13, 31, 49, .1) !important;
	border-radius: 999px;
	color: #273546 !important;
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
	min-height: 42px;
	padding: 0 18px !important;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

body.home .hl-tabs__btn::after {
	display: none !important;
}

body.home .hl-tabs__btn.is-active,
body.home .hl-tabs__btn:hover {
	background: #ffffff !important;
	border-color: rgba(240, 100, 35, .55) !important;
	box-shadow: 0 8px 20px rgba(13, 31, 49, .08);
	color: #e8500a !important;
}

body.home .hl-tabs__panel {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(250, 251, 252, .92));
	border: 1px solid rgba(13, 31, 49, .08);
	border-radius: 8px;
	box-shadow: 0 24px 60px rgba(13, 31, 49, .09);
	padding: clamp(18px, 2vw, 26px);
}

body.home .hl-prod-grid {
	display: grid;
	gap: 1px;
	grid-template-columns: minmax(360px, .95fr) repeat(2, minmax(210px, .62fr));
	overflow: hidden;
	border: 1px solid rgba(13, 31, 49, .08);
	border-radius: 8px;
	background: rgba(13, 31, 49, .08);
}

body.home .hl-prod-card,
body.home .hl-prod-card:first-child {
	background: #ffffff !important;
	border: 0;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: grid !important;
	grid-template-rows: auto auto auto;
	min-height: 0;
	overflow: hidden;
	position: relative;
	transform: none !important;
	transition: background-color 140ms ease;
}

body.home .hl-prod-card:hover {
	background: #fbfcfd !important;
	border-color: transparent;
	box-shadow: none !important;
	transform: none !important;
}

body.home .hl-prod-card:first-child {
	grid-row: span 2;
}

body.home .hl-prod-card__img-wrap {
	background:
		linear-gradient(180deg, #ffffff 0%, #f2f4f6 100%) !important;
	aspect-ratio: 16 / 9 !important;
	border-bottom: 1px solid rgba(13, 31, 49, .08);
}

body.home .hl-prod-card:first-child .hl-prod-card__img-wrap {
	aspect-ratio: 16 / 10.8 !important;
}

body.home .hl-prod-card__img-wrap img {
	object-fit: contain !important;
	padding: clamp(12px, 1.2vw, 18px);
}

body.home .hl-prod-card__body {
	padding: 16px 18px 12px !important;
}

body.home .hl-prod-card:first-child .hl-prod-card__body {
	padding: 24px 26px 14px !important;
}

body.home .hl-prod-card__name {
	color: #0b1a28 !important;
	font-size: 15px !important;
	font-weight: 850 !important;
	line-height: 1.22 !important;
	margin-bottom: 8px !important;
}

body.home .hl-prod-card:first-child .hl-prod-card__name {
	font-size: clamp(22px, 2.05vw, 30px) !important;
}

body.home .hl-prod-card__spec {
	color: #687586 !important;
	font-size: 13px !important;
}

body.home .hl-prod-card__cta {
	align-items: center;
	background: transparent !important;
	border-top: 0;
	color: #e8500a !important;
	font-size: 13px !important;
	font-weight: 850 !important;
	justify-content: space-between;
	padding: 12px 18px 18px !important;
}

body.home .hl-prod-card:first-child .hl-prod-card__cta {
	padding: 14px 26px 24px !important;
}

body.home .hl-tabs__footer {
	border-top: 0;
	margin-top: 20px !important;
	padding-top: 0;
	text-align: right;
}

body.home .hl-tabs__footer .hl-link-arrow {
	background: transparent;
	border: 1px solid rgba(13, 31, 49, .16);
	border-radius: 999px;
	color: #0d1f31 !important;
	display: inline-flex;
	font-size: 13px;
	font-weight: 850;
	min-height: 42px;
	padding: 0 18px;
}

body.home .hl-tabs__footer .hl-link-arrow:hover {
	background: #0d1f31;
	border-color: #0d1f31;
	color: #ffffff !important;
}

@media (max-width: 1180px) {
	body.home .hl-products .hl-container {
		max-width: 1040px;
	}

	body.home .hl-prod-grid {
		grid-template-columns: minmax(300px, .9fr) repeat(2, minmax(170px, .58fr));
	}

	body.home .hl-prod-card__img-wrap {
		aspect-ratio: 16 / 8.8 !important;
	}

	body.home .hl-prod-card:first-child .hl-prod-card__img-wrap {
		aspect-ratio: 16 / 10 !important;
	}

	body.home .hl-prod-card:first-child .hl-prod-card__name {
		font-size: 24px !important;
	}
}

@media (max-width: 900px) {
	body.home .hl-products .hl-section__header {
		display: block;
		text-align: left;
	}

	body.home .hl-products .hl-section__sub {
		margin-top: 12px;
	}

	body.home .hl-prod-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.home .hl-prod-card:first-child {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@media (max-width: 640px) {
	body.home .hl-products {
		padding-top: 42px !important;
		padding-bottom: 56px !important;
		scroll-margin-top: 86px;
	}

	body.home .hl-products .hl-section__header {
		margin-bottom: 20px !important;
	}

	body.home .hl-tabs {
		margin-left: -4px;
		margin-right: -4px;
		padding-bottom: 12px !important;
	}

	body.home .hl-tabs__btn {
		min-height: 40px;
		padding: 0 15px !important;
	}

	body.home .hl-tabs__panel {
		padding: 12px;
	}

	body.home .hl-prod-grid {
		grid-template-columns: 1fr;
	}

	body.home .hl-prod-card__img-wrap,
	body.home .hl-prod-card:first-child .hl-prod-card__img-wrap {
		aspect-ratio: 16 / 10 !important;
	}

	body.home .hl-prod-card__body,
	body.home .hl-prod-card:first-child .hl-prod-card__body {
		padding: 16px 16px 8px !important;
	}

	body.home .hl-prod-card:first-child .hl-prod-card__name {
		font-size: 21px !important;
	}

	body.home .hl-prod-card__cta,
	body.home .hl-prod-card:first-child .hl-prod-card__cta {
		padding: 10px 16px 16px !important;
	}

	body.home .hl-tabs__footer {
		text-align: center;
	}
}

/* Codex hero boundary fix - keep machinery visible before Product Center */
body.home .hl-hero {
	min-height: 700px;
}

body.home .hl-hero__layout {
	min-height: 700px;
	padding-bottom: 70px;
}

body.home .hl-hero__overlay {
	background:
		linear-gradient(90deg, rgba(5, 13, 23, .9) 0%, rgba(5, 13, 23, .7) 29%, rgba(5, 13, 23, .22) 56%, rgba(5, 13, 23, 0) 100%),
		linear-gradient(180deg, rgba(5, 13, 23, .08) 0%, rgba(5, 13, 23, 0) 48%, rgba(5, 13, 23, .34) 100%);
}

@media (max-width: 1180px) {
	body.home .hl-hero {
		min-height: 660px;
	}

	body.home .hl-hero__layout {
		min-height: 660px;
		padding-bottom: 52px;
	}
}

@media (max-width: 760px) {
	body.home .hl-hero,
	body.home .hl-hero__layout {
		min-height: 620px;
	}
}

/* Codex final header alignment pass: clean two-row homepage header */
body.home .hl-topbar {
	height: 34px !important;
	min-height: 34px !important;
}

body.home .hl-topbar__inner {
	box-sizing: border-box;
	height: 34px !important;
	min-height: 34px !important;
	max-width: 1780px !important;
	padding: 0 clamp(32px, 4.2vw, 72px) !important;
	display: flex !important;
	justify-content: flex-end !important;
	gap: 22px !important;
}

body.home .hl-topbar__left,
body.home .hl-topbar__right {
	gap: 16px !important;
}

body.home .hl-topbar__left {
	margin-right: 0 !important;
}

body.home .hl-topbar__item,
body.home .hl-topbar__lang-text {
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
}

body.home .hl-topbar__item svg {
	height: 13px !important;
	width: 13px !important;
}

body.home .hl-topbar__social {
	gap: 7px !important;
	padding: 0 14px !important;
}

body.home .hl-topbar__social-link {
	height: 19px !important;
	width: 19px !important;
}

body.home .hl-topbar__social-link svg {
	height: 10px !important;
	width: 10px !important;
}

body.home .site-header,
body.home #masthead {
	top: 34px !important;
}

body.home #masthead,
body.home .site-header,
body.home #masthead .ast-primary-header-bar,
body.home .site-header .ast-primary-header-bar {
	min-height: 82px !important;
}

body.home #masthead .ast-builder-grid-row,
body.home .site-header .ast-builder-grid-row,
body.home .ast-primary-header-bar .ast-builder-grid-row {
	grid-template-columns: 245px minmax(0, 1fr) !important;
	min-height: 82px !important;
	max-width: 1780px !important;
	margin: 0 auto !important;
	padding-left: clamp(32px, 4.2vw, 72px) !important;
	padding-right: clamp(32px, 4.2vw, 72px) !important;
}

body.home .site-title,
body.home .site-title a {
	height: 34px !important;
	max-width: 210px !important;
	width: 210px !important;
}

body.home .site-title a::before {
	height: 34px !important;
	width: 205px !important;
}

body.home .custom-logo-link img,
body.home .hl-logo img,
body.home img.custom-logo {
	max-height: 31px !important;
	max-width: 205px !important;
	width: 205px !important;
}

body.home #mega-menu-wrap-primary,
body.home .main-header-bar-navigation,
body.home .ast-builder-menu-1,
body.home .ast-builder-menu,
body.home .ast-main-header-bar-alignment {
	justify-self: end !important;
	width: auto !important;
}

body.home #mega-menu-wrap-primary #mega-menu-primary,
body.home .main-header-menu,
body.home .ast-builder-menu .main-header-menu {
	align-items: center !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 4px !important;
	height: 82px !important;
	justify-content: flex-end !important;
}

body.home #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
body.home #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item) > a,
body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > a,
body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > .menu-link {
	align-items: center !important;
	border-bottom: 0 !important;
	border-radius: 4px !important;
	display: inline-flex !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	height: 42px !important;
	line-height: 1 !important;
	padding: 0 12px !important;
	white-space: nowrap !important;
}

body.home #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after,
body.home #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item) > a::after,
body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > a::after,
body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > .menu-link::after {
	bottom: 8px !important;
	left: 12px !important;
	right: 12px !important;
}

body.home #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item {
	margin-left: 14px !important;
}

body.home #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a.hl-nav-quote,
body.home #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a,
body.home .main-header-menu > li.hl-nav-quote-item > a {
	border-radius: 4px !important;
	font-size: 12px !important;
	font-weight: 850 !important;
	height: 42px !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	padding: 0 18px !important;
}

body.home .hl-hero__layout {
	padding-top: 134px !important;
}

@media (max-width: 1180px) {
	body.home .hl-topbar__inner {
		padding-left: 26px !important;
		padding-right: 26px !important;
	}

	body.home #masthead .ast-builder-grid-row,
	body.home .site-header .ast-builder-grid-row,
	body.home .ast-primary-header-bar .ast-builder-grid-row {
		grid-template-columns: 195px minmax(0, 1fr) !important;
		padding-left: 26px !important;
		padding-right: 26px !important;
	}

	body.home .site-title,
	body.home .site-title a {
		width: 178px !important;
	}

	body.home .site-title a::before,
	body.home .custom-logo-link img,
	body.home .hl-logo img,
	body.home img.custom-logo {
		max-width: 178px !important;
		width: 178px !important;
	}

	body.home #mega-menu-wrap-primary #mega-menu-primary,
	body.home .main-header-menu {
		gap: 2px !important;
	}

	body.home #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
	body.home #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item) > a,
	body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > a,
	body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > .menu-link {
		font-size: 12px !important;
		padding-left: 9px !important;
		padding-right: 9px !important;
	}
}

@media (max-width: 760px) {
	body.home .site-header,
	body.home #masthead {
		top: 0 !important;
	}

	body.home #masthead,
	body.home .site-header,
	body.home #masthead .ast-primary-header-bar,
	body.home .site-header .ast-primary-header-bar {
		min-height: 72px !important;
	}

	body.home #masthead .ast-builder-grid-row,
	body.home .site-header .ast-builder-grid-row,
	body.home .ast-primary-header-bar .ast-builder-grid-row {
		min-height: 72px !important;
	}

	body.home .hl-hero__layout {
		padding-top: 104px !important;
	}
}

/* Codex header rebuild: fixed-left logo, grouped utility links, readable nav */
body.home .hl-topbar {
	height: 32px !important;
	min-height: 32px !important;
	position: absolute !important;
	top: 0 !important;
}

body.home .hl-topbar__inner {
	box-sizing: border-box !important;
	height: 32px !important;
	min-height: 32px !important;
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 clamp(40px, 3.4vw, 66px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 20px !important;
}

body.home .hl-topbar__left,
body.home .hl-topbar__right {
	display: flex !important;
	align-items: center !important;
	gap: 17px !important;
	margin: 0 !important;
}

body.home .hl-topbar__item,
body.home .hl-topbar__lang-text {
	font-size: 12.5px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	color: rgba(255, 255, 255, .94) !important;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .24);
}

body.home .hl-topbar__item svg {
	width: 13px !important;
	height: 13px !important;
}

body.home .hl-topbar__social {
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 0 14px !important;
	border-left: 1px solid rgba(255, 255, 255, .2) !important;
	border-right: 1px solid rgba(255, 255, 255, .2) !important;
}

body.home .hl-topbar__social-link {
	width: 18px !important;
	height: 18px !important;
}

body.home .hl-topbar__social-link svg {
	width: 10px !important;
	height: 10px !important;
}

body.home .site-header,
body.home #masthead {
	top: 32px !important;
	left: 0 !important;
	width: 100% !important;
}

body.home #masthead,
body.home .site-header,
body.home #masthead .ast-primary-header-bar,
body.home .site-header .ast-primary-header-bar {
	min-height: 86px !important;
}

body.home #masthead .ast-builder-grid-row,
body.home .site-header .ast-builder-grid-row,
body.home .ast-primary-header-bar .ast-builder-grid-row {
	box-sizing: border-box !important;
	display: grid !important;
	grid-template-columns: 248px minmax(0, 1fr) !important;
	align-items: center !important;
	min-height: 86px !important;
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding-left: clamp(40px, 3.4vw, 66px) !important;
	padding-right: clamp(40px, 3.4vw, 66px) !important;
}

body.home .site-branding,
body.home .ast-site-identity {
	justify-self: start !important;
	padding: 0 !important;
}

body.home .site-title,
body.home .site-title a {
	width: 214px !important;
	max-width: 214px !important;
	height: 36px !important;
}

body.home .site-title a::before {
	width: 214px !important;
	height: 36px !important;
}

body.home .custom-logo-link img,
body.home .hl-logo img,
body.home img.custom-logo {
	width: 214px !important;
	max-width: 214px !important;
	max-height: 34px !important;
}

body.home #mega-menu-wrap-primary,
body.home .main-header-bar-navigation,
body.home .ast-builder-menu-1,
body.home .ast-builder-menu,
body.home .ast-main-header-bar-alignment {
	justify-self: end !important;
	width: auto !important;
}

body.home #mega-menu-wrap-primary #mega-menu-primary,
body.home .main-header-menu,
body.home .ast-builder-menu .main-header-menu {
	height: 86px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 5px !important;
	flex-wrap: nowrap !important;
}

body.home #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
body.home #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item) > a,
body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > a,
body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > .menu-link {
	height: 44px !important;
	padding: 0 13px !important;
	display: inline-flex !important;
	align-items: center !important;
	border-radius: 4px !important;
	font-size: 14px !important;
	font-weight: 750 !important;
	line-height: 1 !important;
	color: rgba(255, 255, 255, .94) !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .2);
}

body.home #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after,
body.home #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item) > a::after,
body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > a::after,
body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > .menu-link::after {
	bottom: 7px !important;
	left: 13px !important;
	right: 13px !important;
}

body.home #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item {
	margin-left: 18px !important;
}

body.home #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a.hl-nav-quote,
body.home #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a,
body.home .main-header-menu > li.hl-nav-quote-item > a {
	height: 44px !important;
	min-width: 132px !important;
	padding: 0 20px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 4px !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
}

body.home .hl-hero__layout {
	padding-top: 138px !important;
}

@media (max-width: 1320px) {
	body.home #masthead .ast-builder-grid-row,
	body.home .site-header .ast-builder-grid-row,
	body.home .ast-primary-header-bar .ast-builder-grid-row {
		grid-template-columns: 210px minmax(0, 1fr) !important;
	}

	body.home .site-title,
	body.home .site-title a,
	body.home .site-title a::before,
	body.home .custom-logo-link img,
	body.home .hl-logo img,
	body.home img.custom-logo {
		width: 190px !important;
		max-width: 190px !important;
	}

	body.home #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
	body.home #mega-menu-wrap-primary #mega-menu-primary > li.menu-item:not(.hl-nav-quote-item) > a,
	body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > a,
	body.home .main-header-menu > .menu-item:not(.hl-nav-quote-item) > .menu-link {
		font-size: 13px !important;
		padding-left: 9px !important;
		padding-right: 9px !important;
	}
}

@media (max-width: 760px) {
	body.home .hl-topbar {
		display: none !important;
	}

	body.home .site-header,
	body.home #masthead {
		top: 0 !important;
	}

	body.home #masthead,
	body.home .site-header,
	body.home #masthead .ast-primary-header-bar,
	body.home .site-header .ast-primary-header-bar,
	body.home #masthead .ast-builder-grid-row,
	body.home .site-header .ast-builder-grid-row,
	body.home .ast-primary-header-bar .ast-builder-grid-row {
		min-height: 72px !important;
	}

	body.home #masthead .ast-builder-grid-row,
	body.home .site-header .ast-builder-grid-row,
	body.home .ast-primary-header-bar .ast-builder-grid-row {
		display: flex !important;
		padding-left: 22px !important;
		padding-right: 22px !important;
	}

	body.home .site-title,
	body.home .site-title a,
	body.home .site-title a::before,
	body.home .custom-logo-link img,
	body.home .hl-logo img,
	body.home img.custom-logo {
		width: 178px !important;
		max-width: 178px !important;
	}

	body.home .hl-hero__layout {
		padding-top: 104px !important;
	}
}

/* Codex hero bottom-preserve pass: keep the machinery base visible */
body.home .hl-hero,
body.home .hl-hero__layout {
	height: clamp(650px, 36.46vw, 700px) !important;
	min-height: clamp(650px, 36.46vw, 700px) !important;
}

body.home .hl-hero__family {
	height: 100% !important;
	object-fit: cover !important;
	object-position: center bottom !important;
	width: 100% !important;
}

body.home .hl-hero__layout {
	padding-bottom: 0 !important;
}

@media (max-width: 760px) {
	body.home .hl-hero,
	body.home .hl-hero__layout {
		height: 620px !important;
		min-height: 620px !important;
	}

	body.home .hl-hero__family {
		object-position: center bottom !important;
	}
}

/* Codex conversion polish pass: trust proof, product CTAs, mobile navigation */
body.home .hl-hero__proof {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 9px !important;
	margin-top: 22px !important;
	max-width: 520px !important;
}

body.home .hl-hero__proof span {
	align-items: center !important;
	background: rgba(255, 255, 255, .09) !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
	border-radius: 4px !important;
	color: rgba(255, 255, 255, .84) !important;
	display: inline-flex !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	gap: 6px !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	min-height: 34px !important;
	padding: 0 11px !important;
	text-transform: none !important;
}

body.home .hl-hero__proof strong {
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 950 !important;
	letter-spacing: 0 !important;
}

body.home .hl-prod-card__cta {
	align-self: end !important;
	color: #0d1f31 !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	padding-top: 8px !important;
}

body.home .hl-prod-card__cta::before {
	background: #f06423;
	border-radius: 999px;
	content: "";
	display: inline-block;
	height: 7px;
	margin-right: 8px;
	width: 7px;
}

body.home .hl-prod-card:hover .hl-prod-card__cta,
body.home .hl-prod-card:focus-visible .hl-prod-card__cta {
	color: #e8500a !important;
}

body.home .hl-prod-card:first-child .hl-prod-card__cta {
	background: #0d1f31 !important;
	border-radius: 4px;
	color: #ffffff !important;
	display: inline-flex !important;
	justify-content: center !important;
	margin: 4px 26px 24px !important;
	min-height: 42px !important;
	padding: 0 18px !important;
	width: fit-content !important;
}

body.home .hl-prod-card:first-child .hl-prod-card__cta::before {
	background: #f06423;
}

body.home .hl-prod-card:first-child:hover .hl-prod-card__cta {
	background: #f06423 !important;
	color: #ffffff !important;
}

@media (max-width: 760px) {
	body.home.ast-hide-custom-menu-mobile #masthead .site-header-primary-section-right,
	body.home.ast-hide-custom-menu-mobile #masthead .ast-builder-menu-1,
	body.home #masthead .site-header-primary-section-right,
	body.home #masthead .ast-builder-menu-1,
	body.home #mega-menu-wrap-primary,
	body.home #mega-menu-wrap-primary .mega-menu-toggle {
		align-items: center !important;
		display: flex !important;
		justify-content: flex-end !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	body.home #masthead .site-header-primary-section-right {
		margin-left: auto !important;
	}

	body.home #mega-menu-wrap-primary .mega-menu-toggle {
		background: rgba(13, 31, 49, .92) !important;
		border: 1px solid rgba(255, 255, 255, .18) !important;
		border-radius: 4px !important;
		height: 44px !important;
		min-height: 44px !important;
		padding: 0 12px !important;
		width: 48px !important;
	}

	body.home #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right,
	body.home #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block {
		align-items: center !important;
		display: flex !important;
		height: 100% !important;
		justify-content: center !important;
		margin: 0 !important;
		width: 100% !important;
	}

	body.home #mega-menu-wrap-primary .mega-menu-toggle button {
		align-items: center !important;
		display: flex !important;
		height: 32px !important;
		justify-content: center !important;
		width: 32px !important;
	}

	body.home #mega-menu-wrap-primary .mega-toggle-animated-inner,
	body.home #mega-menu-wrap-primary .mega-toggle-animated-inner::before,
	body.home #mega-menu-wrap-primary .mega-toggle-animated-inner::after {
		background-color: #ffffff !important;
		height: 2px !important;
		width: 22px !important;
	}

	body.home #mega-menu-wrap-primary #mega-menu-primary {
		background: rgba(8, 21, 34, .98) !important;
		border: 1px solid rgba(255, 255, 255, .12) !important;
		border-radius: 6px !important;
		box-shadow: 0 18px 44px rgba(0, 0, 0, .28) !important;
		display: none !important;
		height: auto !important;
		left: auto !important;
		margin-top: 10px !important;
		min-width: 260px !important;
		padding: 8px !important;
		position: absolute !important;
		right: 22px !important;
		top: 62px !important;
		width: calc(100vw - 44px) !important;
		z-index: 9999 !important;
	}

	body.home #mega-menu-wrap-primary.mega-menu-open #mega-menu-primary,
	body.home #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary,
	body.home #mega-menu-wrap-primary #mega-menu-primary.mega-menu-open {
		display: block !important;
	}

	body.home #mega-menu-wrap-primary #mega-menu-primary > li {
		display: block !important;
		margin: 0 !important;
		width: 100% !important;
	}

	body.home #mega-menu-wrap-primary #mega-menu-primary > li > a.mega-menu-link,
	body.home #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a,
	body.home #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a.hl-nav-quote {
		border-radius: 4px !important;
		display: flex !important;
		font-size: 14px !important;
		height: 46px !important;
		justify-content: flex-start !important;
		padding: 0 14px !important;
		width: 100% !important;
	}

	body.home #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item {
		margin-top: 8px !important;
	}

	body.home #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a,
	body.home #mega-menu-wrap-primary #mega-menu-primary > li.hl-nav-quote-item > a.hl-nav-quote {
		background: #f06423 !important;
		color: #ffffff !important;
		justify-content: center !important;
		min-width: 0 !important;
	}

	

	body.home .hl-hero__proof {
		display: flex !important;
		gap: 8px !important;
		margin-top: 16px !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		padding-bottom: 4px !important;
		scrollbar-width: none;
	}

	body.home .hl-hero__proof::-webkit-scrollbar {
		display: none;
	}

	body.home .hl-hero__proof span {
		flex: 0 0 auto !important;
		font-size: 11px !important;
		min-height: 32px !important;
		padding: 0 10px !important;
	}

	body.home .hl-prod-card:first-child .hl-prod-card__cta {
		margin: 2px 16px 18px !important;
		min-height: 40px !important;
	}
}