/* =========================================================
   SURGE PROFESSIONAL
   Main Stylesheet
========================================================= */


/* =========================================================
   VARIABLES / GENERAL
========================================================= */

:root {
	--navy: #0a2247;
	--navy-light: #16345f;

	--burgundy: #671d2d;
	--burgundy-light: #b87986;

	--white: #ffffff;
	--off-white: #f7f6f3;

	--grey: #e9ecef;
	--dark-grey: #5c5c5c;

	--muted: #697584;
	--muted-light: #78818c;
	--field-border: #cfd4da;
	--error: #b00020;
}


body {
	margin: 0;

	color: var(--dark-grey);

	font-family: "Karla", sans-serif;
}


/* =========================================================
   HEADER / NAVIGATION
========================================================= */

.professional-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1030;

	width: 100%;

	padding: 10px 0;

	background-color: transparent;

	border-bottom: 1px solid transparent;

	box-shadow: none;

	transition:
		background-color .3s ease,
		border-color .3s ease,
		box-shadow .3s ease,
		padding .3s ease;
}


/* Header After Scrolling */

.professional-nav.is-scrolled {
	padding-top: 6px;
	padding-bottom: 6px;

	background-color: var(--white);

	border-bottom-color: rgba(10, 34, 71, .08);

	box-shadow:
		0 5px 25px rgba(10, 34, 71, .08);
}


/* Header Container */

.nav-container {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;

	padding-left: 35px;
	padding-right: 35px;
}


/* =========================================================
   HEADER BRAND
========================================================= */

.navbar-brand {
	position: relative;

	display: block;

	width: 88px;
	height: 88px;

	padding: 0;
	margin: 0;
}


.nav-logo {
	position: absolute;
	top: 0;
	left: 0;

	display: block;

	width: 88px;
	height: 88px;

	object-fit: contain;

	transition: opacity .3s ease;
}


/* White Logo - Top of Page */

.nav-logo-white {
	opacity: 1;
}


/* Standard Logo - Hidden Initially */

.nav-logo-color {
	opacity: 0;
}


/* Logo Swap After Scrolling */

.professional-nav.is-scrolled .nav-logo-white {
	opacity: 0;
}


.professional-nav.is-scrolled .nav-logo-color {
	opacity: 1;
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.professional-nav .navbar-nav {
	gap: 28px;
}


.professional-nav .nav-link {
	position: relative;

	padding: 10px 0;

	color: var(--white);

	font-size: 1rem;
	font-weight: 500;

	letter-spacing: .08rem;
	text-transform: uppercase;

	transition: color .2s ease;
}


.professional-nav .nav-link:hover,
.professional-nav .nav-link:focus {
	color: var(--burgundy-light);
}


/* Links After Scrolling */

.professional-nav.is-scrolled .nav-link {
	color: var(--navy);
}


.professional-nav.is-scrolled .nav-link:hover,
.professional-nav.is-scrolled .nav-link:focus {
	color: var(--burgundy);
}


/* Hover Line */

.professional-nav .nav-link::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: 3px;

	width: 0;
	height: 2px;

	background-color: var(--burgundy);

	transition: width .2s ease;
}


.professional-nav .nav-link:hover::after,
.professional-nav .nav-link:focus::after {
	width: 100%;
}


/* =========================================================
   HEADER CONTACT BUTTON
========================================================= */

.nav-contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 145px;

	padding: 11px 20px;

	background-color: transparent;

	border: 1px solid var(--white);
	border-radius: 6px;

	color: var(--white);

	font-size: 1rem;
	font-weight: 500;

	letter-spacing: .08rem;
	text-transform: uppercase;
	text-decoration: none;

	transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease;
}


.nav-contact:hover,
.nav-contact:focus {
	background-color: var(--burgundy);

	border-color: var(--burgundy);

	color: var(--white);
}


/* Contact Button After Scrolling */

.professional-nav.is-scrolled .nav-contact {
	background-color: var(--navy);

	border-color: var(--navy);

	color: var(--white);
}


.professional-nav.is-scrolled .nav-contact:hover,
.professional-nav.is-scrolled .nav-contact:focus {
	background-color: var(--burgundy);

	border-color: var(--burgundy);

	color: var(--white);
}


/* =========================================================
   MOBILE NAVIGATION TOGGLE
========================================================= */

.navbar-toggler {
	padding: 8px;

	border: none;

	box-shadow: none;
}


.navbar-toggler:focus {
	box-shadow: none;
}


.navbar-toggler-icon {
	position: relative;

	width: 32px;
	height: 32px;

	background-image: none;
}


.navbar-toggler-icon::before {
	content: "☰";

	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);

	color: var(--white);

	font-size: 1.9rem;
	line-height: 1;

	transition: color .2s ease;
}


.professional-nav.is-scrolled .navbar-toggler-icon::before {
	color: var(--navy);
}


/* =========================================================
   HEADER PHONE
========================================================= */

.nav-phone {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	color: var(--white);

	font-size: .95rem;
	font-weight: 500;

	letter-spacing: .03rem;
	text-decoration: none;
	white-space: nowrap;

	transition: color .2s ease;
}


.nav-phone-icon {
	width: 17px;
	height: 17px;

	fill: none;
	stroke: var(--burgundy-light);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;

	flex-shrink: 0;
}


.nav-phone:hover,
.nav-phone:focus {
	color: var(--burgundy-light);
}


/* Phone After Scrolling */

.professional-nav.is-scrolled .nav-phone {
	color: var(--navy);
}


.professional-nav.is-scrolled .nav-phone:hover,
.professional-nav.is-scrolled .nav-phone:focus {
	color: var(--burgundy);
}


/* =========================================================
   HEADER MOBILE / TABLET
========================================================= */

