/* ==================================================================
 * components.css — reusable pieces
 *
 * Every rule in the "legacy" blocks below was moved here verbatim from
 * style.css 0.2.1. Class names and computed values are unchanged on
 * purpose: fourteen templates target them. Only the new names at the
 * bottom of this file (evidence strip, problem/solution grid, fit table,
 * timeline, metric card, next-step panel, FAQ, badges) are new code.
 *
 * Ground rules for new components:
 *   - no JS dependency, no icon font, no background image
 *   - a component that has nothing to say renders nothing at all
 *   - colour is never the only signal (Example state also changes border)
 * ================================================================== */

/* ---------- buttons (legacy: .btn / .btn--primary / .btn--ghost) ---------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 10px 18px; border-radius: var(--radius-md); border: 1px solid var(--line-2);
	background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600;
	text-decoration: none; cursor: pointer;
	/* a 39px-tall button is a miss on a phone; the floor is set once here */
	min-height: 44px; text-align: center;
}
.btn--primary { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn--primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: #fff; }
.btn--ghost { background: transparent; }

/* ---------- tag chips (legacy: .chips) ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.chips a { display: inline-block; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13.5px; text-decoration: none; color: var(--ink); }
.chips a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- product card (legacy: .card*) ---------- */

.card {
	border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden;
	background: #fff; display: flex; flex-direction: column;
}
.card__media { aspect-ratio: 4 / 3; background: var(--bg-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__brand { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.card__model { font-size: 19px; font-weight: 700; margin: 0; }
.card__model a { color: var(--ink); text-decoration: none; }
.card__meta { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.card__foot { margin-top: auto; padding-top: 10px; font-size: 13.5px; }

/* ---------- filter bar (legacy: .filters) ---------- */

.filters {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
	padding: 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md);
	margin-bottom: 24px;
}
.filters label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.filters input, .filters select {
	min-width: 180px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: var(--radius-md);
	font: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
.filters .btn { align-self: flex-end; }

/* ---------- specification table (legacy) ---------- */

.spec-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table thead th {
	background: var(--bg-2); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--ink-3-on-paper); font-weight: 700; white-space: nowrap;
}
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table td.is-right, .spec-table th.is-right { text-align: right; }
.spec-table td.is-nowrap { white-space: nowrap; }
.spec-table tbody tr:hover { background: #fafbfc; }
/* The size cell is a row header (<th scope="row">) but must not read as one:/n   it is a value, not a label. Font-weight kept at body weight so the table
   looks the same as it did when the cell was a <td>. */
.spec-table tbody th { font-weight: 400; }
.spec-missing { color: var(--ink-3); font-size: 13px; }

.notice-inline { font-size: 13.5px; color: var(--ink-3); margin: 14px 0 0; }

/* ---------- enquiry form (legacy) ---------- */

.form-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; background: #fff; }
.form-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.form-row--single { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
	padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-md);
	font: inherit; font-size: 15px; background: #fff; color: var(--ink); width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field--check { flex-direction: row; align-items: flex-start; gap: 10px; }
.field--check input { width: auto; margin-top: 3px; }
.field--check label { font-weight: 400; font-size: 13.5px; color: var(--ink-2); }
.form-hint { font-size: 13px; color: var(--ink-3); margin: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- status bar (legacy .status + new states) ---------- */

.status {
	border: 1px solid var(--line-2); border-left: 4px solid var(--amber);
	background: var(--bg-2); padding: 14px 16px; border-radius: var(--radius-md); margin-bottom: 20px;
}
.status--ok { border-left-color: #15803d; }
.status p { margin: 0; }
/* New states keep the same left-bar shape so a submit result never changes
   layout depending on which branch it took. */
.status--warn { border-left-color: var(--warn); background: var(--warn-soft); border-color: var(--warn-soft); }
.status--error { border-left-color: var(--danger); background: var(--danger-soft); border-color: var(--danger-soft); }

/* ==================================================================
 * Evidence strip
 *
 * One line: where the claim comes from, when, over what sample, who
 * looked. Plain text on purpose — a screenshot of a certificate is
 * unreadable to both a screen reader and a search index.
 * ================================================================== */

.evidence-strip {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
	margin: 16px 0 0; padding: 8px 12px;
	font-size: var(--fs-2); line-height: 1.5; color: var(--ink-2);
	background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--steel);
	border-radius: var(--radius-sm);
}
.evidence-strip a { color: var(--steel); }
.evidence-strip__source { color: var(--ink-2); }
.evidence-strip__time { font-variant-numeric: tabular-nums; }
.evidence-strip__prefix { font-weight: 700; color: var(--ink); }
.evidence-strip__sep { color: var(--ink-3); }
.evidence-strip time { font-variant-numeric: tabular-nums; }
.evidence-strip__scope { color: var(--ink-2); }
.evidence-strip__reviewer { color: var(--ink-3-on-paper); }

/* Example state: a different border *shape* and a different ground, so the
   difference survives greyscale and every form of colour blindness. */
.evidence-strip--example {
	background: var(--warn-soft);
	border-style: dashed;
	border-left-style: solid;
	border-left-color: var(--warn);
}

/* ==================================================================
 * Problem / Impact / What we do / Limits
 *
 * Desktop: four columns. Mobile: stacked with the column name repeated
 * above each value. Never a horizontal scroller — the Limits column is
 * the one a buyer most needs to read, and it is the one that falls off
 * the right edge of a scroller.
 * ================================================================== */

.ps-grid {
	margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md);
	overflow: hidden; background: #fff;
}
.ps-grid__head { display: none; }
.ps-grid__rows { margin: 0; padding: 0; list-style: none; }
.ps-row { border-bottom: 1px solid var(--line); }
.ps-row:last-child { border-bottom: 0; }
.ps-cell { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ps-cell:last-child { border-bottom: 0; }
.ps-cell p { margin: 0; font-size: var(--fs-3); color: var(--ink-2); }
.ps-cell--limits p { color: var(--ink-2); }
.ps-cell__label {
	font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--ink-3); margin: 0 0 4px;
}

@media (min-width: 861px) {
	.ps-grid__head {
		display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
		background: var(--paper); border-bottom: 1px solid var(--line);
	}
	.ps-grid__head span {
		padding: 10px 14px; font-size: var(--fs-1); font-weight: 700;
		text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3-on-paper);
		border-right: 1px solid var(--line);
	}
	.ps-grid__head span:last-child { border-right: 0; }
	.ps-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ps-cell { border-bottom: 0; border-right: 1px solid var(--line); }
	.ps-cell:last-child { border-right: 0; }
	/* The visual header row carries the column names on desktop; the per-cell
	   labels stay in the DOM for assistive tech only. */
	.ps-cell__label {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
	}
}

/* ==================================================================
 * Application fit table
 * A real <table> with real column headers. It scrolls inside its own
 * container only; the page itself must never scroll sideways.
 * ================================================================== */

.fit-table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.fit-table caption { text-align: left; padding: 10px 12px; font-size: var(--fs-2); color: var(--ink-3); }
.fit-table th, .fit-table td {
	padding: 11px 12px; border-bottom: 1px solid var(--line);
	text-align: left; vertical-align: top;
}
.fit-table thead th {
	background: var(--paper); font-size: 11px; text-transform: uppercase;
	letter-spacing: .06em; color: var(--ink-3-on-paper); font-weight: 700; white-space: nowrap;
}
.fit-table tbody th { font-weight: 600; color: var(--ink); }
.fit-table tbody tr:last-child th, .fit-table tbody tr:last-child td { border-bottom: 0; }
.fit-table tbody tr:hover { background: #fafbfc; }
.fit-table ul { margin: 0; padding-left: 16px; }

/* Degraded form: fewer than two valid rows is not a table, it is a sentence. */
.fit-fallback {
	margin: 0; padding: 14px 16px; font-size: var(--fs-3); color: var(--ink-2);
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
}

/* ==================================================================
 * Case timeline
 * An ordered list, not a horizontal timeline graphic: a horizontal one
 * collapses into a scroller on a phone and loses its order.
 * ================================================================== */

.timeline-wrap { max-width: 78ch; }
.timeline { margin: 0; padding: 0; list-style: none; counter-reset: stage; }
.timeline__heading { margin: 0 0 16px; font-size: var(--fs-6); }
.timeline__stage {
	position: relative; padding: 0 0 22px 34px; border-left: 2px solid var(--line-2);
	margin-left: 10px;
}
.timeline__stage:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__stage::before {
	counter-increment: stage; content: counter(stage);
	position: absolute; left: -13px; top: -2px;
	display: flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--graphite); color: #fff;
	font-size: 12px; font-weight: 700;
}
.timeline__date { display: block; font-size: var(--fs-2); color: var(--ink-3); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.timeline__title { margin: 0 0 4px; font-size: var(--fs-5); }
.timeline__body { margin: 0; font-size: var(--fs-3); color: var(--ink-2); }
.timeline__refs { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.timeline__refs li {
	font-size: var(--fs-1); color: var(--ink-2); background: var(--paper);
	border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}

/* ==================================================================
 * Metric card
 * The only place a number from a case study is allowed to appear.
 * verified -> value + source line. example -> example_value + dashed
 * frame + corner flag. Anything missing -> the card is not printed.
 * ================================================================== */

.metric-cards {
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin: 0; padding: 0; list-style: none;
}
.metric-card {
	position: relative; padding: 16px 16px 14px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
	display: flex; flex-direction: column; gap: 6px;
}
.metric-card__name { margin: 0; font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.metric-card__value {
	margin: 0; display: flex; align-items: baseline; gap: 6px;
	font-family: var(--font-display); font-size: var(--fs-7); font-weight: 700;
	line-height: var(--lh-tight); color: var(--graphite);
}
.metric-card__number { font-variant-numeric: tabular-nums lining-nums; }
.metric-card__unit { font-family: var(--font-body); font-size: var(--fs-3); font-weight: 600; color: var(--ink-3); }
.metric-card__meta { margin: 0; font-size: var(--fs-1); line-height: 1.5; color: var(--ink-3-on-paper); }
.metric-card__flag {
	position: absolute; top: -1px; left: -1px;
	padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--warn);
	background: var(--warn-soft); border: 1px solid var(--warn);
	border-radius: var(--radius-md) 0 var(--radius-sm) 0;
}
.metric-card--example { border-style: dashed; border-color: var(--warn); background: var(--warn-soft); padding-top: 26px; }
.metric-card--example .metric-card__value { color: var(--warn); }

/* ==================================================================
 * Next-step panel
 * "What happens next" next to "what we need from you". One primary
 * button per page, and this is normally it.
 * ================================================================== */

.next-step {
	padding: 22px; background: var(--paper);
	border: 1px solid var(--line); border-radius: var(--radius-lg);
	display: grid; gap: 14px;
}
.next-step__heading { margin: 0; font-size: var(--fs-6); }
.next-step__lead { margin: 0; font-size: var(--fs-3); color: var(--ink-2); }
.next-step__ask { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-3); color: var(--ink-2); }
.next-step__ask li { padding-left: 2px; }
.next-step__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.next-step__note { margin: 0; font-size: var(--fs-2); color: var(--ink-3-on-paper); }
.next-step__alt { margin: 0; font-size: var(--fs-2); color: var(--ink-2); }
.next-step__alt a { color: var(--steel); }

/* ==================================================================
 * FAQ block
 * <details>/<summary> with the answer already in the HTML. Collapsing is
 * a visual convenience; the text is in the source either way, which is
 * what makes the JSON-LD honest.
 * ================================================================== */

.faq-block { margin: 0; border-top: 1px solid var(--line); }
.faq-block__heading { margin: 20px 0 4px; font-size: var(--fs-6); }
.faq-block__item { border-bottom: 1px solid var(--line); }
.faq-block__item > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: var(--tap); padding: 10px 2px; cursor: pointer; list-style: none;
}
.faq-block__item > summary::-webkit-details-marker { display: none; }
.faq-block__question {
	margin: 0; font-family: var(--font-body); font-size: var(--fs-4); font-weight: 600;
	color: var(--ink); line-height: var(--lh-normal);
}
.faq-block__item > summary::after {
	content: "+"; flex: 0 0 auto; width: 20px; text-align: center;
	font-size: 18px; line-height: 1; color: var(--steel);
}
.faq-block__item[open] > summary::after { content: "\2212"; }
.faq-block__answer { padding: 0 2px 16px; max-width: 72ch; }
.faq-block__short { margin: 0 0 8px; font-size: var(--fs-4); color: var(--ink); font-weight: 600; }
.faq-block__full { margin: 0; font-size: var(--fs-3); color: var(--ink-2); }
.faq-block__full p { margin: 0 0 8px; }
.faq-block__full p:last-child { margin-bottom: 0; }
.faq-block__source { margin: 8px 0 0; font-size: var(--fs-1); color: var(--ink-3); }

/* ==================================================================
 * Badges
 * Text first. A badge that only exists as a colour is not a label.
 * ================================================================== */

.badge {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 2px 8px; border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2);
	white-space: nowrap;
}
.badge--example { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.badge--verified { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.badge--draft { border-style: dashed; color: var(--ink-3); }

/* ==================================================================
 * Small-screen hit areas
 * WCAG 2.5.5 asks for 44px; the sales team asked for 48. Everything a
 * thumb has to hit gets the larger floor once the layout is one-column.
 * ================================================================== */

@media (max-width: 860px) {
	.btn { min-height: var(--tap); }
	.chips a { display: inline-flex; align-items: center; min-height: var(--tap); }
	.filters input, .filters select { min-height: var(--tap); }
	.field input, .field select { min-height: var(--tap); }
	.field--check input { min-height: 24px; }
}

/* ==================================================================
 * Home entries, selector teaser, review notes
 *
 * Three blocks added with the 0.4.0 home page. Each is a plain layout rule:
 * nothing here hides content that the HTML already contains, so a missing
 * stylesheet leaves a readable page rather than a blank one.
 * ================================================================== */

.entry-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
}

.section-lede {
	max-width: 62ch;
	color: var(--ink-2);
	margin: 0 0 20px;
}

/* Selector teaser: two columns on desktop, stacked on a phone. */
.selector-teaser {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--paper);
	padding: 22px 24px;
}

.selector-teaser__title { font-size: 20px; margin: 0 0 8px; }
.selector-teaser__lede { margin: 0 0 12px; color: var(--ink-2); max-width: 62ch; }

.selector-teaser__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: selector-step;
}

.selector-teaser__steps li {
	counter-increment: selector-step;
	font-size: 13.5px;
	color: var(--ink-2);
}

.selector-teaser__steps li::before {
	content: counter(selector-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 7px;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	font-size: 11.5px;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

.selector-teaser__action { margin: 0; }

/*
 * Review note: says out loud whether the figures on a case page are signed off.
 * Bordered, not coloured alone — the sentence carries the meaning, so it still
 * reads in greyscale and to a screen reader.
 */
.review-note {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-left: 3px solid var(--warn);
	background: var(--warn-soft);
	font-size: 13.5px;
	color: var(--ink-2);
	max-width: 78ch;
}

/* ==================================================================
 * 0.5.0 — consent bar, compare, estimator, form progress
 *
 * Same rule as above: every block is laid out here, never injected. With this
 * file missing the page still reads top to bottom in source order.
 * ================================================================== */

/* Consent bar: fixed to the bottom, never over the primary CTA on a phone. */
.consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px max(16px, calc((100vw - 1180px) / 2));
	background: var(--paper);
	border-top: 1px solid var(--line-2);
	box-shadow: 0 -8px 24px rgba(15, 20, 25, .08);
}

.consent[hidden] { display: none; }
.consent__text { margin: 0; max-width: 68ch; font-size: 13.5px; color: var(--ink-2); }
.consent__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.consent__actions a { font-size: 13px; color: var(--steel); }

/* Compare picker: a fieldset, because the boxes belong to one question. */
.compare-picker {
	margin: 18px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--paper);
}

.compare-picker fieldset { border: 0; margin: 0; padding: 0; }
.compare-picker__legend { font-size: 14px; font-weight: 700; padding: 0; }
.compare-picker__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 12px 0 14px;
	padding: 0;
	list-style: none;
}
.compare-picker__list label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.compare-picker__list input { width: 18px; height: 18px; }

/* Comparison table: the first column is the measure, the rest are products. */
.spec-table--compare thead th { vertical-align: bottom; }
.spec-compare__meta { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-3); }

