@layer semantics {
	:root {
		/* Colors */

		--color--main:#3C4CC4;
		--color--main--background:#F0F2FE;
		--color--main--medium-light:#e1e4ff;
		--color--main--medium:#D1D6FA;
		--color--main--medium-dark:#b9c1f9;
		--color--main--borders:#858FE0;
		--color--main--brandblack:#3C4CC4;
		--color--black:#000C66;
		--color--highlight:#FCFF28;
		--color--white:#ffffff;
		--color--light-green: #d5f9e6;
		--color--green: #00AD43;
		--color--green--dark: #00993B;
		--color--red: #FF5320;

		/* Font Styles: */

		--font--size--3xs: 0.6875rem;
		--font--size--2xs: 0.75rem;
		--font--size--xs: 0.875rem;
		--font--size--xs-s: 0.9375rem;
		--font--size--s: 1rem;
		--font--size--s-m: 1.15rem;
		--font--size--m: 1.375rem;
		--font--size--m-l: 1.5rem;
		--font--size--l: 1.75rem;
		--font--size--l-xl: 2rem;
		--font--size--xl: 2.25rem;
		--font--size--2xl: 2.5rem;
		--font--size--3xl: 3rem;
		--font--size--4xl: 4rem;
		--font--size--5xl: 5rem;

		--font--weight--100: 100;
		--font--weight--200: 200;
		--font--weight--300: 300;
		--font--weight--400: 400;
		--font--weight--500: 500;
		--font--weight--600: 600;
		--font--weight--700: 700;
		--font--weight--800: 800;
		--font--weight--900: 900;

		--font--family--display-xl: Studioworks Flair;    /* Flexa */
		--font--family--display-l: Flexa;    /* Flexa */
		--font--family--display-s: Circular;    /* Circular */
		--font--family--text-l: Alpina;       /* Alpina */
		--font--family--text-s: Circular;       /* Circular */
		--font--family--input: Manifold;         /* Manifold */
		--font--family--button: Circular;        /* Circular */

		--font--letter-spacing--xx-tight: -0.1em;
		--font--letter-spacing--x-tight: -0.05em;
		--font--letter-spacing--tight: -0.025em;
		--font--letter-spacing--normal: 0;
		--font--letter-spacing--wide: 0.05em;
		--font--letter-spacing--x-wide: 0.1em;
		--font--letter-spacing--xx-wide: 0.15em;

		--font--line-height--xx-tight: 0.90;
		--font--line-height--x-tight: 1;
		--font--line-height--tight: 1.15;
		--font--line-height--normal: 1.25;
		--font--line-height--loose: 1.4;
		--font--line-height--x-loose: 1.5;
		--font--line-height--xx-loose: 1.6;

		--spacing--3xs: 0.25rem;
		--spacing--2xs: 0.5rem;
		--spacing--xs: 0.65rem;
		--spacing--xs-s: 0.75rem;
		--spacing--s: 1rem;
		--spacing--s-m: 1.25rem;
		--spacing--m: 1.5rem;
		--spacing--m-l: 1.75rem;
		--spacing--l: 2rem;
		--spacing--l-xl: 2.25rem;
		--spacing--xl: 2.5rem;
		--spacing--2xl: 2.75rem;
		--spacing--3xl: 3rem;
		--spacing--4xl: 4rem;
		--spacing--5xl: 5rem;
		--spacing--6xl: 6rem;

		--border--thin: 0.125rem solid var(--color--main--borders);
		--border--thick: 0.5rem solid var(--color--main--borders);
		}
}

html {
  font-size: 100%; /* Usually 16px */
}

body {
	font-size: 1rem;
	background-color: var(--color--main--background);
	color: var(--color--black);
	margin: 0;
}

img{
	max-width: 100%;
	display: block;
	border-radius: .5rem;
	border: var(--border--thin);
}

#section-top img, #team img{
	border-radius: 0;
	border: 0;
}

