/**
 * Classic Car Hire Kent – main stylesheet.
 *
 * Mobile first: base styles target small screens; min-width media queries
 * scale up (600px tablet, 960px two-column layouts, 1024px full menu,
 * 1366px full header lock-up).
 *
 * The design is a classic-motoring look built from the logo, used with
 * restraint so it reads as professional rather than themed:
 * - the logo's palette: teal, cream and terracotta on warm paper;
 * - Fraunces, a soft 1970s-style serif, for headings, and Barlow Condensed
 *   capitals, like the logo's own lettering, for labels, buttons and menus;
 * - a faint paper grain, echoing the printed texture of the badge;
 * - three period motifs: livery stripes in the logo's colours, round price
 *   stamps modelled on the badge, and "tulip" road-book arrows (the rally
 *   navigation used on the 2CV driving experience).
 *
 * Colours, fonts and sizes come from theme.json presets (--wp--preset--*),
 * so the editor and the site always match. Components use the colour roles
 * in section 1, never raw colour values. Every text/background pairing has
 * been checked for WCAG AA contrast (most reach AAA).
 *
 * Contents
 *  1. Tokens                     9. Content blocks and block styles
 *  2. Base and typography       10. Vehicles (cards, single page, prices)
 *  3. Accessibility             11. Enquiry form
 *  4. Buttons and stamps        12. Contact, hours and map blocks
 *  5. Layout and sections       13. Footer and mobile action bar
 *  6. Header and menu           14. Not found, reduced motion and print
 *  7. Hero (home page)
 *  8. Page header and breadcrumbs
 *
 * Author: Steve Austen, The PCGP.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--cchk-ink: var(--wp--preset--color--ink, #221e1a);
	--cchk-muted: var(--wp--preset--color--muted, #5c544a);
	--cchk-paper: var(--wp--preset--color--paper, #fbf6ec);
	--cchk-sand: var(--wp--preset--color--sand, #f2e8d7);
	--cchk-cream: var(--wp--preset--color--cream, #eadbb7);
	--cchk-surface: var(--wp--preset--color--surface, #fff);
	--cchk-teal: var(--wp--preset--color--teal, #65a6a2);
	--cchk-teal-deep: var(--wp--preset--color--teal-deep, #1a5653);
	--cchk-terracotta: var(--wp--preset--color--terracotta, #af4124);
	--cchk-terracotta-dark: var(--wp--preset--color--terracotta-dark, #8a2f16);
	--cchk-line: var(--wp--preset--color--line, #e3d7c3);

	/*
	 * Colour roles. Components use these rather than the palette directly, so
	 * the same kind of thing is always the same colour:
	 * - action: anything you can click – buttons, links, the current menu
	 *   item. The logo's terracotta, darkened just enough for white text
	 *   (5.8:1) and for links on paper (5.4:1) and sand (4.8:1);
	 * - brand surface: the large dark areas (home page hero, footer, feature
	 *   bands), in a deep shade of the logo's teal, with paper text (7.8:1)
	 *   and cream accents (6.1:1);
	 * - brand text: headings, prices and other emphasis that isn't a link
	 *   (deep teal, 7.8:1 on paper);
	 * - accent: the logo's own teal, for decoration only – it is too light for
	 *   text, or for anything that has to be seen to be used.
	 */
	--cchk-action: var(--cchk-terracotta);
	--cchk-action-hover: var(--cchk-terracotta-dark);
	--cchk-on-action: var(--cchk-surface);
	--cchk-brand-surface: var(--cchk-teal-deep);
	--cchk-on-brand: var(--cchk-paper);
	--cchk-on-brand-accent: var(--cchk-cream);
	--cchk-brand-text: var(--cchk-teal-deep);
	--cchk-accent: var(--cchk-teal);

	/*
	 * Status colours are kept apart from the brand colours, so an error never
	 * looks like a button or a link: the error red is a crimson (hue 20°)
	 * rather than the terracotta (36°). Both pass AA on white, paper and sand.
	 */
	--cchk-error: #aa2334;
	--cchk-success: #296a3b;

	/* Focus ring: deep teal on light areas (6.9:1 or more), cream on the deep teal areas (6.1:1). */
	--cchk-focus: var(--cchk-teal-deep);
	--cchk-focus-on-brand: var(--cchk-cream);

	--cchk-font-heading: var(--wp--preset--font-family--heading, Georgia, serif);
	--cchk-font-label: var(--wp--preset--font-family--label, "Arial Narrow", sans-serif);
	--cchk-font-body: var(--wp--preset--font-family--body, system-ui, sans-serif);

	/*
	 * Paper grain: a faint speckle laid over the backgrounds. It is an SVG
	 * noise pattern held in the stylesheet (a few hundred bytes, no extra
	 * download), drawn once by the browser and tiled. It is decorative and
	 * light enough not to change text contrast measurably.
	 */
	--cchk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0.6 -0.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");

	/*
	 * Livery stripes in the logo's three colours, as on 1960s and 70s rally
	 * cars and campervans. "Down" runs terracotta–cream–teal from the top and
	 * "up" the reverse, so the outer stripe always contrasts with whatever it
	 * touches (terracotta against deep teal, teal against paper).
	 */
	--cchk-stripes-down: linear-gradient(to bottom, var(--cchk-terracotta) 0 33.34%, var(--cchk-cream) 33.34% 66.67%, var(--cchk-teal) 66.67% 100%);
	--cchk-stripes-up: linear-gradient(to bottom, var(--cchk-teal) 0 33.34%, var(--cchk-cream) 33.34% 66.67%, var(--cchk-terracotta) 66.67% 100%);
	--cchk-stripes-size: 12px;

	/*
	 * Small icons, drawn as CSS masks so they take the colour of the text
	 * around them (no icon font or extra requests). The tulips are rally
	 * road-book symbols: the ball is where you are, the arrow where to go.
	 * The phone glyph is from Google's Material Icons (Apache Licence 2.0).
	 */
	--cchk-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E");
	--cchk-tulip-straight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='40' r='4.5'/%3E%3Cpath d='M24 36V14' stroke='%23000' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M24 4l8.5 12h-17z'/%3E%3Cpath d='M24 27h12' stroke='%23000' stroke-width='2' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
	--cchk-tulip-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='29' cy='40' r='4.5'/%3E%3Cpath d='M29 36V24c0-5-3-8-8-8h-5' stroke='%23000' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M6 16l11-7.5v15z'/%3E%3Cpath d='M29 22V7' stroke='%23000' stroke-width='2' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
	--cchk-tulip-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='19' cy='40' r='4.5'/%3E%3Cpath d='M19 36V16h13' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M43 16l-11 7.5v-15z'/%3E%3Cpath d='M5 16h14' stroke='%23000' stroke-width='2' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");

	--cchk-gutter: 1rem;
	--cchk-content: var(--wp--style--global--content-size, 46rem);
	--cchk-wide: var(--wp--style--global--wide-size, 72rem);
	--cchk-radius: 6px;
	--cchk-radius-large: 14px;
	--cchk-shadow: 0 1px 2px rgba(34, 30, 26, 0.06), 0 8px 24px rgba(34, 30, 26, 0.08);
	--cchk-shadow-lift: 0 2px 6px rgba(34, 30, 26, 0.08), 0 20px 44px rgba(34, 30, 26, 0.16);
	--cchk-space-section: clamp(3.5rem, 2.25rem + 5vw, 6.5rem);
	--cchk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 600px) {
	:root {
		--cchk-gutter: 1.5rem;
	}
}

