/* SparxDSM additions on top of the Miniport template (main.css) */

.feather-32px {
	width: 32px;
	height: 32px;
}

/* Hero */

	#top .tagline {
		font-size: 1.5em;
		line-height: 1.5em;
		color: #444;
		margin-bottom: 0.75em;
	}

	#top .lead {
		font-size: 1.1em;
		line-height: 1.75em;
		max-width: 34em;
	}

	#top .credentials {
		font-size: 0.95em;
		line-height: 1.5em;
		color: #777;
		margin: 1.5em 0 0 0;
	}

	#top ul.actions li {
		margin: 0 1em 1em 0;
	}

	@media screen and (max-width: 980px) {
		#top .lead {
			margin-left: auto;
			margin-right: auto;
		}

		#top ul.actions li {
			margin: 0 0.5em 1em 0.5em;
		}
	}

/* Consulting cards: four across needs a little less padding */

	#consulting .box.style1 {
		padding: 2.5em 1.5em 3em 1.5em;
		height: 100%;
	}

	#handyman .box.style2 {
		height: 100%;
	}

	#handyman .box.style2 .image img {
		height: 12em;
		object-fit: cover;
	}

	#consulting .box.style1 p,
	#handyman .box.style2 p {
		margin-bottom: 0;
	}

/* Project cards: keep buttons lined up at the bottom */

	.box.project {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

		.box.project p {
			flex-grow: 1;
		}

	.button.small {
		font-size: 0.9em;
		padding: 0 1.5em;
		height: 2.75em;
		line-height: 2.75em;
	}

/* Contact */

	.contact-grid {
		margin-top: 1em;
	}

		.contact-grid > div {
			margin-bottom: 1.5em;
		}

		.contact-grid .feather {
			color: #43B3E0;
		}

		.contact-grid h3 {
			margin: 0.5em 0 0.25em 0;
		}

		.contact-grid a {
			color: #fff;
			border-bottom: none;
		}

		.contact-grid .vanity {
			font-size: 0.85em;
			color: #777;
		}

	#contact .credits {
		font-size: 0.75em;
		color: #666;
		margin: 1em 0 0 0;
	}

		#contact .credits a,
		#copyright a {
			color: #888;
		}

/* Nav: five links need to fit on a phone */

	@media screen and (max-width: 480px) {
		#nav a {
			padding: 0 0.45em;
			font-size: 0.9em;
		}
	}

/* Line breaks: keep short phrases together and avoid one-word last lines */

	.nowrap {
		white-space: nowrap;
	}

	h1, h2, h3,
	header p,
	#top .tagline {
		text-wrap: balance;
	}

	p {
		text-wrap: pretty;
	}