/* ============================================================
   vh6 header extraction — values verbatim from the vh6 delivery's
   assets/css/main.css (tokens trimmed to what the header uses; global
   element resets SCOPED to the header/offcanvas so they can't ripple
   through page content styled by style.css).
   Do NOT load vh6's whole main.css on these pages.
   ============================================================ */

:root {
	--heading-font: "Mulish", sans-serif;
	--body-font: "Mulish", sans-serif;
	--base-h: 13;
	--base-s: 94%;
	--base-l: 55%;
	--base: var(--base-h) var(--base-s) var(--base-l);
	--base-d-100: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.1);
	--base-d-200: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.2);
	--danger-h: 0;
	--danger-s: 96%;
	--danger-l: 63%;
	--danger: var(--danger-h) var(--danger-s) var(--danger-l);
	--danger-d-200: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.2);
	--white: 0 0% 100%;
	--body-color: 0 3% 23%;
	--heading-color: 0 0% 0%;
	--black: 0 0% 0%;
	--border-color: 60 8% 90%;
}

/* vh6 global `a` reset, scoped (main.css:398) — inline-block is load-bearing:
   menu link padding-block must contribute layout height */
.header__area a,
.offcanvas__area a {
	display: inline-block;
	transition: 0.3s;
	text-decoration: none;
	color: hsl(var(--heading-color));
}

/* vh6 base-element parity, scoped. vh6 sits on Bootstrap reboot + its own
   element resets; style.css instead sets a fluid body font-size and a FIXED
   px line-height that leak into the header and change its dimensions. */
.header__area,
.offcanvas__area {
	font-size: 16px;
	line-height: 1.5;
}
.header__area ul, .offcanvas__area ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
/* Bootstrap reboot parity: without vertical-align middle the logo anchor's
   baseline adds descender space and the logo rides ~3px high */
.header__area img, .offcanvas__area img {
	vertical-align: middle;
}
.header__area h4, .header__area h5,
.offcanvas__area h4, .offcanvas__area h5 {
	margin: 0 0 16px 0;
	font-family: var(--heading-font);
	color: hsl(var(--heading-color));
	font-weight: 700;
	line-height: 1.2;
}
.header__area h4 { font-size: 24px; }
.header__area h5 { font-size: 20px; }
.header__area p {
	font-size: 16px;
	font-weight: 400;
	margin: 0;
	line-height: 1.5;
	color: hsl(var(--body-color));
}
/* style.css global li sets font-size calc(~15.5px), line-height 1.6,
   margin-block 10px, weight 500 — vh6 lis are unstyled (inherit 16px/1.5,
   margin 0). Without this the header inflates to 62.4px and the mega-menu's
   internal spacing skews. */
.header__area li, .offcanvas__area li {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	font-weight: inherit;
}

/* Insurance against old-header class collisions (.header__logo/.header__menu
   also existed in the retired style.css header block) */
.header__area .header__logo {
	flex: 0 1 auto;
	width: auto;
}
.header__area .header__menu {
	width: auto;
	flex: 0 1 auto;
}
.header__area .header__menu li {
	text-align: left;
}

/* Minimal Bootstrap shim for classes the vh6 markup uses (no Bootstrap CSS
   is loaded on these pages) */
.collapse { display: none; }
.collapse.show { display: block; }
.mt-3 { margin-top: 1rem; }
.w-100 { width: 100%; }
.text-start { text-align: left !important; }

/* vh6 fluid container, SCOPED to the header — page bodies keep the existing
   style.css .container (both cap ~1080px; difference is minor fluid behavior) */
.header__area .container {
	margin: 0 calc(8px + 4vw);
	width: calc(100% - (16px + 8vw));
	padding: 0;
	max-width: none;
}
@media only screen and (min-width: 768px) {
	.header__area .container {
		margin: 0 auto;
		max-width: calc(768px + 312 * (100vw - 390px) / 1210);
	}
}
@media only screen and (min-width: 768px) and (min-width: 1600px) {
	.header__area .container {
		max-width: 1080px;
	}
}

/* ======================  Overlay (verbatim)  ====================== */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: hsl(var(--black)/0.4);
	opacity: 0;
	visibility: hidden;
	transition: 0.4s;
	z-index: 12;
}
.overlay.active {
	opacity: 1;
	visibility: visible;
}

