/*
@theme Name: Premier Retail Advisors
@Description: This site was built by Central States Marketing. For more information about the site or this custom WordPress theme, you can contact Central States Marketing at: info@centralstatesmedia.com or call us at: 309-693-2345.
@Author: Central States Marketing
@Author URI: http://www.centralstatesmarketing.com/
@Version: 1.0
@Date: February 2024
@charset "utf-8";
*/

/* ========== CSS Custom Properties ========== */
:root {
	--blue: hsl(220, 17%, 21%);
	--blue-light: hsl(220, 17%, 15%);
	--gold: hsl(40, 41%, 58%);
	--white: hsl(220, 0%, 100%);
	--gray-25: hsl(220, 1%, 90%);
	--gray-50: hsl(220, 1%, 70%);
	--gray-75: hsl(220, 5%, 45%);
	--black: hsl(220, 0%, 4%);

	--shadow: hsla(220, 0%, 4%, 0.3);
	--overlay: hsla(220, 0%, 4%, 0.6);

	--primary: var(--blue);
	--secondary: var(--gold);

	--gutter: 3%;
	--margin: 1rem;
	--max-w: 1800px;
	--max-w-lg: 1600px;
	--max-w-sm: 1100px;
	--max-w-ch: 80ch;

	--font-sans: 'Montserrat', sans-serif;
	--font-serif: 'Lora', serif;

	--xs: clamp(0.6rem, calc(0.56rem + 0vw), 0.7rem);
	--sm: clamp(0.8rem, calc(0.75rem + 0.08vw), 0.9rem);
	--base: clamp(0.9rem, calc(0.83rem + 0.21vw), 1rem);
	--md: clamp(1rem, calc(1.01rem + 0.4vw), 1.33rem);
	--lg: clamp(1.2rem, calc(1.23rem + 0.68vw), 1.78rem);
	--xl: clamp(1.35rem, calc(1.3rem + 1.1vw), 2.37rem);
	--xxl: clamp(1.5rem, calc(1.4rem + 1.7vw), 3.16rem);
	--jumbo: clamp(1.7rem, calc(1.4rem + 2.56vw), 4.21rem);

	--transition: all 0.3s ease;
}

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

html,
body {
	padding: 0;
	margin: 0;
	font-family: var(--font-serif);
	scroll-behavior: smooth;
	scroll-padding-top: 60px;
}

img,
picture,
iframe {
	max-width: 100%;
	display: block;
}

input,
button,
textarea,
select {
	font: inherit;
}

ul,
ol {
	list-style-position: inside;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

a,
::after,
::before {
/* 	-webkit-transition: all 0.5s ease; */
/* 	transition: all 0.5s ease; */
}

a:not(.btn):hover {
	color: var(--secondary);
	text-decoration-thickness: 2px;
}

/* ========== Global Styles ========== */
:is(h1, h2, h3, h4, h5, h6) {
	--color: var(--black);
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--color);
	margin: 0;
	text-transform: uppercase;
}

h1 {
	font-size: var(--jumbo);
	padding-block: 1rem;
}

h2 {
	font-size: var(--xl);
	padding-block: 0.8rem;
}

h3 {
	font-size: var(--xl);
	padding-block: 0.6rem;
}

h4 {
	--color: var(--secondary);
	font-size: var(--lg);
	padding-block: 0.4rem;
}

h5 {
	font-size: var(--md);
	padding-block: 0.2rem;
}

h6 {
	font-size: var(--base);
}

hr {
	width: 100%;
	height: 2px;
	border: none;
	margin: 3rem 0;
	background-color: var(--primary);
}

p {
	line-height: 1.2lh;
}

.btn, .kb-button {
	display: inline-block !important;
	position: relative !important;
	color: var(--white);
	margin: 0 !important;
	padding-inline-end: 1.75rem !important;
	padding-block: 0.5rem !important;
	font-size: var(--base) !important;
	font-family: var(--font-sans) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 2px !important;
	text-decoration: none !important;
}

