/* =========================================================================
   C&R Restoration & Mechanical
   -------------------------------------------------------------------------
   Direction: the workshop underneath. Graphite ground, oxblood from the crest,
   and one high-voltage yellow reserved for the phone number, set in a UK
   number plate. Display type is Archivo at its widest and heaviest; data,
   labels and job numbers are DM Mono. The signature is the draggable
   before/after reveal in The Work — the business is corrosion out, steel in,
   so the page lets you do exactly that.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Reset
   WordPress sets box-sizing on its own block classes but not on arbitrary
   markup, and every container below is arbitrary markup. Without this a
   max-width plus padding computes wider than the viewport and the whole page
   pins left.
   ---------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------------------------------------
   2. Tokens
   ---------------------------------------------------------------------- */

:root {
	--cr-max: 1320px;
	--cr-pad: clamp(20px, 5vw, 56px);
	--cr-gutter: 32px;
	--cr-measure: 760px;

	--cr-ink: var(--wp--preset--color--ink);
	--cr-ink-raised: var(--wp--preset--color--inkraised);
	--cr-ink-line: var(--wp--preset--color--inkline);
	--cr-paper: var(--wp--preset--color--paper);
	--cr-paper-dim: var(--wp--preset--color--paperdim);
	--cr-line: var(--wp--preset--color--line);
	--cr-steel: var(--wp--preset--color--steel);
	--cr-oxblood: var(--wp--preset--color--oxblood);
	--cr-oxblood-lit: var(--wp--preset--color--oxbloodlit);
	--cr-plate: var(--wp--preset--color--plate);

	--cr-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--cr-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
	--cr-radius: 6px;
	--cr-radius-lg: 12px;

	--cr-header-h: 76px;
}

/* -------------------------------------------------------------------------
   3. Layout
   post-content is a three-track grid so section patterns dropped in by an
   editor can escape the prose measure instead of being crushed by it.
   ---------------------------------------------------------------------- */

.cr-content {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--cr-pad), 1fr)
		[content-start] minmax(0, var(--cr-measure))
		[content-end] minmax(var(--cr-pad), 1fr)
		[full-end];
}

.cr-content > * {
	grid-column: content-start / content-end;
	min-width: 0;
}

.cr-content > .cr-band,
.cr-content > .alignfull {
	grid-column: full-start / full-end;
}

.cr-content > .alignwide {
	grid-column: full-start / full-end;
	width: 100%;
	max-width: var(--cr-max);
	margin-inline: auto;
	padding-inline: var(--cr-pad);
}

/* blockGap otherwise opens a stripe of page background between bands. The
   doubled class beats WordPress's own .wp-container-x > * + * rule. */
.cr-content.cr-content > * + * {
	margin-block-start: 0;
}

.cr-content > :is(p, h2, h3, h4, ul, ol, blockquote, figure, .wp-block-table) {
	margin-block: 0 1.1em;
}

.cr-content > :is(h2, h3, h4) {
	margin-block-start: 2em;
}

/* Prose pages (About, privacy, a single project) get breathing room. */
.cr-prose {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

/* A column of running text inside a band, set against the grid rather than
   centred in it. */
.cr-prose-col {
	grid-column: 1 / span 7;
}

.cr-prose-col > * {
	margin-block: 0 1.15em;
	max-width: 64ch;
}

.cr-prose-col > :is(h2, h3) {
	font-stretch: 112%;
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin-block-start: 2.2em;
}

.cr-prose-col > h2 {
	font-size: var(--wp--preset--font-size--xl);
}

.cr-prose-col > h3 {
	font-size: var(--wp--preset--font-size--lg);
}

.cr-prose-col > :first-child {
	margin-block-start: 0;
}

.cr-prose-col > :last-child {
	margin-block-end: 0;
}

.cr-prose-col ol,
.cr-prose-col ul {
	padding-inline-start: 1.3em;
}

.cr-prose-col li {
	margin-block-end: 0.6em;
}

.cr-prose-col li::marker {
	color: var(--cr-oxblood);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8em;
}

@media (max-width: 899px) {
	.cr-prose-col {
		grid-column: 1 / -1;
	}
}

/* The shell: one 12-column grid, 32px gutter, used inside every band. */
.cr-shell {
	width: 100%;
	max-width: var(--cr-max);
	margin-inline: auto;
	padding-inline: var(--cr-pad);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--cr-gutter);
}

