/* vars */


*:root {
	--c-white: #FFFFFF;
	--c-white-rgb: 255, 255, 255;
	--c-black: #161C21;
	--c-black-rgb: 22, 28, 33;
	--c-green: #92C62F;
	--c-green-rgb: 146, 198, 47;
	--c-grey: #EFEFEF;
	--c-dgrey: #dddddd;
	
	--b-bg: var(--c-black);
	--b-text: var(--c-white);
	
	--b2-bg: var(--c-green);
	--b2-text: var(--c-white);
	
	--f-main: "futura-pt", sans-serif;
	
	--radius-xl : 50px;
	--radius-l : 20px;
	--radius-m : 10px;
	--radius-s : 5px;

}

/* Font face */
@font-face {
	font-family: "futura-pt";
	src: url(https://happyroofing.com/hubfs/Theme/fonts/futura-book.woff2) format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
}

/* @font-face {
	font-family: "futura-pt";
	src: url(https://happyroofing.com/hubfs/Theme/fonts/futura-book.woff2) format("woff2");
	font-display: swap;
	font-style: italic;
	font-weight: 400;
	font-stretch: normal;
} */

@font-face {
	font-family: "futura-pt";
	src: url(https://happyroofing.com/hubfs/Theme/fonts/futura-bold.woff2) format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 700;
	font-stretch: normal;
}

/* @font-face {
	font-family: "futura-pt";
	src: url(https://happyroofing.com/hubfs/Theme/fonts/futura-bold.woff2) format("woff2");
	font-display: swap;
	font-style: italic;
	font-weight: 700;
	font-stretch: normal;
} */

/* resets */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

*,*:before,*:after {
	box-sizing: border-box;
}

/**`
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
========================================================================== */

/**
* Remove the margin in all browsers.
*/

body {
	margin: 0 auto;
	padding: 0;
	width: min(2440px, 100%);
}

/**
* Render the `main` element consistently in IE.
*/

main {
	display: block;
}

/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
========================================================================== */

/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/

hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/* Text-level semantics
========================================================================== */

/**
* Remove the gray background on active links in IE 10.
*/

a {
	background-color: transparent;
}

/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/

abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	text-decoration: underline dotted; /* 2 */
}

/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
* Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
========================================================================== */

/**
* Remove the border on images inside links in IE 10.
*/

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

/* Forms
========================================================================== */

/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/

button,
input { /* 1 */
	overflow: visible;
}

/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
	text-transform: none;
}

/**
* Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
* Remove the inner border and padding in Firefox.
*/

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
* Restore the focus styles unset by the previous rule.
*/

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
* Correct the padding in Firefox.
*/

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
*    `fieldset` elements in all browsers.
*/

legend {
	box-sizing: border-box; /* 1 */
	color: inherit; /* 2 */
	display: table; /* 1 */
	max-width: 100%; /* 1 */
	padding: 0; /* 3 */
	white-space: normal; /* 1 */
}

/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/

progress {
	vertical-align: baseline;
}

/**
* Remove the default vertical scrollbar in IE 10+.
*/

textarea {
	overflow: auto;
}

/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}

/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/

[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
* Remove the inner padding in Chrome and Safari on macOS.
*/

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/* Interactive
========================================================================== */

/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/

details {
	display: block;
}

/*
* Add the correct display in all browsers.
*/

summary {
	display: list-item;
}

/* Misc
========================================================================== */

/**
* Add the correct display in IE 10+.
*/

template {
	display: none;
}

/**
* Add the correct display in IE 10.
*/

[hidden] {
	display: none;
}
html,
body {
	font-family: var(--f-main);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.72;
	color: var(--c-black);
	text-wrap: pretty;
}

*:where(:focus) {
	outline: 2px solid var(--c-green)
}

/* general */
.text--center {
	text-align: center
}

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important;  /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            /* 3 */
}

.z-index {
	position: relative;
	isolation: isolate;
}


.z-index---2 {
	z-index: -2;
}

.z-index---1 {
	z-index: -1;
}

.z-index--0 {
	z-index: 0;
}

.z-index--1 {
	z-index: 1;
}

.z-index--2 {
	z-index: 2;
}

.z-index--3 {
	z-index: 3;
}

.z-index--4 {
	z-index: 4;
}

.z-index--5 {
	z-index: 5;
}

.z-index--6 {
	z-index: 6;
}

.z-index--7 {
	z-index: 7;
}

.z-index--8 {
	z-index: 8;
}

.z-index--9 {
	z-index: 9;
}

.z-index--10 {
	z-index: 10;
}


