/* ==========================================================================
   Apollo Custom Manufacturing
   Services
   ========================================================================== */

/* --- Hero -------------------------------------------------------------- */

.servicesHero h1 {
	max-width: 22ch;
	margin-bottom: 1.1rem;
}

.servicesHero p {
	max-width: 46rem;
	font-size: 1rem;
	line-height: 1.75;
	color: #c7c8d6;
}

.servicesHero a.btn {
	margin-top: 1.25rem;
}

/* The services notice sits under the hero, so it needs its own top gap */
body#body_services p.noticeBar {
	max-width: 52rem;
	margin-top: 2.5rem;
}

/* --- Service block ----------------------------------------------------- */

body#body_services article {
	max-width: 52rem;
	margin: 3rem 0 0;
	padding: 2rem;
	background-color: var(--white);
	border: 1px solid var(--line);
	border-top: 3px solid var(--navy);
}

body#body_services article h3 {
	margin-bottom: 0.35rem;
}

p.serviceCert {
	margin-bottom: 1.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--faint);
}

p.serviceCert strong {
	color: var(--navy);
	font-weight: 700;
}

/* --- Priced stage table ------------------------------------------------ */

table.serviceTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

table.serviceTable th {
	padding: 0 0 0.7rem;
	border-bottom: 2px solid var(--navy);
	text-align: left;
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--faint);
}

table.serviceTable th:last-child,
table.serviceTable td.stPrice {
	text-align: right;
	white-space: nowrap;
}

table.serviceTable td {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	line-height: 1.65;
	color: var(--body);
}

table.serviceTable tr:last-child td {
	border-bottom: 0;
	padding-bottom: 0;
}

table.serviceTable td.stStage {
	width: 11rem;
	padding-right: 1.5rem;
	font-weight: 700;
	color: var(--ink);
}

table.serviceTable td.stPrice {
	width: 9rem;
	padding-left: 1.5rem;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--navy);
}

table.serviceTable td.stPriceVaries {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	font-style: italic;
	color: var(--muted);
	white-space: normal;
}

/* --- Stacked on small screens ------------------------------------------ */

@media (max-width: 47rem) {

	body#body_services article {
		padding: 1.5rem 1.25rem;
	}

	table.serviceTable thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	table.serviceTable tr {
		display: block;
		padding-block: 1.1rem;
		border-bottom: 1px solid var(--line);
	}

	table.serviceTable tr:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	table.serviceTable td,
	table.serviceTable td.stStage,
	table.serviceTable td.stPrice {
		display: block;
		width: auto;
		padding: 0;
		border-bottom: 0;
		text-align: left;
	}

	table.serviceTable td.stStage {
		margin-bottom: 0.4rem;
	}

	table.serviceTable td.stPrice {
		margin-top: 0.6rem;
	}
}