/* Anything dropped into a shell spans it unless a later rule places it. */
.cr-shell > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.cr-band {
	position: relative;
}

.cr-band--ink {
	background: var(--cr-ink);
	color: var(--cr-paper);
}

.cr-band--paper {
	background: var(--cr-paper);
	color: var(--cr-ink);
}

.cr-band--dim {
	background: var(--cr-paper-dim);
	color: var(--cr-ink);
}

.cr-band__pad {
	padding-block: clamp(4rem, 8vw, 7.5rem);
}

/* Two dark bands in a row would otherwise run together. */
.cr-band--ink + .cr-band--ink,
.cr-band--paper + .cr-band--paper {
	border-top: 1px solid var(--cr-ink-line);
}

.cr-band--paper + .cr-band--paper {
	border-top-color: var(--cr-line);
}

.cr-cell--index {
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 899px) {
	.cr-shell {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 20px;
	}
}

/* theme.json turns every link oxblood on hover, which is right for a link in
   running text and wrong for a whole card, a button or anything on a dark
   band — there it reads as the text going out rather than lighting up. These
   opt the components back out. */
a.cr-cell:hover,
a.cr-cell:focus-visible {
	color: var(--cr-ink);
}

a.cr-cell--hero:hover,
a.cr-cell--hero:focus-visible {
	color: var(--cr-paper);
}

.cr-btn:hover,
.cr-btn:focus-visible {
	color: inherit;
}

.cr-btn--solid,
.cr-btn--solid:hover,
.cr-btn--solid:focus-visible {
	color: #fff;
}

.cr-band--ink a:hover,
.cr-hero a:hover {
	color: var(--cr-plate);
}

.cr-band--ink .cr-plate:hover,
.cr-hero .cr-plate:hover {
	color: inherit;
}

/* Anchor links must clear the sticky header. */
:target,
[id] {
	scroll-margin-top: calc(var(--cr-header-h) + 24px);
}

/* -------------------------------------------------------------------------
   4. Type
   ---------------------------------------------------------------------- */

.cr-display {
	font-family: var(--wp--preset--font-family--sans);
	font-stretch: 125%;
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	margin: 0;
	text-wrap: balance;
}

.cr-title {
	font-family: var(--wp--preset--font-family--sans);
	font-stretch: 112%;
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

.cr-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0;
	display: block;
}

.cr-label--plate {
	color: var(--cr-plate);
}

.cr-label--oxblood {
	color: var(--cr-oxblood);
}

.cr-label--steel {
	color: var(--cr-steel);
}

.cr-lead {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
	margin: 0;
	max-width: 46ch;
}

.cr-body {
	margin: 0;
	max-width: 60ch;
	line-height: 1.65;
}

.cr-band--ink .cr-body,
.cr-band--ink .cr-lead {
	color: #C6C9CE;
}

.cr-band--paper .cr-body,
.cr-band--paper .cr-lead,
.cr-band--dim .cr-body,
.cr-band--dim .cr-lead {
	color: #3D424A;
}

/* Section head: a hairline, a mono label, then the title and a lead set
   against each other rather than stacked and centred. */
.cr-sechead {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--cr-gutter);
	row-gap: clamp(0.9rem, 2vw, 1.4rem);
	align-items: end;
	border-top: 1px solid var(--cr-line);
	padding-top: 1.25rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cr-band--ink .cr-sechead {
	border-top-color: var(--cr-ink-line);
}

.cr-sechead > .cr-label {
	grid-column: 1 / -1;
}

.cr-sechead__title {
	grid-column: 1 / span 7;
	font-size: var(--wp--preset--font-size--xxl);
	font-stretch: 118%;
	font-weight: 700;
	line-height: 1.0;
	letter-spacing: -0.025em;
	margin: 0;
	text-wrap: balance;
}