@media(max-width:991px) {

	.professional-nav {
		padding: 8px 0;
	}


	.professional-nav.is-scrolled {
		padding: 6px 0;
	}


	.nav-container {
		padding-left: 20px;
		padding-right: 20px;
	}


	.navbar-brand {
		width: 70px;
		height: 70px;
	}


	.nav-logo {
		width: 70px;
		height: 70px;
	}


	.professional-nav .navbar-collapse {
		padding-top: 18px;
		padding-bottom: 15px;
	}


	.professional-nav .navbar-nav {
		align-items: stretch !important;

		gap: 0;
	}


	.professional-nav .nav-link {
		padding: 14px 5px;

		border-top: 1px solid rgba(10, 34, 71, .10);

		text-align: left;
	}


	.professional-nav .nav-link::after {
		display: none;
	}


	.nav-contact {
		width: 100%;

		margin-top: 15px;

		padding: 12px 20px;
	}


	.nav-phone {
		padding: 14px 5px;

		border-top: 1px solid rgba(10, 34, 71, .10);

		color: var(--navy);
	}


	/*
	 * When the mobile navigation is opened,
	 * give the dropdown itself a white background.
	 */

	.professional-nav .navbar-collapse.show,
	.professional-nav .navbar-collapse.collapsing {
		margin-left: -20px;
		margin-right: -20px;

		padding-left: 20px;
		padding-right: 20px;

		background-color: var(--white);

		box-shadow:
			0 15px 25px rgba(10, 34, 71, .08);
	}


	.professional-nav .navbar-collapse.show .nav-link,
	.professional-nav .navbar-collapse.collapsing .nav-link {
		color: var(--navy);
	}


	.professional-nav .navbar-collapse.show .nav-link:hover,
	.professional-nav .navbar-collapse.show .nav-link:focus,
	.professional-nav .navbar-collapse.collapsing .nav-link:hover,
	.professional-nav .navbar-collapse.collapsing .nav-link:focus {
		color: var(--burgundy);
	}


	.professional-nav .navbar-collapse.show .nav-contact,
	.professional-nav .navbar-collapse.collapsing .nav-contact {
		background-color: var(--navy);

		border-color: var(--navy);

		color: var(--white);
	}


	.professional-nav .navbar-collapse.show .nav-contact:hover,
	.professional-nav .navbar-collapse.show .nav-contact:focus,
	.professional-nav .navbar-collapse.collapsing .nav-contact:hover,
	.professional-nav .navbar-collapse.collapsing .nav-contact:focus {
		background-color: var(--burgundy);

		border-color: var(--burgundy);

		color: var(--white);
	}

}


/* =========================================================
   LANDING BANNER
========================================================= */

.landing-banner {
	position: relative;
	height: 100vh;
	min-height: 700px;
	overflow: hidden;
	background-color: var(--off-white);
}

.landing-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("../images/landing-banner.png");
	background-position: center 25%;
	background-repeat: no-repeat;
	background-size: cover;
}


/* Centered Hero Content */

.banner-content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
}


.banner-inner {
	width: 100%;
	max-width: 950px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}


/* Hero Heading */

.banner-content h1 {
	margin: 0;
	color: var(--white);
	font-size: 2.5rem;
	font-weight: 300;
	letter-spacing: .12rem;
	line-height: 110%;
	text-transform: uppercase;
}


/* Audience Options */

.hero-options {
	margin-top: 55px;
}


.intro-card {
	text-align: center;
}


.intro-card h3 {
	margin-bottom: 20px;
	color: var(--white);
	font-size: clamp(1.3rem, 2vw, 1.65rem);
	font-weight: 400;
	letter-spacing: .08rem;
}


/* Hero Buttons */

.partner-home-btn {
	display: flex;
	justify-content: center;
	text-align: center;
}


.partner-home-btn a {
	display: inline-block;
	text-decoration: none;
}


.partner-home-btn button {
	width: 300px;
	max-width: 100%;
	padding: 10px 18px;
	background-color: var(--burgundy);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 8px;
	color: var(--white);
	font-size: clamp(1rem, 2vw, 1.2rem);
	font-weight: 400;
	letter-spacing: .1rem;
	text-transform: uppercase;
	transition:
		background-color .2s ease,
		border-color .2s ease;
}


.partner-home-btn button:hover {
	background-color: var(--navy-light);

	border-color: var(--navy-light);
}


/* =========================================================
   LANDING MOBILE
========================================================= */

@media(max-width:767px) {

	.landing-banner {
		height: auto;
		min-height: 100vh;
	}

	.banner-content {
		min-height: 100vh;
		padding-top: 115px;
		padding-bottom: 70px;
	}

	.banner-inner {
		padding-left: 22px;
		padding-right: 22px;
	}

	.banner-content h1 {
		font-size: clamp(2.2rem, 11vw, 3.2rem);
		letter-spacing: .08rem;
	}

	.hero-options {
		margin-top: 45px;
	}

	.intro-card + .intro-card {
		margin-top: 35px;
	}


	.partner-home-btn button {
		width: 290px;
	}

}


/* =========================================================
   WORKFORCE SOLUTIONS
========================================================= */

.seamless-staffing {
	height: 100vh;
	background-color: var(--white);
	color: var(--navy);
}


/* Professional Collage */

.professional-collage {
	display: block;
	width: 90%;
	max-width: 100%;
	height: auto;
}


/* Workforce Content Panel */

.seamless-staffing .seamless-copy {
	padding: 45px 50px;
	background-color: var(--off-white);
	border: 1px solid var(--grey);
	border-radius: 30px;
	box-shadow:
		0 15px 40px rgba(10, 34, 71, .08);
}


/* Section Typography */

.seamless-copy h2 {
	font-size: clamp(1.8rem, 4vw, 3.1rem);
	font-weight: 400;
	letter-spacing: .2rem;
}


.seamless-staffing .seamless-copy h2 {
	color: var(--navy);
}