.btn::after, .kb-button::after {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	right: 5px !important;
	width: 20px !important;
	height: 100% !important;
	background: url(images/arrow.svg) no-repeat center center / contain !important;
	transition: var(--transition) !important;
}

.btn-dark::after, .kb-button.dark::after {
	background: url(images/arrow-color.svg) no-repeat center center / contain !important;
}

.btn:hover::after, .kb-button:hover::after {
	right: 0 !important;
}

/* ========= Utils ========= */
.eyebrow {
	font-family: var(--font-sans);
	text-transform: uppercase;
	margin: 0;
	font-size: var(--md);
}

.gutter {
	padding-inline: var(--gutter);
}

.max-width {
	max-width: var(--max-w-sm);
	margin-inline: auto;
}

/* ========= Navigation ========= */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding-inline: var(--gutter);
	background-color: var(--white);
}

.header.locked {
	position: fixed;
	box-shadow: 0 0 10px var(--shadow);
}

.header .wrapper {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	max-width: var(--max-w);
	margin-inline: auto;
}

.header .nav-items {
	grid-column: 2 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3vw;
}

.header .logo {
	padding-block: .75rem;
	height: 65px;
}

.header .btn {
	grid-column: 3 / 4;
	align-self: center;
	justify-self: end;
}

:is(.menu, .sub-menu) {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
}

.nav .menu-item a {
	display: block;
	color: var(--primary);
	font-size: var(--base);
	padding: 1rem 1.5vw;
	text-decoration: none;
	transition: none;
	font-family: var(--font-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.nav .menu-item:hover a {
	text-decoration: underline;
}

.header .btn {
	color: var(--primary);
}

@media (width < 1200px) {
	.header nav {
		display: none;
	}
}

@media (width <= 800px) {
	.header .wrapper {
		grid-template-columns: auto 1fr;
	}

	.header .nav-items {
		grid-column: 1 / 2;
	}

	.header .btn {
		grid-column: 2 / 3;
	}
}

/* ========= Hero ========= */
.hero {
	position: relative;
	height: 80svh;
	width: 100%;
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--overlay);
	z-index: 2;
}

.hero .arrow {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	width: 3rem;
	height: 3rem;
	z-index: 2;
	animation: bounce 2s infinite;
}

.hero .video {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ========= Body ========= */
.intro {
	padding-inline: var(--gutter);
	padding-block: 6rem 0;
}

.intro h2 {
	color: var(--primary);
	text-align: center;
}

.intro__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: var(--max-w-sm);
	margin-inline: auto;
	font-family: var(--font-sans);
	justify-items: center;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
	padding-block: 3rem;
}

.intro__stat {
	width: 100%;
}

.intro__stat:not(:last-of-type) {
	border-right: 1px solid var(--gray-75);
}

.intro__stat h3 {
	color: var(--secondary);
	font-family: var(--font-sans);
}

.intro__stat p {
	margin: 0;
}

@media (width <= 800px) {
	.intro__stats {
		grid-template-columns: 1fr;
		max-width: min(80vw, 100%);
	}

	.intro__stat {
		padding-block: 2rem;
	}

	.intro__stat:not(:last-of-type) {
		border-right: 0;
		border-bottom: 1px solid var(--gray-75);
	}
}

.tabs {
	padding-block: 6rem;
	color: var(--white);
}

.tabs .wrapper {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(12, minmax(55px, 1fr));
	max-width: var(--max-w);
	margin-inline: auto;
}

.tabs__content {
	grid-column: 2 / 7;
	grid-row: 2 / 12;
	background-color: var(--primary);
	padding: 2rem 4rem;
	z-index: 1;
}

.tabs__content ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

.tabs__content ul li {
	flex: 1 1 100%;
	line-height: 1.5;
}


.tabs__content label {
	font-family: var(--font-sans);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.5rem;
	text-decoration-thickness: 2px;
}

@media (width < 500px) {
	.tabs__content label{
	text-underline-offset: 0.25rem;
}
}

.tabs__image {
	grid-column: 6 / -1;
	grid-row: 1 / -1;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.tabs__image img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	aspect-ratio: 3 / 2;
}

.tabs__text .tab {
	margin-top: 3rem;
}

.tabs__text .tab h3 {
	padding: 0;
	color: var(--white);
}

@media (width <= 1280px) {
	.tabs__content {
		grid-column: 1 / 8;
	}
}

@media (width <= 800px) {
	.tabs .wrapper {
		padding-inline: var(--gutter);
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	.tabs__content {
		grid-row: 1 / 2;
		grid-column: 1 / -1;
	}

	.tabs__image {
		grid-row: 2 / 3;
		grid-column: 1 / -1;
		aspect-ratio: 3 / 2;
	}
}

@media (width <= 600px) {
	.tabs__content {
		padding-inline: 2rem;
	}
}

.bio {
	background: url(images/bg-portrait.webp) no-repeat center center / cover;
	color: var(--white);
}

.bio .wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	padding-inline: var(--gutter);
	max-width: var(--max-w);
	margin-inline: auto;
}

.bio__image {
	place-self: center;
}

.bio__image img {
	max-width: min(400px, 100%);
	height: auto;
	margin-inline: auto;
/* 	border-radius: 2rem; */
	filter: drop-shadow(4px 4px 8px var(--shadow));
}

.bio__text {
	padding-block: 6rem;
	max-width: var(--max-w-ch);
}

.bio h2 {
	color: var(--white);
}

.bio .logos {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	padding-block: 1.5rem;
}

.bio .logos img {
	max-height: 50px;
	object-fit: contain;
	mix-blend-mode: color-dodge;
}

@media (width <= 800px) {	
	.bio .wrapper {
		grid-template-columns: 1fr;
		padding-block-end: 2rem;
	}

	.bio__text {
		padding-inline: var(--gutter);
		grid-row: 1 / 2;
		padding-block: 4rem 2rem;
	}
}

.projects .wrapper {
	padding: 6rem var(--gutter);
	text-align: center;
	max-width: var(--max-w-ch);
	margin-inline: auto;
}

.projects .wrapper ul {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--md);
	color: var(--gray-75);
	text-align: start;
}

