/* ==========================================================================
   Apollo Custom Manufacturing
   Foundation: reset, design tokens, typography, buttons, forms
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Public+Sans:wght@400;500;600;700&display=swap');

/* --- Design tokens --------------------------------------------------- */

:root {
	--navy: #19197b;
	--navy-deep: #111225;
	--gold: #ffba00;
	--ink: #1c1d2b;
	--body: #3c3e52;
	--muted: #6b6d80;
	--faint: #8a8ca0;
	--line: #e3e3ec;
	--panel: #f6f5f2;
	--white: #ffffff;

	/* Status. Kept separate from the brand palette. */
	--good: #2e7d44;

	--font-display: "Oswald", "Arial Narrow", Helvetica, Arial, sans-serif;
	--font-body: "Public Sans", Helvetica, Arial, sans-serif;

	--shell: 78rem;
	--gutter: 1.5rem;
	--header-h: 7rem;
}

/* --- Reset ------------------------------------------------------------ */

*, *::before, *::after {
	box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video, input {
	margin: 0;
	padding: 0;
	border: 0;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--white);
	color: var(--body);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	display: block;
}

ul, ol {
	list-style: none;
}

/* --- Typography ------------------------------------------------------- */

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.1rem; }
h5 { font-size: 0.95rem; }

p {
	margin-bottom: 1em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--navy);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--gold);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

/* Eyebrow label above a heading */
.eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 0.7em;
}

/* --- Layout helpers --------------------------------------------------- */

/* Centred content column */
.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Full-bleed band that escapes any constrained parent */
.bleed {
	width: 100vw;
	position: relative;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}

/* --- Section bands ----------------------------------------------------- */
/* A full-width strip of page. Use on any page, not just the homepage. */

.band {
	width: 100vw;
	position: relative;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding: 4rem var(--gutter);
}

.band.bandPanel {
	background-color: var(--panel);
}

.band.bandDark {
	background-color: var(--navy-deep);
	color: #c7c8d6;
}

.band.bandNavy {
	background-color: var(--navy);
	color: #c7c8d6;
}

.band.bandDark h1, .band.bandDark h2, .band.bandDark h3,
.band.bandNavy h1, .band.bandNavy h2, .band.bandNavy h3 {
	color: var(--white);
}

.bandInner {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
}

@media (max-width: 59.9rem) {
	.band {
		padding-block: 3rem;
	}
}

/* --- Section heading row ----------------------------------------------- */

.sectionHead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.sectionEyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 0.5rem;
}

/* Title and count share a row, any description sits under both */
.sectionTitleRow {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	flex-wrap: wrap;
}

/* Count or label reads as a tag against the heading */
.sectionCount {
	display: inline-block;
	padding: 0.32em 0.7em;
	background-color: var(--panel);
	border: 1px solid var(--line);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--navy);
	white-space: nowrap;
}

.sectionSub {
	max-width: 68ch;
	margin: 0.6rem 0 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--muted);
}

.sectionLink {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--navy);
	border-bottom: 2px solid var(--navy);
	padding-bottom: 0.15rem;
}

/* Only holds its line when it is sharing a row with a heading. Left
   unscoped it pushes a long link in body copy past the viewport, which
   it was doing to the homepage split band on a phone. */
.sectionHead .sectionLink {
	white-space: nowrap;
}

.sectionLink::after {
	content: " \2192";
}

.sectionLink:hover {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

.bandDark .sectionLink,
.bandNavy .sectionLink {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

.bandDark .sectionLink:hover,
.bandNavy .sectionLink:hover {
	color: var(--white);
	border-bottom-color: var(--white);
}

/* Keeps the YouTube subscribe widget from stretching the heading row */
.ytSubscribe {
	flex: 0 0 auto;
	line-height: 1;
}

/* --- Record hero -------------------------------------------------------- */
/* Title band for a single product, build or service page. */

.recordHero h1 {
	max-width: 24ch;
	margin-bottom: 0.5rem;
}

.recordVendor {
	margin-bottom: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #a9abc0;
}

.recordVendor b {
	color: var(--white);
	font-weight: 700;
}

/* --- Notice callout ----------------------------------------------------- */

/* Block, not flex, so a sentence containing a link stays one sentence */
p.noticeBar {
	display: block;
	position: relative;
	margin: 1.5rem 0 0;
	padding: 0.9rem 1.25rem 0.9rem 3.1rem;
	background-color: #f0f8f2;
	border-left: 4px solid var(--good);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.55;
	color: #1d5c33;
}

p.noticeBar a {
	color: #1d5c33;
	text-decoration: underline;
}

p.noticeBar a:hover {
	color: var(--good);
}

p.noticeBar::before {
	content: "\2713";
	position: absolute;
	left: 1.1rem;
	top: 0.85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background-color: var(--good);
	color: var(--white);
	font-size: 0.78rem;
	font-weight: 700;
}

/* --- Spec table --------------------------------------------------------- */
/* Label and value pairs, for the at-a-glance facts on a record page. */

table.specTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}

table.specTable caption {
	padding-bottom: 0.7rem;
	margin-bottom: 0.2rem;
	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.specTable th,
table.specTable td {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

table.specTable tr:last-child th,
table.specTable tr:last-child td {
	border-bottom: 0;
}

table.specTable th {
	width: 12rem;
	text-align: left;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--faint);
}

table.specTable td {
	text-align: right;
	font-weight: 700;
	color: var(--ink);
}

table.specTable td.specYes {
	color: var(--navy);
}

table.specTable td.specNo {
	color: var(--faint);
	font-weight: 500;
}

/* --- Accordion --------------------------------------------------------- */
/* Disclosure list, used for terms on product pages and the FAQ. */

div.termsList {
	max-width: 58rem;
	border-top: 1px solid var(--line);
}

details.termsItem {
	border-bottom: 1px solid var(--line);
}

details.termsItem summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--ink);
}