.cr-sechead__lead {
	grid-column: 9 / -1;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

@media (max-width: 899px) {
	.cr-sechead {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cr-sechead__title,
	.cr-sechead__lead {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
   5. Header
   ---------------------------------------------------------------------- */

.cr-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--cr-ink);
	border-bottom: 1px solid var(--cr-ink-line);
}

.cr-header__inner {
	width: 100%;
	max-width: var(--cr-max);
	margin-inline: auto;
	padding-inline: var(--cr-pad);
	min-height: var(--cr-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.cr-brand {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
	color: var(--cr-paper);
	flex-shrink: 0;
}

.cr-brand__mark {
	height: 46px;
	width: auto;
	flex-shrink: 0;
}

.cr-brand__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cr-brand__name {
	display: block;
	font-stretch: 125%;
	font-weight: 800;
	font-size: 0.9375rem;
	line-height: 1.1;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.cr-brand__sub {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cr-steel);
	margin-top: 3px;
}

.cr-header__right {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
}

.cr-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2rem);
}

.cr-nav__list a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9AA0A8;
	text-decoration: none;
	padding-block: 0.4rem;
	border-bottom: 2px solid transparent;
	transition: color 0.2s var(--cr-ease), border-color 0.2s var(--cr-ease);
	white-space: nowrap;
}

.cr-nav__list a:hover,
.cr-nav__list .current-menu-item > a {
	color: var(--cr-paper);
	border-bottom-color: var(--cr-plate);
}

.cr-burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--cr-ink-line);
	border-radius: var(--cr-radius);
	color: var(--cr-paper);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.cr-burger__bars,
.cr-burger__bars::before,
.cr-burger__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform 0.25s var(--cr-ease), opacity 0.2s var(--cr-ease);
}

.cr-burger__bars::before,
.cr-burger__bars::after {
	content: "";
	position: absolute;
}

.cr-burger__bars::before {
	transform: translateY(-6px);
}

.cr-burger__bars::after {
	transform: translateY(6px);
}

.cr-burger[aria-expanded="true"] .cr-burger__bars {
	background: transparent;
}

.cr-burger[aria-expanded="true"] .cr-burger__bars::before {
	transform: rotate(45deg);
}

.cr-burger[aria-expanded="true"] .cr-burger__bars::after {
	transform: rotate(-45deg);
}

.cr-drawer {
	position: fixed;
	inset: var(--cr-header-h) 0 0;
	z-index: 55;
	background: var(--cr-ink);
	padding: clamp(2rem, 7vw, 3rem) var(--cr-pad);
	display: none;
	flex-direction: column;
	gap: 2rem;
	overflow-y: auto;
}

.cr-drawer.is-open {
	display: flex;
}

.cr-drawer .cr-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.cr-drawer .cr-nav__list a {
	font-family: var(--wp--preset--font-family--sans);
	font-stretch: 112%;
	font-weight: 700;
	font-size: 1.75rem;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--cr-paper);
	border-bottom: 1px solid var(--cr-ink-line);
	padding-block: 1rem;
	display: block;
}

@media (max-width: 899px) {
	.cr-header__right .cr-nav,
	.cr-header__right .cr-plate--sm {
		display: none;
	}

	.cr-burger {
		display: inline-flex;
		position: relative;
	}

	.cr-brand__mark {
		height: 40px;
	}
}

/* On a phone the second line is long enough to run under the menu button,
   and the crest already says what the business is. */
@media (max-width: 599px) {
	.cr-brand__sub {
		display: none;
	}

	.cr-brand__name {
		font-size: 0.875rem;
	}
}

/* -------------------------------------------------------------------------
   6. The plate — the phone number is the conversion, so it gets the one
   high-voltage colour on the site and the most recognisable shape in British
   motoring. Used sparingly: header, hero, contact, footer.
   ---------------------------------------------------------------------- */

.cr-plate {
	display: inline-flex;
	flex-direction: column;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
	max-width: 100%;
}

.cr-plate__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cr-steel);
}

.cr-plate__body {
	display: inline-flex;
	align-items: stretch;
	background: var(--cr-plate);
	border: 2px solid #111;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.65);
	transition: transform 0.18s var(--cr-ease), box-shadow 0.18s var(--cr-ease);
	max-width: 100%;
}

.cr-plate:hover .cr-plate__body {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.7);
}

.cr-plate:active .cr-plate__body {
	transform: translateY(0);
}

.cr-plate__flag {
	background: #063298;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-stretch: 100%;
	flex-shrink: 0;
}