#section-top img{
	border-left: var(--border--thin);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

a{text-decoration: none;}

/* --------- Input Styles --------- */

input{
	font-family: var(--font--family--text-s);
	border: var(--border--thin);
	padding: var(--spacing--s);
	font-size: var(--font--size--s-m);
	line-height: 1;
	font-weight: var(--font--weight--400);
	background-color: var(--color--white);
	color: var(--color--black);
}

label{
	display: flex;
	flex-direction: column;
	gap: var(--spacing--xs-s);
	text-align: left;
}

.label{
	font-family: var(--font--family--text-s);
	font-size: var(--font--size--s);
	font-weight: var(--font--weight--600);
	line-height: 1;
	letter-spacing: var(--font--letter-spacing--normal);
	color: var(--color--black);
}

.calculator-inputs{
	display: flex;
	flex-direction: row;
	gap: var(--spacing--s);
	align-items: center;
	justify-content: center;
	margin: var(--spacing--l) 0;
}

.result{
	display: flex;
	flex-direction: column;
	gap: var(--spacing--xs);
	text-align: left;
	font-family: var(--font--family--text-s);
	font-size: var(--font--size--s-m);
	font-weight: var(--font--weight--600);

}

output{
	border: var(--border--thin);
	padding: var(--spacing--s);
	min-width: 10rem;
}

.math{
	position: relative;
	top: .75rem;
}


/* --------- Grid & Columns --------- */

.grid{
	display: grid;
}

.two-column {grid-template-columns: 1fr 1fr;}
.two-column.text-left {grid-template-columns: 1fr 1.5fr;}
.two-column.text-right {grid-template-columns: 1.5fr 1fr;}
.two-column.sidebar-right {grid-template-columns: 2fr 1fr; gap: var(--spacing--2xl);}
.two-column.sidebar-left {grid-template-columns: 1fr 2fr; gap: var(--spacing--2xl);}
.three-column {grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing--2xl);}
.four-column {grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--spacing--2xl);}
.five-column {grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: var(--spacing--2xl);}
.six-column {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: var(--spacing--2xl);}
.seven-column {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: var(--spacing--2xl);}

/* --------- Section Colors --------- */

.dark {background-color: var(--color--main); color: var(--color--white);}
.medium {background-color: var(--color--main--medium);}
.light {background-color: var(--color--main--background);}
.yellow{background-color: var(--color--highlight);}
.light-green{background-color: var(--color--light-green);}

.red{color: var(--color--red);}
.green{color: var(--color--green);}

/* --------- Inline Styles --------- */

.highlight{background-color: var(--color--highlight); padding: 0 .5rem; margin: 0 -.5rem; }

.center{text-align:center;}
.left{text-align: left;}

.padding-xl{padding: var(--spacing--xl); display: flex; align-items: center;}
.padding-2xl{padding: var(--spacing--2xl); display: flex; align-items: center;}
.padding-3xl{padding: var(--spacing--3xl); display: flex; align-items: center;}
.padding-4xl{padding: var(--spacing--4xl); display: flex; align-items: center;}
.padding-5xl{padding: var(--spacing--5xl); display: flex; align-items: center;}

/* --------- Buttons --------- */

button, .button{
	font-family: var(--font--family--button);
	padding: var(--spacing--s) var(--spacing--m) var(--spacing--s-m);
	border: none;
	border-radius: .35rem;
	color: var(--color--white);
	font-size: var(--font--size--s-m);
	min-width: 13rem;
	margin: var(--spacing--s) auto;
}

.loud{background-color: var(--color--green);}
.loud:hover{background-color: var(--color--green--dark);}
.quiet{background-color: var(--color--main--medium);}
.quiet:hover{background-color: var(--color--main--medium--dark);}

/* --------- lists --------- */

ul{
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font--family--text-s);
	font-size: var(--font--size--s);
}