.seamless-copy span {
	color: var(--burgundy);
	font-weight: 600;
}


.seamless-copy p {
	max-width: 630px;
	font-size: clamp(1.4rem, 4vw, 1.6rem);
	font-weight: 300;
	letter-spacing: .1rem;
	line-height: 130%;
}


/* Workforce Benefits */

.seamless-staffing .seamless-copy ul {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}


.seamless-staffing .seamless-copy li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 32px;
	color: var(--dark-grey);
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 145%;
	text-align: left;
}


.seamless-staffing .seamless-copy li::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--burgundy);
	font-size: 1.15rem;
	font-weight: 700;
}


/* Consultation Button */

.staffing-button a {
	display: inline-block;
	max-width: 100%;
}


.staffing-button button {
	width: 300px;
	max-width: 100%;
	margin-top: 40px;
	padding: 8px 15px;
	background-color: transparent;
	border: 2px solid var(--navy);
	border-radius: 15px;
	color: var(--navy);
	font-size: clamp(1.2rem, 4vw, 1.4rem);
	font-weight: 300;
	letter-spacing: .1rem;
	text-transform: uppercase;
	transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease;
}


.staffing-button button:hover {
	background-color: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}


/* =========================================================
   WORKFORCE SOLUTIONS MOBILE
========================================================= */

@media(max-width:767px) {

	.seamless-staffing {
		height: auto;
		text-align: center;
	}


	.professional-collage {
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 auto 35px;
	}


	.seamless-staffing .seamless-copy {
		padding: 30px 24px;
		border-radius: 20px;
	}


	.seamless-copy h2 {
		letter-spacing: 0;
		line-height: 120%;
	}


	.seamless-staffing .seamless-copy ul {
		display: inline-block;
		margin: 25px auto 0;
		text-align: left;
	}


	.seamless-staffing .seamless-copy li {
		padding-left: 30px;
		text-align: left;
	}


	.staffing-button {
		text-align: center;
	}


	.staffing-button button {
		width: 300px;
		max-width: 100%;
		margin-top: 30px;
	}

}


/* =========================================================
   RECRUITING EXPERTISE
========================================================= */

.recruiting-expertise {
	background-color: var(--off-white);
	color: var(--navy);
}


.expertise-title {
	margin-bottom: 50px;
	color: var(--burgundy);
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
}


/* Left Specialty Panel */

.expertise-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 500px;
	padding: 45px 50px;
	background-color: var(--white);
	border-radius: 30px;
	box-shadow:
		0 10px 30px rgba(10, 34, 71, .06);
}


.expertise-panel h3 {
	margin-bottom: 30px;
	color: var(--navy);
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	font-weight: 500;
	letter-spacing: .08rem;
}


.expertise-panel ul {
	margin-bottom: 0;
	padding-left: 20px;
}


.expertise-panel li {
	margin-bottom: 12px;
	color: var(--dark-grey);
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 140%;
}


/* Right Specialty Navigation */

.expertise-nav {
	display: flex;
	flex-direction: column;
	gap: 12px;
}


.specialty-btn {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 68px;
	padding: 14px 24px;
	background-color: var(--white);
	border: 2px solid transparent;
	border-radius: 12px;
	color: var(--navy);
	font-weight: 500;
	text-align: left;
	transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease,
		transform .2s ease;
}


.specialty-btn span {
	font-size: 1.1rem;
	line-height: 125%;
	letter-spacing: .04rem;
}


.specialty-btn:hover {
	background-color: var(--white);
	border-color: var(--burgundy);
}


.specialty-btn.active {
	background-color: var(--navy);
	border-color: var(--navy);
	color: var(--white);
	transform: translateX(-8px);
}


.specialty-btn.active:hover {
	background-color: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}


/* =========================================================
   RECRUITING EXPERTISE TABLET
========================================================= */

@media(max-width:991px) {

	.expertise-content {
		min-height: 0;
		padding: 35px 30px;
	}


	.expertise-nav {
		margin-top: 10px;
	}


	.specialty-btn.active {
		transform: none;
	}

}


/* =========================================================
   RECRUITING EXPERTISE MOBILE
========================================================= */

@media(max-width:767px) {

	.expertise-title {
		margin-bottom: 30px;
	}


	.expertise-content {
		padding: 30px 20px;
		border-radius: 20px;
	}


	.expertise-panel h3 {
		margin-bottom: 20px;
	}


	.expertise-panel li {
		font-size: 1rem;
	}


	.specialty-btn {
		min-height: 65px;
	}

}


/* =========================================================
   SUPPORTING OUR CLIENTS
========================================================= */

.support-section {
	background-color: var(--white);
	color: var(--dark-grey);
}


.support-title {
	margin-bottom: 45px;
	color: var(--burgundy);
	text-align: center;
}


.support-shell {
	overflow: hidden;
	border: 1px solid var(--grey);
	border-radius: 30px;
	box-shadow:
		0 15px 40px rgba(10, 34, 71, .10);
}


/* Left Content Panel */

.support-copy-panel {
	height: 100%;
	padding: 50px 55px;
	background-color: var(--white);
}


.support-copy-panel > h3 {
	margin-bottom: 22px;
	color: var(--navy);
	font-size: clamp(1.6rem, 3vw, 2rem);
	font-weight: 500;
	line-height: 125%;
}


.support-copy-panel > p {
	margin: 0;
	color: var(--dark-grey);
	font-size: 1.08rem;
	font-weight: 300;
	line-height: 160%;
}


/* Guarantee Block */

.support-guarantee {
	margin-top: 35px;
	padding: 24px 28px;
	background-color: var(--off-white);
	border-left: 4px solid var(--burgundy);
	border-radius: 0 15px 15px 0;
}


.support-guarantee h3 {
	margin: 0 0 8px;
	color: var(--navy);
	font-size: 1.25rem;
	font-weight: 600;
}