@media (min-width: 768px) {
	
	
	.pull-up--1 {
		margin-top: -1rem;
	}
	
	.pull-up--2 {
		margin-top: -2rem;
	}
	
	.pull-up--3 {
		margin-top: -3rem;
	}
	
	.pull-up--4 {
		margin-top: -4rem;
	}
	
	.pull-up--5 {
		margin-top: -5rem;
	}
	
	.pull-up--6 {
		margin-top: -6rem;
	}
	
	.pull-up--7 {
		margin-top: -7rem;
	}
	
	.pull-up--8 {
		margin-top: -8rem;
	}
	
	.pull-up--9 {
		margin-top: -9rem;
	}
	
	.pull-up--10 {
		margin-top: -10rem;
	}
	
	.pull-up--11 {
		margin-top: -11rem;
	}
	
	.pull-up--12 {
		margin-top: -12rem;
	}
	
	.pull-up--13 {
		margin-top: -13rem;
	}
	
	.pull-up--14 {
		margin-top: -14rem;
	}
	
	.pull-up--15 {
		margin-top: -15rem;
	}
	
	.pull-up--16 {
		margin-top: -16rem;
	}
	
	.pull-up--17 {
		margin-top: -17rem;
	}
	
	.pull-up--18 {
		margin-top: -18rem;
	}
	
	.pull-up--19 {
		margin-top: -19rem;
	}
		
}



.corners__top {
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	overflow: auto;
}

.corners__bottom {
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
	overflow: auto;
}
.hs-button {
	display: inline-block;
	line-height: 1;
	min-width: 120px;
	text-align: center;
	padding: 13px 30px;
	
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	
	background: var(--c-black);
	color: var(--c-white);
	border: 2px solid var(--c-black);
	border-radius: var(--radius-xl);
	
	transition: all .25s ease;
	cursor: pointer;
}
.hs-button:where(:focus, :hover) {
	background: var(--c-green);
	color: var(--c-white);
}

.hs-button--secondary {
	background: var(--c-green);
	border: 2px solid var(--c-green);
}
.hs-button--secondary:where(:focus, :hover) {
	background: var(--c-black);
}

.hs-button--tertiary {
	background: var(--c-white);
	color: var(--c-green);
	border: none;
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	justify-content: center;
}
.hs-button--tertiary svg {
	transform: translateX(0);
	transition: transform .25s ease;
	width: 25px;
	height: 20px;
}
.hs-button--tertiary:where(:focus, :hover) svg {
	transform: translateX(4px);
}

.hs-button--fourth {
	background: var(--c-white);
	color: var(--c-black);
	border: 2px solid var(--c-green);
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	justify-content: center;
}
.hs-button--fourth:where(:focus, :hover) {
	background: var(--c-green);
	color: var(--c-white)
}

.hs-button--more {
	background: transparent;
	color: var(--c-green);
	border: none;
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	justify-content: center;
	padding-inline: 0;
}
.hs-button--more::before {
	content: "Read More"
}
.hs-button--more:where(.active)::before {
	content: "Read Less"
}
.hs-button--more:where(:focus, :hover) {
	border: none;
	outline: none
}
.hs-button--more svg {
	width: 25px;
	height: 25px;
	fill: currentColor;
}

.hs-button--more.active .plus,
.hs-button--more:not(.active) .minus {
	display: none;
}
.hs-button--more:not(.active) .plus,
.hs-button--more.active .minus {
	display: block;
}
/* 
.hs-button--more:where(:focus, :hover) svg {
	transform: translateX(4px);
} */


.button__group {
	display: flex;
	flex-flow: row wrap;
	gap: 1rem;
}
.button__group--center {
	justify-content: center;
}
.well {
	background: var(--c-white);
	padding: clamp(1rem, 2rem, 2vw);
	border-radius: var(--radius-m);
	box-shadow: 0 10px 30px rgba(var(--c-black-rgb), .15);
	transition: box-shadow .25s ease-in-out;
}