.projects li {
	flex: 1 0 50%;
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
	gap: 1rem;
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.projects-item {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-image: fill 0 linear-gradient(to bottom, rgba(44, 51, 63, 1),rgba(44, 51, 63, .4));
}

.projects-item img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -1;
	transition: var(--transition);
}

.projects-item .projects-text {
	color: var(--white);
	position: absolute;
	top: 0;
	left: 0;
	padding: 1rem;
}	

.projects-item .projects-text h3 {
	font-size: var(--lg);
	color: var(--white);
}

.projects-text p:last-of-type {
	opacity: 0;
	visibility: hidden;
	margin-block-start: -.5rem;
	transition: var(--transition);
}

.projects-item:hover .projects-text p:last-of-type {
	opacity: 1;
	visibility: visible;
	margin-block-start: 0;
}

.projects-text .location {
	font-family: var(--font-sans);
	text-transform: uppercase;
	font-weight: bold;
	margin-block-start: 0;
}

.logo-cloud .wrapper {
	padding: 2rem var(--gutter);
	margin-inline: auto;
	max-width: var(--max-w-sm);
	text-align: center;
	padding-block: 6rem;
}

.logo-cloud__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-block: 2rem;
	justify-items: center;
	justify-content: space-between;
	align-items: center;
}

.logo-cloud img {
	max-height: 120px;
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: contain;
	mix-blend-mode: color-dodge;
	padding-inline: 2rem;
	padding-block: 1rem;
}

.logo-cloud p {
	padding: 1rem 2rem;
	width: 100%;
	color: var(--gray-75);
}

/* .logo-cloud img:not(:last-of-type) { */
.logo-cloud p:not(:last-of-type) {
	border-inline-end: 1px solid var(--gray-25);
}

@media (width <= 800px) {
	.projects .wrapper ul {
		flex-wrap: nowrap;
		flex-direction: column;
		width: fit-content;
		margin-inline: auto;
		padding: 0;
	}
	.projects li {
		flex: 1 0 100%;
	}
	
	.logo-cloud__grid {
		grid-template-columns: 1fr;
	}

	.logo-cloud__grid img {
		padding-inline: 0;
		max-height: unset;
		max-width: 130px;
	}

	.logo-cloud img:not(:last-of-type) {
		border-inline-end: 0;
		border-block-end: 1px solid var(--gray-25);
	}
}