/* Hide the default disclosure marker in both engines */
details.termsItem summary::-webkit-details-marker {
	display: none;
}

details.termsItem summary::marker {
	content: "";
}

details.termsItem summary:hover {
	color: var(--navy);
}

/* Plus that becomes a minus when the item is open */
details.termsItem summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.85rem;
	height: 0.85rem;
	background-image:
		linear-gradient(var(--navy), var(--navy)),
		linear-gradient(var(--navy), var(--navy));
	background-size: 100% 2px, 2px 100%;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: transform 0.2s ease;
}

details.termsItem[open] summary::after {
	background-size: 100% 2px, 0 100%;
	transform: rotate(180deg);
}

div.termsBody {
	padding: 0 0 1.6rem;
	max-width: 46rem;
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--body);
}

div.termsBody p {
	margin-bottom: 1em;
}

div.termsBody p:last-child {
	margin-bottom: 0;
}

div.termsBody a {
	text-decoration: underline;
}

div.termsBody strong {
	color: var(--ink);
}


/* --- Card grid --------------------------------------------------------- */

.cardGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.5rem;
}

.cardGrid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cardGrid.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cardGrid.cols5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 74rem) {
	.cardGrid.cols4,
	.cardGrid.cols5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 59.9rem) {
	.cardGrid,
	.cardGrid.cols3,
	.cardGrid.cols4,
	.cardGrid.cols5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

@media (max-width: 40rem) {
	.cardGrid.cols3 {
		grid-template-columns: 1fr;
	}
}

/* --- Card -------------------------------------------------------------- */

.card {
	display: flex;
	flex-direction: column;
	background-color: var(--white);
	border: 1px solid var(--line);
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
	box-shadow: 0 10px 24px rgba(17, 18, 37, 0.12);
	transform: translateY(-3px);
}

.cardImage {
	position: relative;
	height: 11rem;
	background-color: var(--panel);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.cardBadge {
	position: absolute;
	top: 0.65rem;
	left: 0.65rem;
	background-color: var(--navy);
	color: var(--white);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.35em 0.7em;
}

.cardBody {
	flex: 1 1 auto;
	padding: 1rem 1.1rem 1.25rem;
}

.cardTitle {
	display: block;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
}

.card:hover .cardTitle {
	color: var(--navy);
}

.cardMeta {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--faint);
}

/* When the meta sits above the title it reads as a category tag */
.cardMeta:first-child {
	margin-top: 0;
	margin-bottom: 0.4rem;
	color: var(--navy);
}

.cardDesc {
	margin-top: 0.5rem;
	margin-bottom: 0;
	font-size: 0.84rem;
	line-height: 1.6;
	color: var(--muted);
}

.cardDesc:empty {
	display: none;
}

/* Text-only card. No image, so it needs its own breathing room. */
.card.cardPlain .cardBody,
.card.cardNavy .cardBody {
	padding: 1.6rem 1.5rem;
}

.card.cardPlain {
	border-top: 3px solid var(--gold);
}

/* Inverted card, for the one item in a row that should stand out */
.card.cardNavy {
	background-color: var(--navy);
	border-color: var(--navy);
}

.card.cardNavy .cardTitle {
	color: var(--white);
}

.card.cardNavy:hover .cardTitle {
	color: var(--gold);
}

.card.cardNavy .cardDesc {
	color: #c7c8d6;
}

.card.cardNavy .cardMeta:first-child,
.card.cardPlain .cardMeta:first-child {
	color: var(--gold);
}

/* Feature card: gold rule and icon over a navy heading, then a spec list */
.card.cardFeature {
	border-top: 3px solid var(--gold);
}

.card.cardFeature .cardBody {
	padding: 1rem 1rem 1.15rem;
}

.card.cardFeature .cardTitle {
	font-family: var(--font-display);
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
}

.card.cardFeature:hover .cardTitle {
	color: var(--ink);
}

.card.cardFeature .cardTitle i {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 1.15rem;
	color: var(--gold);
}

/* The heading text already sits below the icon, so the break is redundant */
.card.cardFeature .cardTitle br {
	display: none;
}

.card.cardFeature .cardDesc {
	margin-top: 0.45rem;
	font-size: 0.82rem;
	line-height: 1.55;
}

/* One spec per row, separated by hairlines */
ul.cardSpecList {
	margin: 0.55rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--muted);
}