/* ======================  Offcanvas (verbatim)  ====================== */
.offcanvas__area {
	position: fixed;
	left: -100%;
	top: 0;
	width: 300px;
	height: 100%;
	padding: 20px;
	background-color: hsl(var(--white));
	border-right: 1px solid hsl(var(--black)/0.03);
	z-index: 15;
	transition: 0.4s;
	visibility: hidden;
	overflow-y: auto;
}
.offcanvas__area::-webkit-scrollbar { width: 5px; }
.offcanvas__area::-webkit-scrollbar-track { box-shadow: inset 0 0 5px hsl(var(--black)/0.1); }
.offcanvas__area::-webkit-scrollbar-thumb { background: hsl(var(--base)/0.7); }
.offcanvas__area::-webkit-scrollbar-thumb:hover { background: hsl(var(--base)); }
.offcanvas__area.active {
	left: 0;
	visibility: visible;
}
.offcanvas__area .offcanvas__topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 40px;
}
.offcanvas__area .offcanvas__topbar a img {
	width: 180px;
}
.offcanvas__area .offcanvas__topbar .menu__close {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: hsl(var(--white));
	background-color: hsl(var(--danger));
	font-size: 20px;
	border-radius: 4px;
	transition: 0.3s;
}
.offcanvas__area .offcanvas__topbar .menu__close:hover {
	background-color: hsl(var(--danger-d-200));
	color: hsl(var(--white));
}
.offcanvas__area .offcanvas__main .offcanvas__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.offcanvas__area .offcanvas__main .offcanvas__menu ul li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	font-size: 16px;
	font-weight: 600;
	color: hsl(var(--heading-color));
	border-bottom: 1px solid hsl(var(--black)/0.06);
	padding: 12px 0;
	transition: 0.3s;
}
.offcanvas__area .offcanvas__main .offcanvas__menu ul li a i {
	transition: 0.3s;
}
.offcanvas__area .offcanvas__main .offcanvas__menu ul li a[aria-expanded=true] i {
	transform: rotate(90deg);
}
.offcanvas__area .offcanvas__main .offcanvas__menu ul li a:hover,
.offcanvas__area .offcanvas__main .offcanvas__menu ul li a.active {
	color: hsl(var(--base));
}
.offcanvas__dropdown {
	background-color: hsl(var(--base)/0.1);
}
.offcanvas__dropdown ul li a {
	font-size: 14px !important;
	padding-inline: 16px !important;
}

/* ======================  Header (verbatim)  ====================== */
.header__area {
	position: absolute;
	left: 0;
	right: 0;
	top: 35px;
	width: 100%;
	z-index: 9;
}
@media screen and (max-width: 767px) {
	.header__area {
		top: 20px;
	}
}
.header__area.fixed-header {
	position: fixed;
	top: 0;
	background-color: hsl(var(--white));
	border-bottom: 1px solid hsl(var(--black)/0.1);
	animation: slide-down 0.6s;
}
@media screen and (max-width: 991px) {
	.header__area.fixed-header {
		padding-block: 10px;
	}
}
.header__area .header__main {
	display: flex;
	align-items: center;
	gap: 47px;
}
@media screen and (max-width: 1199px) {
	.header__area .header__main {
		gap: 24px;
	}
}
.header__area .header__main .menu__open {
	font-size: 24px;
	color: hsl(var(--heading-color));
	cursor: pointer;
	transition: 0.3s;
	display: none;
	margin-left: auto;
}
@media screen and (max-width: 991px) {
	.header__area .header__main .menu__open {
		display: block;
	}
}
.header__area .header__main .menu__open:hover {
	color: hsl(var(--base));
}
.header__area .header__logo a img {
	max-width: 235px;
	width: 100%;
}
@media screen and (max-width: 1199px) {
	.header__area .header__logo a img {
		max-width: 190px;
	}
}
.header__area .header__menu {
	margin-left: auto;
}
@media screen and (max-width: 991px) {
	.header__area .header__menu {
		display: none;
	}
}
.header__area .header__menu ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 39px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 1399px) {
	.header__area .header__menu ul {
		gap: 26px;
	}
}
.header__area .header__menu ul li {
	position: relative;
}
.header__area .header__menu ul li.has-mega-menu:has(.menu__action.active) .mega-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.header__area .header__menu ul li a {
	color: #707070;
	font-size: 14px;
	font-weight: 700;
	padding-block: 20px;
	transition: 0.3s;
}
.header__area .header__menu ul li a:hover,
.header__area .header__menu ul li a.active {
	color: hsl(var(--base));
}
/* Collision guard: the retired style.css header had an a:hover::after underline */
.header__area .header__menu ul li a::after { content: none !important; }

