/* ============================================================
   NAV — Legacy Conflict Neutralization
   Kill residual styles from vendor (5kdwaxVRUh6N.css) and
   old template (style.css, responsive.css) that bleed through.
   ============================================================ */

/* Kill old-template red ::before underline on nav links */
.navbar .navbar-nav .nav-link:before {
	content: none !important;
}

/* Kill vendor submenu ::after chevron */
.main-menu ul li.submenu > a:after {
	content: none !important;
}

/* Kill Bootstrap .dropdown-toggle caret ::after (safety net) */
.navbar .dropdown-toggle::after {
	display: none !important;
}

/* Reset font from old-template Open Sans to brand font Onest */
.navbar .navbar-nav .nav-link {
	font-family: var(--accent-font) !important;
	text-transform: capitalize;
}

/* ============================================================
   NAV — Base Styles (all viewports)
   ============================================================ */

.navbar {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: #ffffff;
	border-bottom: none;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
	padding: 0 16px;
	transition: box-shadow 0.3s ease;
}

/* Scroll-triggered sticky state — main.js adds .active */
.navbar.active {
	background-color: #ffffff;
	border-bottom: none;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Override vendor dark .header-sticky.active */
header.main-header .header-sticky.active {
	background: #ffffff;
	border-bottom: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.navbar-brand {
	padding: 12px 0;
	margin: 0;
}

.navbar-brand .nav-logo-icon {
	height: 28px;
	width: auto;
}

.main-menu {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

/* ============================================================
   NAV — Desktop Link Styles
   ============================================================ */

.main-menu .nav-menu-wrapper {
	flex: 1;
}

.main-menu ul li a {
	color: #6b6b6b;
	font-family: var(--accent-font);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus {
	color: #17223E;
}

/* Sliding underline micro-interaction */
.main-menu .nav-menu-wrapper .nav-link {
	position: relative;
	padding: 24px 14px !important;
}

.main-menu .nav-menu-wrapper .nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: #EA220F;
	transform: translateX(-50%);
	transition: width 0.3s ease;
	pointer-events: none;
}

.main-menu .nav-menu-wrapper .nav-link:hover::after,
.main-menu .nav-menu-wrapper .nav-link:focus::after {
	width: 70%;
}

.main-menu .nav-menu-wrapper .nav-link.is-active,
.main-menu .nav-menu-wrapper .nav-item.is-active > .nav-link,
.main-menu .nav-menu-wrapper .nav-link[aria-current="page"] {
	color: #17223E;
	font-weight: 600;
}

.main-menu .nav-menu-wrapper .nav-link.is-active::after,
.main-menu .nav-menu-wrapper .nav-item.is-active > .nav-link::after,
.main-menu .nav-menu-wrapper .nav-link[aria-current="page"]::after {
	width: 70%;
}

/* ============================================================
   NAV — Dropdown Chevron (desktop ≥1096px only)
   ============================================================ */

@media (min-width: 1096px) {
	.nav-item.dropdown > .nav-link {
		padding-right: 26px !important;
	}

	/* Override the kill-rule with higher specificity */
	.navbar .navbar-nav .nav-item.dropdown > .nav-link::before {
		content: '' !important;
		position: absolute;
		right: 10px;
		top: 50%;
		left: auto;
		bottom: auto;
		width: 5px;
		height: 5px;
		background: none;
		border-right: 1.5px solid #9a9a9a;
		border-bottom: 1.5px solid #9a9a9a;
		transform: translateY(-50%) rotate(45deg);
		transition: transform 0.25s ease, border-color 0.25s ease;
	}

	.navbar .navbar-nav .nav-item.dropdown:hover > .nav-link::before {
		transform: translateY(-30%) rotate(-135deg);
		border-color: #17223E;
	}

	/* Dropdown parent: underline reveal on hover */
	.nav-item.dropdown > .nav-link::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 14px;
		right: 26px;
		width: auto;
		height: 2px;
		background-color: #EA220F;
		transform: none;
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	.nav-item.dropdown:hover > .nav-link::after {
		opacity: 1;
	}

	.nav-item.dropdown.is-active > .nav-link::before {
		transform: translateY(-30%) rotate(-135deg);
		border-color: #17223E;
	}

	.nav-item.dropdown.is-active > .nav-link::after {
		opacity: 1;
	}
}

/* ============================================================
   NAV — Desktop Dropdown Menu (animated, ≥1096px)
   ============================================================ */

@media (min-width: 1096px) {
	.main-menu .dropdown-menu {
		display: block !important;
		margin-top: 0;
		z-index: 1100;
		border: none;
		border-radius: 8px;
		padding: 6px 0;
		background: #ffffff;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
		min-width: 220px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
		pointer-events: none;
	}

	.main-menu .dropdown:hover > .dropdown-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}

	.main-menu .dropdown-menu .dropdown-item {
		font-family: var(--accent-font);
		font-size: 13.5px;
		font-weight: 500;
		color: #3f3f3f;
		padding: 10px 20px;
		border-left: 3px solid transparent;
		transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	}

	.main-menu .dropdown-menu li:first-child .dropdown-item {
		border-radius: 8px 8px 0 0;
	}

	.main-menu .dropdown-menu li:last-child .dropdown-item {
		border-radius: 0 0 8px 8px;
	}

	.main-menu .dropdown-menu .dropdown-item:hover,
	.main-menu .dropdown-menu .dropdown-item:focus {
		background-color: #F1F2F2;
		color: #17223E;
		border-left-color: #EA220F;
	}

	.main-menu .dropdown-menu .dropdown-item.is-active,
	.main-menu .dropdown-menu .dropdown-item[aria-current="page"] {
		background-color: #F1F2F2;
		color: #17223E;
		border-left-color: #EA220F;
		font-weight: 600;
	}
}

/* Hide Bootstrap dropdown below desktop — SlickNav handles it */
@media (max-width: 1095px) {
	.main-menu .dropdown-menu {
		display: none !important;
	}
}

/* ============================================================
   NAV — Utilities (search + login CTA)
   ============================================================ */

.nav-utilities {
	align-items: center;
	display: flex;
	gap: 16px;
}

.nav-search {
	margin: 0;
}

.nav-search input {
	background-color: #ffffff;
	border: 1px solid #d8d8d8;
	border-radius: 999px;
	color: #3f3f3f;
	font-family: var(--accent-font);
	font-size: 14px;
	height: 36px;
	padding: 6px 14px;
	width: 200px;
	outline: none;
	transition: width 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.nav-search input:focus {
	border-color: #EA220F;
	box-shadow: 0 0 0 3px rgba(234, 34, 15, 0.08);
	width: 260px;
}

.nav-search input::placeholder {
	color: #9a9a9a;
	transition: color 0.2s ease;
}

.nav-search input:focus::placeholder {
	color: #c4c4c4;
}

/* Kill vendor .btn-default pseudo-elements on nav button */
.header-btn .btn-signup::before,
.header-btn .btn-signup::after {
	content: none !important;
	display: none !important;
}

.header-btn .btn-signup {
	background-color: transparent;
	border: 1.5px solid #d8d8d8;
	border-radius: 999px;
	color: #3f3f3f;
	font-family: var(--accent-font);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 18px;
	text-transform: capitalize;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
	transition: all 0.25s ease;
	position: relative;
	overflow: visible;
}

.btn-signup-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.header-btn .btn-signup:hover,
.header-btn .btn-signup:focus {
	background-color: #EA220F;
	border-color: #EA220F;
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(234, 34, 15, 0.18);
}

.header-btn .btn-signup:hover .btn-signup-icon,
.header-btn .btn-signup:focus .btn-signup-icon {
	transform: translateX(2px);
}

/* ============================================================
   NAV — Compact Desktop Links (992–1095px)
   ============================================================ */

.co-nav-links {
	align-items: center;
	display: none;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.co-nav-links .nav-link {
	color: #6b6b6b;
	display: block;
	font-family: var(--accent-font);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	padding: 0 14px;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	transition: color 0.2s ease;
}

.co-nav-links .nav-link::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: #EA220F;
	transform: translateX(-50%);
	transition: width 0.3s ease;
}

.co-nav-links .nav-link:hover,
.co-nav-links .nav-link:focus {
	color: #17223E;
}

.co-nav-links .nav-link:hover::after,
.co-nav-links .nav-link:focus::after {
	width: 70%;
}

.co-nav-links .nav-link.is-active,
.co-nav-links .nav-link[aria-current="page"] {
	color: #17223E;
	font-weight: 600;
}

.co-nav-links .nav-link.is-active::after,
.co-nav-links .nav-link[aria-current="page"]::after {
	width: 70%;
}

@media (min-width: 992px) and (max-width: 1095px) {
	body.mobile-menu-open header.main-header,
	body.mobile-menu-open header.main-header .header-sticky,
	body.mobile-menu-open header.main-header .navbar {
		position: relative;
		z-index: 1300;
	}

	.main-menu {
		justify-content: flex-end !important;
	}

	.nav-menu-wrapper {
		display: none !important;
	}

	.co-nav-links {
		display: flex;
	}

	.nav-utilities .header-btn {
		display: none !important;
	}

	.nav-search input {
		width: 180px;
	}

	.nav-search input:focus {
		width: 220px;
	}

	.navbar-toggle {
		display: block;
		margin-left: 12px;
		position: relative;
		z-index: 1300;
	}
}

/* ============================================================
   NAV — Mobile Structural Overrides (≤991px)
   ============================================================ */

@media (max-width: 991px) {
	.main-menu {
		align-items: stretch;
		flex-direction: column;
	}

	.nav-utilities {
		align-items: stretch;
		flex-direction: column;
		padding: 0 20px 16px;
		width: 100%;
	}

	.nav-search input {
		width: 100%;
	}

	.nav-search input:focus {
		width: 100%;
	}

	.header-btn {
		justify-content: flex-start;
	}
}

/* ============================================================
   NAV — SlickNav Shared Styles (≤1095px: compact + mobile)
   ============================================================ */

@media (max-width: 1095px) {
	/* Hamburger button */
	.navbar-toggle .slicknav_menu {
		background: transparent;
		position: relative;
		width: auto;
		display: flex;
		justify-content: flex-end;
	}

	.navbar-toggle .slicknav_btn {
		background: transparent;
		margin: 0;
		position: relative;
		z-index: 1301;
		cursor: pointer;
	}

	/* Hamburger bars */
	.slicknav_icon .slicknav_icon-bar {
		background-color: #BFB924;
		transition: transform 0.3s ease, opacity 0.25s ease;
	}

	/* Hamburger → X animation */
	.slicknav_btn.slicknav_open .slicknav_icon .slicknav_icon-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.slicknav_btn.slicknav_open .slicknav_icon .slicknav_icon-bar:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}

	.slicknav_btn.slicknav_open .slicknav_icon .slicknav_icon-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Restyle SlickNav arrow — replace ▼ with CSS chevron */
	.slicknav_arrow {
		font-size: 0 !important;
		line-height: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		margin-left: 4px;
		border-radius: 4px;
		vertical-align: middle;
		transition: background-color 0.2s ease;
	}

	.slicknav_arrow::after {
		content: '';
		display: block;
		width: 6px;
		height: 6px;
		border-right: 1.5px solid #9a9a9a;
		border-bottom: 1.5px solid #9a9a9a;
		transform: rotate(45deg);
		transition: transform 0.25s ease, border-color 0.2s ease;
	}

	.slicknav_open > .slicknav_row .slicknav_arrow::after,
	.slicknav_open > a > .slicknav_arrow::after {
		transform: rotate(-135deg);
		border-color: #17223E;
	}

	.slicknav_arrow:hover {
		background-color: rgba(0, 0, 0, 0.05);
	}

	/* Panel styles */
	.navbar-toggle .slicknav_nav {
		position: absolute;
		top: calc(100% + 16px);
		right: 0;
		left: auto;
		width: min(86vw, 340px);
		background: #ffffff;
		border-radius: 8px;
		padding: 8px 0;
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
		z-index: 1305;
	}

	/* Panel entrance animation */
	@keyframes navPanelIn {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.navbar-toggle .slicknav_nav.is-panel-open {
		animation: navPanelIn 0.25s ease forwards;
	}

	/* Panel link styles */
	.navbar-toggle .slicknav_nav .slicknav_row,
	.navbar-toggle .slicknav_nav li a {
		color: #3f3f3f;
		font-family: var(--accent-font);
		font-size: 14px;
		font-weight: 500;
		border-radius: 0 !important;
		padding: 10px 20px;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.navbar-toggle .slicknav_nav a:hover,
	.navbar-toggle .slicknav_nav a:focus,
	.navbar-toggle .slicknav_nav .slicknav_row:hover {
		background-color: #F1F2F2;
		color: #17223E;
	}

	/* Vivid nested sub-menu */
	.navbar-toggle .slicknav_nav > li > ul {
		border-left: 3px solid #BFB924;
		margin: 2px 0 2px 16px;
		padding: 4px 0;
		background: #FAFAFA;
	}

	.navbar-toggle .slicknav_nav > li > ul > li > a {
		font-size: 13px !important;
		color: #808285 !important;
		padding: 9px 16px 9px 20px !important;
	}

	.navbar-toggle .slicknav_nav > li > ul > li > a:hover,
	.navbar-toggle .slicknav_nav > li > ul > li > a:focus {
		background-color: rgba(234, 34, 15, 0.08) !important;
		color: #17223E !important;
	}

	.navbar-toggle .slicknav_nav a.is-active,
	.navbar-toggle .slicknav_nav a[aria-current="page"],
	.navbar-toggle .slicknav_nav .slicknav_row.is-active {
		background-color: #F1F2F2;
		color: #17223E;
		font-weight: 600;
	}
}

.main-footer{
	background: #939598;
	background-image: none;
	padding: 50px 0 0;
	margin-bottom: 0;
	color: #D1D3D4;
}

.main-footer .footer-main-row{
	padding-bottom: 24px;
}

.main-footer .footer-main-row > .row{
	margin-left: 0;
	margin-right: 0;
}

.main-footer .footer-main-row > .row > [class*="col-"]{
	padding-left: 24px;
	padding-right: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 100%;
}

.main-footer .footer-main-row > .row > [class*="col-"] + [class*="col-"]{
	border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.main-footer .about-footer,
.main-footer .footer-links,
.main-footer .footer-social-panel,
.main-footer .footer-contact-links{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
}

/* --- Footer logo --- */
.main-footer .footer-logo img{
	width: 180px;
	max-width: 100%;
	height: auto;
}

@media (max-width: 1199px){
	.main-footer .footer-logo img{
		width: 160px;
	}
}

@media (max-width: 991px){
	.main-footer .footer-logo img{
		width: 140px;
	}
}

@media (max-width: 767px){
	.main-footer .footer-logo img{
		width: 120px;
	}
}

/* --- Footer column headings --- */
.main-footer .footer-links h3{
	color: #D1D3D4;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* --- Footer link items --- */
.main-footer .footer-links ul{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.main-footer .footer-links ul li{
	margin-bottom: 6px;
	text-transform: none;
}

.main-footer .footer-links ul li a,
.main-footer .footer-links ul li span{
	color: #D1D3D4;
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
	transition: color 0.2s ease;
}

.main-footer .footer-links ul li a:hover{
	color: #D1D3D4;
}

/* --- Social panel --- */
.main-footer .footer-social-panel p{
	color: #D1D3D4;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 14px;
}

.main-footer .footer-social-links ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.main-footer .footer-social-links ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #D1D3D4;
	color: #D1D3D4;
	font-size: 15px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.main-footer .footer-social-links ul li a:hover{
	background: rgba(209, 211, 212, 0.12);
	color: #D1D3D4;
	border-color: #D1D3D4;
}

/* --- Copyright bar — full viewport width --- */
.main-footer .footer-copyright{
	background: #414042;
	border-top: 0;
	padding: 14px 0;
	margin-top: 0;
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.main-footer .footer-copyright-text p{
	color: #D1D3D4;
	font-size: 13px;
	margin: 0;
}

@media (max-width: 991px){
	.main-footer .footer-main-row > .row > [class*="col-"] + [class*="col-"]{
		border-left: 0;
	}

	.main-footer .footer-main-row > .row > [class*="col-"]{
		margin-bottom: 28px;
	}
}

/* --- Branch selector dropdown --- */
.main-footer .footer-branch-selector-wrap{
	position: relative;
	margin-bottom: 12px;
}

.main-footer .footer-branch-select{
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 4px;
	color: #fff;
	font-size: 13px;
	font-family: inherit;
	padding: 7px 30px 7px 10px;
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s;
}

.main-footer .footer-branch-select:hover,
.main-footer .footer-branch-select:focus{
	border-color: rgba(255,255,255,0.65);
}

.main-footer .footer-branch-select option{
	background: #636466;
	color: #fff;
}

.main-footer .footer-branch-select-arrow{
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.7);
	font-size: 10px;
	pointer-events: none;
}

.main-footer .footer-branch-details{
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	transition: opacity 0.18s ease;
}

.main-footer .footer-branch-details--fade{
	opacity: 0;
}

.main-footer .footer-branch-general{
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(255,255,255,0.2);
	padding-top: 8px;
}

.wcf-hero-section{
	padding: 48px 0 56px;
}

.wcf-hero-shell{
	background: #EC1C24;
	padding: 0;
	border-radius: 0;
	position: relative;
	overflow: hidden;
	max-height: 520px;
}

.wcf-hero-overlay{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 40%;
	background: #EC1C24;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 48px;
	z-index: 2;
	text-align: left;
}

.wcf-hero-overlay p{
	margin: 0;
	color: #ffffff;
	font-family: var(--accent-font);
	font-size: clamp(24px, 2.25vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	max-width: 22ch;
}

.wcf-hero-overlay__product{
	font-weight: 800;
	text-transform: uppercase;
}

.wcf-hero-content{
	padding: 52px 48px;
}

.wcf-hero-content h1{
	color: #ffffff;
	font-size: clamp(38px, 4.3vw, 62px);
	font-weight: 300;
	line-height: 1.08;
	margin: 0;
	letter-spacing: -0.02em;
}

.wcf-hero-content h1 span{
	font-weight: 800;
	font-size: 1.08em;
	display: inline-block;
	line-height: 1.02;
}

.wcf-hero-image-wrap{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
}

.wcf-hero-image{
	width: min(100%, 520px);
	height: auto;
	display: block;
	object-fit: contain;
	object-position: center center;
}

.wcf-hero-image-wrap--layered{
	position: relative;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	min-height: 360px;
	max-height: 520px;
	overflow: hidden;
}

.wcf-hero-image-wrap--layered .wcf-hero-image--bg{
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

.wcf-hero-image-wrap--layered .wcf-hero-image--person{
	position: absolute;
	right: 2%;
	bottom: 0;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.wcf-hero-shell--image-only{
	min-height: 520px;
	max-height: 520px;
}

.wcf-hero-shell--image-only .wcf-hero-image-wrap--layered{
	min-height: 520px;
	max-height: 520px;
}

@media (max-width: 1199px){
	.wcf-hero-content{
		padding: 42px 34px;
	}
}

@media (max-width: 991px){
	.wcf-hero-section{
		padding: 26px 0 36px;
	}

	.wcf-hero-shell{
		padding: 0;
		border-radius: 0;
		min-height: 520px;
	}

	.wcf-hero-overlay p{
		font-size: clamp(22px, 4.2vw, 30px);
	}

	.wcf-hero-shell .row{
		margin: 0;
	}

	.wcf-hero-shell .col-lg-7,
	.wcf-hero-shell .col-lg-5{
		padding: 0;
	}

	.wcf-hero-image-wrap,
	.wcf-hero-image-wrap picture,
	.wcf-hero-image{
		width: 100%;
		height: 520px;
	}

	.wcf-hero-image{
		object-fit: cover;
	}

	.wcf-hero-image-wrap--layered .wcf-hero-image--bg{
		height: 520px;
	}

	.wcf-hero-image-wrap--layered .wcf-hero-image--person{
		height: 100%;
		right: 4%;
	}

	.wcf-hero-shell--image-only,
	.wcf-hero-shell--image-only .wcf-hero-image-wrap--layered{
		min-height: 520px;
	}

	.wcf-hero-content{
		position: absolute;
		top: 9%;
		left: 7%;
		max-width: none;
		padding: 0;
		z-index: 2;
	}

	.wcf-hero-content h1{
		font-size: clamp(32px, 9vw, 46px);
		line-height: 1.04;
	}
}

@media (max-width: 430px){
	.wcf-hero-shell{
		min-height: 520px;
	}

	.wcf-hero-overlay p{
		font-size: clamp(20px, 6.8vw, 26px);
		line-height: 1.18;
	}

	.wcf-hero-image-wrap,
	.wcf-hero-image-wrap picture,
	.wcf-hero-image{
		height: 520px;
	}

	.wcf-hero-image-wrap--layered .wcf-hero-image--bg{
		height: 520px;
	}

	.wcf-hero-shell--image-only,
	.wcf-hero-shell--image-only .wcf-hero-image-wrap--layered{
		min-height: 520px;
	}

	.wcf-hero-content{
		top: 8%;
		max-width: 82%;
	}
}

@media (min-width: 428px) and (max-width: 430px){
	.wcf-hero-content h1{
		font-size: 36px;
	}
}

@media (max-width: 393px){

	.wcf-hero-content h1{
		font-size: clamp(28px, 8.6vw, 40px);
	}
}

@media (max-width: 375px){
	.wcf-hero-content{
		top: 7.5%;
		left: 6.5%;
	}

	.wcf-hero-content h1{
		font-size: clamp(25px, 8.3vw, 34px);
	}
}

@media (max-width: 320px){
	.wcf-hero-overlay p{
		font-size: clamp(18px, 7.1vw, 22px);
	}

	.wcf-hero-content{
		top: 6.8%;
		left: 6%;
		max-width: 86%;
	}

	.wcf-hero-content h1{
		font-size: clamp(22px, 8.1vw, 30px);
	}
}

@media (max-width: 767px){
	.wcf-hero-image-wrap--layered .wcf-hero-image--person{
		display: none;
	}
}