.cr-plate__stars {
	display: block;
	color: var(--cr-plate);
	line-height: 1;
	margin-bottom: 2px;
}

.cr-plate__stars::before {
	content: "★";
}

.cr-plate__number {
	display: flex;
	align-items: center;
	color: #111;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-stretch: 87%;
	white-space: nowrap;
}

.cr-plate--lg .cr-plate__flag {
	width: 42px;
	font-size: 0.75rem;
	padding-bottom: 8px;
}

.cr-plate--lg .cr-plate__stars {
	font-size: 0.6rem;
}

.cr-plate--lg .cr-plate__number {
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
	letter-spacing: 0.01em;
	padding: 0.5rem 1.1rem 0.62rem;
}

.cr-plate--md .cr-plate__flag {
	width: 30px;
	font-size: 0.5625rem;
	padding-bottom: 5px;
}

.cr-plate--md .cr-plate__stars {
	font-size: 0.45rem;
}

.cr-plate--md .cr-plate__number {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
	padding: 0.42rem 0.85rem 0.5rem;
}

.cr-plate--sm .cr-plate__flag {
	width: 22px;
	font-size: 0.4375rem;
	padding-bottom: 4px;
}

.cr-plate--sm .cr-plate__stars {
	font-size: 0.35rem;
}

.cr-plate--sm .cr-plate__number {
	font-size: 0.9375rem;
	padding: 0.35rem 0.6rem 0.4rem;
}

/* -------------------------------------------------------------------------
   7. Buttons
   ---------------------------------------------------------------------- */

.cr-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.95rem 1.4rem;
	border-radius: var(--cr-radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s var(--cr-ease), border-color 0.2s var(--cr-ease), color 0.2s var(--cr-ease);
}

.cr-btn--solid {
	background: var(--cr-oxblood);
	color: #fff;
}

.cr-btn--solid:hover {
	background: var(--cr-oxblood-lit);
}

.cr-btn--ghost {
	background: transparent;
	color: currentColor;
	border-color: var(--cr-ink-line);
}

.cr-band--paper .cr-btn--ghost,
.cr-band--dim .cr-btn--ghost {
	border-color: var(--cr-line);
}

.cr-btn--ghost:hover {
	border-color: currentColor;
}

.cr-btn__arrow {
	transition: transform 0.2s var(--cr-ease);
}

.cr-btn:hover .cr-btn__arrow {
	transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   8. Hero
   ---------------------------------------------------------------------- */

.cr-hero {
	position: relative;
	background: var(--cr-ink);
	color: var(--cr-paper);
	isolation: isolate;
	overflow: hidden;
}

.cr-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cr-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 46%;
}

/* Heavy enough on the left that the headline never has to fight the
   photograph, light enough on the right that you can still see it is the
   underside of a car. */
.cr-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(0deg, var(--cr-ink) 2%, rgba(19, 20, 23, 0) 34%),
		linear-gradient(96deg, rgba(19, 20, 23, 0.94) 20%, rgba(19, 20, 23, 0.7) 52%, rgba(19, 20, 23, 0.2) 100%);
}

.cr-hero__inner {
	padding-block: clamp(4.5rem, 11vw, 9rem) 0;
	align-content: start;
	row-gap: clamp(2.5rem, 6vw, 5rem);
	min-height: min(84vh, 780px);
	align-content: space-between;
}

.cr-hero__copy {
	grid-column: 1 / span 9;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 2.6vw, 2.25rem);
	align-items: flex-start;
}

.cr-hero__title {
	font-size: var(--wp--preset--font-size--hero);
	color: var(--cr-paper);
}

.cr-hero__title em {
	font-style: normal;
	color: var(--cr-oxblood-lit);
}

.cr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* Spec strip: three facts set as instrument readouts rather than three big
   centred numbers. */
.cr-spec {
	grid-column: 1 / -1;
	border-top: 1px solid var(--cr-ink-line);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--cr-ink-line);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.cr-spec__item {
	background: var(--cr-ink);
	padding: 1.5rem 0 1.75rem;
	padding-inline-end: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cr-spec__item + .cr-spec__item {
	padding-inline-start: 1.5rem;
}

.cr-spec__value {
	font-stretch: 118%;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1;
	letter-spacing: -0.01em;
}

.cr-spec__key {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cr-steel);
}

