/* CSS pre-processing by {less}. http://lesscss.org/
***************************************************/

body {
  color: #000000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  transition: background-color 0.6s ease-in-out 0s;
  border: 1.5rem solid #fff !important;
  padding-bottom: 3rem;
  margin: 0;
  &:has(.modal.active) {
  	overflow: hidden;
  }
}

.wrap {
	width: 80%;
	margin: 0 auto;
}

h1, h2, h3 {
    font-weight: 400;
}

.modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	max-width: 80%;
	padding: 3rem;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	background: #fff;
	z-index: 10;
	max-width: 80%;
	max-height: 70vh;
	background: #fff;
	color: #333533;
	overflow: auto;
	    font-size: 70%;
    background: #e8eddf;
	&.active {
		display: block;
	}
	
	div.wrap {
		width: 100%;
		margin: 0 auto;
		/*display: flex;*/
		div {
			/*min-width: 25vw;*/
			&:first-child {
			    width: 66%;
			    margin-right: 2rem;
				min-width: 18rem;
			}
		}
	}
	
	a.close {
	    position: absolute;
	    top: 1rem;
	    right: 1rem;
		svg {
			width: 2rem;
			height: 2rem;
		}
	}
	
	h2 {
	font-size: 52px;
	line-height: 1.05;
	margin: 0 0 2rem;

	}
}

a {
	color: inherit;
}

body[data-style="colour"] {
	background: #cfdbd5;
	color: #fff;
	border-color: #fff;
	#intro .logos, #the-process .wrap ol li { 
		svg {
			* {
				fill: #fff;
				&.st2 {
				    fill: #cfdbd5;
				    stroke: #cfdbd5;
				}
			}
		}
	}
}

body[data-style="white"] {
	background: #e8eddf;
	color: #333533;
	border-color: #333533;
	
}


body[data-style="black"] {
	background: #333533;
	color: #e8eddf;
	border-color: #e8eddf;
	
}

.header {
  text-align: center;
}

.container {
  max-width: 43em;
  margin: 0 auto;
  padding: 100px 15px;
}

h1.site-title {
  a {
    color: #000000;
    font-weight: 700;
    text-decoration: none;
  }
}

	/* APK Protocol*/

@font-face {
  font-family: "APK Protocol";
  font-style: normal;
  font-weight: 300;
  font-display: swap; /* Prevent FOIT (flash of invisible text)*/
  src: url("../assets/fonts/APK-Protocol-Light.woff") format("woff"),
    url("../assets/fonts/APK-Protocol-Light.woff2") format("woff2");
}

@font-face {
  font-family: "APK Protocol";
  font-style: italic;
  font-weight: 300;
  font-display: swap; /* Prevent FOIT (flash of invisible text)*/
  src: url("../assets/fonts/APK-Protocol-Light-Italic.woff")
      format("woff"),
    url("../assets/fonts/APK-Protocol-Light-Italic.woff2")
      format("woff2");
}

@font-face {
  font-family: "APK Protocol";
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* Prevent FOIT (flash of invisible text)*/
  src: url("../assets/fonts/APK-Protocol-Regular.woff") format("woff"),
    url("../assets/fonts/APK-Protocol-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "APK Protocol";
  font-style: italic;
  font-weight: 400;
  font-display: swap; /* Prevent FOIT (flash of invisible text)*/
  src: url("../assets/fonts/APK-Protocol-Regular-Italic.woff")
      format("woff"),
    url("../assets/fonts/APK-Protocol-Regular-Italic.woff2")
      format("woff2");
}

@font-face {
  font-family: "APK Protocol";
  font-style: normal;
  font-weight: 500;
  font-display: swap; /* Prevent FOIT (flash of invisible text)*/
  src: url("../assets/fonts/APK-Protocol-Semi-Bold.woff")
      format("woff"),
    url("../assets/fonts/APK-Protocol-Semi-Bold.woff2")
      format("woff2");
}

@font-face {
  font-family: "APK Protocol";
  font-style: italic;
  font-weight: 500;
  font-display: swap; /* Prevent FOIT (flash of invisible text)*/
  src: url("../assets/fonts/APK-Protocol-Semi-Bold-Italic.woff")
      format("woff"),
    url("../assets/fonts/APK-Protocol-Semi-Bold-Italic.woff2")
      format("woff2");
}

@font-face {
  font-family: "APK Protocol";
  font-style: normal;
  font-weight: 600;
  font-display: swap; /* Prevent FOIT (flash of invisible text)*/
  src: url("../assets/fonts/APK-Protocol-Bold.woff") format("woff"),
    url("../assets/fonts/APK-Protocol-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "APK Protocol";
  font-style: italic;
  font-weight: 600;
  font-display: swap; /* Prevent FOIT (flash of invisible text)*/
  src: url("../assets/fonts/APK-Protocol-Bold-Italic.woff")
      format("woff"),
    url("../assets/fonts/APK-Protocol-Bold-Italic.woff2")
      format("woff2");
}

body {
	font-family: "APK Protocol", Helvetica, Arial;
	font-size: 18px;
	letter-spacing: 0.025rem;
}

#intro, #logo, #in-out, #pricing {
	min-height: 100vh;
}

#logo {
	font-size: 120px;
	a.btn {
		border-radius: 100%;
		padding: 0.5rem;
		height: 50px;
		width: 50px;
		margin-top: 3rem;
		position: absolute;
		bottom: 3rem;
		left: 50%;
		-ms-transform: translate(-50%,0%);
			-webkit-transform: translate(-50%,0%);
			transform: translate(-50%,0%);
		svg {
			max-height: 34px;
			position: absolute;
			top: 50%;
			left: 50%;
			-ms-transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
			* {
				fill: #333533;
			}
		}
		&:hover {
			svg {
				* {
					fill: #fff;
				}
			}
		}
	}
}

