/*******************************
# section > fonts
*******************************/

@font-face {
	font-family: 'Asgrike';
	src: url('fonts/Asgrike-Regular.woff2') format('woff2'),
		url('fonts/Asgrike-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}



/*******************************
# section > tags
*******************************/

:root {
	--dark: #212121;
	--pb-blue: #12152f;
	--move-mint: #2dbc9e;
	--rest-gray: #d9d9d9;
	--pulse-pink: #ef5089;
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	background: var(--pb-blue);
	color: white;
	line-height: 1.4;
	font-family: "Josefin Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: 'Asgrike';
	margin-bottom: 1rem;
	line-height: 1.1;
	font-weight: normal;
	text-transform: uppercase;
}

h1 {
	font-size: clamp(3rem, 4vw, 4rem);
}

h2 {
	font-size: clamp(2rem, 3vw, 3rem);
}

h3 {
	font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

p {
	font-size: 1.15rem;
}

p:not(:last-child) {
	margin-bottom: 1rem;
}

ul,
ol {
	padding-left: 1em;
}

ul li,
ol li {
	margin-top: .5em;
	margin-bottom: .5em;
}

img {
	max-width: 100%;
}


/*******************************
# common
*******************************/

.container {
	padding-left: clamp(1rem, 5vw, 3rem);
	padding-right: clamp(1rem, 5vw, 3rem);
	margin-left: auto;
	margin-right: auto;
}

.container--sm {
	max-width: 48rem;
}

.container--md {
	max-width: 64rem;
}

.container--lg {
	max-width: 80rem;
}

.container--xl {
	max-width: 96rem;
}

.section--margin {
	margin-top: clamp(1rem, 5vw, 6rem);
	margin-bottom: clamp(1rem, 5vw, 6rem);
}

.section--padding {
	padding-top: clamp(3rem, 10vw, 8rem);
	padding-bottom: clamp(3rem, 10vw, 8rem);
}

.wrapper {
	overflow: hidden;
}

.button {
	background: var(--move-mint);
	display: inline-block;
	padding: 1em 2em;
	color: white;
	font-family: 'Asgrike';
	text-decoration: none;
	border-radius: 0.25em;
	border: none;
	font-size: 1.15rem;
	cursor: pointer;
	text-align: center;
}

.button:disabled {
	filter: grayscale(1);
	cursor: not-allowed;
}

.button:hover {
	color: white;
	background: var(--pulse-pink);
}

iframe .EmbeddedMediaImage {
	object-fit: cover !important;
}


/*******************************
# decorations
*******************************/

.line {
	display: none;
	background: var(--pulse-pink);
	width: 2rem;
	height: 20rem;
	border-radius: 2rem;
	position: absolute;
	top: -10rem;
	right: 8%;
	z-index: -1;
}

.line--short {
	right: calc(8% + 3.5rem);
	height: 6rem;
}

@media(min-width: 32rem) {

	.line {
		display: block;
	}

}


.deco-halftone {
	position: absolute;
	width: 72rem;
	z-index: -1;
	opacity: 0.25;
	max-width: 150%;
}

.deco-halftone--bottom-left {
	top: 100%;
	left: 0;
	transform: translate(-15%, -50%) rotate(25deg);
}

.deco-halftone--bottom-right {
	top: 100%;
	right: 0;
	transform: translate(15%, -50%) rotate(-25deg);
}





/*******************************
# forms / input
*******************************/

.form {
	display: flex;
	flex-flow: column;
	gap: 1rem;
}

input[type=text],
input[type=email],
input[type=tel] {
	display: block;
	width: 100%;
	padding: 1em 1.5em;
	border: none;
	border-radius: 0.25em;
	background: rgba(0, 0, 0, 0.05);
	font-family: inherit;
}



/*******************************
# header
*******************************/

.header {
	background: #111;
	color: white;
	padding: 1rem 0;
	line-height: 1;
}

.header__logo {
	display: block;
	width: 6rem;
}

.header__logo img {}

.header__row {
	display: flex;
	justify-content: space-between;
	gap: 2em;
}

.header .block-icons__social {
	display: none;
}

.preheader {
	text-align: center;
	background: var(--move-mint);
	color: var(--pb-blue);
	text-transform: uppercase;
	font-size: 0.875rem;
	padding: .35em 0 .15rem;
	font-weight: bold;
}


/*******************************
# footer
*******************************/

.footer {
	background: #111;
	color: var(--rest-gray);
	padding: 1rem 0;
	border-top: .25rem solid var(--pulse-pink);
	font-size: 0.875rem;
	line-height: 1;
}



/*******************************
# section > hero
*******************************/

.hero {
	text-align: center;
	position: relative;
	z-index: 1;
	padding: clamp(3rem, 20vw, 16rem) 0;
	box-shadow: 0rem 0rem 5rem rgba(0, 0, 0, 1) inset;
}

.hero__logo {
	width: 80%;
	margin-bottom: 2rem;
	max-width: 48rem;
}

.hero__tagline {
	color: var(--pulse-pink);
	font-size: clamp(1.5rem, 2vw, 2rem);
	line-height: 1.1;
	text-transform: uppercase;
}

.hero__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 0.2;
}

@media(min-width: 64rem) {

	.hero h1 .words {
		display: initial;
	}

	.hero h1 .dot {
		display: initial;
	}


}




/*******************************
# section > intro
*******************************/

.section-intro {
	position: relative;
	z-index: 1;
}

.section-intro .col:nth-child(1) {
	display: none;
}

.section-intro em {
	color: var(--move-mint);
	font-style: normal;
}

.section-intro__halftone {
	position: absolute;
	top: 100%;
	left: 0;
	width: 72rem;
	transform: translate(-15%, -50%) rotate(25deg);
	z-index: -1;
	opacity: 0.25;
	max-width: 150%;
}

@media(min-width: 40rem) {


	.section-intro .row {
		display: flex;
		flex-flow: row;
		align-items: center;
		gap: 4rem;
	}

	.section-intro .col:nth-child(2) {
		flex: 1;
	}

	.section-intro .col:nth-child(1) {
		width: 30%;
		display: block;
	}

	.section-intro .row img {
		width: 100%;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: 1rem;
		box-shadow: 1em -1em 0 var(--pulse-pink);
	}


}

/*******************************
# section > features
*******************************/

.features {
	position: relative;
	background: var(--rest-gray);
	color: var(--pb-blue);
	z-index: 1;
}

.features__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 0.08;
	filter: grayscale(1) blur(0.2em);
}

.features__container {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}

.features__item {
	background: white;
	display: flex;
	align-items: stretch;
	border-radius: 1.5rem;
	overflow: hidden;
}

.features__icon {
	aspect-ratio: 1;
	background: var(--pb-blue);
	width: 15%;
	position: relative;
}

.features__icon svg {
	fill: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
}

.features__text {
	padding: clamp(0.5rem, 3vw, 2rem);
	flex: 1;
}

.features__title {
	font-family: 'Asgrike';
	font-size: clamp(1.1rem, 3vw, 1.2rem);
	text-transform: uppercase;
}

.features__content {
	font-size: clamp(0.875rem, 2vw, 1rem);
}

@media(max-width: 32rem) {

	.features .container {
		padding-right: 0;
	}

	.features__item {
		border-radius: 1.5rem 0 0 1.5rem;
	}

}

@media(min-width: 56rem) {

	.features__container {
		grid-template-columns: repeat(2, 1fr);
	}

	.features__icon {
		width: 20%;

	}

	.features__icon svg {
		width: 30%;
	}

}




/*******************************
# section > results
*******************************/

.results {
	background: var(--move-mint);
	color: var(--pb-blue);
	position: relative;
	z-index: 1;
	overflow: hidden;
	box-shadow: 0rem 0rem 10vw rgba(0, 0, 0, 0.25) inset;
	text-align: center;
}

.results h2 {
	display: flex;
	flex-flow: column;
}

.results h2 em {
	color: white;
	font-style: normal;
}

.results__container {
	display: flex;
	flex-flow: column;
	gap: clamp(1rem, 5vw, 2rem);
	margin-top: clamp(2rem, 5vw, 4rem);
}

.results__item {
	border: 0.15rem solid white;
	border-radius: 2rem;
	padding: clamp(2rem, 6vw, 3rem);
	background: var(--pb-blue);
	color: white;
	text-align: initial;
}

.results__heading {
	font-weight: bold;
	text-transform: uppercase;
	margin-right: 2em;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.results__quote {
	margin: .5em 0;
}

.results-swiper {
	margin-top: clamp(1rem, 5vw, 3rem);
}

.results__name {
	font-weight: bold;
}

.results__image {
	width: 80%;
	margin: 1rem auto 0;
}

.results__image img {
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
	border-radius: 1.5rem;
	box-shadow: 0.5em -0.5em 0em var(--pulse-pink);
}

.results__quote-left,
.results__quote-right {
	max-width: 1.5em;
	margin: .5em 0;
	display: block;
}

.results__quote-right {
	margin-left: auto;
}

.results__row {
	display: flex;
	justify-content: space-between;
	margin: .5em 0;
	align-items: start;
}

.results__stars {
	display: flex;
	flex-flow: row;
	gap: .1em;
}

.results__stars svg {
	width: 2em;
	fill: goldenrod;
}

.results__halftone {
	position: absolute;
	width: 72rem;
	opacity: .5;
	max-width: 150%;
	z-index: -1;
	transform: translate(-32%, 32%) rotate(45deg);
	bottom: 0;
	left: 0;
}

@media(min-width: 40rem) {

	.results h2 {
		display: initial;
	}

	.results-swiper {
		margin-left: -2rem;
		margin-right: -2rem;
	}

	.results-swiper-container .swiper-slide {
		padding: 0 2rem;
	}

}

@media(max-width: 40rem) {

	.results-swiper-container {
		padding: 0;
	}

	.results-swiper-container .swiper-slide {
		padding: 0 5%;
	}

}


/* Swiper */

.results .swiper-navigation {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
}

.results .swiper-pagination {
	position: static;
	width: auto;
}


.results .swiper-pagination-bullet {
	background: black;
	width: 1em;
	height: 1em;
	font-size: 0.75rem;
}

.results .swiper-pagination-bullet-active {
	background: var(--pb-blue);
}

.results .swiper-prev,
.results .swiper-next {
	position: static;
	font-size: 2rem;
	color: var(--pb-blue);
	cursor: pointer;
}

.results .swiper-prev svg,
.results .swiper-next svg {}


@media(min-width: 48rem) {

	.results__container {
		flex-flow: wrap;
		justify-content: center;
	}

	.results__item {
		display: flex;
		flex-flow: row;
		align-items: center;
		gap: 1.5em;
	}

	.results__image {
		width: 30%;
		margin: 0;
	}

	.results__text {
		flex: 1;
	}

}


/*******************************
# section > video
*******************************/

.section-video {
	background: var(--dark);
	box-shadow: 0rem 0rem 5rem rgba(0, 0, 0, 0.7) inset;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.section-video em {
	color: var(--pulse-pink);
	font-style: normal;
}

.section-video iframe {
	aspect-ratio: 9/16;
	display: block;
	width: 85%;
	border-radius: 2em;
	border: 0.2rem solid white;
	margin: 0 auto;
}

.section-video .row {
	display: flex;
	flex-flow: column;
	gap: clamp(2rem, 5vw, 4rem);
}

.section-video .col {}

.video__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 0.08;
	filter: grayscale(1) blur(0.2em);
}

.section-video__desktop-text {
	display: none;
}

.section-video__mobile-text {
	margin: 2rem 0;
}

@media(min-width: 40rem) {

	.section-video .row {
		flex-flow: row;
		align-items: center;
	}

	.section-video iframe {
		margin: 0;
		width: 100%;
	}


	.section-video .col:nth-child(1) {
		width: clamp(20rem, 50%, 32rem);
	}

	.section-video .col:nth-child(2) {
		flex: 1;
	}

	.section-video__desktop-text {
		display: block;
	}

	.section-video__mobile-text {
		display: none;
	}

}


/*******************************
# section > price
*******************************/

.section-price {
	position: relative;
	z-index: 2;
	border-bottom: 0.5em solid var(--pulse-pink);
}

.section-price em {
	color: var(--move-mint);
	font-style: normal;
}

.section-price__special {
	font-size: 1.5rem;
	color: var(--pulse-pink);
}

.section-price__hand {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	width: clamp(1rem, 44vw, 48rem);
	transform: translateY(-80%);
}

.section-price__list {
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-flow: column;
	gap: 1em;
	margin: 1rem 0;
}

.section-price__item {
	margin: 0;
	border: 1px solid white;
	background: var(--rest-gray);
	color: var(--pb-blue);
	border-radius: 1em;
	padding: 1em;
	display: flex;
	align-items: center;
	gap: 1em;
}

.section-price__icon {
	font-size: 1.5em;
	line-height: 0;
}

.section-price__icon svg {
	width: 1.5em;
	fill: var(--pb-blue);
}

.section-price__wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -5;
}


@media(min-width: 64rem) {

	.section-price__inner {
		margin-left: clamp(1rem, 45%, 34rem);
	}

	.section-price__hand {
		display: block;
	}

}

@media(max-width: 32rem) {
	.section-price__item {
		margin-right: -5%;
		border-radius: 1em 0 0 1em;
	}
}



/*******************************
# section > faq
*******************************/

.faq {
	position: relative;
	background: var(--rest-gray);
	color: var(--pb-blue);
	z-index: 1;
}

.faq__list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 1rem;
	margin: 2rem 0;
}