@media (max-width: 899px) {
	.cr-hero__copy {
		grid-column: 1 / -1;
	}

	.cr-hero__bg img {
		object-position: 70% 50%;
	}

	.cr-hero__scrim {
		background:
			linear-gradient(0deg, var(--cr-ink) 4%, rgba(19, 20, 23, 0) 46%),
			linear-gradient(96deg, rgba(19, 20, 23, 0.96) 30%, rgba(19, 20, 23, 0.78) 100%);
	}

	.cr-spec {
		grid-template-columns: 1fr;
	}

	.cr-spec__item + .cr-spec__item {
		padding-inline-start: 0;
	}

	.cr-spec__item {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		padding-block: 1rem;
	}
}

/* -------------------------------------------------------------------------
   9. Services — a bento sized by what they are actually known for. The
   welding cell is large because welding is the specialism; the routine jobs
   are compact because that is what they are.
   ---------------------------------------------------------------------- */

.cr-bento {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 12px;
}

.cr-cell {
	position: relative;
	border: 1px solid var(--cr-line);
	border-radius: var(--cr-radius-lg);
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: border-color 0.25s var(--cr-ease), transform 0.25s var(--cr-ease);
}

a.cr-cell:hover {
	border-color: var(--cr-ink);
	transform: translateY(-3px);
}

.cr-cell__title {
	font-stretch: 112%;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0;
}

.cr-cell__copy {
	margin: 0;
	color: #3D424A;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* The specialism: photo-backed, spans over half the grid, two rows tall. */
.cr-cell--hero {
	grid-column: span 7;
	grid-row: span 2;
	min-height: 380px;
	justify-content: flex-end;
	border-color: transparent;
	color: var(--cr-paper);
	background: var(--cr-ink);
	isolation: isolate;
}

.cr-cell--hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 0.6s var(--cr-ease-out);
}

.cr-cell--hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(19, 20, 23, 0.93) 6%, rgba(19, 20, 23, 0.42) 52%, rgba(19, 20, 23, 0.06) 100%);
}

a.cr-cell--hero:hover {
	transform: none;
}

a.cr-cell--hero:hover img {
	transform: scale(1.04);
}

.cr-cell--hero .cr-cell__title {
	font-size: var(--wp--preset--font-size--xxl);
	font-stretch: 118%;
	text-transform: uppercase;
}

.cr-cell--hero .cr-cell__copy {
	color: #C6C9CE;
	max-width: 42ch;
}

.cr-cell--major {
	grid-column: span 5;
	min-height: 184px;
	justify-content: space-between;
}

.cr-cell--major .cr-cell__title {
	font-size: var(--wp--preset--font-size--xl);
}

/* Routine jobs: a dense typographic index, not twelve identical cards. */
.cr-cell--index {
	grid-column: span 12;
	padding: 0;
	border-radius: var(--cr-radius-lg);
	background: transparent;
	border: none;
}

.cr-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--cr-gutter);
	border-top: 1px solid var(--cr-line);
}

.cr-index li {
	border-bottom: 1px solid var(--cr-line);
}

.cr-index a,
.cr-index span {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 0;
	text-decoration: none;
	color: inherit;
	font-stretch: 106%;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: -0.01em;
}

.cr-index a .cr-index__note,
.cr-index span .cr-index__note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cr-steel);
	white-space: nowrap;
}

.cr-index a:hover {
	color: var(--cr-oxblood);
}

@media (max-width: 1099px) {
	.cr-index {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	.cr-cell--hero,
	.cr-cell--major,
	.cr-cell--index {
		grid-column: span 12;
		grid-row: auto;
	}

	.cr-cell--hero {
		min-height: 320px;
	}

	.cr-index {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   10. The Work — the signature. Their portfolio is corrosion out and steel
   in, so the page hands you the wiper and lets you do it.
   ---------------------------------------------------------------------- */

.cr-work {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--cr-gutter);
	row-gap: clamp(3rem, 6vw, 5rem);
}

.cr-job {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.cr-job--lead {
	grid-column: 1 / -1;
}

.cr-job--pair {
	grid-column: span 6;
}

.cr-job__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--cr-ink-line);
}

.cr-job__ref {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cr-plate);
}