.compare-remove {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
}

/* Estimator: result block reads as a panel, not as a second form. */
.estimator { align-items: flex-end; }

.estimator-result {
	margin-top: 26px;
	padding: 22px 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--paper);
}

.estimator-result__title { margin: 0 0 16px; font-size: 18px; }
.estimator-result__value {
	margin: 0;
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.estimator-result__note { margin: 16px 0 0; max-width: 78ch; font-size: 13.5px; color: var(--ink-2); }

.formula {
	margin: 18px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--line-2);
	font-size: 13px;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}

/* Enquiry progress: three steps, stated before the first field. */
.form-progress {
	display: grid;
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.form-progress__item {
	display: flex;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--paper);
}

.form-progress__num {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--graphite);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.form-progress__body { font-size: 13.5px; color: var(--ink-2); }
.form-progress__body strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 2px; }

@media (max-width: 860px) {
	.consent { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
	.consent__actions .btn { min-height: var(--tap); }
	.compare-picker__list label { min-height: var(--tap); }
	.estimator-result__value { font-size: 34px; }
}

/* ==================================================================
 * Front-page hero
 *
 * A dark band is the one place on this site where the brand is allowed to
 * be the loudest thing on screen. Everything below it stays on white, so
 * the contrast does the work that a stock photo would otherwise do — and
 * it does it without claiming a haul truck that is not ours.
 *
 * The track is a scroll-snap container, not a scripted slider: with no JS
 * every slide is still reachable by swiping, by scrolling, and by the dot
 * anchors. See parts/hero.php.
 * ================================================================== */

.hero {
	position: relative;
	background: var(--graphite);
	color: var(--on-dark);
	border-bottom: 1px solid #232a33;
}

.hero__track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.hero__track::-webkit-scrollbar { display: none; }
.hero__track:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: -3px; }