.hs-form {
	accent-color: var(--c-green);
}
.form-columns-1,
.form-columns-2,
.form-columns-3 {
	display: flex;
	flex-flow: column nowrap;
	gap: .5rem 1rem;
}
.field {
	flex: 1;
	max-width: 100%;
	width: 100% !important;
}
.field > label {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.input {
	margin: 0 0 .5rem 0;
}
.hs-input {
	background: var(--c-white);
	border: 2px solid var(--c-dgrey);
	padding: .5rem !important;
	width: 100%;
	max-width: 100% !important;
	border-radius: var(--radius-s);
}
.hs-input.error {
	border-color: red;
	background: pink;
}

.hs-error-msg {
	color: red;
}
.inputs-list {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 10px;
}
.inputs-list input:where([type="checkbox"], [type="radio"]){
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin: calc(0.75em - 11px) 0.25rem 0 0;
	vertical-align: top;
	border: 2px solid var(--c-dgrey);
	border-radius: 4px;
	background: var(--c-white) no-repeat center center;
}

.inputs-list input[type="radio"]{
	border-radius : 50%;
}

.inputs-list input:where([type="checkbox"], [type="radio"]):where(:active:not(:disabled), :focus){
	border-color : var(--c-green);
	outline      : none;
}

.inputs-list input:where([type="checkbox"], [type="radio"]):disabled{
	background : #eee;
}

.hs-form .inputs-list.multi-container {
	flex-flow: column nowrap;
}

.inputs-list input[type="checkbox"]:checked{
	background-image : url('//45319728.fs1.hubspotusercontent-na1.net/hubfs/45319728/raw_assets/public/Happy%20Roofing%20Theme/assets/img/checkbox.svg');
		}

.inputs-list input[type="radio"]:checked {
	background-image : url('//45319728.fs1.hubspotusercontent-na1.net/hubfs/45319728/raw_assets/public/Happy%20Roofing%20Theme/assets/img/radio.svg');
		}

.inputs-list label {
	display: flex;
	gap: .25rem;
}

@media (min-width: 500px) {
	.form-columns-1,
	.form-columns-2,
	.form-columns-3 {
		flex-flow: row nowrap;
	}
}
.bg {
	position: absolute;
	inset: 0;
	z-index: -2
}
.bg--color {
	background-color: var(--bg-color)
}
.bg--img {
	z-index: -3
}
.bg--img img {
	object-fit: cover;
	object-position: center; 
	width: 100%;
	height: 100%;
}

.bg--color:has( + .bg--img ) {
	opacity: .5;
}
 



.layer {
	top: var(--image-pos-y);
	left: var(--image-pos-x);
	width: 100%;
	max-width: var(--image-width);
	aspect-ratio: var(--image-ratio);
	z-index: var(--image-z-index);
}	
.layer--image {
	width: var(--image-width);
}
.layer--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.layer--blob-image,
.layer--blob-color {
	background-color: var(--blob-color);
	border-radius: var(--blob);
	overflow: hidden;
	margin: auto;
	position: relative;
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes morph {
		50% {
			border-radius: 67% 33% 53% 47% / 39% 37% 63% 61%
		}
		75% {
			border-radius: 67% 33% 53% 47% / 39% 37% 63% 61%
		}
		100% {
			border-radius: 67% 33% 53% 47% / 76% 79% 21% 24%
		}
	}
	
	.layer--blob-image.animated,
	.layer--blob-color.animated {
		animation: 
			morph 15s linear infinite alternate;
	}
	
}

.layer--blob-image img {
	object-fit: var(--image-contain);
	object-position: center;
    width: 100%;
    height: 100%;
}
.layer--spec {
	aspect-ratio: var(--image-ratio);
	width: var(--image-width);
}
.layer--spec svg {
	width: 100%;
	height: 100%;
	object-fit: var(--image-contain);
}

@media(max-width: 1024px) {
	.layer {
		top: var(--image-pos-y-mobile, var(--image-pos-y));
		left: var(--image-pos-x-mobile, var(--image-pos-x));
		width: 100%;
		max-width: var(--image-width-mobile, var(--image-width));
	}
	.layered-images {
		position: relative !important;
		inset: 0;
	}
}
.wave {
	position: absolute;
	z-index: -1;
}
.wave--top {
	inset: 0 0 auto 0;
	top: -1px;
	rotate: 180deg;
}
.wave--bottom {
	inset: auto 0 0 0;
	bottom: -1px;
}
.wave svg {
	fill: var(--fill-color, var(--c-white));
	display: block;
}

.wave--flip-x {
	transform: scale(-1, 1)
}
.wave--flip-y {
	transform: scale(1, -1);
}

.wave--flip-x.wave--flip-y {
	transform: scale(-1, -1);
}


/* Typography */
h1, h2, h3 , h4, h5, h6 {
	font-weight: 700;
	line-height: 1.10;
	margin-block-end: 1em;
}

h1 {
	font-size: clamp(36px, 3.33rem, 5vw)
}
h2 {
	font-size: clamp(30px, 2.5rem, 5vw)
}
h3 {
	font-size: clamp(24px, 1.33rem, 5vw)
}
h4 {}
h5 {}
h6 {}

@media (max-width: 1024px) {
	h1 br, 
	h2 br, 
	h3 br, 
	h4 br,
	h5 br, 
	h6 br{
		display: none;
	}
}

h1:where( + *), 
h2:where( + *), 
h3:where( + *), 
h4:where( + *) {
    margin-block-end: 1rem;	
}

@keyframes reveal {
	to {
		stroke-dashoffset: 100
	}
}

.circled {
	display: inline-block;
	position: relative;
}
.circled > svg {
	bottom: 0;
    height: 122%;
    left: -.5rem;
    opacity: .8;
    pointer-events: none;
    position: absolute;
    right: -.5rem;
    top: 0;
    width: calc(100% + 1rem);
	transform: translate(-1px, -7px);
	
    stroke-dashoffset: 1000;
    stroke-dasharray: 1000;
}
.circled.animated > svg {
	animation: reveal 1s ease-in-out 0s alternate forwards;
	animation-composition: replace;
} 


p {
	margin-top: 0;
	margin-bottom: 1rem;
}
p:where(+ h1, + h2, + h3){
	margin-bottom: 2rem;
}

a {
	color: var(--c-green);
	text-decoration: underline;
}
a:where(:hover,:focus) {
	color: var(--c-green);
	text-decoration: none;
}

/* ul, ol {
	padding-left: 2rem;
} */

ul li,
ol li {
	line-height: 1.3;
	margin-bottom: .75rem;
}

.list-column--two ul {
	column-gap: 3rem;
    columns: 150px 2;
    padding-left: 1rem;
}
.list-column--three ul {
	column-gap: 3rem;
    columns: 150px 3;
    padding-left: 1rem;
}
.list-column--four ul {
	column-gap: 3rem;
    columns: 150px 4;
    padding-left: 1rem;
}
.list-column--auto ul {
	column-gap: 3rem;
    columns: 200px auto;
    padding-left: 1rem;
}

.list__leaf li,
.list__check li,
.list__check--white li,
.list__smiley li {
	list-style: none;
	position: relative;
}

.list__none ul {
	padding-left: 0;
}
.list__none li {
	list-style: none;
	padding-left: 0;
}

.list__leaf li::before,
.list__check li::before,
.list__check--white li::before,
.list__smiley li::before {
	content: "";
	position: absolute;
	top: 0;
	left: -1.5rem;
	width: 20px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
}

/* Leaf icon */
.list__leaf li::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2392C62F' width='20' height='20' viewBox='0 0 100 100'%3E%3Cpath d='M59 73h-2l2-1zm17-17v2-2zm-1 3-1 2 1-2zm2-5-1 1 1-1zm0-4v3-3zM57 73h-3 3zm19-18v1-1zm1-2v1-1zM59 72s0 1 0 0c0 1 0 0 0 0zm16-14v1-1z'/%3E%3Cpath d='M72 65a259 259 0 0 0-24-24c0-2 1-2 2-2h2l22 22 2-2v-3l1-1v-5c0-16-17-25-33-25-15 0-23-4-23-4s2 21 6 33c5 14 14 19 27 19h3l2-1 5-1 3-2c4 5 7 8 7 10h6c0-3-3-9-8-14z'/%3E%3C/svg%3E");
}