/* ==========================================================================
   2. Base and typography
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 1rem;
}

body {
	margin: 0;
	background-color: var(--cchk-paper);
	background-image: var(--cchk-grain);
	color: var(--cchk-ink);
	font-family: var(--cchk-font-body);
	font-size: var(--wp--preset--font-size--medium, 1.0625rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	color: var(--cchk-brand-text);
	font-family: var(--cchk-font-heading);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/*
 * Accent words: italicising a word in a heading (in the editor) sets it in
 * the Fraunces italic, a small flourish. The italic is only downloaded on
 * pages that use it.
 */
:is(h1, h2, h3, h4) :is(em, i) {
	font-style: italic;
	font-weight: 500;
}

p,
ul,
ol,
dl,
table,
figure,
blockquote {
	margin-top: 0;
}

p {
	text-wrap: pretty;
}

/* Links in text are underlined, so they never rely on colour alone. */
a {
	color: var(--cchk-action);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--cchk-action-hover);
	text-decoration-thickness: 2px;
}

strong,
b {
	font-weight: 700;
}

hr {
	height: 1px;
	margin: 2rem 0;
	background: var(--cchk-line);
	border: 0;
}

address {
	font-style: normal;
}

table {
	width: 100%;
	border-collapse: collapse;
}

::selection {
	background: var(--cchk-cream);
	color: var(--cchk-ink);
}

/*
 * Eyebrow: the small line of capitals above a heading, in the logo's
 * condensed lettering, led by a short terracotta rule. The rule is
 * decoration, and the text isn't underlined, so it never reads as a link.
 * Used by the templates (.eyebrow) and as a paragraph style in the editor.
 */
.eyebrow,
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.85rem;
	color: var(--cchk-brand-text);
	font-family: var(--cchk-font-label);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.eyebrow::before,
.is-style-eyebrow::before,
.is-style-eyebrow.has-text-align-center::after {
	content: "";
	flex: 0 0 auto;
	width: 2rem;
	height: 3px;
	background: var(--cchk-terracotta);
	border-radius: 2px;
}

/* Centred eyebrows have a rule on each side. */
.is-style-eyebrow.has-text-align-center {
	justify-content: center;
}

/* Lead paragraph style for introductions. */
.is-style-lead {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	line-height: 1.55;
}

/* Small print, such as notes under price tables. */
.is-style-small-print {
	color: var(--cchk-muted);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

/* ==========================================================================
   3. Accessibility
   ========================================================================== */

/* A clear, consistent focus ring for keyboard users (WCAG 2.4.7 / 2.4.11). */
:focus-visible {
	outline: 3px solid var(--cchk-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

.site-main:focus {
	outline: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The skip link appears when focused. */
.skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	padding: 0.75rem 1rem;
	background: var(--cchk-ink);
	color: var(--cchk-surface);
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
	color: var(--cchk-surface);
}

/* ==========================================================================
   4. Buttons and stamps
   ========================================================================== */

/*
 * Buttons use the logo's condensed capitals, like the lettering on an old
 * enamel sign. Solid terracotta is the main action everywhere.
 */
.button,
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 3rem; /* comfortably over the 44px touch target */
	padding: 0.75em 1.5em;
	border: 2px solid var(--cchk-action);
	border-radius: var(--cchk-radius);
	background: var(--cchk-action);
	color: var(--cchk-on-action);
	font-family: var(--cchk-font-label);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--cchk-ease), box-shadow 0.2s ease;
}

.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	border-color: var(--cchk-action-hover);
	background: var(--cchk-action-hover);
	color: var(--cchk-on-action);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(138, 47, 22, 0.22);
}

.button:active,
.wp-element-button:active,
.wp-block-button__link:active {
	transform: none;
	box-shadow: none;
}

/*
 * Secondary: an outline in the same terracotta as the solid button, so a pair
 * of buttons reads as one colour at two strengths. On hover it fills in.
 */
.button--ghost,
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--cchk-action);
	border-color: currentColor;
}

.button--ghost:hover,
.is-style-outline .wp-block-button__link:hover {
	background: var(--cchk-action);
	border-color: var(--cchk-action);
	color: var(--cchk-on-action);
	box-shadow: none;
}

/* A phone icon on call buttons. */
.button--call::before {
	content: "";
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: var(--cchk-icon-phone) center / contain no-repeat;
	mask: var(--cchk-icon-phone) center / contain no-repeat;
}

/*
 * Price stamp ("From £95 a day"), modelled on the logo badge: a cream disc
 * inside a terracotta ring, with a thin cream gap and a second ring, set at
 * a slight angle like a rubber stamp. Text in deep teal (6.1:1 on cream).
 * It is ordinary text for screen readers, and never catches clicks.
 */
.stamp,
.cchk-vehicle-card__price {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 7rem;
	aspect-ratio: 1;
	margin: 0;
	padding: 0.5rem;
	border: 3px solid var(--cchk-terracotta);
	border-radius: 50%;
	background-color: var(--cchk-cream);
	background-image: var(--cchk-grain);
	box-shadow: 0 0 0 3px var(--cchk-cream), 0 0 0 6px var(--cchk-terracotta), 0 12px 26px rgba(14, 40, 38, 0.3);
	color: var(--cchk-brand-text);
	font-family: var(--cchk-font-label);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(-8deg);
	pointer-events: none;
}

