/*!
Theme Name: financialmaverick
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: financialmaverick
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

financialmaverick is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

:root {
	--ink: #0b1720;
	--muted: #61717c;
	--teal: #22c7a9;
	--cream: #f5f3ed;
	--line: #dfe5e4
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	color: var(--ink);
	font-family: Arial, sans-serif
}

.wrap {
	width: min(1180px, calc(100% - 48px));
	margin: auto
}

nav {
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.brand {
	color: var(--ink);
	text-decoration: none;
	font-weight: 750;
	font-size: 19px;
	display: flex;
	align-items: center;
	gap: 10px
}

.brand span {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--teal)
}

.navlinks {
	display: flex;
	gap: 30px
}

.navlinks a,
footer a {
	color: #475964;
	text-decoration: none;
	font-size: 14px
}

.navcta {
	padding: 13px 18px;
	border: 1px solid #bcc7c7;
	border-radius: 99px;
	color: var(--ink);
	text-decoration: none;
	font-size: 14px
}

.hero {
	padding: 112px 0 52px
}

.eyebrow,
.kicker {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: 12px;
	font-weight: 700;
	color: #4d626a
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 10px
}

.eyebrow i {
	width: 28px;
	height: 2px;
	background: var(--teal)
}

h1 {
	font-size: clamp(58px, 8vw, 104px);
	letter-spacing: -.065em;
	line-height: .91;
	margin: 28px 0 34px
}

h1 em {
	font-style: normal;
	color: #021b50
}

.hero>p {
	font-size: 19px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 700px
}

.actions {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 38px
}

.primary,
button {
	border: 0;
	background: var(--ink);
	color: #fff;
	padding: 17px 22px;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px
}

.primary span,
button span {
	color: var(--teal);
	margin-left: 18px
}

.textlink {
	color: var(--ink);
	font-size: 14px;
	text-decoration: none;
	font-weight: 700
}

.heroline {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 110px;
	color: #8b999e;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .16em
}

.heroline i {
	height: 1px;
	background: var(--line);
	flex: 1
}

.services {
	background: var(--cream);
	padding: 40px 0
}

.head {
	display: flex;
	justify-content: space-between;
	align-items: end
}

.head h2,
.about h2,
.process h2,
.reviews h2,
.contact h2 {
	font-size: clamp(38px, 5vw, 61px);
	letter-spacing: -.045em;
	line-height: 1.05;
	margin: 18px 0 0
}

.head>p {
	max-width: 410px;
	line-height: 1.7;
	color: var(--muted)
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 64px;
	border-left: 1px solid #d5d8d1;
	border-top: 1px solid #d5d8d1
}

.grid article {
	padding: 28px;
	border-right: 1px solid #d5d8d1;
	border-bottom: 1px solid #d5d8d1;
	display: flex;
	flex-direction: column
}

.grid small {
	color: #84918f
}

.icon {
	margin: 10px 0 15px;
	font-size: 24px;
	color: #16a58d
}

.grid h3 {
	font-size: 21px;
	margin: 0 0 14px
}

.grid p {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.7;
	margin-top: 2px;
	margin-bottom: 2px;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding-top: 15px
}

.tags span {
	font-size: 10px;
	text-transform: uppercase;
	border: 1px solid #d1d8d4;
	border-radius: 99px;
	padding: 7px 9px;
	color: #64736f
}

.about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px;
	padding-top: 50px;
	padding-bottom: 50px;
	align-items: center
}

.visual {
	height: 470px;
	border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
	background: #10252a;
	background-image: url('../financialmaverick/img/why-choose.webp');
	position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

.orb {
	position: absolute;
	border-radius: 50%
}

.one {
	width: 340px;
	height: 340px;
	background: #3d3e49;
	left: -80px;
	bottom: -100px
}

.two {
	width: 260px;
	height: 260px;
	background: #d6e7b5;
	right: -80px;
	top: -70px;
	opacity: .6
}

.glass {
	position: absolute;
	right: 38px;
	bottom: 38px;
	padding: 30px;
	background: #ffffff20;
	border: 1px solid #ffffff48;
	color: #fff
}

.about p {
	color: var(--muted);
	line-height: 1.8
}

.checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 35px;
	font-size: 14px
}

.process {
	background: #eef8f5;
	padding: 50px 0
}

.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
	margin-top: 40px
}

.steps article {
	border-top: 1px solid #bdd9d2;
	padding-top: 25px
}

.steps b {
	color: #13a88d
}

.steps p {
	color: var(--muted);
	line-height: 1.7
}

.reviews {
	background: #102126;
	color: #fff;
	padding: 50px 0
}

.reviews .head>p {
	color: #a9b7bc
}

.reviewgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 65px
}

.reviewgrid article {
	border: 1px solid #314348;
	background: #15292e;
	padding: 32px;
	min-height: 385px;
	display: flex;
	flex-direction: column
}

.stars {
	color: var(--teal);
	letter-spacing: .18em
}

.reviewgrid blockquote {
	font-size: 18px;
	line-height: 1.65;
	margin: 32px 0 15px;
}

.reviewer {
	border-top: 1px solid #314348;
	padding-top: 23px
}

.reviewer small {
	display: block;
	color: #8ea0a4;
	margin-top: 6px
}

.contact {
	background: var(--ink);
	color: #fff;
	width: 100%;
	max-width: none;
	padding: 110px max(24px, calc((100vw - 1180px)/2));
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 100px
}

.light {
	color: #77d9c8
}

.contact p {
	color: #a9b7bc;
	line-height: 1.7
}

.contact a {
	color: #fff
}

.form {
	background: #fff;
	color: var(--ink);
	padding: 42px
}

.row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px
}

.form label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 22px
}

.form input,
.form select,
.form textarea {
	display: block;
	width: 100%;
	border: 0;
	border-bottom: 1px solid #cfd8d8;
	padding: 13px 0;
	font: inherit;
	font-size: 14px;
	outline: none;
	background: #fff
}

.form textarea {
	height: 95px;
	resize: vertical
}

.privacy {
	font-size: 10px;
	color: #839095;
	margin-left: 15px
}

footer {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: center;
	padding: 52px 0 38px;
	gap: 25px
}

footer p,
footer small {
	color: #819096;
	font-size: 13px
}

footer div {
	display: flex;
	gap: 20px
}

footer small {
	grid-column: 1/-1;
	border-top: 1px solid var(--line);
	padding-top: 25px
}

@media(max-width:800px) {
	.wrap {
		width: min(100% - 32px, 1180px)
	}

	nav {
		height: 76px
	}

	.navlinks {
		display: none
	}

	.navcta {
		padding: 10px
	}

	.hero {
		padding: 72px 0 35px
	}

	h1 {
		font-size: 54px
	}

	.hero>p {
		font-size: 16px
	}

	.actions {
		align-items: flex-start;
		flex-direction: column
	}

	.heroline {
		margin-top: 70px;
		gap: 10px
	}

	.heroline i {
		display: none
	}

	.head {
		align-items: start;
		flex-direction: column;
		gap: 20px
	}

	.services,
	.process,
	.reviews {
		padding: 75px 0
	}

	.grid,
	.steps,
	.reviewgrid,
	.about,
	.contact {
		grid-template-columns: 1fr
	}


	.about {
		gap: 55px;
		padding-top: 75px;
		padding-bottom: 75px
	}

	.visual {
		height: 380px
	}

	.checks {
		grid-template-columns: 1fr
	}

	.steps {
		gap: 25px;
		margin-top: 45px
	}

	.contact {
		gap: 50px
	}

	.form {
		padding: 27px 20px
	}

	.row {
		grid-template-columns: 1fr
	}

	.privacy {
		display: block;
		margin: 14px 0 0
	}

	footer {
		grid-template-columns: 1fr
	}
}

#requestFormMessage {
    display: none;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
}

#requestFormMessage.form-success {
    display: block;
    color: #159f83;
}

#requestFormMessage.form-error {
    display: block;
    color: #d93f3f;
}

#requestForm button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}