.support-guarantee p {
	margin: 0;
	color: var(--dark-grey);
	font-size: 1rem;
	font-weight: 300;
	line-height: 155%;
}


/* Right CTA Panel */

.support-cta-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 100%;
	min-height: 100%;
	padding: 50px 45px;
	background-color: var(--navy);
	color: var(--white);
}


.support-eyebrow {
	margin-bottom: 18px;
	color: var(--burgundy-light);
	font-size: .85rem;
	font-weight: 500;
	letter-spacing: .13rem;
	text-transform: uppercase;
}


.support-cta-panel h2 {
	margin: 0;
	color: var(--white);
	font-size: 1.9rem;
	font-weight: 300;
	line-height: 125%;
	letter-spacing: .05rem;
}


.support-cta-panel h2 span {
	color: var(--burgundy-light);
	font-weight: 600;
}


/* Support CTA */

.support-consultation-btn {
	width: 100%;
	max-width: 300px;

	margin-top: 40px;

	padding: 10px 18px;

	background-color: var(--burgundy);

	border: none;
	border-radius: 15px;

	color: var(--white);

	font-size: clamp(1.1rem, 3vw, 1.3rem);
	font-weight: 300;

	letter-spacing: .1rem;
	text-transform: uppercase;

	transition:
		background-color .2s ease,
		color .2s ease;
}


.support-consultation-btn:hover {
	background-color: var(--white);

	color: var(--navy);
}


/* =========================================================
   SUPPORTING CLIENTS TABLET
========================================================= */

@media(max-width:991px) {

	.support-copy-panel {
		padding: 40px;
	}


	.support-cta-panel {
		padding: 40px;
	}

}


/* =========================================================
   SUPPORTING CLIENTS MOBILE
========================================================= */

@media(max-width:767px) {

	.support-title {
		margin-bottom: 30px;
	}


	.support-shell {
		border-radius: 20px;
	}


	.support-copy-panel {
		padding: 30px 24px;
	}


	.support-guarantee {
		margin-top: 28px;

		padding: 20px;
	}


	.support-cta-panel {
		padding: 35px 24px;
	}


	.support-consultation-btn {
		width: 100%;
		max-width: none;

		margin-top: 30px;
	}

}


/* =========================================================
   REQUEST CONSULTATION DRAWER
========================================================= */

body.consultation-open {
	overflow: hidden;
}


/* Backdrop */

.consultation-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2000;

	background: rgba(10, 34, 71, .78);

	opacity: 0;
	visibility: hidden;

	pointer-events: none;

	transition:
		opacity .3s ease,
		visibility .3s ease;
}


.consultation-backdrop.is-open {
	opacity: 1;
	visibility: visible;

	pointer-events: auto;
}


/* Main Drawer */

.consultation-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2010;

	display: flex;
	flex-direction: column;

	width: min(580px, 100vw);
	height: 100vh;
	height: 100dvh;

	background-color: var(--white);

	color: var(--dark-grey);

	box-shadow:
		-20px 0 50px rgba(0, 0, 0, .16);

	transform: translateX(100%);

	visibility: hidden;

	transition:
		transform .35s ease,
		visibility 0s linear .35s;
}


.consultation-drawer.is-open {
	transform: translateX(0);

	visibility: visible;

	transition:
		transform .35s ease,
		visibility 0s linear 0s;
}


/* Drawer Header */

.consultation-drawer-header {
	position: relative;

	padding: 38px 42px 24px;

	border-bottom: 1px solid var(--grey);

	flex-shrink: 0;
}


.consultation-eyebrow {
	margin-bottom: 8px;

	color: var(--burgundy);

	font-size: .85rem;
	font-weight: 600;

	letter-spacing: .18rem;
	text-transform: uppercase;
}


.consultation-drawer-header h2 {
	margin: 0 50px 10px 0;

	color: var(--navy);

	font-size: clamp(2rem, 4vw, 2.7rem);
	font-weight: 400;

	letter-spacing: .06rem;
}


.consultation-drawer-header p {
	max-width: 450px;

	margin: 0;

	color: var(--muted);

	font-size: 1rem;

	line-height: 150%;
}


/* Close Button */

.consultation-close {
	position: absolute;
	top: 25px;
	right: 28px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	padding: 0;

	background-color: transparent;

	border: 0;
	border-radius: 50%;

	color: var(--navy);

	font-size: 2rem;
	font-weight: 300;

	line-height: 1;

	transition:
		background-color .2s ease,
		color .2s ease;
}


.consultation-close:hover {
	background-color: var(--off-white);

	color: var(--burgundy);
}


/* Scrollable Drawer Body */

.consultation-drawer-body {
	flex: 1;

	overflow-y: auto;

	padding: 30px 42px 42px;
}


/* Form Layout */

.consultation-form-grid {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 20px;
}


.consultation-form-group {
	margin: 0;
}


.consultation-form-group.full {
	grid-column: 1 / -1;
}


.consultation-label {
	display: block;

	margin-bottom: 7px;

	color: var(--navy);

	font-size: .9rem;
	font-weight: 600;
}


.consultation-required {
	padding-left: 3px;

	color: var(--burgundy);
}


/* Form Fields */

#consultationForm input[type="text"],
#consultationForm input[type="email"],
#consultationForm input[type="tel"],
#consultationForm textarea {
	width: 100%;

	padding: 12px 14px;

	background-color: var(--white);

	border: 1px solid var(--field-border);
	border-radius: 10px;

	color: var(--navy);

	font-family: "Karla", sans-serif;
	font-size: 1rem;

	transition:
		border-color .2s ease,
		box-shadow .2s ease;
}


#consultationForm textarea {
	min-height: 110px;

	resize: vertical;
}


#consultationForm input:focus,
#consultationForm textarea:focus {
	outline: none;

	border-color: var(--navy);

	box-shadow:
		0 0 0 3px rgba(10, 34, 71, .12);
}