.hero__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	padding: clamp(34px, 5vw, 62px) 0 clamp(62px, 8vw, 86px);
}

/* Two washes: a warm glow behind the wordmark, and a diagonal rib that reads as
   tread without drawing a literal tire. Both are non-interactive. The glow's
   origin is a custom property so each slide can move it without repeating the
   whole background — see the modifier rules below. */
.hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 86% at var(--hero-glow, 76% 18%), rgba(194, 65, 12, .22), transparent 62%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 28px);
	pointer-events: none;
}

/* One glow position per slide, so the three panels do not read as the same
   background with different text dropped on it. */
.hero__slide--brand { --hero-glow: 74% 14%; }
.hero__slide--catalogue { --hero-glow: 88% 34%; }
.hero__slide--scope { --hero-glow: 58% 26%; }

.hero__inner { position: relative; z-index: 1; }

/* The right half of the brand slide was empty, which is the one thing that makes
   a type-only hero look unfinished. A tread band there keeps the band dark and
   on-theme without implying a product photo. Decorative, so it is hidden from
   assistive tech in the markup and dropped entirely below 900px, where it would
   only crowd the copy. */
.hero__art {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 42%;
	max-width: 620px;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 34%);
	mask-image: linear-gradient(100deg, transparent 0%, #000 34%);
	opacity: .9;
}
.hero__art svg { width: 100%; height: 100%; display: block; }