#logo .wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	text-align: center;
	-ms-transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

#logo span.typewrite {
	text-decoration: none;
	color: #333533;
	font-weight: 400;
	letter-spacing: -0.05rem;
	&:hover {
		/*color: #fff;*/
	}
}

a.btn {
	font-size: 18px;
	line-height: 1;
	border: 2px solid;
	border-radius: 2rem;
	padding: 0.75rem 2rem;
	text-align: center;
	margin: 3rem auto 0;
	display: block;
    width: 9rem;
	text-decoration: none;
	letter-spacing: -0.025em;
	transition: transform 0.2s ease-in-out 0s;
}

a.btn:hover {
	background: #000;
	border-color: #000;
	color: #fff;
	transform: scale(1.05);
}

#intro, #get-started {
	margin: 0 auto;
	text-align: center;
	min-height: 100vh;
	display: flex;
	align-items: center;
	.wrap {
	max-width: 55rem;
	margin: 0 auto 1rem;
}

h2 {
	font-size: 14px;
	/*text-transform: uppercase;*/
	margin: 0 auto 2rem;
	letter-spacing: 0.025rem;
	font-weight: 400;
}
p {
	font-size: 52px;
}


}

#pricing .heading {
	margin: 0 auto 4rem;
	text-align: center;
	h2 {
		font-size: 14px;
		/*text-transform: uppercase;*/
		margin: 0 auto 2rem;
		letter-spacing: 0.025rem;
		font-weight: 400;
	}
	p {
		font-size: 52px;
	}
}

#get-started {
	margin-top: 25vh;
}



#intro .logos {
	display: flex;
	grid-gap:1rem;
	align-content: center;
	max-width: 30rem;
	
		margin: 0 auto;
}

#intro .logos {
	svg,img {
		max-width: 14rem;
		display: block;
	}
}



#in-out {
	position: relative;
}

#in-out .wrap {
	display: flex;
	max-width: 75rem;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	text-align: center;
	-ms-transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

#in-out h3 {
	position: absolute;
	top: 45%;
	transform: translate(0,-100%);
	font-size: 110px;
	font-size: (120/1440)*100vw;
	font-weight: 400;
	z-index: 10;
	color: #fff;
	 transition: opacity 0.2s ease-in-out 0s;
	span {
	    position: absolute;
	    top: 110px;
	    left: 0;
	}
}

#in-out h3:first-child {
	left: 1%;
}

#in-out h3:last-of-type {
	right: 1%;
	span {
	    left: auto;
		right: 0;
	}
}

#in-out:has(ul.hide) {
	text-align: center;
	h3 {
		display: inline-block;
	    transition: opacity 0.2s ease-in-out 0s;
		&:first-child {
			&:after {
				content: " Style";
			}
		}
		&:last-of-type {
			opacity: 0.5;
			&:after {
				content: " Stress";
			}
		}
	}
}

#in-out .wrap {
	margin: 4rem auto;
	/*padding: 3rem 2rem 40%;*/
	overflow: hidden;
	background: rgba(255,255,255,0.5);
	border-radius: 1rem;
	display: block;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	max-width: 70%;
	.video__wrapper {
	    position: relative;
	    height: 0;
		iframe {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		}
	}
}

#in-out ul {
	list-style: none;
	flex-grow: 1;
	align-content: center;
	
	transition: opacity 0.2s ease-in-out 0s;
	&.hide {
		opacity: 0;
	}
	
}