.stamp__price,
.cchk-vehicle-card__price strong {
	display: block;
	margin: 0.2rem 0 0.15rem;
	font-family: var(--cchk-font-heading);
	font-size: 2.1rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* ==========================================================================
   5. Layout and sections
   ========================================================================== */

.site-main {
	display: block;
	padding-bottom: var(--cchk-space-section);
}

/* A page that ends with a full-width band runs straight into the footer. */
.site-main:has(> .entry-content > .alignfull:last-child),
.site-main:has(> .enquiry-band:last-child) {
	padding-bottom: 0;
}

/* Page content: WordPress's constrained layout plus the site gutter. */
.entry-content.has-global-padding {
	padding-left: var(--cchk-gutter);
	padding-right: var(--cchk-gutter);
}

.entry-content > * + * {
	margin-top: 1.25rem;
}

.entry-content > h2 {
	margin-top: 2.75rem;
}

.entry-content > h3 {
	margin-top: 2rem;
}

.entry-content > :first-child {
	margin-top: 0;
}

/* Full-width sections inside content (coloured bands). */
.entry-content > .alignfull {
	margin-left: calc(var(--cchk-gutter) * -1);
	margin-right: calc(var(--cchk-gutter) * -1);
	padding-left: var(--cchk-gutter);
	padding-right: var(--cchk-gutter);
}

/* Top-level wide and full-width groups are page sections, spaced as such. */
.entry-content > .wp-block-group.alignwide,
.entry-content > .wp-block-group.alignfull {
	margin-top: var(--cchk-space-section);
}

/* Bands that follow one another touch, and the first one sits right under the hero. */
.entry-content > .alignfull + .alignfull,
.entry-content > .wp-block-group:first-child {
	margin-top: 0;
}

/* Bands: section spacing inside, and the paper grain on their colour. */
.is-style-band {
	padding-top: var(--cchk-space-section);
	padding-bottom: var(--cchk-space-section);
}

.has-sand-background-color,
.has-teal-deep-background-color {
	background-image: var(--cchk-grain);
}

.has-sand-background-color {
	background-color: var(--cchk-sand);
}

/*
 * Deep teal sections: paper text, cream accents and links, terracotta buttons
 * (as everywhere), paper outline buttons, and a cream focus ring.
 */
.has-teal-deep-background-color {
	--cchk-focus: var(--cchk-focus-on-brand);
	color: var(--cchk-on-brand);
}

.has-teal-deep-background-color :is(h1, h2, h3, h4, h5, h6) {
	color: var(--cchk-on-brand);
}

.has-teal-deep-background-color .is-style-eyebrow {
	color: var(--cchk-on-brand-accent);
}

.has-teal-deep-background-color a:not(.wp-element-button):not(.button) {
	color: var(--cchk-on-brand-accent);
}

.has-teal-deep-background-color a:not(.wp-element-button):not(.button):hover {
	color: var(--cchk-surface);
}

.has-teal-deep-background-color .is-style-outline .wp-block-button__link {
	color: var(--cchk-on-brand);
}

.has-teal-deep-background-color .is-style-outline .wp-block-button__link:hover {
	border-color: var(--cchk-on-brand);
	background: var(--cchk-on-brand);
	color: var(--cchk-brand-surface);
}

/* Section introduction: centred eyebrow, heading and a sentence or two. */
.is-style-intro {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.is-style-intro > * {
	margin-top: 0;
	margin-bottom: 0;
}

.is-style-intro > h2 {
	margin-bottom: 0.85rem;
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.is-style-intro > p:not(.is-style-eyebrow) {
	color: var(--cchk-muted);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	line-height: 1.55;
}

.has-teal-deep-background-color .is-style-intro > p:not(.is-style-eyebrow) {
	color: var(--cchk-on-brand);
}

/* Space between an introduction and what follows it. */
.is-style-intro + * {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem) !important;
}

/* ==========================================================================
   6. Header and menu
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 50;
	background-color: var(--cchk-paper);
	background-image: var(--cchk-grain);
	border-bottom: 1px solid var(--cchk-line);
}

/* A little wider than the page content, so the full lock-up fits beside the menu. */
.site-header__inner {
	display: flex;
	flex-wrap: nowrap; /* the name wraps instead, keeping Menu on the same line */
	align-items: center;
	gap: 0.75rem 1rem;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0.6rem var(--cchk-gutter);
}

/* Brand lock-up: round badge beside the name and place, like a marque and its script. */
.site-branding {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	margin-right: auto;
	color: var(--cchk-brand-text);
	text-decoration: none;
}

.site-branding:hover {
	color: var(--cchk-brand-text);
}

.site-branding__logo {
	display: block;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	object-fit: contain;
	transition: transform 0.4s var(--cchk-ease);
}

/* A small turn of the badge on hover, like a hubcap. */
.site-branding:hover .site-branding__logo {
	transform: rotate(-8deg);
}

.site-branding__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.site-branding__name {
	font-family: var(--cchk-font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.005em;
}

.site-branding__place {
	margin-top: 0.3rem;
	color: var(--cchk-muted);
	font-family: var(--cchk-font-label);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

/* Call button: hidden on small screens, where the bottom bar has Call. */
.site-header__call {
	display: none;
}

/* Menu toggle (link without JS, button with JS — same look). */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.9rem;
	border: 2px solid var(--cchk-brand-text);
	border-radius: var(--cchk-radius);
	background: transparent;
	color: var(--cchk-brand-text);
	font-family: var(--cchk-font-label);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.menu-toggle:hover {
	color: var(--cchk-brand-text);
	background: var(--cchk-sand);
}

/* Three-line icon drawn with CSS (no icon font or image request). */
.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
	display: block;
	width: 1.1rem;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}

.menu-toggle__icon {
	position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__icon::before {
	top: -6px;
}

.menu-toggle__icon::after {
	top: 6px;
}

/* Small screens: the menu is hidden until opened. */
.primary-menu {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav.is-open .primary-menu {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 0.5rem var(--cchk-gutter) 1.25rem;
	background-color: var(--cchk-paper);
	background-image: var(--cchk-grain);
	border-bottom: 1px solid var(--cchk-line);
	box-shadow: var(--cchk-shadow-lift);
}

.primary-menu li {
	position: relative;
	border-top: 1px solid var(--cchk-line);
}

.primary-menu > li:first-child {
	border-top: 0;
}

.primary-menu a {
	display: block;
	padding: 0.85rem 3rem 0.85rem 0;
	color: var(--cchk-ink);
	font-family: var(--cchk-font-label);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-ancestor > a {
	color: var(--cchk-action);
}

/* Sub-menus: indented list on small screens (open by default without JS). */
.primary-menu .sub-menu {
	margin: 0 0 0.5rem;
	padding: 0 0 0 1rem;
	list-style: none;
}

.primary-menu .sub-menu a {
	padding: 0.6rem 0;
	font-size: 1.1rem;
}

.has-js-nav .primary-menu .sub-menu {
	display: none;
}

.has-js-nav .primary-menu .is-open > .sub-menu {
	display: block;
}

.submenu-toggle {
	position: absolute;
	top: 0.35rem;
	right: 0;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: var(--cchk-radius);
	background: transparent;
	color: var(--cchk-ink);
	cursor: pointer;
}

/* Chevron drawn with borders. */
.submenu-toggle::before {
	content: "";
	display: block;
	width: 0.55rem;
	height: 0.55rem;
	margin: -0.2rem auto 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.submenu-toggle[aria-expanded="true"]::before {
	margin-top: 0.25rem;
	transform: rotate(-135deg);
}

.submenu-toggle:hover {
	background: var(--cchk-sand);
}

@media (min-width: 380px) {
	.site-branding__name {
		font-size: 1.2rem;
	}
}

@media (min-width: 600px) {
	.site-branding__logo {
		width: 68px;
		height: 68px;
	}

	.site-branding__name {
		font-size: 1.35rem;
	}
}

/* Desktop: menu always visible, sub-menus as dropdowns. */
@media (min-width: 1024px) {
	.site-header__inner {
		gap: 1.25rem;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.site-branding__logo {
		width: 80px;
		height: 80px;
	}

	/*
	 * Between 1024px and 1365px the full menu needs the room, so the name is
	 * tucked away visually (the badge carries it) but still read out.
	 */
	.site-branding__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.menu-toggle {
		display: none;
	}

	.primary-menu,
	.primary-nav.is-open .primary-menu {
		display: flex;
		position: static;
		align-items: center;
		gap: 0.15rem;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.primary-menu li {
		border-top: 0;
	}

	.primary-menu > li > a {
		position: relative;
		padding: 0.6rem 0.65rem;
		font-size: 1.0625rem;
		white-space: nowrap;
	}

	/* A terracotta bar slides in under the hovered and current items. */
	.primary-menu > li > a::after {
		content: "";
		position: absolute;
		left: 0.65rem;
		right: 0.65rem;
		bottom: 0.2rem;
		height: 3px;
		background: var(--cchk-action);
		border-radius: 2px;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.25s var(--cchk-ease);
	}

	.primary-menu > li > a:hover::after,
	.primary-menu > .current-menu-item > a::after,
	.primary-menu > .current-menu-ancestor > a::after {
		transform: scaleX(1);
	}

	.primary-nav {
		margin-left: auto;
	}

	.primary-menu > .menu-item-has-children > a {
		padding-right: 2.1rem;
	}

	.primary-menu > .menu-item-has-children > a::after {
		right: 2.1rem;
	}

	.submenu-toggle {
		top: 50%;
		right: 0.2rem;
		width: 2rem;
		height: 2rem;
		transform: translateY(-50%);
	}

	.primary-menu .sub-menu,
	.has-js-nav .primary-menu .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 15rem;
		margin: 0;
		padding: 0.5rem;
		background: var(--cchk-surface);
		border: 1px solid var(--cchk-line);
		border-radius: var(--cchk-radius-large);
		box-shadow: var(--cchk-shadow-lift);
	}

	.primary-menu .sub-menu a {
		padding: 0.6rem 0.85rem;
		border-radius: var(--cchk-radius);
		font-size: 1.05rem;
	}

	.primary-menu .sub-menu a:hover {
		background: var(--cchk-sand);
	}

	/* Open on hover or keyboard focus, as well as with the toggle button. */
	.primary-menu li:hover > .sub-menu,
	.primary-menu li:focus-within > .sub-menu,
	.has-js-nav .primary-menu .is-open > .sub-menu {
		display: block;
	}

	.site-header__call {
		display: inline-flex;
		flex-shrink: 0;
	}
}

/* Wide screens (1366px laptops and up) have room for the full lock-up again. */
@media (min-width: 1366px) {
	.site-branding__text {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

	.site-branding__name {
		font-size: 1.3rem;
		white-space: nowrap;
	}
}

/* ==========================================================================
   7. Hero (home page)
   ========================================================================== */

/*
 * Deep teal panel and photograph side by side (stacked on phones, photo
 * first), livery stripes along the foot, and the price stamp astride the
 * join between the two.
 */
.hero {
	--cchk-focus: var(--cchk-focus-on-brand);
	position: relative;
	display: grid;
	isolation: isolate;
	background-color: var(--cchk-brand-surface);
	background-image: var(--cchk-grain);
	color: var(--cchk-on-brand);
}

.hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: var(--cchk-stripes-size);
	background: var(--cchk-stripes-down);
}

.hero__media {
	position: relative;
	order: -1;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cchk-brand-surface);
}

.hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__panel {
	position: relative;
	overflow: hidden;
	padding: 2.5rem var(--cchk-gutter) calc(3rem + var(--cchk-stripes-size));
}

/* A large, faint double ring behind the text, echoing the logo badge. */
.hero__panel::before {
	content: "";
	position: absolute;
	top: -12rem;
	right: -15rem;
	z-index: -1;
	width: 34rem;
	aspect-ratio: 1;
	border: 2px solid rgba(234, 219, 183, 0.14);
	border-radius: 50%;
	outline: 2px solid rgba(234, 219, 183, 0.08);
	outline-offset: 1.5rem;
}

.hero .eyebrow {
	color: var(--cchk-on-brand-accent);
}

.hero__title {
	margin: 0 0 1rem;
	color: var(--cchk-on-brand);
	font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem);
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.hero__lede {
	max-width: 34rem;
	margin: 0 0 1.75rem;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	line-height: 1.55;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* The outline button is paper-coloured on teal and fills in on hover. */
.hero .button--ghost {
	color: var(--cchk-on-brand);
}

.hero .button--ghost:hover {
	border-color: var(--cchk-on-brand);
	background: var(--cchk-on-brand);
	color: var(--cchk-brand-surface);
}

/* Phones: the stamp sits over the photo's lower right corner. */
.hero__stamp {
	position: absolute;
	top: calc(75vw - 5.25rem);
	right: var(--cchk-gutter);
	z-index: 3;
}

@media (min-width: 960px) {
	.hero {
		grid-template-columns: minmax(0, 44%) minmax(0, 56%);
		min-height: clamp(34rem, 72vh, 44rem);
	}

	.hero__media {
		order: 0;
		aspect-ratio: auto;
	}

	/* Left padding lines the text up with the header and content on wide screens. */
	.hero__panel {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 4rem 3.5rem calc(4rem + var(--cchk-stripes-size)) max(var(--cchk-gutter), calc((100vw - var(--cchk-wide)) / 2 + var(--cchk-gutter)));
	}

	.hero__stamp {
		top: auto;
		right: auto;
		bottom: 3.5rem;
		left: calc(44% - 3.5rem);
		width: 8rem;
	}

	.hero__stamp .stamp__price {
		font-size: 2.5rem;
	}
}

/* Breathing room between the hero and the first section of the home page. */
.hero + .entry-content {
	padding-top: var(--cchk-space-section);
}

/* ==========================================================================
   8. Page header and breadcrumbs
   ========================================================================== */

/*
 * Inner pages open on a sand band with the page title in large Fraunces,
 * finished with a thin set of livery stripes. Pages with a featured image
 * show it beside the title, like a photo print.
 */
.page-header {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
	background-color: var(--cchk-sand);
	background-image: var(--cchk-grain);
}

.page-header::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 9px;
	background: var(--cchk-stripes-down);
}

/* A faint teal double ring, echoing the badge, on the right of the band. */
.page-header::before {
	content: "";
	position: absolute;
	top: -9rem;
	right: -9rem;
	z-index: -1;
	width: 26rem;
	aspect-ratio: 1;
	border: 2px solid rgba(26, 86, 83, 0.08);
	border-radius: 50%;
	outline: 2px solid rgba(26, 86, 83, 0.05);
	outline-offset: 1.25rem;
}

.page-header__inner {
	max-width: var(--cchk-wide);
	margin: 0 auto;
	padding: 1.25rem var(--cchk-gutter) calc(2.5rem + 9px);
}

.page-header__title {
	margin: 0;
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
	line-height: 1.05;
}

.page-header__lede {
	max-width: 40rem;
	margin: 1rem 0 0;
	color: var(--cchk-muted);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	line-height: 1.55;
}

.page-header__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
}

.page-header .eyebrow {
	margin-top: 0.5rem;
}

/* With a featured image. */
.page-header--media .page-header__inner {
	display: grid;
	gap: 2rem;
}

.page-header__media {
	position: relative;
	margin: 0;
}

.page-header__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 6px solid var(--cchk-surface);
	border-radius: var(--cchk-radius-large);
	box-shadow: var(--cchk-shadow-lift);
}

.page-header__media .stamp {
	position: absolute;
	right: 0.75rem;
	bottom: -1.5rem;
	width: 6.25rem;
}

.page-header__media .stamp__price {
	font-size: 1.8rem;
}

@media (min-width: 960px) {
	.page-header--media .page-header__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: center;
		gap: 4rem;
		padding-top: 1.5rem;
		padding-bottom: calc(3.5rem + 9px);
	}

	/* A slight turn, like a photo print laid on the page. */
	.page-header__image {
		transform: rotate(1.25deg);
	}

	.page-header__media .stamp {
		right: auto;
		bottom: -1.75rem;
		left: -2rem;
		width: 7rem;
	}

	.page-header__media .stamp__price {
		font-size: 2.1rem;
	}
}

.breadcrumbs {
	margin-bottom: 1rem;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item {
	color: var(--cchk-muted);
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "›";
	margin: 0 0.5rem;
	color: var(--cchk-muted);
}

.breadcrumbs a {
	color: var(--cchk-muted);
}

.breadcrumbs a:hover {
	color: var(--cchk-action-hover);
}

/* ==========================================================================
   9. Content blocks and block styles
   ========================================================================== */

/* :where() keeps these general list rules at the lowest specificity, so
   component lists (vehicle grid, contact details) can override them simply. */
:where(.entry-content) ul,
:where(.entry-content) ol {
	padding-left: 1.25rem;
}

:where(.entry-content) li + li {
	margin-top: 0.35rem;
}

.wp-block-image img,
.wp-block-gallery img {
	border-radius: var(--cchk-radius);
}

.wp-block-image figcaption,
.wp-element-caption {
	margin-top: 0.5rem;
	color: var(--cchk-muted);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	text-align: left;
}

/* Galleries: even tiles with a gentle zoom on hover. */
.wp-block-gallery.has-nested-images {
	gap: 0.75rem;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	overflow: hidden;
	border-radius: var(--cchk-radius);
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.6s var(--cchk-ease);
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	transform: scale(1.04);
}

.wp-block-buttons {
	gap: 0.75rem;
}

.wp-block-table table,
.entry-content > table {
	background: var(--cchk-surface);
	border: 1px solid var(--cchk-line);
	border-radius: var(--cchk-radius);
	font-variant-numeric: tabular-nums;
}

/*
 * "table th" rather than just "th": core's table block stylesheet loads after
 * this one, with rules of the same weight that draw every border (and a 3px
 * line under the header) in the text colour. The extra element wins, so table
 * lines always use the scheme's soft line colour.
 */
.wp-block-table table th,
.wp-block-table table td {
	padding: 0.5rem;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--cchk-line);
}

/*
 * Small pictures inside table cells, such as the tulip diagrams in the
 * example road book. Kept small on phones so the text columns still have room
 * to breathe, then shown at full size on wider screens. height: auto keeps
 * them in proportion, whatever width/height the editor wrote on the image.
 */
.wp-block-table td img {
	width: 2.75rem;
	height: auto;
	vertical-align: middle;
}

@media (min-width: 600px) {
	.wp-block-table table th,
	.wp-block-table table td {
		padding: 0.6rem 0.75rem;
	}

	.wp-block-table td img {
		width: 4rem;
	}
}

.wp-block-table table thead,
.wp-block-table table tfoot {
	border: 0;
}

.wp-block-table thead th {
	background: var(--cchk-sand);
	color: var(--cchk-brand-text);
	font-family: var(--cchk-font-label);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-table {
	overflow-x: auto;
}

.wp-block-quote {
	margin-left: 0;
	padding-left: 1.5rem;
	border-left: 4px solid var(--cchk-accent);
	color: var(--cchk-brand-text);
	font-family: var(--cchk-font-heading);
	font-size: 1.3em;
	font-style: italic;
	font-weight: 500;
	line-height: 1.4;
}

.wp-block-columns {
	gap: 2rem;
}

/*
 * --- Questions and answers (Details block) ---
 * Each question opens to show its answer. The answers stay in the page for
 * search engines and screen readers, and the native <details> element
 * works with the keyboard without any script.
 */
.wp-block-details {
	border-bottom: 1px solid var(--cchk-line);
}

.entry-content > :not(.wp-block-details) + .wp-block-details {
	border-top: 1px solid var(--cchk-line);
}

.entry-content > .wp-block-details + .wp-block-details {
	margin-top: 0;
}

.wp-block-details summary {
	position: relative;
	padding: 1.1rem 3rem 1.1rem 0;
	color: var(--cchk-brand-text);
	font-family: var(--cchk-font-heading);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* A plus in a terracotta ring, turning to a minus when open. */
.wp-block-details summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0.25rem;
	width: 1.9rem;
	height: 1.9rem;
	border: 2px solid var(--cchk-terracotta);
	border-radius: 50%;
	color: var(--cchk-terracotta);
	font-family: var(--cchk-font-body);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.6rem;
	text-align: center;
	transform: translateY(-50%);
}

.wp-block-details[open] summary::after {
	content: "−";
}

.wp-block-details summary:hover {
	color: var(--cchk-action);
}

.wp-block-details > :not(summary) {
	margin: 0 0 1.25rem;
}

/* --- Photo print (image style): a white border, soft shadow and slight turn --- */

.wp-block-image.is-style-postcard {
	padding: 0.6rem 0.6rem 0.75rem;
	background: var(--cchk-surface);
	border-radius: 4px;
	box-shadow: var(--cchk-shadow-lift);
	transform: rotate(-1.5deg);
}

.wp-block-image.is-style-postcard img {
	display: block;
	width: 100%;
	border-radius: 2px;
}

/* --- Photo tile (group style): a photo with its title and a link over it --- */

/*
 * Structure: a group holding an image and, after it, a group of text (an
 * eyebrow, a heading with a link, a sentence). The image becomes the
 * background, a deep teal gradient keeps the text readable (paper text sits
 * on the dark lower part, 4.5:1 or more even over a white sky), and the
 * heading's link is stretched over the whole tile.
 */
.wp-block-group.is-style-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	isolation: isolate;
	overflow: hidden;
	min-height: 27rem;
	padding: 1.75rem;
	border-radius: var(--cchk-radius-large);
	background-color: var(--cchk-brand-surface);
	color: var(--cchk-on-brand);
	box-shadow: var(--cchk-shadow);
	transition: transform 0.35s var(--cchk-ease), box-shadow 0.35s ease;
}

.wp-block-group.is-style-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(12, 44, 42, 0.96) 0%, rgba(12, 44, 42, 0.88) 42%, rgba(12, 44, 42, 0.45) 68%, rgba(12, 44, 42, 0) 92%);
}

.wp-block-group.is-style-tile > .wp-block-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.wp-block-group.is-style-tile > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.8s var(--cchk-ease);
}

.wp-block-group.is-style-tile > * + * {
	margin-top: 0;
}

.wp-block-group.is-style-tile :is(h2, h3, h4) {
	margin: 0 0 0.4rem;
	color: var(--cchk-on-brand);
	font-size: clamp(1.6rem, 1.4rem + 0.6vw, 1.9rem);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

/* An arrow after the title nudges forward on hover. */
.wp-block-group.is-style-tile :is(h2, h3, h4)::after {
	content: "→";
	display: inline-block;
	margin-left: 0.35em;
	color: var(--cchk-on-brand-accent);
	font-weight: 500;
	transition: transform 0.3s var(--cchk-ease);
}

.wp-block-group.is-style-tile p {
	margin: 0;
}

.wp-block-group.is-style-tile a {
	color: inherit;
	text-decoration: none;
}

.wp-block-group.is-style-tile a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-group.is-style-tile a:focus-visible {
	outline: none;
}

.wp-block-group.is-style-tile:focus-within {
	outline: 3px solid var(--cchk-focus);
	outline-offset: 3px;
}

/* The tile's label is a solid cream tag at the top, readable over any photo. */
.wp-block-group.is-style-tile .is-style-eyebrow {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	gap: 0;
	margin: 0;
	padding: 0.4rem 0.7rem 0.35rem;
	border-radius: 4px;
	background: var(--cchk-cream);
	color: var(--cchk-brand-text);
	font-size: 0.85rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.wp-block-group.is-style-tile .is-style-eyebrow::before {
	display: none;
}

.wp-block-group.is-style-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--cchk-shadow-lift);
}

.wp-block-group.is-style-tile:hover > .wp-block-image img {
	transform: scale(1.06);
}

.wp-block-group.is-style-tile:hover :is(h2, h3, h4)::after {
	transform: translateX(5px);
}

/* --- Numbered steps (columns style), each marked with a tulip arrow --- */

.wp-block-columns.is-style-steps {
	position: relative;
	gap: 2.5rem;
	counter-reset: cchk-step;
}

.is-style-steps > .wp-block-column {
	position: relative;
	padding-top: 7.25rem;
	text-align: center;
	counter-increment: cchk-step;
}

/* The roundel... */
.is-style-steps > .wp-block-column::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 6rem;
	height: 6rem;
	margin-left: -3rem;
	border: 3px solid var(--cchk-terracotta);
	border-radius: 50%;
	background-color: var(--cchk-cream);
	background-image: var(--cchk-grain);
	box-shadow: 0 0 0 4px var(--cchk-paper), 0 0 0 6px var(--cchk-line);
}