@media (max-width: 899px) {
	.hero__art { display: none; }
}

.hero__eyebrow {
	margin: 0 0 14px;
	font-size: var(--fs-1);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--on-dark-3);
}

.hero__title { margin: 0; display: flex; flex-direction: column; gap: 4px; }

.hero__wordmark {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(46px, 9.5vw, 104px);
	line-height: .9;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: var(--on-dark);
}

.hero__wordmark-sub {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(15px, 2.3vw, 25px);
	letter-spacing: .44em;
	text-transform: uppercase;
	color: var(--amber-on-dark);
}

.hero__headline {
	margin: 0;
	font-size: clamp(30px, 5.6vw, 58px);
	line-height: 1.02;
	letter-spacing: -.015em;
	color: var(--on-dark);
	max-width: 20ch;
}

.hero__lede {
	margin: 20px 0 0;
	max-width: 58ch;
	font-size: var(--fs-5);
	line-height: 1.55;
	color: var(--on-dark-2);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
}

/* Figures sit on the dark ground, so the values take the display face and the
   labels stay quiet — the number is the argument, the label only names it. */
.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 26px 52px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.hero__stat { display: flex; flex-direction: column; gap: 4px; }

.hero__stat-value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(34px, 4.8vw, 50px);
	line-height: 1;
	color: var(--on-dark);
	font-variant-numeric: tabular-nums;
}