ul.inset{
	border-left: var(--border--thin);
	padding-left: var(--spacing--l);
	margin: var(--spacing--xl) auto;
	font-weight: var(--font--weight--600);
}

li{
	margin-bottom: var(--spacing--s);
	font-size: var(--font--size--s-m);
}

/* --------- Containers --------- */

section{
	border-bottom: var(--border--thin);
	border-bottom: var(--border--thin);
	padding: var(--spacing--5xl);
}

#main-page{overflow:hidden;}

.full{padding: 0;}
.inner{max-width: 80rem; margin: 0 auto;}
.inner-small{max-width: 60rem; margin: 0 auto;}

.text-block{
	justify-content: center;
	align-content: center;
	padding: var(--spacing--xl);
	max-width: 45rem;
	margin: 0 auto;
}

.cta-container{
	display: flex;
	flex-direction: column;
	gap: var(--spacing--m);
	margin-bottom: var(--spacing--m);
	text-align: center;
	.note{
		margin: 0;
	}
}

.cta-trust li{
	margin-bottom: var(--spacing--2xs);
}

.photo{
	border-radius: 50%;
	overflow: hidden;
	border: var(--border--thin);
	margin: var(--spacing--m) 0;
	position: relative;
	display:flex;

	&#sean {
		.photo-overlay{
			background-color: var(--color--main);
		}

		.photo-overlay2{
			background-color: var(--color--main--background);
		}
	}

	&#nick {
		.photo-overlay{
			background-color: var(--color--main);
		}
		.photo-overlay2{
			background-color: var(--color--highlight);
		}
	}

	&#jess {
		.photo-overlay{
			background-color: var(--color--black);
		}
		.photo-overlay2{
			background-color: var(--color--main--medium);
		}
	}
}

.photo-overlay{
	position:absolute;
	inset: 0;
	background-color: var(--color--black);
	mix-blend-mode: screen;
	pointer-events: none;
}
.photo-overlay2{
	content:"";
	position:absolute;
	inset: 0;
	background-color: var(--color--main--borders);
	mix-blend-mode: multiply;
	pointer-events: none;
}


/* --------- Tables --------- */

table{
	background-color: var(--color--white);
	font-family: var(--font--family--text-s);
	font-size: var(--font--size--s-m);
	width: 100%;
	text-align:left;
	border-collapse: collapse;
	margin: var(--spacing--3xl) 0 var(--spacing--l);
}

.table-container{
	overflow-x:auto;
	-webkit-overflow-scrolling: touch;
}

thead{
	background-color: var(--color--main--medium-dark);
}

td, th{
	border: var(--border--thin);
	padding: var(--spacing--s);
	margin: 0;
}

td.company, th.company{
	background-color: var(--color--main--medium-light);
}

/* --------- Headlines --------- */

h1, h2, h3, h4, h5, h6{
	margin: 0;
	padding-bottom: var(--spacing--s);
}

h1 {
	font-family: var(--font--family--display-xl);
	font-size: var(--font--size--5xl);
	line-height: var(--font--line-height--xx-tight);
	letter-spacing: var(--font--letter-spacing--normal);
	padding-bottom: var(--spacing--s);
	text-align: center;
}

h1.border-bottom{
	border-bottom: var(--border--thick);
	padding-bottom: var(--spacing--m-l);
}

h1.large{
	font-size: 8rem;
	line-height: .8;
	margin-bottom: var(--spacing--s)
}

h1.circular{
	font-family: var(--font--family--display-s);
	font-size: var(--font--size--2xl);
	border-bottom: var(--border--thick);
	line-height: 1.2;
	padding-bottom: var(--spacing--m);
	margin-bottom: var(--spacing--m);
	&.no-border{
		border-bottom: none;
		margin-bottom: 0;
	}
}

h2 {
	font-family: var(--font--family--display-s);
	font-size: var(--font--size--xl);
	font-weight: var(--font--weight--700);
	line-height: var(--font--line-height--tight);
	letter-spacing: var(--font--letter-spacing--normal);
	padding-bottom: var(--spacing--m);
	margin-bottom: var(--spacing--s);
	border-bottom: var(--border--thick);
	text-align: center;
}