/* ...and the tulip inside it. */
.is-style-steps > .wp-block-column::after {
	content: "";
	position: absolute;
	top: 1.3rem;
	left: 50%;
	z-index: 2;
	width: 3.4rem;
	height: 3.4rem;
	margin-left: -1.7rem;
	background: var(--cchk-brand-text);
	-webkit-mask: var(--cchk-tulip, var(--cchk-tulip-straight)) center / contain no-repeat;
	mask: var(--cchk-tulip, var(--cchk-tulip-straight)) center / contain no-repeat;
}

.is-style-steps > .wp-block-column:nth-child(2) {
	--cchk-tulip: var(--cchk-tulip-left);
}

.is-style-steps > .wp-block-column:nth-child(3) {
	--cchk-tulip: var(--cchk-tulip-right);
}

/* "Step 1", "Step 2"… above each title. */
.is-style-steps > .wp-block-column > :first-child::before {
	content: "Step " counter(cchk-step);
	display: block;
	margin-bottom: 0.4rem;
	color: var(--cchk-muted);
	font-family: var(--cchk-font-label);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.is-style-steps > .wp-block-column > * {
	max-width: 22rem;
	margin-left: auto;
	margin-right: auto;
}

.is-style-steps h3 {
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
}

/* A dashed route joins the roundels when the steps sit side by side. */
@media (min-width: 782px) {
	.wp-block-columns.is-style-steps::before {
		content: "";
		position: absolute;
		top: 3rem;
		right: 16%;
		left: 16%;
		border-top: 3px dashed var(--cchk-accent);
	}
}

/* --- Fact list (list style): each item marked with a mini badge, like the logo --- */

.is-style-facts {
	display: grid;
	gap: 0.9rem;
	padding-left: 0 !important;
	list-style: none;
}

.is-style-facts li {
	position: relative;
	margin: 0 !important;
	padding-left: 2.1rem;
}

.is-style-facts li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0.2rem;
	width: 1rem;
	height: 1rem;
	border: 3px solid var(--cchk-terracotta);
	border-radius: 50%;
	background: var(--cchk-cream);
	box-shadow: 0 0 0 2px var(--cchk-cream);
}