/* Communication Section */

.consultation-communication {
	margin-top: 30px;
}


.consultation-communication h3 {
	margin-bottom: 5px;

	color: var(--navy);

	font-size: 1.25rem;
	font-weight: 600;
}


.consultation-section-note {
	margin-bottom: 18px;

	color: var(--muted);

	font-size: .9rem;
}


/* Communication Option Cards */

.consultation-option-grid {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 12px;
}


.consultation-option-card {
	display: block;

	margin: 0;

	cursor: pointer;
}


.consultation-option-input {
	position: absolute;

	opacity: 0;

	pointer-events: none;
}


.consultation-option-content {
	display: flex;
	align-items: center;

	min-height: 65px;

	gap: 12px;

	padding: 12px 16px;

	background-color: var(--white);

	border: 1px solid var(--field-border);
	border-radius: 12px;

	color: var(--navy);

	transition:
		border-color .2s ease,
		background-color .2s ease,
		box-shadow .2s ease,
		transform .2s ease;
}


.consultation-option-content i {
	width: 22px;

	color: var(--navy-light);

	font-size: 1.15rem;

	text-align: center;
}


.consultation-option-title {
	font-size: .98rem;
	font-weight: 600;
}


.consultation-option-card:hover .consultation-option-content {
	border-color: var(--burgundy);

	box-shadow:
		0 6px 15px rgba(10, 34, 71, .08);

	transform: translateY(-1px);
}


.consultation-option-input:checked + .consultation-option-content {
	background-color: var(--off-white);

	border-color: var(--navy);

	box-shadow:
		0 0 0 3px rgba(10, 34, 71, .10);
}


.consultation-option-input:checked + .consultation-option-content i {
	color: var(--burgundy);
}


/* Conditional Communication Fields */

.consultation-conditional-fields {
	margin-top: 20px;
}


.consultation-conditional-field {
	display: none;

	margin-top: 12px;

	padding: 18px;

	background-color: var(--off-white);

	border: 1px solid var(--grey);
	border-radius: 12px;
}


/* Additional Message */

.consultation-message {
	margin-top: 28px;
}


/* Form Errors */

.consultation-error {
	display: none;

	margin-top: 10px;

	color: var(--error);

	font-size: .85rem;
}


.consultation-error.show {
	display: block;
}


/* =========================================================
   CONSULTATION SUCCESS
========================================================= */

.consultation-success {
	display: none;

	padding: 45px 20px 30px;

	text-align: center;
}


.consultation-success.is-visible {
	display: block;
}


.consultation-success-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 72px;
	height: 72px;

	margin: 0 auto 25px;

	background-color: var(--burgundy);

	border-radius: 50%;

	color: var(--white);

	font-size: 2rem;
}


.consultation-success h3 {
	margin-bottom: 15px;

	color: var(--navy);

	font-size: 2rem;
	font-weight: 500;
}


.consultation-success-lead {
	margin-bottom: 10px;

	color: var(--navy);

	font-size: 1.2rem;
	font-weight: 500;
}


.consultation-success p {
	max-width: 400px;

	margin-left: auto;
	margin-right: auto;

	color: var(--dark-grey);

	font-size: 1rem;

	line-height: 155%;
}


.consultation-success-close {
	width: 220px;
	max-width: 100%;

	margin-top: 25px;

	padding: 10px 18px;

	background-color: var(--navy);

	border: none;
	border-radius: 15px;

	color: var(--white);

	font-size: 1rem;
	font-weight: 400;

	letter-spacing: .1rem;
	text-transform: uppercase;

	transition:
		background-color .2s ease,
		color .2s ease;
}


.consultation-success-close:hover {
	background-color: var(--burgundy);

	color: var(--white);
}


/* =========================================================
   CONSULTATION SUBMIT
========================================================= */

.consultation-submit {
	width: 100%;

	margin-top: 28px;

	padding: 13px 18px;

	background-color: var(--navy);

	border: 0;
	border-radius: 12px;

	color: var(--white);

	font-size: 1.05rem;
	font-weight: 500;

	letter-spacing: .1rem;
	text-transform: uppercase;

	transition:
		background-color .2s ease,
		color .2s ease;
}


.consultation-submit:hover {
	background-color: var(--burgundy);

	color: var(--white);
}


.consultation-submit-note {
	margin: 12px 20px 0;

	color: var(--muted-light);

	font-size: .82rem;

	line-height: 140%;

	text-align: center;
}


/* =========================================================
   CONSULTATION MOBILE
========================================================= */

@media(max-width:767px) {

	.consultation-drawer {
		width: 100vw;
		max-width: none;
	}


	.consultation-drawer-header {
		padding: 28px 22px 20px;
	}


	.consultation-close {
		top: 16px;
		right: 15px;
	}


	.consultation-drawer-header h2 {
		margin-right: 40px;
	}


	.consultation-drawer-body {
		padding: 24px 22px 35px;
	}


	.consultation-form-grid {
		grid-template-columns: 1fr;
	}


	.consultation-form-group.full {
		grid-column: auto;
	}

}