.cr-job__vehicle {
	font-stretch: 118%;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -0.015em;
	margin: 0;
	margin-inline-end: auto;
}

.cr-job__vehicle a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.cr-job__vehicle a:hover {
	border-bottom-color: var(--cr-plate);
}

.cr-job__type {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cr-steel);
}

/* Side by side, one job's type would sit on the header line and its
   neighbour's would wrap, so the two photographs started at different
   heights. Always break, and the pair lines up. */
.cr-job--pair .cr-job__type {
	flex-basis: 100%;
}

.cr-job__note {
	margin: 0;
	color: #C6C9CE;
	max-width: 62ch;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Before/after reveal.
   Built on two plain core/image blocks inside a group, so an editor swaps the
   photos with the normal media picker and never touches a custom block. The
   script below upgrades the markup; with JavaScript off the two images simply
   stack, which is still a before and an after. */
.cr-ba {
	position: relative;
	border-radius: var(--cr-radius-lg);
	overflow: hidden;
	background: var(--cr-ink-raised);
}

.cr-ba.is-ready {
	touch-action: pan-y;
	cursor: ew-resize;
	user-select: none;
}

.cr-ba figure,
.cr-ba .wp-block-image {
	margin: 0;
}

.cr-ba img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cr-ba.is-ready .cr-ba__frame {
	position: relative;
	aspect-ratio: 16 / 10;
}

.cr-ba.is-ready .cr-ba__layer {
	position: absolute;
	inset: 0;
}

.cr-ba.is-ready .cr-ba__layer--after {
	clip-path: inset(0 0 0 var(--cr-split, 50%));
}

.cr-ba__tag {
	position: absolute;
	bottom: 12px;
	z-index: 3;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: rgba(19, 20, 23, 0.82);
	color: var(--cr-paper);
	border: 1px solid rgba(255, 255, 255, 0.14);
	padding: 0.32rem 0.6rem;
	border-radius: 4px;
	pointer-events: none;
}

.cr-ba__tag--before {
	left: 12px;
}

.cr-ba__tag--after {
	right: 12px;
}

.cr-ba__handle {
	position: absolute;
	inset-block: 0;
	left: var(--cr-split, 50%);
	width: 2px;
	background: var(--cr-plate);
	transform: translateX(-1px);
	z-index: 4;
	pointer-events: none;
}

.cr-ba__grip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cr-plate);
	border: 2px solid #111;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.8);
}

.cr-ba__grip::before,
.cr-ba__grip::after {
	content: "";
	width: 0;
	height: 0;
	border-block: 5px solid transparent;
}

.cr-ba__grip::before {
	border-right: 6px solid #111;
}

.cr-ba__grip::after {
	border-left: 6px solid #111;
}

/* The real control: a range input laid over the frame. Keyboard and screen
   reader support come free, and the pointer drag is the same element. */
.cr-ba__range {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
}

.cr-ba__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 48px;
	height: 100%;
}

.cr-ba__range::-moz-range-thumb {
	width: 48px;
	height: 100%;
	border: 0;
	opacity: 0;
}

.cr-ba__range:focus-visible ~ .cr-ba__handle .cr-ba__grip {
	outline: 3px solid var(--cr-paper);
	outline-offset: 3px;
}

@media (max-width: 899px) {
	.cr-job--pair {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
   11. Straight answers — the three things a customer is actually worried
   about, as questions rather than reassurance cards.
   ---------------------------------------------------------------------- */

.cr-qa {
	grid-column: 1 / -1;
	border-top: 1px solid var(--cr-line);
}

.cr-qa__row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--cr-gutter);
	padding-block: clamp(1.75rem, 3.4vw, 2.75rem);
	border-bottom: 1px solid var(--cr-line);
	/* First baselines, not box tops — the question and its answer are set at
	   different sizes and leading, so aligning the boxes leaves them looking
	   a line out of step. */
	align-items: baseline;
}

.cr-qa__q {
	grid-column: span 5;
	font-stretch: 112%;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

.cr-qa__a {
	grid-column: 7 / -1;
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
	color: #3D424A;
}

@media (max-width: 899px) {
	.cr-qa__q,
	.cr-qa__a {
		grid-column: 1 / -1;
	}

	.cr-qa__a {
		margin-top: 0.85rem;
	}
}

/* -------------------------------------------------------------------------
   12. Reviews
   ---------------------------------------------------------------------- */

.cr-reviews {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--cr-gutter);
	row-gap: 2rem;
}

