/*
	Modern visual refresh, layered on top of main.css / style.css / bootstrap.css.
	Keeps the existing palette, logo and hero photo; only restyles chrome, cards,
	forms and typography. Loaded last so same-specificity rules win by cascade order.
*/

:root {
	--dysr-ink: #2b252c;
	--dysr-abyss: #1c0920;
	--dysr-plum: #483949;
	--dysr-blue: #0072bc;
	--dysr-blue-light: #4980c0;
	--dysr-mist: #f0f4f4;
	--dysr-slate: #5b5b5b;
	--dysr-white: #ffffff;
	--dysr-shadow: rgba(43, 37, 44, 0.12);
}

/* Type */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dysr-plum);
}

/* Buttons */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
	border-radius: 2em;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 0.4em 1em -0.2em rgba(0, 114, 188, 0.4);
	transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

	input[type="button"]:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	button:hover,
	.button:hover {
		transform: translateY(-2px);
		box-shadow: 0 0.6em 1.4em -0.2em rgba(0, 114, 188, 0.45);
	}

/* Nav */

#nav {
	padding: 1.75em 0 1.75em 0;
}

	#nav > ul {
		height: auto;
		border: 0;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-radius: 999px;
		padding: 0.4em 0.5em;
	}

		#nav > ul:before,
		#nav > ul:after {
			display: none;
		}

		#nav > ul > li {
			margin: 0 0.15em;
			border-radius: 999px;
			padding: 0.6em 1.1em;
			border: 0;
			font-size: 0.9em;
			font-weight: 600;
		}

			#nav > ul > li.active {
				background: rgba(255, 255, 255, 0.18);
			}

			#nav > ul > li > a:hover,
			#nav > ul > li > span:hover {
				color: #bcdcf5;
			}

body:not(.homepage) #nav > ul {
	background: rgba(43, 37, 44, 0.05);
}

	body:not(.homepage) #nav > ul > li > a,
	body:not(.homepage) #nav > ul > li > span {
		color: var(--dysr-plum);
	}

		body:not(.homepage) #nav > ul > li > a:hover,
		body:not(.homepage) #nav > ul > li > span:hover {
			color: var(--dysr-blue);
		}

		body:not(.homepage) #nav > ul > li.active {
			background: rgba(43, 37, 44, 0.08);
		}

/* Hero (homepage) */

body.homepage #header:after {
	background-color: var(--dysr-blue);
}

body.homepage #header {
	background-color: var(--dysr-blue);
	background-image:
		linear-gradient(180deg, rgba(28, 9, 32, 0.28) 0%, rgba(28, 9, 32, 0.02) 40%, rgba(28, 9, 32, 0.4) 100%),
		url("../../Images/header.jpg");
	background-size: cover;
	filter: saturate(1.35) contrast(1.06);
}

/* Flat header (non-homepage pages) */

body:not(.homepage) #header {
	background: var(--dysr-white);
	box-shadow: 0 1px 0 0 var(--dysr-shadow);
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75em 2em;
}

	body:not(.homepage) #header .image-left {
		position: static;
	}

	body:not(.homepage) #header #logo img {
		height: 44px;
		width: auto;
	}

	body:not(.homepage) #nav {
		position: static;
		width: auto;
		padding: 0;
	}

/* Banner tagline */

#banner {
	margin-top: 40px;
	padding: 3.5em 0 3.5em 0;
}

	#banner header > h2 {
		font-size: 1.6em;
		font-weight: 300;
		color: var(--dysr-plum);
	}

		#banner header > h2:before {
			content: "Jacksonville, FL — Software Consulting";
			display: block;
			font-size: 0.55em;
			font-weight: 600;
			letter-spacing: 0.14em;
			text-transform: uppercase;
			color: var(--dysr-blue);
			margin-bottom: 0.75em;
		}

/* Services grid (replaces the auto-scrolling carousel) */

.services {
	padding: 4em 0 5em 0;
	background: var(--dysr-mist);
}

	.services .section-header {
		text-align: center;
		max-width: 40em;
		margin: 0 auto 2.5em auto;
		padding: 0 1.5em;
	}

	.services-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 2em;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 2em;
	}

		.services-grid > article {
			margin-bottom: 0;
			background: var(--dysr-white);
			border-radius: 1em;
			overflow: hidden;
			box-shadow: 0 0.5em 1.5em -0.3em var(--dysr-shadow);
			transition: transform 0.25s ease, box-shadow 0.25s ease;
		}

			.services-grid > article:hover {
				transform: translateY(-0.4em);
				box-shadow: 0 1em 2em -0.3em var(--dysr-shadow);
			}

			.services-grid > article .image.featured {
				margin: 0;
			}

				.services-grid > article .image.featured img {
					width: 100%;
					height: 11em;
					object-fit: cover;
					display: block;
				}

			.services-grid > article header {
				margin: 1.1em 1.25em 0.5em 1.25em;
			}

				.services-grid > article header h3 {
					font-size: 1.1em;
				}

			.services-grid > article p {
				margin: 0;
				padding: 0 1.25em 1.5em 1.25em;
				color: var(--dysr-slate);
				font-size: 0.95em;
				line-height: 1.6;
			}

/* Agile steps */

#main > header > .agile-intro {
	box-sizing: border-box;
	width: 100%;
	max-width: 46em;
	margin: 0 auto 2.5em auto;
	text-align: left;
}

.agile-image {
	margin: 0 0 3em 0;
}

.agile-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2em;
	text-align: left;
}

	.agile-steps .step {
		background: var(--dysr-white);
		border-radius: 1em;
		padding: 1.75em 1.5em;
		box-shadow: 0 0.5em 1.5em -0.3em var(--dysr-shadow);
	}

	.step-number {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.25em;
		height: 2.25em;
		border-radius: 999px;
		background: var(--dysr-blue);
		color: #fff;
		font-weight: 600;
		margin-bottom: 0.75em;
	}

	.agile-steps h3 {
		margin: 0 0 0.5em 0;
		font-size: 1.1em;
	}

	.agile-steps p {
		color: var(--dysr-slate);
		font-size: 0.95em;
		line-height: 1.6;
		margin: 0;
	}

/* Footer */

#footer .row {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5em;
	justify-content: center;
}

	#footer .row > section {
		flex: 1 1 260px;
		max-width: 320px;
		width: auto;
	}

#footer .icon.circled {
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
}

.formControl {
	display: block;
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0.6em;
	color: #fff;
	padding: 0.75em 1em;
	margin-bottom: 0.75em;
	font-family: inherit;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

	.formControl::placeholder {
		color: rgba(255, 255, 255, 0.55);
	}

	.formControl:focus {
		outline: 0;
		border-color: #fff;
		background: rgba(255, 255, 255, 0.14);
	}

#footer button[type="submit"] {
	margin-top: 0.25em;
}

@media screen and (max-width: 736px) {
	body.homepage #header h2 {
		font-size: 2.1em;
	}

	body:not(.homepage) #header {
		flex-wrap: wrap;
		gap: 0.75em;
		position: static;
	}
}