h3 {
	font-family: var(--font--family--display-s);
	font-size: var(--font--size--l);
	font-weight: var(--font--weight--700);
	padding-bottom: var(--spacing--s);
	margin-bottom: var(--spacing--m);
	border-bottom: var(--border--thick);
}

/* Paragraph */

p {
	font-family: var(--font--family--text-l);
	font-size: var(--font--size--m-l);
	font-weight: var(--font--weight--300);
	line-height: var(--font--line-height--loose);
	letter-spacing: var(--font--letter-spacing--normal);
}

p.dropcap:first-letter{
	font-family: var(--font--family--display-xl);
	color: var(--color--main);
	font-size: 10rem;
	line-height: .75;
	float: left;
	margin-right: var(--spacing--s);
}

p.small {
	font-size: var(--font--size--s);
	font-weight: var(--font--weight--300);
	line-height: 1.5;
}

p.subhead {
	font-family: var(--font--family--display-s);
	font-size: var(--font--size--xl);
	font-weight: var(--font--weight--700);
	padding-bottom: var(--spacing--s);
}

p.note {
	font-family: var(--font--family--text-s);
	font-size: var(--font--size--s);
	font-weight: var(--font--weight--400);
	line-height: var(--font--line-height--normal);
}

p.note.large {
	font-size: var(--font--size--s);
	font-weight: var(--font--weight--400);
}

p.callout {
	font-family: var(--font--family--text-s);
	font-size: var(--font--size--xl);
	font-weight: var(--font--weight--400);
	line-height: var(--font--line-height--loose);
	letter-spacing: var(--font--letter-spacing--normal);
	border-top: var(--border--thin);
	padding-top: var(--spacing--m);
	text-align: center;
	margin-top: var(--spacing--2xs);
}

/* --------- Page Specific Styles --------- */

#team-bios{
	padding: var(--spacing--l) var(--spacing--l) 0;

	h3{text-align:center;}

	p:first-line{
		font-family: var(--font--family--text-s);
		font-weight: var(--font--weight--600);
	}
}

#faq{
	summary{
		font-family: var(--font--family--text-s);
		font-size: var(--font--size--l-xl);
		margin-bottom: var(--spacing--m);
	}

	p{
		margin-left: var(--spacing--l);
		background-color: var(--color--white);
		padding: var(--spacing--m) var(--spacing--l);
		border: var(--border--thin);
		font-size: var(--font--size--l);
	}

	p:last-child{
		margin-bottom: var(--spacing--xl);
	}
}

ul#professions li{
	font-size: 1.65rem;
	font-weight: 300;
	line-height: 1.5;
	max-width: 40rem;
	font-style: italic;
	font-family: var(--font--family--text-l);
	margin-bottom:.5rem;
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.25s ease, transform 0.25s ease;

	&.visible {
	  opacity: 1;
	  transform: translateX(0);
	}

	.highlight{
		background-color: var(--color--white);
		margin: 0 -.25rem;
	}
}

#bracket{
	font-size: 58rem;
	line-height: .45;
	font-family: var(--font--family--text-l);
	font-weight: 100;
	justify-content: center;
	align-content:center;
	color: var(--color--main);
}

#section-who-for{

	svg.logotype2{
		width: 25rem;
	}

	#who-for{
		display: flex;
		align-items: center;
	}

	i{
		font-size: var(--font--size--m-l);
		margin-left: 1rem;
		line-height: 1;
		font-family: var(--font--family--text-l);
		font-weight: 400;
		letter-spacing:0;
		position: relative;
		top: .25rem;
	}

	.flex{
		flex-direction: row;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	h1{
		padding-bottom: 0;
	}
}

