/*!
 * Harvardbridge Automotives — components
 * @version 1.3.0
 * Changelog:
 * 1.3.0 — Hero background image with a measured scrim.
 * 1.2.0 — Header separated from the page with its own surface, navigation moved onto the
 *         logo row and dropped below body size, logo enlarged so it leads the header.
 * 1.1.0 — Logo display size raised to 40px in the header, 44px from tablet up and 48px in
 *         the footer, so the mark's thinnest stroke lands on whole pixels.
 * 1.0.0 — Initial build.
 */

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */

/* The header sits on carbon, one step lighter than the page. On a dark site a 1px border
   between two identical surfaces is invisible, and the header appeared to bleed into the
   content. The surface change does the separating; the border and the amber hairline
   underneath finish it. */
.hba-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(22, 28, 36, 0.97);
	border-bottom: 1px solid var(--hba-slate);
	box-shadow: 0 1px 0 rgba(245, 179, 1, 0.22), 0 10px 24px rgba(0, 0, 0, 0.28);
	backdrop-filter: saturate(140%) blur(8px);
}

.hba-header.is-scrolled {
	box-shadow: 0 1px 0 rgba(245, 179, 1, 0.3), 0 14px 34px rgba(0, 0, 0, 0.55);
}

.hba-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hba-space-md);
	min-height: 72px;
	padding-block: var(--hba-space-sm);
}

.hba-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

/* 40px, not 34: the mark's thinnest element is 3.2 units of a 64-unit artboard, which
   resolves to two whole pixels at this height and to a blurry 1.7 at the old one. The logo
   also has to out-weigh the navigation beside it — when they were the same size the header
   read as seven links with a picture attached. */
.hba-logo img {
	width: auto;
	height: 42px;
}

@media (min-width: 900px) {
	.hba-logo img {
		height: 52px;
	}
}

.hba-footer .hba-logo img {
	height: 52px;
}

.hba-logo--text {
	font-family: var(--hba-font-display);
	font-weight: 700;
	font-size: var(--hba-step-1);
	letter-spacing: -0.02em;
}

.hba-header__actions {
	display: flex;
	align-items: center;
	gap: var(--hba-space-xs);
}

.hba-navtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hba-tap);
	height: var(--hba-tap);
	padding: 0;
	background: transparent;
	color: var(--hba-chrome);
	border: var(--hba-border);
	border-radius: var(--hba-radius-md);
	cursor: pointer;
}

.hba-navtoggle .hba-icon--close { display: none; }
.hba-navtoggle[aria-expanded="true"] .hba-icon--close { display: block; }
.hba-navtoggle[aria-expanded="true"] .hba-icon--menu { display: none; }

.hba-nav {
	display: none;
	flex-basis: 100%;
	padding-block: var(--hba-space-md) var(--hba-space-lg);
	border-top: var(--hba-border);
}

.hba-nav.is-open {
	display: block;
}

.hba-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hba-nav li + li {
	margin-top: 0;
	border-top: 1px solid rgba(233, 237, 242, 0.06);
}

.hba-nav a {
	display: block;
	min-height: var(--hba-tap);
	padding: var(--hba-space-sm) 0;
	font-family: var(--hba-font-display);
	font-size: var(--hba-step-1);
	text-decoration: none;
}

.hba-nav .current-menu-item > a,
.hba-nav .current_page_item > a {
	color: var(--hba-solar);
}

.hba-nav .sub-menu {
	margin-left: var(--hba-space-md);
}

.hba-nav .sub-menu a {
	font-size: var(--hba-step-0);
	color: var(--hba-steel);
}