/* Checkmark icon */
.list__check li::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='20' fill='%2392C62F' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M39 65C29 51 20 31 0 51c14 10 22 25 28 42 0 1 2 2 3 1l13-3 1-1C60 59 79 33 99 9c2-2 0-4-2-3-23 14-42 34-58 59z'/%3E%3C/svg%3E");
}

/* White checkmark */
.list__check--white li::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='25' fill='%23FFFFFF' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M39 65C29 51 20 31 0 51c14 10 22 25 28 42 0 1 2 2 3 1l13-3 1-1C60 59 79 33 99 9c2-2 0-4-2-3-23 14-42 34-58 59z'/%3E%3C/svg%3E");
}

/* Smiley face */
.list__smiley li::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23FFFFFF' viewBox='0 0 100 100'%3E%3Cpath d='M50 3.125C24.152 3.125 3.125 24.152 3.125 50S24.152 96.875 50 96.875 96.875 75.848 96.875 50 75.848 3.125 50 3.125zm15.625 25c3.4453 0 6.25 2.8047 6.25 6.25s-2.8047 6.25-6.25 6.25-6.25-2.8047-6.25-6.25 2.8047-6.25 6.25-6.25zm-31.25 0c3.4453 0 6.25 2.8047 6.25 6.25s-2.8047 6.25-6.25 6.25-6.25-2.8047-6.25-6.25 2.8047-6.25 6.25-6.25zm41.188 39.82C69.7466 76.277 60.192 81.25 50.001 81.25s-19.746-4.9727-25.562-13.305c-.98828-1.4141-.64062-3.3633.77344-4.3516 1.418-.98828 3.3633-.64062 4.3516.77344 4.6484 6.6562 12.289 10.633 20.438 10.633s15.789-3.9766 20.438-10.633c.98828-1.4141 2.9375-1.7656 4.3516-.77344 1.4141.98828 1.7617 2.9375.77344 4.3516z'/%3E%3C/svg%3E");
}