@media(max-width:420px) {

	.consultation-option-grid {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
   JOB SEARCH HERO
========================================================= */

.job-search-hero {
	position: relative;

	padding: 165px 0 80px;

	background-color: var(--navy);

	color: var(--white);

	text-align: center;
}


.job-search-hero-inner {
	width: 100%;
	max-width: 850px;

	margin: 0 auto;
}


.job-search-eyebrow {
	margin-bottom: 16px;

	color: var(--burgundy-light);

	font-size: .9rem;
	font-weight: 600;

	letter-spacing: .18rem;
	text-transform: uppercase;
}


.job-search-hero h1 {
	margin: 0;

	color: var(--white);

	font-size: clamp(2.5rem, 5vw, 4.25rem);
	font-weight: 300;

	letter-spacing: .08rem;
	line-height: 110%;
}


.job-search-hero p {
	max-width: 680px;

	margin: 24px auto 0;

	color: rgba(255, 255, 255, .82);

	font-size: 1.15rem;
	font-weight: 300;

	line-height: 155%;
}


.job-search-section {
	padding: 45px 0 80px;

	background-color: var(--white);
}


/* =========================================================
   JOB SEARCH
========================================================= */

.job-search-wrapper {
	width: 100%;
	max-width: 960px;

	margin: 25px auto 45px;
}


/* =========================================================
   JOB SEARCH FORM
========================================================= */

.job-search-form {
	display: flex;
	align-items: center;

	width: 100%;
	min-height: 64px;

	padding: 7px 8px 7px 22px;

	background-color: var(--white);

	border: 1px solid rgba(10, 34, 71, .20);
	border-radius: 18px;

	box-shadow:
		0 8px 25px rgba(10, 34, 71, .08);

	box-sizing: border-box;

	transition:
		border-color .2s ease,
		box-shadow .2s ease;
}


/* Highlight Search Form When a Field Has Focus */

.job-search-form:focus-within {
	border-color: rgba(10, 34, 71, .45);

	box-shadow:
		0 8px 25px rgba(10, 34, 71, .10),
		0 0 0 3px rgba(10, 34, 71, .06);
}


/* =========================================================
   JOB SEARCH FIELDS
========================================================= */

.job-search-field {
	display: flex;
	align-items: center;

	min-width: 0;
	min-height: 48px;
}


.job-keywords {
	flex: 1.15;
}


.job-location {
	flex: 1;
}


/* Icons */

.job-search-field i,
.job-search-icon {
	width: 22px;

	margin-right: 14px;

	color: var(--burgundy);

	font-size: 1.15rem;

	text-align: center;

	flex-shrink: 0;
}


/* SVG Icon Support */

.job-search-field svg,
.job-search-icon-svg {
	width: 20px;
	height: 20px;

	margin-right: 14px;

	fill: none;

	stroke: var(--burgundy);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;

	flex-shrink: 0;
}


/* Inputs */

.job-search-field input {
	width: 100%;
	min-width: 0;

	padding: 10px 0;

	background-color: transparent;

	border: 0;
	outline: 0;

	color: var(--navy);

	font-family: "Karla", sans-serif;
	font-size: 1rem;
	font-weight: 400;

	line-height: 1.4;
}


.job-search-field input::placeholder {
	color: #747d88;

	opacity: 1;
}


/*
 * Individual input focus is intentionally subtle because
 * .job-search-form:focus-within provides the primary focus state.
 */

.job-search-field input:focus-visible {
	outline: none;
}


/* Divider */

.job-search-divider {
	width: 1px;
	height: 30px;

	margin: 0 24px;

	background-color: var(--grey);

	flex-shrink: 0;
}


/* =========================================================
   JOB SEARCH BUTTON
========================================================= */

.job-search-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 125px;
	min-height: 48px;

	padding: 10px 24px;

	background-color: var(--burgundy);

	border: 2px solid var(--burgundy);
	border-radius: 12px;

	color: var(--white);

	font-family: "Karla", sans-serif;
	font-size: 1rem;
	font-weight: 600;

	letter-spacing: .06rem;
	text-transform: uppercase;

	cursor: pointer;

	flex-shrink: 0;

	transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease,
		box-shadow .2s ease,
		transform .2s ease;
}


.job-search-button:hover {
	background-color: var(--navy);

	border-color: var(--navy);

	color: var(--white);
}


.job-search-button:focus-visible {
	outline: none;

	background-color: var(--navy);

	border-color: var(--navy);

	box-shadow:
		0 0 0 3px var(--white),
		0 0 0 6px rgba(10, 34, 71, .35);
}


.job-search-button:active {
	transform: translateY(1px);
}


/* =========================================================
   JOB RESULTS
========================================================= */

.jobs-accordion {
	width: 100%;
}


/* Individual Job */

.jobs-accordion .accordion-item {
	margin-bottom: 14px;

	overflow: hidden;

	background-color: var(--white);

	border: 1px solid rgba(10, 34, 71, .12);
	border-radius: 14px !important;

	box-shadow:
		0 5px 18px rgba(10, 34, 71, .045);

	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		transform .2s ease;
}


.jobs-accordion .accordion-item:hover {
	border-color: rgba(103, 29, 45, .28);

	box-shadow:
		0 8px 25px rgba(10, 34, 71, .08);
}


/* =========================================================
   JOB RESULT HEADER
========================================================= */

.jobs-accordion .accordion-header {
	margin: 0;
}


.jobs-accordion .accordion-button {
	position: relative;

	width: 100%;

	padding: 22px 26px;

	background-color: var(--white);

	color: var(--navy);

	box-shadow: none;

	font-family: "Karla", sans-serif;

	transition:
		background-color .2s ease,
		color .2s ease;
}


.jobs-accordion .accordion-button:hover {
	background-color: var(--off-white);

	color: var(--navy);
}


.jobs-accordion .accordion-button:not(.collapsed) {
	background-color: var(--off-white);

	color: var(--navy);

	box-shadow: none;
}


/* Bootstrap Accordion Arrow */

.jobs-accordion .accordion-button::after {
	margin-left: auto;

	opacity: .75;

	flex-shrink: 0;
}


/* Accessible Keyboard Focus */

.jobs-accordion .accordion-button:focus {
	box-shadow: none;
}


.jobs-accordion .accordion-button:focus-visible {
	z-index: 2;

	outline: none;

	box-shadow:
		inset 0 0 0 2px var(--navy),
		inset 0 0 0 5px rgba(255, 255, 255, .85);
}


/* Job Title */

.jobs-accordion .accordion-button strong {
	display: block;

	padding-right: 20px;

	color: inherit;

	font-size: 1.15rem;
	font-weight: 600;

	line-height: 135%;

	letter-spacing: .02rem;
}


/* Optional Supporting Information in Header */

.job-result-heading {
	display: flex;
	flex-direction: column;

	gap: 6px;

	padding-right: 20px;

	text-align: left;
}


.job-result-title {
	color: var(--navy);

	font-size: 1.15rem;
	font-weight: 600;

	line-height: 135%;
}


.job-result-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	color: var(--muted);
	font-size: .9rem;
	font-weight: 400;
	line-height: 140%;
}