@media (min-width: 900px) {
	.hba-navtoggle { display: none; }

	.hba-nav {
		display: block;
		flex: 1 1 auto;
		flex-basis: auto;
		padding: 0;
		margin-left: var(--hba-space-lg);
		border-top: 0;
	}

	.hba-nav ul {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: clamp(0.9rem, 1.6vw, 1.75rem);
	}

	.hba-nav li + li {
		border-top: 0;
	}

	/* Navigation is signage, not reading matter. It sits a step below body size, in the body
	   face rather than the display face, so it stops competing with the logo and the headings. */
	.hba-nav a {
		min-height: 0;
		padding: var(--hba-space-2xs) 0;
		font-family: var(--hba-font-body);
		font-size: 0.94rem;
		font-weight: 500;
		letter-spacing: 0.005em;
		white-space: nowrap;
	}

	.hba-nav .sub-menu {
		position: absolute;
		z-index: 70;
		display: none;
		min-width: 15rem;
		margin: 0;
		padding: var(--hba-space-xs) var(--hba-space-md);
		background: var(--hba-carbon);
		border: var(--hba-border);
		border-radius: var(--hba-radius-md);
		box-shadow: var(--hba-shadow-raised);
	}

	.hba-nav li:hover > .sub-menu,
	.hba-nav li:focus-within > .sub-menu {
		display: block;
	}

	.hba-nav .sub-menu li {
		display: block;
	}
}

.hba-header__promise {
	display: none;
	padding-block: 6px;
	background: var(--hba-obsidian);
	border-top: 1px solid rgba(233, 237, 242, 0.06);
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	color: var(--hba-steel);
}

@media (min-width: 700px) {
	.hba-header__promise { display: block; }
}

/* ------------------------------------------------------------------
   Buttons — say what happens, never "Submit"
   ------------------------------------------------------------------ */

.hba-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hba-space-xs);
	min-height: var(--hba-tap);
	padding: var(--hba-space-sm) var(--hba-space-lg);
	border: 1px solid transparent;
	border-radius: var(--hba-radius-pill);
	font-family: var(--hba-font-display);
	font-size: var(--hba-step-0);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--hba-transition), background-color var(--hba-transition), border-color var(--hba-transition);
}

.hba-btn:active {
	transform: translateY(1px);
}

.hba-btn--primary {
	background: var(--hba-solar);
	color: var(--hba-on-cta); /* ink on amber. white on amber is 1.85:1 and fails */
}

.hba-btn--primary:hover {
	background: #FFC42B;
	color: var(--hba-on-cta);
}

.hba-btn--ghost {
	background: transparent;
	color: var(--hba-chrome);
	border-color: var(--hba-slate);
}

.hba-btn--ghost:hover {
	border-color: var(--hba-solar);
	color: var(--hba-chrome);
}

.hba-section--light .hba-btn--ghost {
	color: var(--hba-ink);
	border-color: rgba(11, 15, 20, 0.25);
}

.hba-btn--quiet {
	padding-inline: 0;
	background: none;
	color: var(--hba-chrome);
	border: 0;
	border-radius: 0;
	text-decoration: underline;
	text-decoration-color: var(--hba-solar);
}

.hba-section--light .hba-btn--quiet {
	color: var(--hba-ink);
	text-decoration-color: var(--hba-solar-text);
}

.hba-btn--sm {
	min-height: 44px;
	padding: var(--hba-space-xs) var(--hba-space-md);
	font-size: var(--hba-step--1);
}

.hba-btn--block {
	display: flex;
	width: 100%;
}

.hba-icon {
	flex-shrink: 0;
}

/* ------------------------------------------------------------------
   CTA cluster
   ------------------------------------------------------------------ */

.hba-cta {
	margin-block: var(--hba-space-lg);
}

.hba-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hba-space-sm);
}

.hba-cta--centre {
	text-align: center;
}

.hba-cta--centre .hba-cta__actions {
	justify-content: center;
}

.hba-cta--centre .hba-cta__note {
	margin-inline: auto;
}

.hba-cta__note {
	margin-top: var(--hba-space-sm);
	margin-bottom: 0;
	color: var(--hba-steel);
	font-size: var(--hba-step--1);
}

.hba-section--light .hba-cta__note {
	color: var(--hba-ink-muted);
}

@media (max-width: 479px) {
	.hba-cta__actions .hba-btn {
		flex: 1 1 100%;
	}
}

/* CTA band, used after each major section */
.hba-ctaband {
	position: relative;
	padding: var(--hba-space-xl) 0;
	background: var(--hba-carbon);
	border-block: var(--hba-border);
}

.hba-ctaband::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--hba-lightbar);
}