/* Layout */


/* CSS variables */
:root {
	--column-gap: 40px;
	--column-width-multiplier: 8.666;
}

/* Mobile layout */

.row-fluid {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: var(--column-gap);
}

.row-fluid--center {
	align-items: center;
}
.row-fluid--top {
	align-items: flex-start;
}
.row-fluid--bottom {
	align-items: flex-end;
}


.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12{
	min-height: 1px;
	width: 100%;
	order: var(--order-m, 0);
}

/* Mobile layout */
@media (min-width: 400px) {
	
	.span1--sm {
		width: calc((var(--column-width-multiplier) * 1) * 1% - var(--column-gap));
	}
	
	.span2--sm {
		width: calc((var(--column-width-multiplier) * 2) * 1% - var(--column-gap));
	}
	
	.span3--sm {
		width: calc((var(--column-width-multiplier) * 3) * 1% - var(--column-gap));
	}
	
	.span4--sm {
		width: calc((var(--column-width-multiplier) * 4) * 1% - var(--column-gap));
	}
	
	.span5--sm {
		width: calc((var(--column-width-multiplier) * 5) * 1% - var(--column-gap));
	}
	
	.span6--sm {
		width: calc((var(--column-width-multiplier) * 6) * 1% - var(--column-gap));
	}
	
	.span7--sm {
		width: calc((var(--column-width-multiplier) * 7) * 1% - var(--column-gap));
	}
	
	.span8--sm {
		width: calc((var(--column-width-multiplier) * 8) * 1% - var(--column-gap));
	}
	
	.span9--sm {
		width: calc((var(--column-width-multiplier) * 9) * 1% - var(--column-gap));
	}
	
	.span10--sm {
		width: calc((var(--column-width-multiplier) * 10) * 1% - var(--column-gap));
	}
	
	.span11--sm {
		width: calc((var(--column-width-multiplier) * 11) * 1% - var(--column-gap));
	}
	
	.span12--sm {
		width: calc((var(--column-width-multiplier) * 12) * 1% - var(--column-gap));
	}
	
}