.sidebar-text p{
	font-family: var(--font--family--text-s);
	font-size: var(--font--size--m);
	font-weight: var(--font--weight--400);
	line-height: var(--font--line-height--loose);
	letter-spacing: var(--font--letter-spacing--normal);
}

blockquote{
	margin: 0 var(--spacing--s);
}

blockquote p{
	font-family: var(--font--family--text-s);
	font-size: var(--font--size--l);
	font-weight: var(--font--weight--300);
	line-height: var(--font--line-height--x-loose);
	letter-spacing: var(--font--letter-spacing--normal);
	position: relative;
	margin-bottom: var(--spacing--s);

	&:before{
		content: "“";
		font-family: var(--font--family--text-s);
		font-size: 300%;
		font-weight: var(--font--weight--400);
		line-height: .9;
		letter-spacing: var(--font--letter-spacing--normal);
		color: var(--color--main--borders);
		position: absolute;
		left: -2.5rem;
		top: 0;
	}
	&:after{
		content: "”";
		font-family: var(--font--family--text-s);
		font-size: 300%;
		font-weight: var(--font--weight--400);
		line-height: .01;
		letter-spacing: var(--font--letter-spacing--normal);
		color: var(--color--main--borders);
		position: relative;
		top: 2.5rem;
	}
}

figcaption{
	font-family: var(--font--family--text-s);
	font-size: var(--font--size--l);
	font-weight: var(--font--weight--400);
	line-height: var(--font--line-height--loose);
	letter-spacing: var(--font--letter-spacing--normal);

	a{
		color: var(--color--highlight);
		&:hover{
			color: var(--color--white);
		}
	}

	span{
		font-size: var(--font--size--s-m);
		line-height: 1;
		color: var(--color--main--borders);
	}
}

.testimonial{
	display: flex;
	flex-direction: row;
	max-width: 60rem;
	margin: 0 auto;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

#feature-overview{
	h2{
		text-transform: uppercase;
		font-size: var(--font--size--m);
		letter-spacing: var(--font--letter-spacing--xx-wide);
		margin-top: var(--spacing--2xl);
		margin-bottom: var(--spacing--xs);
		padding-bottom: var(--spacing--m-l);
	}
}

#feature-list{
	gap: var(--spacing--m);

	ul li{
		line-height: 1.4;
		font-size: var(--font--size--s-m);
		margin-bottom: 0;
		padding: 0 var(--spacing--m);
		text-align: center;
		font-weight: var(--font--weight--600);
		&:after{
			content: "—";
			color: var(--color--white);
			display: block;
			line-height: 1;
			padding: var(--spacing--xs);
		}
		&:last-child:after{
			content: "";
		}
	}

	h3{
		font-family: var(--font--family--display-xl);
		font-size: var(--font--size--2xl);
		padding: var(--spacing--2xs) 0 var(--spacing--s-m);
		line-height: 1;
		border-bottom: var(--border--thin);
		margin-bottom: var(--spacing--s-m);
		text-align: center;
		.highlight{
			margin: 0;
			padding: 0 var(--spacing--xs);
		}
	}
}

details:first-of-type{
	margin-top: var(--spacing--xl);
}


/* --------- Header --------- */

header.site{
	width: 100%;
	display: grid;
	grid-template-columns: 19rem 1fr;
	background-color: var(--color--main);
	justify-content: center;
	border-bottom: .5rem solid var(--color--highlight);
	z-index:1000;
	position: sticky;
	top: 0;
	height: 5rem;

	a{
		color: var(--color--white);
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: var(--font--letter-spacing--xx-wide);
		font-weight: var(--font--weight--600);
		&:hover{
			color: var(--color--main--medium);
		}
		&:active{
			color: var(--color--highlight);
		}
	}

	ul{
		color:white;
		border-top: .125rem solid var(--color--main--borders);
		border-bottom: .125rem solid var(--color--main--borders);
		text-align:right;
		position: relative;
		z-index: 2;
		margin: var(--spacing--m) 0;

		li{
			display:inline-block;
			padding:.4rem 1rem;
			margin-bottom: 0;
			padding-left: 1.5rem;
			font-size: var(--font--size--xs);

			&:last-child{
				padding-right: 1rem;
			}
		}
	}
}