.faq__item {
	padding: clamp(1rem, 5vw, 2rem);
	border-radius: 1em;
	background: white;
	border-left: 0.3em solid var(--move-mint);
	cursor: pointer;
}

.faq__item .question {
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.faq__item .answer {
	margin: 1rem 0;
	display: none;
}

.faq__item.open .answer {
	display: block;
}


.faq__item .switch {
	line-height: 0;
}

.faq__item .switch svg {
	width: 1.5rem;
}

.faq__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 0.05;
	filter: grayscale(1) blur(0.2em);
}

@media(min-width: 64rem) {

	.faq__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.faq__item {
		cursor: initial;
	}

	.faq__item .switch {
		display: none;
	}


	.faq__item .answer {
		display: block;
	}


}



/*******************************
# section > contact
*******************************/

.section-contact {
	position: relative;
	z-index: 1;
}

.section-contact em {
	color: var(--move-mint);
	font-style: normal;
}

.section-contact__inner {
	background: white;
	color: var(--pb-blue);
	padding: clamp(1rem, 7.5vw, 3rem);
	border-radius: 2rem;
	margin: 3rem auto;
	box-shadow: 0.5em -0.5em 0 var(--pulse-pink);
}

.section-contact__halftone {
	position: absolute;
	width: 72rem;
	z-index: -1;
	opacity: 0.25;
	max-width: 150%;
	top: 100%;
	right: 0;
	transform: translate(15%, -50%) rotate(-25deg);
}