/* ------------------------------------------------------------------
   Sticky action bar — the thumb lives in the bottom third of the screen
   ------------------------------------------------------------------ */

.hba-actionbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1px;
	background: var(--hba-slate);
	border-top: var(--hba-border);
	box-shadow: var(--hba-shadow-bar);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.hba-actionbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: var(--hba-tap-lg);
	padding: var(--hba-space-xs);
	background: var(--hba-carbon);
	color: var(--hba-chrome);
	font-family: var(--hba-font-display);
	font-size: var(--hba-step--1);
	font-weight: 700;
	text-decoration: none;
}

.hba-actionbar__item--primary {
	background: var(--hba-solar);
	color: var(--hba-on-cta);
}

.hba-actionbar__item--primary:hover {
	color: var(--hba-on-cta);
}

@media (min-width: 900px) {
	.hba-actionbar { display: none; }
}

/* ------------------------------------------------------------------
   The service promise — answers "do you come to me?" above the fold
   ------------------------------------------------------------------ */

.hba-promise {
	display: flex;
	align-items: flex-start;
	gap: var(--hba-space-sm);
	max-width: none;
	color: var(--hba-chrome);
}

.hba-promise .hba-icon {
	margin-top: 0.2em;
	color: var(--hba-solar);
}

.hba-promise--banner {
	padding: var(--hba-space-md);
	background: var(--hba-carbon);
	border: var(--hba-border);
	border-left: 3px solid var(--hba-solar);
	border-radius: var(--hba-radius-md);
}

.hba-section--light .hba-promise {
	color: var(--hba-ink);
}

.hba-section--light .hba-promise .hba-icon {
	color: var(--hba-solar-text);
}

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

.hba-hero {
	position: relative;
	padding-block: var(--hba-space-2xl) var(--hba-space-xl);
	background-image: var(--hba-panel-sheen);
	overflow: hidden;
}

/* The image sits under a scrim heavy enough that the headline never depends on what is
   behind it. Measured against the brightest pixel in the graphic — the amber light bar —
   chrome text still clears 12:1 through the scrim, so the type is readable wherever the
   image happens to land at a given viewport width. */
.hba-hero--image {
	background-image:
		linear-gradient(100deg, rgba(11, 15, 20, 0.97) 0%, rgba(11, 15, 20, 0.92) 45%, rgba(11, 15, 20, 0.78) 100%),
		var(--hba-panel-sheen),
		var(--hba-hero-image);
	background-size: cover, auto, cover;
	background-position: center, center, center 30%;
	background-repeat: no-repeat;
}

@media (min-width: 900px) {
	.hba-hero--image {
		background-image:
			linear-gradient(100deg, rgba(11, 15, 20, 0.96) 0%, rgba(11, 15, 20, 0.86) 52%, rgba(11, 15, 20, 0.66) 100%),
			var(--hba-panel-sheen),
			var(--hba-hero-image);
	}
}

.hba-hero__title {
	margin-bottom: var(--hba-space-md);
}

.hba-hero__title em {
	font-style: normal;
	color: var(--hba-solar);
}

.hba-hero__lede {
	max-width: 42ch;
	font-size: var(--hba-step-1);
	color: var(--hba-chrome);
}

.hba-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hba-space-md);
	margin-top: var(--hba-space-lg);
	padding-top: var(--hba-space-md);
	border-top: var(--hba-border);
	color: var(--hba-steel);
	font-size: var(--hba-step--1);
}

@media (min-width: 900px) {
	.hba-hero {
		padding-block: var(--hba-space-3xl);
	}
}

/* ------------------------------------------------------------------
   Tier cards
   ------------------------------------------------------------------ */

.hba-tiers {
	display: grid;
	gap: var(--hba-space-lg);
}

