@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

body>header {
    align-items: center;
    box-shadow: 0 1px 0 0 var(--light-blue-grey-2);
    display: flex;
    justify-content: space-between;
    padding: 0.625em 2.5em;
}

body>header:after {
	display: none;
}

body>header #brand,
body>header #brand img {
	max-width: 12.75em;
	margin: 0;
}

#mainnav::after {
	display: none;
}

body > header #mainnav li {
	line-height: 1em;
}

#mainnav > ul {
	display: flex;
}

#mainnav > ul > li:nth-last-child(2) {
	margin-left: 1em;
}

#mainnav > ul > li > a {
	color: var(--dark-blue);
	font-weight:600;
	padding: 0 1em;
}

#mainnav > ul > li:is(:nth-last-child(2), :last-child) > a {
	color: #fff;
	font-size: 1.125em;
	font-weight: 700;
}

#mainnav > ul > li:nth-last-child(2) > a {
	background: var(--light-blue);
}

#mainnav > ul > li:last-child > a {
	background: #0D3B60;
}

#mainnav > ul > li:is(:nth-last-child(2), :last-child) > a:is(:hover, :focus-visible) {
	background: var(--light-blue-grey-2);
	color: var(--light-blue);
}

#mainnav a[href^=tel] {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
}

#mainnav a[href^=tel]:before {
    background: var(--yellow);
    content: "";
    display: block;
    height: 1em;
    mask-image: url(/images/icons/ancillary-phone.svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% auto;
    transition: ease all 200ms;
    width: 1em;
}


.content {
	line-height: 1.75em;
	position: relative;
}

.content :is(p, li, th, td) {
	font-size: 1.125em;
}




/*  Hero  */
#hero {
	height: 70vh;
	max-height: 62.5em;
	min-height: 21.875em;
}

#hero .background:before {
    background: var(--mask-bottom);
    bottom: -4.875em;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

#hero .background:after {
    background: linear-gradient(90deg, rgba(0,24,43,0.70) 3%, rgba(0,40,72,0.00) 50%);
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

#hero .background img {
    object-fit: cover;
    object-position: center;
}


/*  Intro  */
#intro {}


/*  Why Lifeway  */
#why-lifeway ul {
	gap: clamp(1.25em, 0.795em + 2.27vw, 2.5em) 0;
}

#why-lifeway li {
	width: 33%;
}

#why-lifeway li .icon {
	max-width: 8.125em;
}


/*  Pricing  */
#pricing .finance-options table {
	min-width: 65%;
}

#pricing .finance-options img {
	margin: 0 auto;
}


/*  Reviews  */
#reviews .awards {
	gap: 1.25em;
}

#reviews .awards img {
	display: block;
	max-width: 11.25em;
}


/*  Contact  */
#contact {}








/*=============================================================================*/

/*   Landing Page: Sticky Form   */

/*=============================================================================*/
.sticky-form #hero > div {
	padding: clamp(3em, 2.386em + 3.07vw, 4.688em) /* 48-75px @ 320-1200px */ 1.5em;
}

.sticky-form #hero .wrap,
.sticky-form .page-container .wrap {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	gap: 2em;
	max-width: 80em;
	margin: 0 auto;
}

.sticky-form .dark-bg:before {
	background: var(--dark-blue);
	content: "";
	display: block;
	height: 100%;
	left: 50%;
	margin-left: calc(-50vw + 15em);
	margin-right: -50vw;
	position: absolute;
	right: 50%;
	top: 0;
	width: 100vw;
}

.sticky-form .light-bg:before {
	background: var(--light-blue-grey-2);
	content: "";
	display: block;
	height: 100%;
	left: 50%;
	margin-left: calc(-50vw + 15em);
	margin-right: -50vw;
	position: absolute;
	right: 50%;
	top: 0;
	width: 100vw;
}

.sticky-form .content {
	max-width: 46.875em;
}

.sticky-form #form {
    margin-bottom: 3em;
    margin-right: 1.5em;
    margin-top: 5.5em;
    position: sticky;
    top: 25vh;
    width: 26.25em;
    z-index: 4;
	min-width: 22.8125em;
}

.sticky-form #form .form-steps > div:not(#step-1) {
	display: none;
}



/*=============================================================================*/

/*   Landing Page: Full-Width Form   */

/*=============================================================================*/

main:not(.sticky-form) .flex {
	display: flex;
	justify-content: space-between;
	gap: clamp(3em, 2.386em + 3.07vw, 4.688em);
	max-width: 80em;
}

main:not(.sticky-form) #reviews .flex {
	align-items: center;
}

main:not(.sticky-form) .flex > * {
	width: 50%;
}

main:not(.sticky-form) .flex > *:only-child {
	width: 100%;
}

main:not(.sticky-form) #why-lifeway h2,
main:not(.sticky-form) #reviews h2 {
	text-align: center;
}

main:not(.sticky-form) #why-lifeway h2:after,
main:not(.sticky-form) #reviews h2:after {
	margin-left: auto;
	margin-right: auto;
}

main:not(.sticky-form) #reviews p {
	text-align: center;
}

main:not(.sticky-form) #reviews .flex {
	margin-top: 2em;
}




/* 1320px */
@media screen and (max-width: 82.5em) {
	#mainnav > ul > li:not(:nth-last-child(2), :last-child) + li:not(:nth-last-child(2), :last-child) {
		margin-left: 0;
	}
  body > header #mainnav a, 
  body > header.shrink #mainnav > ul > li > a,
  #mainnav > ul > li:is(:nth-last-child(2), :last-child) > a {
    font-size: 0.875em;
    font-weight: 600;
    padding: 0 1.25em;
    line-height: 2.75rem;
  }
}





/* 1280px */
@media screen and (max-width: 80em) {
	
	.dark-bg::before,
	.light-bg::before {
        left:0;
        margin-left: 0;
        margin-right: 0;
        right: auto;
    }
	
}




/* 1070px */
@media screen and (max-width: 66.875em) {
	
  body > header {
    padding-left: 1em;
    padding-right: 1em;
  }
  
  #mainnav a[href^="tel"] {
	font-size: 1em;
  }
  
}




/* 1024px */
@media screen and (max-width: 64em) {
	
	body > header #brand, 
	body > header #brand img {
		max-width: 7.75em;
	}
	
	body > header #mainnav a, 
	body > header.shrink #mainnav > ul > li > a,
	#mainnav > ul > li:is(:nth-last-child(2), :last-child) > a {
		padding: 0 0.65em;
	}
	
	#mainnav a[href^="tel"] {
		font-size: 0.875em;
	}
	
	#why-lifeway ul {
		justify-content: center;
		flex-wrap: wrap;
		gap: 2em;
	}
	
	#why-lifeway li .icon {
		max-width: 5.125em;
	}
	
}




/* 900px */
@media screen and (max-width: 56.25em) {

	body > header {
		flex-wrap: wrap;
	}

	body > header #brand, 
	body > header #brand img {
		max-width: 9.75em;
		margin: 0 auto;
	}

	body > header #navContainer {
		flex: 1 1 auto;
		width: 100%;
	}
	
	#mainnav > ul > li + li
	#mainnav > ul > li:nth-last-child(2) {
		margin-left: 0;
	}

	main:not(.sticky-form) .flex {
		flex-direction: column;
		gap: 2em;
	}

	main:not(.sticky-form) .flex > * {
		width: 100%;
	}
	
}