#in-out ul:last-child {
	margin-top: 12rem;
}

#in-out ul li {
	padding: 0.75rem 0;
	/*text-align: center;*/
	font-size: 24px;
	max-width: 30rem;
	text-align: right;
	margin: 0 auto;
}

#in-out ul li:nth-child(odd) {
	text-align: left;
}

#we-are,#you-are {
	font-size: 18px;
	line-height: 1.5;
	width: 100%;
	position: relative;
	margin: 5vh 0;
	.bio {
		max-width: 30rem;
	}
}

#about {
	margin: 25vh auto 5vh;
	overflow: hidden;
	.wrap {
		font-size: 55px;
		text-align: center;
		
			letter-spacing: -0.05rem;
	}
	ul {
		display: flex;
		padding-left: 0;
		list-style: none;
		width: 125%;
		margin: 8rem auto 4rem -12.5%;
		li {
			flex: 1;
			position: relative;
			height: 25vh;
			min-height: 250px;
			padding: 3rem;
			background: #fff;
			margin: 0 1rem;
			border-radius: 2rem;
			min-width: 0;
			overflow: hidden;
			box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
			transition: all 0.25s ease-in-out 0s;
			&:nth-child(even) {
			    flex: 3;
			}
			
			&:hover {
				transform: scale(1.05);
			}
			img,video {
				position: absolute;
				top: 50%;
				left: 50%;
				-ms-transform: translate(-50%,-50%);
						-webkit-transform: translate(-50%,-50%);
				transform: translate(-50%,-50%);
				width: 100%;
				height: 100%;
				object-fit: cover;
				    object-position: top;
			}
		}
	}
}
#good-for {
	.wrap {
		display: flex;
		#we-are {
			font-size: 45px;
			line-height: 1.2;
			width: 175%;
			p {
				max-width: 80%;
			}
		}
		#you-are {
			padding: 1.5rem;
			border-radius: 2rem;
			background: rgba(255,255,255,0.5);
			box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
			ul {
				list-style: none;
				padding-left: 0;
				border-top: 1px solid #cfdbd5;
				li {
					padding: 0.5rem 0;
					border-bottom: 1px solid #cfdbd5;
					font-size: 14px;
				}
			}
		}
	}
}
#we-are:after, #you-are:after {
	content: "";
	width: 100%;
	height: 0;
	float: none;
	clear: both;
}

#we-are h2, #you-are h2 {
	font-size: 32px;
	display: inline-block;
	margin-bottom: 1rem;
}

#we-are .wrap,#you-are .wrap {
	max-width: 60rem;
    margin: 0 auto;
}

#the-process {
	/*margin-top: 25vh;*/
	.wrap {
		text-align: center;
		/*max-width: 40rem;*/
		margin: 5rem auto;
		h2,p {
			font-size: 55px;
			line-height: 1.15;
			
			letter-spacing: -0.05rem;
			/*position: sticky;*/
			/*top: 3rem;*/
		}
	}
		ol {
			list-style: none;
			counter-reset: list-number;
			display: flex;
			text-align: left;
			padding-left: 0;
			margin: 3rem auto;
			max-width: 80%;
			justify-content: space-around;
			li {
				font-size: 18px;
				flex: 1;
			    max-width: 18rem;
				counter-increment: list-number;
				padding: 0 3rem;
				border-right: 1px solid rgba(0,0,0,0.05);
				position: relative;
				&:last-child {
					border-right: 0;
				}
				strong {
					display: block;
					margin: 0 0 0.5rem;
				}
				svg {
					width: 3rem;
					display: block;
					margin-bottom: 1rem;
					* {
						fill: #333533;
					}
				}
				&:before {
					display: none;
					content: counter(list-number);
					font-size: 50px;
					color: #fff;
					/*opacity: 0.05;*/
					/*position: absolute; */
					/*display: block;*/
					top: 0;
					left: 0;
				}
			}
		}
	
}

footer {
	.wrap {
		margin: 2rem auto;
		font-size: 11px;
		max-width: 50rem;
		display: flex;
		div:last-child {
			margin-left: auto;
		}
	}
	
	span {
		text-align: center;
		display: block;
		color: #fff;
		font-size: (220/1440)*100vw;
		letter-spacing: -0.75rem;
		position: absolute;
		overflow: hidden;
	}
}