.job-result-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}


.job-result-meta-item i {
	color: var(--burgundy);
	font-size: .9rem;
}

.job-result-meta-item svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--burgundy);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* =========================================================
   JOB HEADER APPLY BUTTON
========================================================= */

.job-accordion-header-row {
	display: flex;
	align-items: stretch;

	width: 100%;

	background-color: var(--white);
}


.job-accordion-header-row .accordion-button {
	flex: 1;

	min-width: 0;
}


/* Apply Button Container */

.job-header-apply {
	display: flex;
	align-items: center;

	padding: 14px 22px 14px 0;

	background-color: var(--white);

	flex-shrink: 0;

	transition:
		background-color .2s ease;
}


/*
 * Keep the Apply area visually synchronized
 * with the accordion hover/open state.
 */

.job-accordion-header-row:hover .job-header-apply,
.job-accordion-header-row:has(.accordion-button:not(.collapsed)) .job-header-apply {
	background-color: var(--off-white);
}


/* Apply Button */

.job-header-apply-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 125px;
	min-height: 42px;

	padding: 8px 18px;

	background-color: var(--navy);

	border: 2px solid var(--navy);
	border-radius: 10px;

	color: var(--white);

	font-family: "Karla", sans-serif;
	font-size: .9rem;
	font-weight: 600;

	letter-spacing: .06rem;
	text-transform: uppercase;
	text-decoration: none;

	white-space: nowrap;

	transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease,
		box-shadow .2s ease;
}


.job-header-apply-button:hover {
	background-color: var(--burgundy);

	border-color: var(--burgundy);

	color: var(--white);
}


.job-header-apply-button:focus-visible {
	outline: none;

	background-color: var(--burgundy);

	border-color: var(--burgundy);

	color: var(--white);

	box-shadow:
		0 0 0 3px var(--white),
		0 0 0 6px rgba(103, 29, 45, .30);
}


/* =========================================================
   JOB RESULT BODY
========================================================= */

.jobs-accordion .accordion-body {
	padding: 28px 30px 30px;

	background-color: var(--white);

	border-top: 1px solid var(--grey);

	color: var(--dark-grey);
}


.jobs-accordion .job-description {
	color: var(--dark-grey);

	font-size: 1rem;
	font-weight: 300;

	line-height: 165%;
}


.jobs-accordion .job-description p:last-child {
	margin-bottom: 0;
}


.jobs-accordion .job-description h1,
.jobs-accordion .job-description h2,
.jobs-accordion .job-description h3,
.jobs-accordion .job-description h4 {
	color: var(--navy);

	font-family: "Karla", sans-serif;
	font-weight: 600;

	line-height: 130%;
}


.jobs-accordion .job-description h2 {
	font-size: 1.5rem;
}


.jobs-accordion .job-description h3 {
	font-size: 1.25rem;
}


.jobs-accordion .job-description h4 {
	font-size: 1.1rem;
}


.jobs-accordion .job-description ul,
.jobs-accordion .job-description ol {
	padding-left: 24px;
}


.jobs-accordion .job-description li {
	margin-bottom: 7px;
}


/* =========================================================
   JOB APPLY BUTTON
========================================================= */

.jobs-accordion .btn-primary,
.job-apply-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 160px;

	margin-top: 20px;

	padding: 10px 22px;

	background-color: var(--navy);

	border: 2px solid var(--navy);
	border-radius: 12px;

	color: var(--white);

	font-family: "Karla", sans-serif;
	font-size: 1rem;
	font-weight: 500;

	letter-spacing: .06rem;
	text-transform: uppercase;
	text-decoration: none;

	transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease,
		box-shadow .2s ease;
}


.jobs-accordion .btn-primary:hover,
.job-apply-button:hover {
	background-color: var(--burgundy);

	border-color: var(--burgundy);

	color: var(--white);
}


.jobs-accordion .btn-primary:focus,
.jobs-accordion .btn-primary:focus-visible,
.job-apply-button:focus,
.job-apply-button:focus-visible {
	outline: none;

	background-color: var(--burgundy);

	border-color: var(--burgundy);

	color: var(--white);

	box-shadow:
		0 0 0 3px var(--white),
		0 0 0 6px rgba(103, 29, 45, .30);
}


/* =========================================================
   JOB SEARCH STATUS / RESULTS COUNT
========================================================= */

.job-search-status {
	margin: 0 0 22px;

	color: var(--muted);

	font-size: .95rem;
	font-weight: 400;

	line-height: 145%;
}


.job-search-status strong {
	color: var(--navy);

	font-weight: 600;
}


/* =========================================================
   NO JOB RESULTS
========================================================= */

.job-search-empty {
	padding: 45px 30px;

	background-color: var(--off-white);

	border: 1px solid var(--grey);
	border-radius: 18px;

	text-align: center;
}


.job-search-empty h3 {
	margin: 0 0 10px;

	color: var(--navy);

	font-size: 1.4rem;
	font-weight: 600;
}


.job-search-empty p {
	max-width: 550px;

	margin: 0 auto;

	color: var(--dark-grey);

	font-size: 1rem;
	font-weight: 300;

	line-height: 155%;
}


/* =========================================================
   JOB SEARCH ACCESSIBILITY
========================================================= */