.banner {
	background-color: var(--primary);
	color: var(--white);
	padding: 6rem var(--gutter) 5rem;
}

.banner .wrapper {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 2rem;
	max-width: var(--max-w-sm);
	margin-inline: auto;
}

.banner .copy {
	grid-column: 1 / 6;
}

.banner p {
	text-wrap: pretty;
}

.banner h2 {
	color: var(--white);
}

.banner h2 span {
	color: var(--secondary);
}

.banner .contact {
	font-family: var(--font-sans);
	text-transform: uppercase;
	padding-block-start: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.banner .contact p {
	margin: 0;
}

.banner a {
	color: var(--white);
}

.banner img {
	max-width: 300px;
	margin-top: 2rem;
}

.banner .form {
	grid-column: 7 / -1;
}

.banner .form .gform_fields {
	gap: 0.5rem !important;
}

.banner .form :is(input, textarea):not([type='submit']) {
	background-color: var(--blue-light) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 1.5rem 1rem !important;
	display: flex !important;
	color: var(--gray-50) !important;
	font-family: var(--font-sans) !important;
/* 	text-transform: uppercase; */
}

.banner .form [type='submit'] {
	background-color: transparent !important;
	display: inline-block !important;
	position: relative !important;
	color: var(--gray-75) !important;
	margin: 0 !important;
	padding-inline-end: 1.75rem !important;
	padding-block: .5rem !important;
	font-size: var(--base) !important;
	font-family: var(--font-sans) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 2px !important;
	border: none;
}

::placeholder {
	color: var(--gray-75) !important;
	font-family: var(--font-sans);
	text-transform: uppercase !important;
}

.gform_footer {
	position: relative !important;
	padding-block-end: 0 !important;
}

.banner .form .gform_footer:has([type='submit'])::after {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	right: 5px !important;
	width: 20px !important;
	height: 100% !important;
	background: url(images/arrow.svg) no-repeat center center / contain !important;
	opacity: .4;
	transition: var(--transition) !important;
}

.banner .form .gform_footer:has([type='submit']):hover::after {
	right: 0 !important;
}

.gform_footer {
	padding-block-start: 0rem !important;
	justify-content: end !important;
}

@media (width <= 800px) {
	.banner .wrapper {
		grid-template-columns: 1fr;
	}

	.banner .copy {
		grid-column: 1 / -1;
	}

	.banner .form {
		grid-column: 1 / -1;
	}
}

.footer {
	background-color: var(--primary);
	padding-inline: var(--gutter);
	color: var(--gray-75);
	text-transform: uppercase;
	font-family: var(--font-sans);
	font-size: var(--sm);
}

.footer a {
	color: var(--gray-75);
	text-decoration: underline;
}

.footer a:hover {
	color: var(--secondary);
}

.footer .wrapper {
	max-width: var(--max-w-sm);
	margin-inline: auto;
	border-block-start: 1px solid var(--gray-75);
	padding-block: 1rem 2rem;
	display: flex;
	justify-content: space-between;
}

@media (width <= 600px) {
	.footer .wrapper {
		flex-direction: column;
		text-align: center;
	}
}

/* ========= Inside Page ========= */
body:has(.content) .header {
	background-color: var(--primary);
}

.content {
	padding-top: 132px;
}

@media (width < 600px) {
	.content {
		padding-top: 102px;
	}
}

/* ========= Media Queries ========= */

/* ========= Keyframes ========= */
@keyframes bounce {
	0%,
	100% {
		transform: translateY(0) translateX(-50%);
	}

	50% {
		transform: translateY(-10px) translateX(-50%);
	}

	80% {
		transform: translateY(0) translateX(-50%);
	}

	90% {
		transform: translateY(-3px) translateX(-50%);
	}
}

/* ========= Live Fixes ========= */
.gform_heading {
	display: none;
}