/* --- Livery stripes (separator style) --- */

.wp-block-separator.is-style-stripes {
	width: 6rem;
	height: var(--cchk-stripes-size);
	margin-left: auto;
	margin-right: auto;
	border: 0;
	border-radius: 2px;
	background: var(--cchk-stripes-down);
	opacity: 1;
}

/* ==========================================================================
   10. Vehicles
   ========================================================================== */

/* --- Cards (Vehicle grid block) --- */

.cchk-vehicle-grid__list {
	display: grid;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cchk-vehicle-grid__list li + li {
	margin-top: 0;
}

.cchk-vehicle-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cchk-surface);
	border-radius: var(--cchk-radius-large);
	box-shadow: var(--cchk-shadow);
	transition: transform 0.35s var(--cchk-ease), box-shadow 0.35s ease;
}

.cchk-vehicle-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cchk-shadow-lift);
}

.cchk-vehicle-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cchk-sand);
}

.cchk-vehicle-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.8s var(--cchk-ease);
}

.cchk-vehicle-card:hover .cchk-vehicle-card__image {
	transform: scale(1.05);
}

.cchk-vehicle-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.5rem 1.5rem 1.75rem;
}

.cchk-vehicle-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.65rem;
}

/* The vehicle name is the card's heading, so it takes the heading colour. */
.cchk-vehicle-card__link {
	color: var(--cchk-brand-text);
	text-decoration: none;
}