.job-search-sr-only {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	padding: 0 !important;
	margin: -1px !important;

	overflow: hidden !important;

	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;

	border: 0 !important;
}


/* Respect Reduced Motion Preferences */

@media(prefers-reduced-motion: reduce) {

	.job-search-form,
	.job-search-button,
	.jobs-accordion .accordion-item,
	.jobs-accordion .accordion-button,
	.jobs-accordion .btn-primary,
	.job-apply-button {
		transition: none;
	}

}


/* =========================================================
   JOB SEARCH MOBILE
========================================================= */

@media(max-width:767px) {

	.job-search-hero {
		padding: 125px 22px 55px;
	}


	.job-search-hero h1 {
		font-size: clamp(2.3rem, 11vw, 3.2rem);
	}


	.job-search-hero p {
		font-size: 1rem;
	}


	.job-search-section {
		padding-top: 30px;
		padding-bottom: 55px;
	}


	.job-search-wrapper {
		margin-top: 20px;
		margin-bottom: 35px;
	}


	.job-search-form {
		flex-direction: column;
		align-items: stretch;

		min-height: 0;

		padding: 10px 12px 12px;

		border-radius: 16px;
	}


	.job-search-field {
		width: 100%;
		min-height: 52px;

		padding: 0 8px;
	}


	.job-keywords,
	.job-location {
		flex: none;
	}


	.job-search-divider {
		width: 100%;
		height: 1px;

		margin: 0;

		background-color: var(--grey);
	}


	.job-search-button {
		width: 100%;
		min-height: 50px;

		margin-top: 10px;
	}


	.jobs-accordion .accordion-button {
		padding: 19px 20px;
	}


	.jobs-accordion .accordion-button strong,
	.job-result-title {
		font-size: 1.08rem;
	}


	.job-result-meta {
		flex-direction: column;
		align-items: flex-start;

		gap: 4px;
	}


	.jobs-accordion .accordion-body {
		padding: 24px 20px 25px;
	}


	.jobs-accordion .btn-primary,
	.job-apply-button {
		width: 100%;
	}


	.job-search-empty {
		padding: 35px 22px;
	}

	.job-accordion-header-row {
	flex-direction: column;
	}

	.job-header-apply {
	padding: 0 20px 18px;
	background-color: var(--white);
	}

	.job-header-apply-button {
		width: 100%;
	}

	.job-accordion-header-row:hover .job-header-apply,
	.job-accordion-header-row:has(.accordion-button:not(.collapsed)) .job-header-apply {
		background-color: var(--off-white);
	}
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
	padding: 70px 0 25px;

	background-color: var(--navy);

	color: var(--white);
}


.footer-inner {
	max-width: 1400px;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand img {
	display: block;

	width: 150px;
	height: 150px;

	object-fit: contain;
}


/* =========================================================
   FOOTER SECTIONS
========================================================= */

.footer-section h3 {
	margin: 0 0 22px;

	color: var(--burgundy-light);

	font-size: .85rem;
	font-weight: 600;

	letter-spacing: .16rem;
	text-transform: uppercase;
}


/* =========================================================
   FOOTER NAVIGATION
========================================================= */

.footer-nav-items {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 14px 30px;
}


.footer-nav-items a {
	display: inline-block;

	width: fit-content;

	color: var(--white);

	font-size: 1rem;
	font-weight: 400;

	letter-spacing: .04rem;
	text-decoration: none;

	transition: color .2s ease;
}


.footer-nav-items a:hover,
.footer-nav-items a:focus {
	color: var(--burgundy);
}


/* =========================================================
   FOOTER CONTACT
========================================================= */

.footer-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}


.footer-phone,
.footer-address {
	display: flex;
	align-items: flex-start;

	gap: 12px;

	color: var(--white);

	font-size: 1rem;
	font-weight: 300;

	line-height: 150%;
}


.footer-phone {
	margin-bottom: 18px;

	text-decoration: none;

	transition: color .2s ease;
}


.footer-phone:hover,
.footer-phone:focus {
	color: var(--burgundy);
}


.footer-address address {
	margin: 0;

	color: var(--white);

	font-style: normal;
	font-weight: 300;

	line-height: 150%;
}


/* Icons */

.footer-contact-icon {
	width: 18px;
	height: 18px;

	margin-top: 2px;

	fill: none;

	stroke: var(--burgundy-light);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;

	flex-shrink: 0;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
	margin-top: 55px;

	padding-top: 22px;

	border-top: 1px solid rgba(255, 255, 255, .16);
}


.footer-bottom p {
	margin: 0;

	color: rgba(255, 255, 255, .68);

	font-size: .85rem;
	font-weight: 300;

	letter-spacing: .03rem;

	text-align: center;
}


/* =========================================================
   FOOTER TABLET
========================================================= */

@media(max-width:991px) {

	.footer {
		padding-top: 55px;
	}


	.footer-brand img {
		width: 130px;
		height: 130px;
	}


	.footer-bottom {
		margin-top: 45px;
	}

}


/* =========================================================
   FOOTER MOBILE
========================================================= */

@media(max-width:767px) {

	.footer {
		padding: 45px 0 22px;
		text-align: left;
	}

	.footer-brand {
		text-align: center;
	}

	.footer-brand img {
		width: 125px;
		height: 125px;
		margin: 0 auto;
	}

	.footer-section h3 {
		margin-bottom: 16px;
	}

	.footer-nav-items {
		grid-template-columns: 1fr;
		gap: 0;
	}


	.footer-nav-items a {
		width: 100%;
		padding: 12px 0;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}


	.footer-nav-items a:last-child {
		border-bottom: 1px solid rgba(255, 255, 255, .14);
	}


	.footer-contact {
		margin-top: 5px;
	}


	.footer-bottom {
		margin-top: 38px;
	}


	.footer-bottom p {
		text-align: left;
	}

}