nav {
    position: absolute;
    top: 4rem;
    left: 50%;
    display: flex;
    transform: translate(-50%, 0);
	a {
		text-decoration: none;
		margin-right: 1rem;
		padding: 0.75rem 0.5rem;
		letter-spacing: -0.025em;
		&:after {
			content: "";
			display: block;
			height: 2px;
			background: #333533;
			width: 100%;
			max-width: 0;
			transition: all 0.25s ease-in-out 0s;
		}
		&:hover {
			&:after {
				max-width: 100%;
			}
		}
		&.btn {
			margin: 0;
			    padding: 0.75rem 1.5rem !important;
				width: auto;
			&:after {
				display: none;
			}
		}
	}
}

#pricing {
	margin-top: 25vh;
	a.btn {
	    margin: 3rem 0;
	}
	.wrap {
		max-width: 80%;
		margin: 0 auto;
		h2 {
			font-size: 65px;
			/*position: sticky;*/
			/*top: 3rem;*/
			font-weight: 400;
			margin-bottom: 4rem;
			
			letter-spacing: -0.05rem;
		}
	}
	.grid-3-col {
		grid-column-gap: 2rem;
		grid-row-gap: 2rem;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr 1fr;
		grid-auto-columns: 1fr;
		display: grid;
		width: 100%;
		grid-column-gap: 1rem;
		grid-row-gap: 1rem;
		margin-bottom: 1rem;
	}
	.subscription {
		    margin: 5rem auto 0;
    background: rgba(255, 255, 255, 0.25);
    padding: 1rem 2rem 2rem;
    border-radius: 2rem;
		h3 {
			font-size: 40px;
			font-weight: 400;
			margin-bottom: 6rem;
			letter-spacing: -0.05rem;
			    max-width: 50rem;
		}
		.benefit {
			border-top: 1px solid #cfdbd5;
			padding: 1.5rem 0 0;
			margin-bottom: 1rem;
			p {
				font-size: 16px;
				margin: 0;
			}
		}
	}
	.pricing-option {
		border-radius: 1rem;
		background-color: rgba(255,255,255,0.2);
		padding: 1.5rem;
		transition: all .2s;
		line-height: 1.25;
		display: grid;
    align-content: space-between;
		&:hover {
			background: #fff;
			color: #333533;
		}
		h3 {
			font-size: 24px;
			font-weight: 400;
		}
		
		h5 {
			font-size: 60px;
			margin: 3rem 0 0;
			font-weight: 400;
			letter-spacing: -0.25rem;
		}
		
		ul {
			margin: 2rem 0 0;
			padding-left: 0;
			list-style: none;
			border-top: 1px solid #cfdbd5;
			li {
				padding: 0.5rem 0;
				border-bottom: 1px solid #cfdbd5;
				font-size: 14px;
			}
		}
		
		.pricing-block-cta {
			text-align: center;
			p {
				font-size: 13px;
			}
			a.btn {
				margin: 3rem auto 2rem;
			}
		}
	}
}

@media screen and ( max-width: 960px ) { 
body {
	border: 0 !important;
}

nav {
	top: 2rem;
	a.btn {
		width: 110px;
	}
}

#intro, #in-out, #pricing {
	min-height: 50vh;
}
	#logo {
	    font-size: 45px;
		a.btn {
			width: 35px;
			height: 35px;
			svg {
				max-height: 24px;
			}
		}
	}
	
	#intro, #get-started, #about, #the-process {
		p,.wrap, .wrap p {
			font-size: 35px;
		}
	}
	
	#pricing {
		.wrap {
			h2 {
				font-size: 35px;
			}
		}
		.grid-3-col {
			display: block;
		}
		.pricing-option {
				margin-bottom: 3rem;
		}
	}
	
	#get-started {
	min-height: 0;
    margin: 10vh auto;
	p, .wrap p {
		font-size: 26px;
		margin: 0 auto 1rem;
	}
	h2 {
		font-size: 35px;
	}
}
	
	.wrap {
		width: 90%;
	}
	
	#the-process {
		ol {
			display: block;
			text-align: center;
			li {
				padding: 0;
				border-right: 0;
				margin: 0 auto 2rem;
				text-align: center;
				svg {
					margin: 0 auto 1rem;
				}
			}
		}
	}
	
	#about ul {
		display: grid;
	    margin: 8rem auto 4rem -12.5%;
	    grid-template-columns: 1fr 1fr 1fr;
		li {
			margin-bottom: 3rem;
			min-height: 100px;
    height: 15vh;
			&:nth-child(4), &:nth-child(5) {
			    /*margin: 0 50%;*/
			}
		}
	}
	
	.modal {
		max-height: 90vh;
		div.wrap {
			display: block;
		}
	}
	
	footer .wrap {
		display: block;
		div {
			margin: 0 auto 1rem;
		}
	}
}