/* The name link covers the whole card: one link, a large click area. */
.cchk-vehicle-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cchk-vehicle-card__link:focus-visible {
	outline: none;
}

.cchk-vehicle-card:focus-within {
	outline: 3px solid var(--cchk-focus);
	outline-offset: 3px;
}

/* Hire types sit above the name, like a label. */
.cchk-vehicle-card__meta {
	order: -1;
	margin: 0 0 0.45rem;
	color: var(--cchk-muted);
	font-family: var(--cchk-font-label);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cchk-vehicle-card__excerpt {
	margin: 0 0 1.25rem;
}

/* The price becomes a stamp on the photo's top right corner (styles in section 4). */
.cchk-vehicle-card__price {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	width: 6rem;
	font-size: 0.72rem;
}

.cchk-vehicle-card__price strong {
	font-size: 1.75rem;
}

.cchk-vehicle-card__more {
	margin: auto 0 0;
	color: var(--cchk-action);
	font-family: var(--cchk-font-label);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cchk-vehicle-card__more::after {
	content: "→";
	display: inline-block;
	margin-left: 0.4em;
	transition: transform 0.3s var(--cchk-ease);
}

.cchk-vehicle-card:hover .cchk-vehicle-card__more {
	color: var(--cchk-action-hover);
}

.cchk-vehicle-card:hover .cchk-vehicle-card__more::after {
	transform: translateX(5px);
}

@media (min-width: 720px) {
	.cchk-vehicle-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.alignwide .cchk-vehicle-grid__list,
	.cchk-vehicle-grid.alignwide .cchk-vehicle-grid__list,
	.cchk-vehicle-grid.alignfull .cchk-vehicle-grid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Single vehicle page --- */

.vehicle-layout {
	display: grid;
	gap: 2.5rem;
	max-width: var(--cchk-wide);
	margin: 0 auto;
	padding: 0 var(--cchk-gutter);
}

.vehicle-layout__main .entry-content > * + * {
	margin-top: 1.25rem;
}

.vehicle-layout__aside {
	display: grid;
	gap: 1.5rem;
	align-content: start;
}

@media (min-width: 960px) {
	.vehicle-layout {
		grid-template-columns: minmax(0, 1fr) 21rem;
		gap: 4rem;
	}

	.vehicle-layout__aside {
		position: sticky;
		top: 1.5rem;
	}
}

/* --- Price table (from the Core plugin), styled like a ticket --- */

.cchk-price-table {
	position: relative;
	overflow: hidden;
	padding: calc(1.5rem + 9px) 1.5rem 1.5rem;
	background: var(--cchk-surface);
	border-radius: var(--cchk-radius-large);
	box-shadow: var(--cchk-shadow);
}

/* Livery stripes across the top of the ticket. */
.cchk-price-table::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 9px;
	background: var(--cchk-stripes-down);
}

.cchk-price-table table {
	font-variant-numeric: tabular-nums;
}

/* Styled as a heading, so it takes the heading colour too. */
.cchk-price-table caption {
	padding-bottom: 1rem;
	color: var(--cchk-brand-text);
	font-family: var(--cchk-font-heading);
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1.15;
	text-align: left;
}

.cchk-price-table th,
.cchk-price-table td {
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--cchk-line);
	text-align: left;
}

.cchk-price-table thead th {
	padding-top: 0;
	color: var(--cchk-muted);
	border-bottom-style: solid;
	font-family: var(--cchk-font-label);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cchk-price-table tbody th {
	font-weight: 400;
}

.cchk-price-table td {
	color: var(--cchk-brand-text);
	font-family: var(--cchk-font-heading);
	font-size: 1.2rem;
	font-weight: 600;
	text-align: right;
}

.cchk-price-table thead th:last-child {
	text-align: right;
}

.cchk-price-table__note {
	margin-top: 1rem;
	color: var(--cchk-muted);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.cchk-price-table__note p {
	margin: 0 0 0.5rem;
}

/* --- Specs ("At a glance") --- */

.vehicle-specs {
	padding: 1.5rem;
	background-color: var(--cchk-sand);
	background-image: var(--cchk-grain);
	border-radius: var(--cchk-radius-large);
}

/* "Prefer to talk?" is a paragraph styled as a heading, so the colour is set here for both. */
.vehicle-specs__title,
.call-box__title {
	margin: 0 0 0.75rem;
	color: var(--cchk-brand-text);
	font-family: var(--cchk-font-heading);
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1.15;
}

.vehicle-specs__list {
	margin: 0;
}

.vehicle-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px dashed var(--cchk-line);
}

.vehicle-specs__row dt {
	color: var(--cchk-muted);
	font-family: var(--cchk-font-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vehicle-specs__row dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

/* --- Call box: a deep teal card with the number in large type --- */

.call-box {
	--cchk-focus: var(--cchk-focus-on-brand);
	padding: 1.5rem;
	background-color: var(--cchk-brand-surface);
	background-image: var(--cchk-grain);
	border-radius: var(--cchk-radius-large);
	color: var(--cchk-on-brand);
}

.call-box .call-box__title {
	color: var(--cchk-on-brand-accent);
}

.call-box p {
	margin-bottom: 0.75rem;
}

.call-box__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--cchk-on-brand);
	font-family: var(--cchk-font-heading);
	font-size: 1.85rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.call-box__phone::before {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	background: var(--cchk-on-brand-accent);
	-webkit-mask: var(--cchk-icon-phone) center / contain no-repeat;
	mask: var(--cchk-icon-phone) center / contain no-repeat;
}

.call-box__phone:hover {
	color: var(--cchk-on-brand);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.call-box .hours-table th,
.call-box .hours-table td {
	padding: 0.3rem 0;
	border-bottom: 1px solid rgba(251, 246, 236, 0.14);
}

/* ==========================================================================
   11. Enquiry form
   ========================================================================== */

.enquiry-band {
	margin-top: var(--cchk-space-section);
	padding: var(--cchk-space-section) var(--cchk-gutter);
	background-color: var(--cchk-sand);
	background-image: var(--cchk-grain);
}

.enquiry-band__inner {
	max-width: var(--cchk-content);
	margin: 0 auto;
}

/* The form sits on a white card, on a sand band or within page content. */
.enquiry-band .cchk-enquiry,
.wp-block-cchk-enquiry-form {
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	background: var(--cchk-surface);
	border-radius: var(--cchk-radius-large);
	box-shadow: var(--cchk-shadow);
}

.cchk-enquiry__title {
	margin-bottom: 0.5rem;
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem);
}

.cchk-enquiry__intro {
	margin-bottom: 1.5rem;
	color: var(--cchk-muted);
}

.cchk-enquiry__form {
	display: grid;
	gap: 1.25rem;
}

.cchk-enquiry__grid {
	display: grid;
	gap: 1.25rem;
}

/*
 * A field stacks its label, hint, error message and control. The grid
 * stretches fields that sit side by side to the same height, and the control
 * takes up any spare space above it (margin-top: auto). So controls in the
 * same row always line up, even when only one of them has a hint, an error
 * or a label that wraps (for example with larger text settings), and the
 * labels stay level along the top of the row.
 */
.cchk-enquiry__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.cchk-enquiry__field > input,
.cchk-enquiry__field > select,
.cchk-enquiry__field > textarea {
	margin-top: auto;
}

.cchk-enquiry__dates {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
	align-content: start;
	margin: 0;
	padding: 0;
	border: 0;
}

.cchk-enquiry label,
.cchk-enquiry legend {
	padding: 0;
	font-weight: 700;
}

.cchk-enquiry__req,
.cchk-enquiry__hint {
	margin: 0;
	color: var(--cchk-muted);
	font-weight: 400;
}

.cchk-enquiry input,
.cchk-enquiry select,
.cchk-enquiry textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.6rem 0.75rem;
	border: 2px solid var(--cchk-muted);
	border-radius: var(--cchk-radius);
	background: var(--cchk-surface);
	color: var(--cchk-ink);
	font: inherit;
}

/*
 * Single-line controls share one exact height: one line of text plus the
 * padding (2 × 0.6rem) and border (2 × 2px) above. Left to themselves,
 * browsers size them differently (a select comes out about 6px shorter than a
 * text input and a date input slightly taller), so boxes in the same row
 * wouldn't line up. Update the sum if the padding or border changes. The rem
 * value is a fallback for browsers without the lh unit.
 */
.cchk-enquiry input,
.cchk-enquiry select {
	height: 3.25rem;
	height: calc(1lh + 1.2rem + 4px);
}

/*
 * Selects: the native look varies by browser, and Safari ignores the height
 * and padding of a native select, so it is switched off and the arrow drawn
 * as a small chevron in the ink colour (#221e1a), with room left for it on
 * the right. Keyboard use and the browser's own option list are unchanged.
 */
.cchk-enquiry select {
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23221e1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 0.85rem center;
	background-repeat: no-repeat;
	background-size: 1rem 1rem;
	appearance: none;
	cursor: pointer;
}

/* High-contrast (forced colours) modes drop background images: use the native arrow there. */
@media (forced-colors: active) {
	.cchk-enquiry select {
		appearance: auto;
	}
}

.cchk-enquiry textarea {
	min-height: 9rem;
	resize: vertical;
}

.cchk-enquiry input:focus-visible,
.cchk-enquiry select:focus-visible,
.cchk-enquiry textarea:focus-visible {
	border-color: var(--cchk-ink);
	outline-offset: 1px;
}

.cchk-enquiry__error {
	margin: 0;
	color: var(--cchk-error);
	font-weight: 700;
}

.cchk-enquiry .has-error input,
.cchk-enquiry .has-error select,
.cchk-enquiry .has-error textarea {
	border-color: var(--cchk-error);
	border-width: 3px;
}

.cchk-enquiry .has-error {
	padding-left: 0.85rem;
	border-left: 4px solid var(--cchk-error);
}

.cchk-enquiry__notice {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--cchk-surface);
	border: 3px solid currentColor;
	border-radius: var(--cchk-radius);
}

.cchk-enquiry__notice p,
.cchk-enquiry__notice ul {
	margin: 0;
}

.cchk-enquiry__notice p + p {
	margin-top: 0.35rem;
}

.cchk-enquiry__notice--success {
	color: var(--cchk-success);
}

.cchk-enquiry__notice--success p {
	color: var(--cchk-ink);
}

.cchk-enquiry__notice--error {
	color: var(--cchk-error);
}

.cchk-enquiry__notice--error h2,
.cchk-enquiry__notice--error h3,
.cchk-enquiry__notice--error h4,
.cchk-enquiry__notice--error h5 {
	margin: 0 0 0.5rem;
	color: var(--cchk-ink);
	font-size: 1.2rem;
}

.cchk-enquiry__notice--error a {
	color: var(--cchk-error);
	font-weight: 700;
}

/* Honeypot: off-screen rather than display:none (some bots detect that). */
.cchk-enquiry__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cchk-enquiry__privacy {
	margin: 0;
	color: var(--cchk-muted);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.cchk-enquiry__submit {
	justify-self: start;
	min-width: 12rem;
}

@media (min-width: 720px) {
	.cchk-enquiry__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cchk-enquiry__dates {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.25rem;
		grid-column: 1 / -1;
	}

	.cchk-enquiry__dates legend,
	.cchk-enquiry__dates .cchk-enquiry__hint {
		grid-column: 1 / -1;
	}

	.cchk-enquiry__field--wide {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   12. Contact, hours and map blocks
   ========================================================================== */

.cchk-contact__list {
	display: grid;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cchk-contact__list li + li {
	margin-top: 0;
}

.cchk-contact__label {
	display: block;
	margin-bottom: 0.1rem;
	color: var(--cchk-muted);
	font-family: var(--cchk-font-label);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cchk-contact__item--phone a {
	font-family: var(--cchk-font-heading);
	font-size: 1.85rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.cchk-contact__item--phone a:hover {
	text-decoration: underline;
}

.cchk-contact__note {
	display: block;
	color: var(--cchk-muted);
}

.hours-table,
.cchk-hours__table {
	font-variant-numeric: tabular-nums;
}

.hours-table th,
.hours-table td,
.cchk-hours__table th,
.cchk-hours__table td {
	padding: 0.3rem 0;
	text-align: left;
	vertical-align: top;
}

.hours-table th,
.cchk-hours__table th {
	padding-right: 1rem;
	font-weight: 400;
}

.hours-table td,
.cchk-hours__table td {
	text-align: right;
}

.cchk-hours__table th,
.cchk-hours__table td {
	border-bottom: 1px dashed var(--cchk-line);
}

.cchk-map {
	overflow: hidden;
	background-color: var(--cchk-sand);
	background-image: var(--cchk-grain);
	border-radius: var(--cchk-radius-large);
}

.cchk-map__placeholder {
	padding: 1.5rem;
}

.cchk-map__placeholder p {
	margin-bottom: 0.75rem;
}

.cchk-map__address {
	color: var(--cchk-brand-text);
	font-family: var(--cchk-font-heading);
	font-size: 1.2rem;
	font-weight: 600;
}

.cchk-map__privacy {
	color: var(--cchk-muted);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.cchk-map__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

.cchk-map__frame {
	display: block;
	width: 100%;
	height: 26rem;
	border: 0;
}

.cchk-map.is-loaded .cchk-map__privacy {
	display: none;
}

/* ==========================================================================
   13. Footer and mobile action bar
   ========================================================================== */

/*
 * Deep teal with the paper grain, livery stripes along the top, a brand row
 * (badge, name, a call to action) and then the reference columns.
 */
.site-footer {
	--cchk-focus: var(--cchk-focus-on-brand);
	position: relative;
	padding-top: var(--cchk-stripes-size);
	background-color: var(--cchk-brand-surface);
	background-image: var(--cchk-grain);
	color: var(--cchk-on-brand);
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: var(--cchk-stripes-size);
	background: var(--cchk-stripes-up);
}

.site-footer a {
	color: var(--cchk-on-brand-accent);
}

.site-footer a:hover {
	color: var(--cchk-surface);
}

.site-footer__brand {
	display: grid;
	gap: 2rem;
	max-width: var(--cchk-wide);
	margin: 0 auto;
	padding: 3.5rem var(--cchk-gutter) 2.75rem;
	border-bottom: 1px solid rgba(251, 246, 236, 0.16);
}

.site-footer__identity {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.site-footer__logo {
	display: block;
	flex-shrink: 0;
	width: 88px;
	height: 88px;
}

.site-footer__name {
	margin: 0 0 0.3rem;
	color: var(--cchk-on-brand);
	font-family: var(--cchk-font-heading);
	font-size: 1.65rem;
	font-weight: 600;
	line-height: 1.1;
}

.site-footer__about {
	max-width: 26rem;
	margin: 0;
	color: var(--cchk-on-brand-accent);
}

.site-footer__cta-title {
	margin: 0 0 0.85rem;
	color: var(--cchk-on-brand);
	font-family: var(--cchk-font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.15;
}

.site-footer__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.site-footer .button {
	color: var(--cchk-on-action);
}

.site-footer .button--ghost {
	color: var(--cchk-on-brand);
}

.site-footer .button--ghost:hover {
	border-color: var(--cchk-on-brand);
	background: var(--cchk-on-brand);
	color: var(--cchk-brand-surface);
}

.site-footer__inner {
	display: grid;
	gap: 2rem;
	max-width: var(--cchk-wide);
	margin: 0 auto;
	padding: 2.75rem var(--cchk-gutter) 2.25rem;
}

/* Column headings in the condensed capitals, like road-sign lettering. */
.site-footer__title {
	margin-bottom: 0.85rem;
	color: var(--cchk-on-brand-accent);
	font-family: var(--cchk-font-label);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.site-footer__list,
.site-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__list li,
.site-footer__menu li {
	margin-bottom: 0.45rem;
}

/* Menu links are in a list of links, so they need no underline until hovered. */
.site-footer__menu a {
	text-decoration: none;
}

.site-footer__menu a:hover {
	text-decoration: underline;
}

.site-footer__label {
	display: inline-block;
	min-width: 4.5rem;
	color: var(--cchk-on-brand-accent);
	font-weight: 700;
}

.site-footer__address {
	margin-bottom: 0.75rem;
}

.site-footer .hours-table th,
.site-footer .hours-table td {
	padding: 0.15rem 0;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	max-width: var(--cchk-wide);
	margin: 0 auto;
	padding: 1.1rem var(--cchk-gutter) 1.6rem;
	border-top: 1px solid rgba(251, 246, 236, 0.16);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.site-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.site-footer__brand {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 3rem;
	}

	.site-footer__logo {
		width: 104px;
		height: 104px;
	}
}

@media (min-width: 1100px) {
	.site-footer__inner {
		grid-template-columns: 1.2fr 1fr 1.2fr 1fr 1fr;
	}
}

/* Mobile action bar: Call and Enquire always within reach on phones. */
.mobile-actions {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	padding: 0.5rem var(--cchk-gutter) calc(0.5rem + env(safe-area-inset-bottom));
	background-color: var(--cchk-paper);
	background-image: var(--cchk-grain);
	border-top: 1px solid var(--cchk-line);
	box-shadow: 0 -4px 16px rgba(34, 30, 26, 0.1);
}

.mobile-actions__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	border: 2px solid var(--cchk-action);
	border-radius: var(--cchk-radius);
	font-family: var(--cchk-font-label);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.mobile-actions__link--call {
	background: var(--cchk-surface);
	color: var(--cchk-action);
}

.mobile-actions__link--call::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: var(--cchk-icon-phone) center / contain no-repeat;
	mask: var(--cchk-icon-phone) center / contain no-repeat;
}

.mobile-actions__link--enquire {
	background: var(--cchk-action);
	color: var(--cchk-on-action);
}

.mobile-actions__link--enquire:hover {
	color: var(--cchk-on-action);
}

/* Room for the bar so it never covers the end of the page. */
body {
	padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
	.mobile-actions {
		display: none;
	}

	body {
		padding-bottom: 0;
	}
}

/* ==========================================================================
   14. Not found, reduced motion and print
   ========================================================================== */

.link-list {
	padding-left: 1.25rem;
}

.link-list li {
	margin-bottom: 0.5rem;
	font-size: 1.1rem;
}

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

	/* No lifting, zooming or turning on hover. */
	.button:hover,
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.cchk-vehicle-card:hover,
	.wp-block-group.is-style-tile:hover,
	.cchk-vehicle-card:hover .cchk-vehicle-card__image,
	.wp-block-group.is-style-tile:hover > .wp-block-image img,
	.wp-block-gallery.has-nested-images figure.wp-block-image:hover img,
	.site-branding:hover .site-branding__logo {
		transform: none;
	}
}

@media print {
	.site-header,
	.primary-nav,
	.mobile-actions,
	.enquiry-band,
	.cchk-enquiry,
	.site-footer__brand,
	.site-footer__inner nav,
	.skip-link,
	.hero__stamp {
		display: none !important;
	}

	body,
	.hero,
	.page-header,
	.site-footer {
		padding: 0;
		background: #fff;
		color: #000;
	}

	.hero::after,
	.page-header::after,
	.page-header::before,
	.site-footer::before {
		display: none;
	}

	a {
		color: #000;
	}
}