.cr-review {
	grid-column: span 4;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--cr-ink);
}

.cr-review__stars {
	color: var(--cr-oxblood);
	letter-spacing: 0.15em;
	font-size: 0.8125rem;
}

.cr-review__quote {
	margin: 0;
	font-stretch: 106%;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.28;
	letter-spacing: -0.015em;
}

.cr-review__by {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cr-steel);
	margin: 0;
	margin-top: auto;
	padding-top: 0.5rem;
}

.cr-score {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.cr-score__value {
	font-stretch: 125%;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xxxl);
	line-height: 0.9;
	letter-spacing: -0.03em;
}

@media (max-width: 899px) {
	.cr-review {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
   13. Coverage strip
   ---------------------------------------------------------------------- */

.cr-coverage {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 1.5rem;
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.cr-coverage__lead {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cr-plate);
	white-space: nowrap;
}

.cr-coverage__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	color: #C6C9CE;
}

.cr-coverage__list li {
	position: relative;
}

.cr-coverage__list li + li::before {
	content: "·";
	position: absolute;
	left: -0.7rem;
	color: var(--cr-steel);
}

/* -------------------------------------------------------------------------
   14. Contact
   ---------------------------------------------------------------------- */

.cr-contact__copy {
	grid-column: 1 / span 5;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	align-items: flex-start;
}

.cr-contact__form {
	grid-column: 7 / -1;
}

.cr-facts {
	display: grid;
	gap: 0;
	width: 100%;
	border-top: 1px solid var(--cr-ink-line);
}

.cr-facts__row {
	display: grid;
	grid-template-columns: 108px 1fr;
	gap: 1rem;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--cr-ink-line);
	align-items: baseline;
}

.cr-facts__key {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cr-steel);
}

.cr-facts__value {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cr-paper);
}

.cr-facts__value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--cr-ink-line);
}

.cr-facts__value a:hover {
	border-bottom-color: var(--cr-plate);
}