.section-contact .line {
	background: var(--move-mint);
}

.section-contact__cta {
	text-align: center;
	margin: clamp(2rem, 5vw, 5rem) 0 0;
}

.section-contact__cta-text {
	font-size: clamp(2rem, 3vw, 3rem);
	margin: 0 auto 2rem;
	max-width: 14em;
	text-transform: uppercase;
	line-height: 1.2;
	font-family: 'Asgrike';
}

.section-contact__cta em {
	color: var(--pulse-pink);
	font-style: normal;
}

@media(min-width: 40rem) {

	.section-contact__inner {
		box-shadow: 1.5em -1.5em 0 var(--pulse-pink);
	}

}


/*******************************
# section > banner
*******************************/

.section-banner {
	text-align: center;
	position: relative;
	z-index: 1;
	background: var(--pb-blue);
	padding: clamp(4rem, 12vw, 12rem) 0;
}

.section-banner__logo {
	width: 32rem;
	max-width: 70%;
	margin-bottom: 2rem;
}

.section-banner__tagline span {
	color: var(--move-mint);
}

.section-banner__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: .70;
}



.section-banner__icons {
	display: flex;
	flex-flow: row;
	gap: 2em;
	justify-content: center;
}

.section-banner__icons a {
	color: inherit;
}

.section-banner__icons a:hover {
	color: var(--pulse-pink);
}