.header__area .header__menu .mega-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	width: min(800px, 100vw - 56px);
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: 0.3s;
	z-index: 10;
}
@media screen and (max-width: 1199px) {
	.header__area .header__menu .mega-menu {
		--mega-menu-x: -34%;
		width: min(650px, 100vw - 40px);
	}
}
.header__area .header__menu .mega-menu__inner {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 60px;
	padding: 42px 70px 50px;
	background-color: hsl(var(--white)/0.9);
	backdrop-filter: blur(6px);
	border-radius: 24px;
	box-shadow: 0 24px 70px hsl(var(--black)/0.08);
}
@media screen and (max-width: 1199px) {
	.header__area .header__menu .mega-menu__inner {
		gap: 36px;
		grid-template-columns: 200px minmax(0, 1fr);
		padding: 36px 44px 42px;
	}
}
.header__area .header__menu .mega-menu h5 {
	margin-bottom: 20px;
	color: hsl(var(--heading-color));
	font-size: 20px;
	font-weight: 700;
}
.header__area .header__menu .mega-menu p {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 16px;
	color: #ACABAB;
}
.header__area .header__menu .mega-menu h4 {
	margin-bottom: 16px;
	color: hsl(var(--base));
	font-size: 20px;
	font-weight: 700;
}
.header__area .header__menu .mega-menu ul {
	display: block;
	margin: 0;
}
.header__area .header__menu .mega-menu li:not(:last-child) {
	margin-bottom: 10px;
}
.header__area .header__menu .mega-menu li a {
	color: #707070;
	font-size: 14px;
	font-weight: 500;
	padding-block: 0;
}
@media screen and (max-width: 1199px) {
	.header__area .header__menu .mega-menu li a {
		font-size: 16px;
	}
}
.header__area .header__menu .mega-menu li a:hover {
	color: hsl(var(--base));
}
.header__area .header__menu .mega-menu__form {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	height: 56px;
	border: 1px solid hsl(var(--base));
	border-radius: 999px;
	overflow: hidden;
}
.header__area .header__menu .mega-menu__form input {
	min-width: 0;
	flex: 1;
	height: 100%;
	padding: 0 18px;
	color: hsl(var(--heading-color));
	background-color: transparent;
	border: 0;
	outline: 0;
	font-size: 15px;
}
.header__area .header__menu .mega-menu__form input::placeholder {
	color: #a4a4a4;
}
.header__area .header__menu .mega-menu__form .btn {
	flex: 0 0 auto;
	min-width: 180px;
	height: 100%;
	padding: 0 16px;
	border-radius: 999px;
	font-size: 16px;
	gap: 10px;
}
@media screen and (max-width: 991px) {
	.header__area .header__btn .btn {
		display: none !important;
	}
}
.mega-menu .btn {
	padding-block: 6px !important;
}

@keyframes slide-down {
	0% {
		opacity: 0;
		transform: translateY(-150%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ======================  vh6 buttons (verbatim subset)  ====================== */
.btn {
	color: hsl(var(--white)) !important;
	font-weight: 700;
	padding: 14px 30px;
	border-radius: 60px;
	position: relative;
	z-index: 1;
	border: 1px solid transparent;
	font-family: var(--body-font);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1.2;
	text-transform: capitalize;
}
.btn:hover, .btn:focus, .btn:focus-visible {
	box-shadow: none !important;
}
.btn--icon {
	padding: 6px 8px;
	padding-right: 24px;
	gap: 10px;
	font-weight: 500;
	line-height: 1;
}
.btn--icon i {
	width: 31px;
	height: 31px;
	background-color: hsl(var(--white));
	color: hsl(var(--base));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
}
.btn--base {
	background-color: hsl(var(--base)) !important;
}
.btn--base:hover, .btn--base:focus .btn--base:focus-visible {
	background-color: hsl(var(--base-d-200)) !important;
	border: 1px solid hsl(var(--base-d-200)) !important;
}

/* ======================  Page clearance  ====================== */
/* The vh6 header floats over the page top (the old header was in-flow) —
   give each page's first section room to clear it. */
.section--hero,
.section--hero-form {
	padding-top: 140px;
}
@media screen and (max-width: 991px) {
	.section--hero,
	.section--hero-form {
		padding-top: 100px;
	}
}