ul.cardSpecList li {
	padding: 0.32rem 0;
	border-top: 1px solid var(--line);
}

/* Cards that are not links should not lift on hover */
.card:not(a):hover {
	transform: none;
	box-shadow: none;
}

/* Call to action at the foot of a card */
.cardAction {
	display: inline-block;
	margin-top: 1.1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--navy);
	border-bottom: 2px solid var(--navy);
	padding-bottom: 0.15rem;
}

.cardAction::after {
	content: " \2192";
}

.card:hover .cardAction {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

.card.cardNavy .cardAction {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

.card.cardNavy:hover .cardAction {
	color: var(--white);
	border-bottom-color: var(--white);
}

@media (max-width: 59.9rem) {
	.cardImage {
		height: 9rem;
	}
}

/* --- Split band: text one side, image the other ------------------------ */

.splitBand .bandInner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3.5rem;
	align-items: center;
}

.splitBand .splitImage {
	height: 21rem;
	overflow: hidden;
}

.splitBand .splitImage figure {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Reverse puts the image first on wide screens */
.splitBand.splitReverse .splitImage {
	order: -1;
}

@media (max-width: 59.9rem) {
	.splitBand .bandInner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.splitBand .splitImage {
		height: 15rem;
		order: 0;
	}
}

/* --- Buttons ---------------------------------------------------------- */

a.btn, .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	background-color: var(--gold);
	color: var(--navy);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.9em 1.75em;
	border: 2px solid var(--gold);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

/* Outlined variant, for use on dark imagery */
a.btn.hollow {
	background-color: transparent;
	border-color: var(--white);
	color: var(--white);
}

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

/* Quiet variant, for use on light backgrounds */
a.btn.ghost {
	background-color: transparent;
	border-color: var(--navy);
	color: var(--navy);
}

a.btn.ghost:hover {
	background-color: var(--navy);
	color: var(--white);
}

/* --- Forms ------------------------------------------------------------ */

input, textarea, select, button {
	font-family: inherit;
	font-size: 1rem;
}

section.formGroup {
	padding: 0 1.25rem;
}

section.formGroup > div {
	margin-bottom: 0.75rem;
	position: relative;
}

section.formGroup label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--body);
	margin-bottom: 0.35rem;
}

section.formGroup input,
section.formGroup select,
section.formGroup textarea {
	display: block;
	width: 100%;
	padding: 0.7em 0.8em;
	border: 1px solid var(--line);
	background-color: var(--white);
	color: var(--ink);
	transition: border-color 0.15s ease;
}

section.formGroup textarea {
	height: 8rem;
	resize: vertical;
}

section.formGroup input:hover,
section.formGroup select:hover,
section.formGroup textarea:hover {
	border-color: var(--faint);
}

section.formGroup input:focus,
section.formGroup select:focus,
section.formGroup textarea:focus {
	border-color: var(--navy);
	outline: none;
}

section.formGroup input[type='button'] {
	background-color: var(--gold);
	color: var(--navy);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 2px solid var(--gold);
	padding: 0.9em 1.75em;
	width: auto;
	margin-top: 1rem;
	cursor: pointer;
}

section.formGroup input[type='button']:hover {
	background-color: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

/* Validation states (jQuery validate) */
label.error {
	position: absolute;
	right: 0.6rem;
	top: 0;
	width: auto !important;
	font-size: 0.7rem;
	font-weight: 600;
	color: #b91515;
	pointer-events: none;
}

input.error, textarea.error {
	border-color: #b91515 !important;
}

/* --- Quote modal ------------------------------------------------------ */

div#overscan {
	display: none;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(17, 18, 37, 0.7);
	z-index: 130;
	overflow-y: auto;
}

section#viewBlock {
	display: block;
	position: relative;
	background-color: var(--white);
	width: 40rem;
	max-width: calc(100% - 2rem);
	min-height: 20rem;
	margin: 4rem auto;
	padding: 1.5rem;
	z-index: 150;
}

section#viewBlock menu {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

section#viewBlock menu a {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--ink) !important;
}

/* --- Motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}