/* Enquiry form */
.cr-form {
	display: grid;
	gap: 1rem;
	background: var(--cr-ink-raised);
	border: 1px solid var(--cr-ink-line);
	border-radius: var(--cr-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.cr-form__row {
	display: grid;
	gap: 0.45rem;
}

.cr-form__row--split {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.cr-form label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cr-steel);
}

.cr-form input,
.cr-form textarea,
.cr-form select {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	color: var(--cr-paper);
	background: var(--cr-ink);
	border: 1px solid var(--cr-ink-line);
	border-radius: var(--cr-radius);
	padding: 0.8rem 0.9rem;
	transition: border-color 0.2s var(--cr-ease);
}

.cr-form input:hover,
.cr-form textarea:hover,
.cr-form select:hover {
	border-color: #3A3E46;
}

.cr-form input:focus,
.cr-form textarea:focus,
.cr-form select:focus {
	outline: none;
	border-color: var(--cr-plate);
}

.cr-form textarea {
	min-height: 132px;
	resize: vertical;
}

.cr-form button {
	justify-self: start;
}

.cr-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cr-form__note {
	font-size: 0.8125rem;
	color: var(--cr-steel);
	margin: 0;
}

.cr-notice {
	border-radius: var(--cr-radius);
	padding: 0.9rem 1.1rem;
	font-size: 0.9375rem;
	margin: 0;
}

.cr-notice--ok {
	background: rgba(255, 206, 0, 0.12);
	border: 1px solid rgba(255, 206, 0, 0.4);
	color: var(--cr-paper);
}

.cr-notice--bad {
	background: rgba(179, 37, 43, 0.16);
	border: 1px solid rgba(179, 37, 43, 0.5);
	color: var(--cr-paper);
}

@media (max-width: 899px) {
	.cr-contact__copy,
	.cr-contact__form {
		grid-column: 1 / -1;
	}

	.cr-contact__form {
		margin-top: 2.5rem;
	}

	.cr-form__row--split {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   15. Page header (interior pages)
   ---------------------------------------------------------------------- */

.cr-pagehead {
	border-bottom: 1px solid var(--cr-ink-line);
}

.cr-pagehead__inner {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	row-gap: 1.25rem;
}

.cr-pagehead__title {
	grid-column: 1 / span 9;
	font-size: var(--wp--preset--font-size--display);
	color: var(--cr-paper);
}

.cr-pagehead__lead {
	grid-column: 1 / span 7;
}

@media (max-width: 899px) {
	.cr-pagehead__title,
	.cr-pagehead__lead {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
   16. Footer
   ---------------------------------------------------------------------- */

.cr-footer {
	background: var(--cr-ink);
	color: var(--cr-paper);
	border-top: 1px solid var(--cr-ink-line);
}

.cr-footer__inner {
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
	row-gap: clamp(2.5rem, 5vw, 3.5rem);
}

.cr-footer__brand {
	grid-column: 1 / span 4;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
}

.cr-footer__mark {
	height: 84px;
	width: auto;
}

.cr-footer__col {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Placed by position rather than :first-of-type — the brand block is also a
   div, so :first-of-type matches that and never reaches a column. The address
   gets the extra track or "Melton Business Park" breaks across two lines. */
.cr-footer__col:nth-child(2) {
	grid-column: 5 / span 4;
}

.cr-footer__col:nth-child(3) {
	grid-column: 9 / span 2;
}

.cr-footer__col:nth-child(4) {
	grid-column: 11 / span 2;
}

.cr-footer__col h2 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cr-steel);
	margin: 0 0 0.25rem;
}

.cr-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.cr-footer__col a,
.cr-footer__col li {
	color: #C6C9CE;
	text-decoration: none;
	font-size: 0.9375rem;
}

.cr-footer__col a:hover {
	color: var(--cr-plate);
}

.cr-footer__base {
	grid-column: 1 / -1;
	border-top: 1px solid var(--cr-ink-line);
	padding-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cr-steel);
}

.cr-footer__base a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--cr-ink-line);
}

.cr-footer__base a:hover {
	color: var(--cr-paper);
}

@media (max-width: 899px) {
	.cr-footer__brand {
		grid-column: 1 / -1;
	}

	.cr-footer__col:nth-child(2),
	.cr-footer__col:nth-child(3),
	.cr-footer__col:nth-child(4) {
		grid-column: span 2;
	}
}

/* -------------------------------------------------------------------------
   17. Motion
   One orchestrated entrance on load, one quiet reveal on scroll. Nothing
   moves for anyone who has asked it not to.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.cr-rise {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.7s var(--cr-ease-out), transform 0.7s var(--cr-ease-out);
	}

	.cr-rise.is-in {
		opacity: 1;
		transform: none;
	}

	.cr-rise:nth-child(2) { transition-delay: 0.06s; }
	.cr-rise:nth-child(3) { transition-delay: 0.12s; }
	.cr-rise:nth-child(4) { transition-delay: 0.18s; }

	.cr-hero .cr-rise {
		transform: translateY(26px);
	}

	.cr-hero__bg img {
		animation: cr-settle 1.4s var(--cr-ease-out) both;
	}

	@keyframes cr-settle {
		from { transform: scale(1.07); }
		to   { transform: scale(1); }
	}
}

@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;
	}
}

/* -------------------------------------------------------------------------
   18. Focus
   ---------------------------------------------------------------------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--cr-plate);
	outline-offset: 3px;
	border-radius: 2px;
}

.cr-band--paper :where(a, button, input, textarea, select):focus-visible,
.cr-band--dim :where(a, button, input, textarea, select):focus-visible {
	outline-color: var(--cr-oxblood);
}

.cr-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--cr-plate);
	color: #111;
	padding: 0.75rem 1.25rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.cr-skip:focus {
	left: 0;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

/* -------------------------------------------------------------------------
   19. Editor
   The block editor renders patterns without the theme's band wrappers having
   any viewport context, so give it the same grid and stop it clipping.
   ---------------------------------------------------------------------- */

.editor-styles-wrapper .cr-band {
	margin-inline: 0;
}

.editor-styles-wrapper .cr-rise {
	opacity: 1;
	transform: none;
}

.editor-styles-wrapper .cr-hero__inner {
	min-height: 0;
}