@media (min-width: 700px) {
	.hba-tiers { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
	.hba-tiers { grid-template-columns: repeat(4, 1fr); }
}

.hba-tier {
	display: flex;
	flex-direction: column;
	padding: var(--hba-space-lg);
	background: var(--hba-carbon);
	border: var(--hba-border);
	border-radius: var(--hba-radius-lg);
}

.hba-tier__head {
	padding-bottom: var(--hba-space-sm);
	border-bottom: var(--hba-border);
}

.hba-tier__name {
	margin-bottom: 2px;
	font-size: var(--hba-step-2);
}

.hba-tier__subtitle {
	margin: 0;
	color: var(--hba-steel);
	font-size: var(--hba-step--1);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.hba-tier__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: var(--hba-space-md) 0 var(--hba-space-xs);
}

.hba-tier__from,
.hba-tier__gst {
	color: var(--hba-steel);
	font-size: var(--hba-step--1);
}

.hba-tier__amount {
	font-family: var(--hba-font-display);
	font-size: var(--hba-step-3);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--hba-chrome);
}

.hba-tier__amount--quoted {
	font-size: var(--hba-step-1);
}

.hba-tier__meta {
	margin: 0 0 var(--hba-space-sm);
	color: var(--hba-solar);
	font-size: var(--hba-step--1);
	font-weight: 600;
}

.hba-tier__purpose {
	margin-bottom: var(--hba-space-sm);
}

.hba-tier__for {
	margin-bottom: var(--hba-space-md);
	color: var(--hba-steel);
	font-size: var(--hba-step--1);
}

.hba-tier__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hba-space-sm);
	margin: auto 0 0;
}

.hba-tiers__foot {
	margin-top: var(--hba-space-md);
	color: var(--hba-steel);
	font-size: var(--hba-step--1);
}

/* ------------------------------------------------------------------
   Prices in copy
   ------------------------------------------------------------------ */

.hba-price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	font-family: var(--hba-font-display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.hba-price__prefix,
.hba-price__gst {
	font-family: var(--hba-font-body);
	font-weight: 400;
	font-size: var(--hba-step--1);
	color: var(--hba-steel);
}

.hba-section--light .hba-price__prefix,
.hba-section--light .hba-price__gst {
	color: var(--hba-ink-muted);
}

.hba-price__amount {
	font-size: 1.35em;
}

.hba-price--quoted {
	font-family: var(--hba-font-body);
	font-weight: 600;
}

.hba-table__from {
	display: block;
	color: var(--hba-steel);
	font-size: 0.8em;
}

.hba-table__label {
	display: block;
	font-family: var(--hba-font-display);
}

.hba-table__hint {
	display: block;
	color: var(--hba-steel);
	font-weight: 400;
	font-size: 0.85em;
}

.hba-table__note {
	margin-top: var(--hba-space-sm);
	color: var(--hba-steel);
	font-size: var(--hba-step--1);
}

/* ------------------------------------------------------------------
   Chips — add-ons
   ------------------------------------------------------------------ */

.hba-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hba-space-xs);
	padding: 0;
	list-style: none;
}

.hba-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	margin: 0;
	padding: var(--hba-space-xs) var(--hba-space-md);
	background: var(--hba-carbon);
	border: var(--hba-border);
	border-radius: var(--hba-radius-pill);
	font-size: var(--hba-step--1);
}

.hba-chip__price {
	color: var(--hba-steel);
}

/* ------------------------------------------------------------------
   Status badges — icon and text label, never colour alone (WCAG 1.4.1)
   ------------------------------------------------------------------ */

.hba-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.2em 0.7em;
	border: 1px solid currentColor;
	border-radius: var(--hba-radius-pill);
	font-size: var(--hba-step--1);
	font-weight: 600;
	white-space: nowrap;
}

.hba-badge--paid,
.hba-badge--accepted { color: var(--hba-verified); }

.hba-badge--overdue,
.hba-badge--declined { color: var(--hba-alert); }

.hba-badge--draft,
.hba-badge--sent { color: var(--hba-steel); }

.hba-section--light .hba-badge--paid,
.hba-section--light .hba-badge--accepted { color: var(--hba-verified-text); }

.hba-section--light .hba-badge--overdue,
.hba-section--light .hba-badge--declined { color: var(--hba-alert-text); }

.hba-section--light .hba-badge--draft,
.hba-section--light .hba-badge--sent { color: var(--hba-ink-muted); }