.hero__stat-label {
	font-size: var(--fs-2);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--on-dark-3);
}

.hero__scope {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.hero__scope-link {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: var(--tap);
	padding: 13px 16px;
	border: 1px solid #2b333d;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, .03);
	color: var(--on-dark);
	text-decoration: none;
	transition: border-color .16s, background .16s;
}
.hero__scope-link:hover,
.hero__scope-link:focus-visible {
	border-color: var(--amber);
	background: rgba(194, 65, 12, .12);
	color: var(--on-dark);
}

.hero__scope-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5); }
.hero__scope-note { font-size: var(--fs-2); color: var(--on-dark-3); }

/* Controls sit over the track's bottom padding rather than under it, so the
   band ends on the artwork instead of on a strip of chrome. */
.hero__controls {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: -46px;
	padding-bottom: 8px;
}

.hero__dots { display: flex; gap: 2px; }

.hero__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	border-radius: var(--radius-sm);
}
.hero__dot span {
	display: block;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: #4a545f;
	transition: background .16s;
}
.hero__dot:hover span,
.hero__dot:focus-visible span { background: var(--on-dark-2); }
.hero__dot.is-current span { background: var(--amber); }

.hero__buttons { display: flex; align-items: center; gap: 8px; }
.hero__buttons[hidden] { display: none; }