#logo{
	padding: 0 var(--spacing--l);
	border-right: var(--border--thin);
	display: flex;
	align-items: center;
	justify-content: center;
}

#logo .logo{
	width: 13rem; /* adjust to your desired size */
	flex-shrink: 0;
	margin: 0 auto;
}

/* ************************************************************************** footer */

dt{
	font-family: var(--font--family--text-s);
	font-weight: 700;
	letter-spacing: .05rem;
	margin-bottom: var(--spacing--s);
}

dd{
	font-family: var(--font--family--text-s);
	font-weight: 500;
	text-align:right;
	margin-inline-start:.25rem;
}

footer {
	background-color: var(--color--main--medium);

	form {
		display: flex;  /* Change from block to flex */
		margin-top: 2rem;
		justify-content: center;
		align-items: center;
		margin: 0 auto 3rem;

		label {
			font-weight: var(--font--weight--600);
			font-family: var(--font--family--text-s);
			margin-right: 1rem;
			flex-shrink: 0;  /* Prevent label from shrinking */
		}

		input {
			flex: 1;  /* This makes the input grow to fill available space */
			min-width: 0;  /* Allows input to shrink below its content size if needed */
		}

		button {
			margin: 0 0 0 1.25rem;
			flex-shrink: 0;  /* Prevent button from shrinking */
		}
	}

	ul{
		padding: 0;
		margin: 0;

		li{
			margin-bottom: 1rem;
		}
	}

	.contact .contact-list div{
		display: grid;
		grid-template-columns: auto auto;
		column-gap: var(--space--s);
		margin: var(--space--m-l) 0;
	}
	a{
		text-decoration: none;
		color: var(--color--black);

		&:hover{
			color: var(--color--main);
		}
	}

	.collapsed{
		display:grid;
		grid-template-columns: min-content auto auto 12rem;
		grid-template-rows: min-content auto;

		.logo-footer{
			padding: 1rem 1.25rem;
			border-right: var(--border--thin);
		}

		.footerToggle{
			grid-column: 4 / 5;
			text-align: right;
			padding: 0 1rem;
			display: flex;
			align-items: center;

			label{
				display:none;
			}
		}
	}

	.main-footer{
		display: grid;
		border-top: solid .125rem var(--color--main--borders);
		grid-template-columns: 1fr 26rem 16rem;
	}
	.message{
		align-content:center;
		max-width: 80rem;
		padding: 0 3rem;
		margin: 0 auto;

		p{
			margin-top: 2rem;
			margin-bottom: 2.5rem;
		}
	}
	.contact{
		border-left: .125rem solid var(--color--main--borders);
		padding: 0 1.5rem;
	}
	.studioworks{
		border-left: .125rem solid var(--color--main--borders);
		padding: 0 1.5rem;

		ul li{
			border-bottom: .125rem solid white;
			padding-bottom: 1rem;
			font-family: var(--font--family--text-s);
			font-weight: 700;
			letter-spacing: .05rem;
		}

		ul li:last-child{
			border-bottom: none;
		}
	}
	h3{
		border-bottom: solid .125rem var(--color--main--borders);
		padding-bottom: 1rem;
		margin-bottom: 1rem;
		font-family: var(--font--family--display-s);
		font-weight: 700;
		letter-spacing: .15rem;
		text-transform: uppercase;
		font-size: .85rem;
		margin-top: 1.25rem;
	}
}

section.full.referral {
	background-color: var(--color--highlight);
	text-align: center;
	padding: 1rem 3.5rem;
	display: none;
	align-items: center;
	justify-content: center;

	&.visible {
		display: flex;
	}

	p {
		padding-right: 2rem;
		font-weight: 700;
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--s-m);
		margin: 0;
	}
}