/* Document numbers get read aloud over the phone. Unambiguous glyphs are functional. */
.hba-docnumber {
	font-family: var(--hba-font-mono);
	font-variant-numeric: tabular-nums slashed-zero;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------
   Cards, steps and process
   ------------------------------------------------------------------ */

.hba-card {
	padding: var(--hba-space-lg);
	background: var(--hba-carbon);
	border: var(--hba-border);
	border-radius: var(--hba-radius-lg);
}

.hba-section--light .hba-card {
	background: var(--hba-white);
	border: var(--hba-border-light);
}

/* Numbered because the order carries information: decontaminate, then correct,
   then protect. Doing them out of sequence produces a worse result. */
.hba-steps {
	counter-reset: hba-step;
	padding: 0;
	list-style: none;
}

.hba-steps > li {
	counter-increment: hba-step;
	position: relative;
	margin: 0;
	padding: var(--hba-space-md) 0 var(--hba-space-md) 3.25rem;
	border-bottom: var(--hba-border);
}

.hba-steps > li::before {
	content: counter(hba-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: var(--hba-space-md);
	font-family: var(--hba-font-mono);
	font-size: var(--hba-step-1);
	color: var(--hba-solar);
}

.hba-section--light .hba-steps > li {
	border-bottom: var(--hba-border-light);
}

.hba-section--light .hba-steps > li::before {
	color: var(--hba-solar-text);
}

.hba-steps > li h3 {
	margin-bottom: var(--hba-space-2xs);
	font-size: var(--hba-step-1);
}

/* ------------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------------ */

.hba-breadcrumbs {
	padding-block: var(--hba-space-sm);
	font-size: var(--hba-step--1);
	color: var(--hba-steel);
}

.hba-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hba-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5em;
	color: var(--hba-slate);
}

.hba-breadcrumbs li {
	margin: 0;
}

/* ------------------------------------------------------------------
   Entry content and archive
   ------------------------------------------------------------------ */

.hba-entry {
	padding-block: var(--hba-space-xl);
}

.hba-entry__title {
	margin-bottom: var(--hba-space-md);
}

.hba-entry__content > * {
	margin-bottom: var(--hba-space-md);
}

.hba-entry__meta {
	color: var(--hba-steel);
	font-size: var(--hba-step--1);
}

.hba-pagination {
	display: flex;
	gap: var(--hba-space-sm);
	padding-block: var(--hba-space-lg);
}

.hba-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hba-tap);
	min-height: var(--hba-tap);
	padding-inline: var(--hba-space-sm);
	border: var(--hba-border);
	border-radius: var(--hba-radius-md);
	text-decoration: none;
}

.hba-pagination .current {
	background: var(--hba-solar);
	color: var(--hba-on-cta);
	border-color: var(--hba-solar);
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

.hba-footer {
	margin-top: var(--hba-space-2xl);
	padding-block: var(--hba-space-xl);
	background: var(--hba-carbon);
	border-top: var(--hba-border);
	font-size: var(--hba-step--1);
}

.hba-footer__grid {
	display: grid;
	gap: var(--hba-space-lg);
}

@media (min-width: 700px) {
	.hba-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.hba-footer h2 {
	margin-bottom: var(--hba-space-xs);
	font-size: var(--hba-step-0);
	text-transform: uppercase;
	letter-spacing: var(--hba-tracking-eyebrow);
	color: var(--hba-steel);
}

.hba-footer ul {
	padding: 0;
	list-style: none;
}

.hba-footer li {
	margin: 0;
}

.hba-footer a {
	display: inline-block;
	padding-block: 0.35em;
	text-decoration: none;
}

.hba-footer a:hover {
	text-decoration: underline;
}

.hba-footer__legal {
	margin-top: var(--hba-space-lg);
	padding-top: var(--hba-space-md);
	border-top: var(--hba-border);
	color: var(--hba-steel);
}

.hba-footer__legal p {
	max-width: none;
	margin-bottom: var(--hba-space-2xs);
}

/* ------------------------------------------------------------------
   404
   ------------------------------------------------------------------ */

.hba-404 {
	padding-block: var(--hba-space-2xl);
	text-align: left;
}

.hba-404__code {
	font-family: var(--hba-font-mono);
	font-size: var(--hba-step-1);
	color: var(--hba-solar);
}