.hero__arrow,
.hero__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: 40px;
	padding: 0 12px;
	font: inherit;
	font-size: var(--fs-3);
	font-weight: 600;
	color: var(--on-dark-2);
	background: rgba(255, 255, 255, .06);
	border: 1px solid #39424e;
	border-radius: var(--radius-md);
	cursor: pointer;
}
.hero__arrow:hover,
.hero__pause:hover { color: var(--on-dark); border-color: var(--on-dark-3); }

/* A primary button is amber; on the amber-lit hero it needs a rim to keep its
   edge, which is what the outline adds. */
.hero .btn--primary { box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }

.btn--on-dark {
	background: transparent;
	border-color: #4b5563;
	color: var(--on-dark);
}
.btn--on-dark:hover {
	background: rgba(255, 255, 255, .09);
	border-color: var(--on-dark-2);
	color: var(--on-dark);
}

/* ==================================================================
 * Business scope band
 * ================================================================== */

.section--scope {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.scope-band__head { max-width: 64ch; margin-bottom: 22px; }
.scope-band__title { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.01em; }
.scope-band__lede { margin: 0; color: var(--ink-2); }

.scope-band {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scope-card {
	display: flex;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color .16s, box-shadow .16s;
}
.scope-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }

.scope-card__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	min-height: var(--tap);
	padding: 20px;
	border-radius: inherit;
	color: inherit;
	text-decoration: none;
}
.scope-card__link:hover { color: inherit; }

.scope-card__glyph { width: 44px; height: 44px; color: var(--amber); stroke-width: 1.9; }

.scope-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-5);
	line-height: 1.2;
	color: var(--ink);
}

.scope-card__text {
	font-size: var(--fs-3);
	line-height: 1.5;
	color: var(--ink-2);
	/* Three lines keeps the four cards on one baseline; the full sentence is on
	   the solution page this card links to. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.scope-card__more {
	margin-top: auto;
	padding-top: 10px;
	font-size: var(--fs-3);
	font-weight: 600;
	color: var(--steel);
}

/* ==================================================================
 * Generated tread graphic
 *
 * Stands in for product photography that does not exist yet. Deliberately a
 * diagram, not a photo: thin lugs on a dark ground read as technical, and no
 * buyer mistakes it for the tire they are ordering. Replaced automatically by
 * the featured image when one is uploaded.
 * ================================================================== */

.card__media--tread { background: var(--graphite); }
.card__media--tread .tread-tile { display: block; width: 100%; height: 100%; }