.section-banner__icons a svg {
	height: 2em;
	fill: currentColor;
}



/*******************************
# section > thanks
*******************************/

.thanks-back,
.thanks-back:visited {
	color: white;
	margin-bottom: 2rem;
	display: inline-block;
}

.thanks-back:hover {
	color: var(--pulse-pink);
}

.card {
	background: var(--rest-gray);
	color: var(--pb-blue);
	border-radius: 2rem;
	padding: clamp(1.5rem, 5vw, 3rem);
	margin: clamp(1rem, 5vw, 2rem) auto;
	box-shadow: .5em -.5em 0 var(--pulse-pink);
	display: grid;
	grid-gap: 2rem;
}

.card h1 {
	font-size: clamp(2rem, 3vw, 3rem);
}

.card__bio img {
	max-width: 60%;
}

@media(min-width: 40rem) {

	.card {
		grid-template-columns: 5fr 2fr;
		max-width: 52rem;
		box-shadow: 1em -1em 0 var(--pulse-pink);
	}

	.card__bio {
		grid-row: span 2;
	}

	.card__bio img {
		max-width: 100%;
	}

}


/*******************************
# block > icons
*******************************/

.block-icons {
	display: flex;
	flex-flow: row;
	gap: 1em;
}

.block-icons a {
	text-decoration: none;
	color: inherit;
}

.block-icons a:hover {
	color: var(--pulse-pink);
}

.block-icons svg {
	width: 1.5em;
	height: 1.5em;
	fill: currentColor;
}



/* END */