/* Tablet layout */
@media (min-width: 768px) {
	
	.span1--md {
		width: calc((var(--column-width-multiplier) * 1) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
	.span2--md {
		width: calc((var(--column-width-multiplier) * 2) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
	.span3--md {
		width: calc((var(--column-width-multiplier) * 3) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
	.span4--md {
		width: calc((var(--column-width-multiplier) * 4) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
	.span5--md {
		width: calc((var(--column-width-multiplier) * 5) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
	.span6--md {
		width: calc((var(--column-width-multiplier) * 6) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
	.span7--md {
		width: calc((var(--column-width-multiplier) * 7) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
	.span8--md {
		width: calc((var(--column-width-multiplier) * 8) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
	.span9--md {
		width: calc((var(--column-width-multiplier) * 9) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
	.span10--md {
		width: calc((var(--column-width-multiplier) * 10) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
	.span11--md {
		width: calc((var(--column-width-multiplier) * 11) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
	.span12--md {
		width: calc((var(--column-width-multiplier) * 12) * 1% - var(--column-gap));
		order: var(--order-t, 0);
	}
	
}

/* Desktop layout */
@media (min-width: 1024px) {
	.row-fluid {
		flex-wrap: nowrap;
	}

	
	.span1 {
		width: calc((var(--column-width-multiplier) * 1) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
	.span2 {
		width: calc((var(--column-width-multiplier) * 2) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
	.span3 {
		width: calc((var(--column-width-multiplier) * 3) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
	.span4 {
		width: calc((var(--column-width-multiplier) * 4) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
	.span5 {
		width: calc((var(--column-width-multiplier) * 5) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
	.span6 {
		width: calc((var(--column-width-multiplier) * 6) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
	.span7 {
		width: calc((var(--column-width-multiplier) * 7) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
	.span8 {
		width: calc((var(--column-width-multiplier) * 8) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
	.span9 {
		width: calc((var(--column-width-multiplier) * 9) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
	.span10 {
		width: calc((var(--column-width-multiplier) * 10) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
	.span11 {
		width: calc((var(--column-width-multiplier) * 11) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
	.span12 {
		width: calc((var(--column-width-multiplier) * 12) * 1% - var(--column-gap));
		order: var(--order, 0)
	}
	
}
/* Top Padding */
.padding-top--none {
	padding-block-start: 0;
}
.padding-top--xs {
	padding-block-start: clamp(1rem, 1rem, 2vw);
}
.padding-top--s {
	padding-block-start: clamp(1rem, 2rem, 3vw);
}
.padding-top--n {
	padding-block-start: clamp(1.5rem, 4rem, 8vw);
}
.padding-top--l {
	padding-block-start: clamp(4rem, 8rem, 15vw);
}
.padding-top--xl {
	padding-block-start: clamp(8rem, 16rem, 20vw);
}

/* Bottom Padding */
.padding-bottom--none {
	padding-block-end: 0;
}
.padding-bottom--xs {
	padding-block-end: clamp(1rem, 1rem, 2vw);
}
.padding-bottom--s {
	padding-block-end: clamp(1rem, 2rem, 3vw);
}
.padding-bottom--n {
	padding-block-end: clamp(1.5rem, 4rem, 8vw);
}
.padding-bottom--l {
	padding-block-end: clamp(4rem, 8rem, 15vw);
}
.padding-bottom--xl {
	padding-block-end: clamp(8rem, 16rem, 20vw);
}
.wrapper {
	width: min(1440px, 100%);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 2rem, 3vw);
}

.wrapper--xs {
	width: min(600px, 100%);
}
.wrapper--s {
	width: min(800px, 100%);
}
.wrapper--m {
	width: min(1024px, 100%);
}
.wrapper--l {
	width: min(1600px, 100%);
}
.wrapper--xl {
	width: min(1940px, 100%);
}
.wrapper--full {
	width: 100%;
}
.wrapper--full-bleed {
	width: 100%;
	padding-inline: 0;
}

/* Theme */
.main-header {
	padding-block: clamp(1rem, 1.5rem, 2vw);
	padding-inline: clamp(1.25rem, 2rem, 3vw);
	background: var(--c-white);
	position: relative;
	z-index: 2000;
	
	display: flex;
	justify-content: center;
	gap: 1rem;
	
	transition: 
		transform .25s ease,
		box-shadow .25s ease;
}
.main-header:where(.show,.hide) {
	position: fixed;
	top: 38px;
	left: 0;
	right: 0;
}
.main-header.show {
	transform: translateY(0px);
	transition: transform .25s ease;
	box-shadow: 0 10px 30px rgba(var(--c-black-rgb), .20);
}
.main-header.hide {
	transform: translateY(-200px);
	transition: transform .5s ease;
	box-shadow: 0 0 0 rgba(var(--c-black-rgb), 0);
}
.main-header__top-bar {
	background: var(--c-black);
	text-align: center;
	height: 38px;
	line-height: 1;
	padding-block: 10px;
	padding-inline: clamp(1.25rem, 2rem, 3vw);
	position: relative;
	z-index: 2001;
}
.main-header__top-bar:has( + .show),
.main-header__top-bar:has( + .hide){
	position: fixed;
    top: 0;
	left: 0;
	right: 0;
}
.main-header__logo {
	margin-inline-end: auto;
	width: 100%;
	max-width: 114px;
}
.main-header__logo a {
	align-self: center;
}
.main-header__nav {
	display: none;
}
.main-header__button {
	display: none;
	margin-inline-start: auto;
}
.main-header__button--mobile {
	display: block;
	padding-inline: 1rem;
	margin-block-start: auto;
}
.main-header__button--mobile .hs-button {
	width: 100%;
}

@media (min-width: 500px) {
	.main-header__logo {
		max-width: 135px;
	}
	.main-header__button {
		display: grid;
		place-items: center;
	}
	.main-header__button--mobile {
		display: none;
	}
}
@media (min-width: 1024px) {
	.main-header__logo {
		max-width: 150px;
	}
}
@media (min-width: 1024px) {
	.main-header__top-bar {
		display: none;
	}
	.main-header__logo {
		max-width: 200px;
	}
	.main-header__nav {
		display: grid;
		place-items: center;
	}
	.main-header:where(.show,.hide) {
		top: 0px;
	}
}
@media (min-width: 2000px) {
	.main-header__logo {
		max-width: 230px;
	}
}
@media (min-width: 1024px) {
	.main-nav {
		display: flex;
		align-items: center;
		gap: 0 1.25rem;
		padding: 0;
		margin: 0;
	}
	.main-nav__item {
		position: relative;
		list-style: none;
	}
	.main-nav__item--1 {
		text-align: center;
	}
	.main-nav__link {
		align-self: center;
		font-weight: normal;
		letter-spacing: 0.1em;
		line-height: 1.22;
		text-align: center;
		color: var(--c-black);
		text-decoration: none;
		text-transform: uppercase;
		display: block;
	}
	.main-nav__item--1.main-nav__item--active > .main-nav__link {
		color: var(--c-green);
		font-weight: 600;
	}

	.main-nav__item--has-children > .main-nav__child {
		transition-behavior: allow-discrete; /* Allows Animation of Display Property */
		display: none;
		opacity: 0;
		position: absolute;
		top: 95%;
		left: 0;
		
		width: 200px;
		margin: 0;
		padding: 0;
		text-align: left;
		box-shadow: 0 0 0 rgba(var(--c-black-rgb), 0);
		
		transition:
			opacity .25s ease
			box-shadow .25s ease;
	}
	
	.main-nav__item--has-children:where(:hover, :focus, :focus-within) > .main-nav__child {
		display: flex;
		flex-flow: column nowrap;
		background: var(--c-white);
		opacity: 1;
		padding: .5rem 0;
		border-radius: var(--radius-m);
		box-shadow: 0 10px 30px rgba(var(--c-black-rgb), .2);
	}
	
	.main-nav__child .main-nav__link {
		text-transform: unset;
		text-align: left;
		padding: .5rem;
	}
	.main-nav__child .main-nav__item--active .main-nav__link,
	.main-nav__child .main-nav__link:where(:hover, :focus) {
		background: var(--c-green);
		color: var(--c-white);
	}
}
@media (min-width: 2000px) {
	.main-nav {
		gap: 0 2rem;
	}
}
.mobile-main-nav {
	display: flex;
	justify-content: flex-end;
	z-index: 1999;
	position: fixed;
	background: rgba(var(--c-black-rgb), .6);
	inset: 0;
	height: 100dvh;
	opacity: 0;
	width: 0;
}

.mobile-main-nav > ul {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	display: flex;
	flex-flow: column nowrap;
	background: var(--c-white);
	padding-block: 140px 36px;
	box-shadow: -10px 0 30px rgba(var(--c-black-rgb), .2);
	width: 300px;
	height: 100dvh;
	list-style: none;
    padding-inline: 0;
	transform: translateX(100%);
	
	transition:
		padding-block .25s ease;
}
.mobile-main-nav--open > ul {
	transform: translateX(0)
}
.main-header.hide + .mobile-main-nav > ul {
	padding-block: 36px 36px;
}

.mobile-main-nav__item__wrapper {
	display: flex;
	flex-flow: row nowrap;
}
.mobile-main-nav__link {
	display: block;
	width: 100%;
	padding: .9rem;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 1.22;
	color: var(--c-black);
	text-decoration: none;
	text-transform: uppercase;
}
.mobile-main-nav__link:where( + .mobile-main-nav__sub-toggle ) {
	width: calc(100% - 50px);
}
.mobile-main-nav__sub-toggle {
	width: 60px;
	padding: 0;
	display: grid;
	place-items: center;
	border: none;
	border-left: 2px solid var(--c-grey);
	background: transparent;
}
.mobile-main-nav__sub-toggle svg {
	width: 20px;
	height: 20px;
	fill: var(--c-black);
}
.mobile-main-nav__child {
	overflow: hidden;
	height: 0;
	background: var(--c-grey);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .9rem;
}
.mobile-main-nav__child .mobile-main-nav__link {
	text-transform: unset
}


@media (min-width: 1024px) {
	.mobile-main-nav {
		display: none;
	}	
}


.trigger {
	position: relative;
	background: transparent;
	border: none;
	align-self: center;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	padding: 5px;
	gap: 5px;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-s);
}
.trigger:focus {
	background: var(--c-grey);
}
.trigger__line {
	display: block;
	height: 3px;
	width: 30px;
	border-radius: 5px;
	rotate: 0;
	background-color: var(--c-black);
	transition-behavior: allow-discrete; /* Allows Animation of Display Property */
	transition: all .25s ease;
}
.trigger__line:nth-child(2) {
	width: 28px
}
.trigger__line:nth-child(3) {
	width: 26px;
}

.trigger--active .trigger__line {
	position: absolute;
	rotate: 45deg;
	
}
.trigger--active .trigger__line:nth-child(2) {
	rotate: -45deg;
	width: 30px;
}
.trigger--active .trigger__line:nth-child(3) {
	display: none;
	rotate: 0;
	transition: all 0s ease;
}

@media (min-width: 1024px) {
	.trigger {
		display: none;
	}
}

/* Modules */
.hero-h {
	position: relative;
	overflow: hidden;
	color: var(--c-white);
	background: rgba(255,255,255,.8);
	isolation: isolate;
}

.hero-h__title {
	margin-bottom: 2rem;
}
.hero-h__sub-title *  {
	font-size: clamp(1.2rem, 1.6rem, 3vw);
	margin-bottom: 2rem;
	line-height: 1.2;
}
.hero-h__benefits {
	margin-top: -2rem;
}
.hero-h .benefits {
	padding: clamp(1.5rem, 2rem, 3vw);
	background: var(--c-green);
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	gap: 1rem 2rem;
	border-radius: 50px;
	margin-bottom: 2rem;
}
.hero-h .benefit {
	color: var(--c-white);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-size: 1.3rem;
}
.hero-h .benefit > img {
	width: 40px;
	height: 40px;
}

.hero-h__video {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 9rem;
	left: 0;
	right: 0;
	background: var(--c-black);

}
.hero-h__video video {
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: .7
}

@media (min-width: 500px) {

	.hero-h .benefits {
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
	}
	.hero-h .benefit {
		flex: 1 300px;
	}
}
.hero-i {
	position: relative;
	isolation: isolate;
}
.hero-i::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hero-bg);
	z-index: -1;
}
.hero-i__wrapper{
	display: flex;
	flex-flow: column nowrap;
}
.hero-i__content {
	padding: 3rem clamp(1.25rem, 2rem, 3vw) ;
}


/* .hero-i__image img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
} */



.hero-i__title {
	margin-top: 0;
	margin-bottom: 2rem;
}
.hero-i__sub-title *  {
	font-size: clamp(1.2rem, 1.6rem, 3vw);
	margin-bottom: 2rem;
	line-height: 1.2;
}


@media (min-width: 768px) {
	.hero-i {
		flex-flow: row nowrap;
		align-items: center;
		background-color: transparent;
		padding-top: 4rem;
		padding-bottom: 4rem;
		justify-content: flex-end;
	}
	.hero-i::before {
		inset: 2rem 0 0;
	}
	
	.hero-i__wrapper{
		color: var(--hero-text);
		width: min(650px, 100%);
		margin-inline: auto;
		display: flex;
		justify-content: flex-end;
		flex-flow: row nowrap;
		padding: 4rem 1rem;
	}

	.hero-i__content {
		width: 65%;
		padding: 0;
	}
	.hero-i--pos-right {
		justify-content: flex-start;
	}
	.hero-i--pos-right .hero-i__wrapper {
		justify-content: flex-start;
	}
	.hero-i--pos-right .hero-i__image {
		border-radius: var(--radius-xl) 0 0 var(--radius-xl);
		left: auto;
		right: 0;
	}
	.hero-i--pos-right + .hero-i__benefits > .hero-i__benefits__wrapper {
		justify-content: flex-start;
	}
	.hero-i--pos-right + .hero-i__benefits > .hero-i__benefits__wrapper .benefits {
		margin: -4rem 0 0 1rem;
	}
}

@media (min-width: 1024px) {
	.hero-i__wrapper{
		width: min(1000px, 100%);
	}

}

.hero-i__benefits {
	background: var(--benefits-bg);
}
.hero-i__benefits__wrapper {
	position: relative;
	z-index: 1;
}
.hero-i__benefits .benefits {
	width: min(500px, 95%);
	margin: -1rem auto 0 auto;
	padding: clamp(1.5rem, 2rem, 3vw);
	background: var(--benefits);
	color: var(--benefits-text);
	border-radius: var(--radius-l);
}
.hero-i__benefits .benefits ul {
	margin: 0;
}
.hero-i__benefits .benefits li {
	font-size: 1.2rem;
	margin-bottom: 1rem;
}
.hero-i__benefits .benefits li:last-of-type {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.hero-i__benefits__wrapper {
		width: min(1200px, 100%);
		margin-inline: auto;
		margin-block: -2rem auto;
		display: flex;
		justify-content: flex-end;
	}
	.hero-i__benefits .benefits {
		position: relative;
		z-index: 1;
		margin: -4rem 1rem 0 0;
	}
}
.mcc {
	position: relative;
}
.mcc__column {
	text-align: var(--h-align-col-mobile);
	position: relative;
}
.mcc__row {
	margin-bottom: var(--space-below, 0);
	color: var(--text-color);
}
.mcc__row:has( > .pos--abs) {
	position: abolsute;
	inset: 0;
	min-height: 1px;
}
.pos--abs {
	position: absolute;
	min-height: 1px;
}
.pos--rel {
	position: relative;
	min-height: 1px;
}
.mcc__more__content {
	display: none;
	opacity: 0;
	overflow: hidden;
	transition: all .25s ease;
	transition-behavior: allow-discrete;
}
.mcc__more__content--open {
	opacity: 1;
	display: block;
	transition: all .25s ease;
}

@media (min-width: 1024px) {
	.mcc__column {
		align-self: var(--v-align-col);
		text-align: var(--h-align-col);
		margin-top: var(--pull-col);
	}
	.mcc__column--enable-hover {
		transform: 
			translateY(0) 
			scale(1);
		transition: 
			transform .25s ease-in-out,
			box-shadow .25s ease-in-out;
	}
	.mcc__column--enable-hover:where(:hover, :focus) {
		transform: 
			translateY(-10px) 
			scale(1.1);
		box-shadow: 0 20px 60px rgba(var(--c-black-rgb), .35);
	}
}