/* ==========================================================================
   Pan Motors — main stylesheet
   1. Fonts  2. Tokens  3. Reset  4. Base type  5. Utilities
   6. Motion  7. Header  8. Footer  9. Homepage sections  10. Inner pages
   11. Page templates  11b. Inner page blocks (D12)  12. Reduced motion
   Sections add their own blocks below as they are built.
   ========================================================================== */

/* 1. Fonts — self-hosted woff2 (Fontsource, OFL) in assets/fonts/. The @font-face rules for the
   heading and body fonts chosen in Pan Motors → Design print in <head> (inc/design.php), so only
   those fonts load. */

/* 2. Tokens */

/* Transparent variants are built from the tokens, so they follow the Design settings.
   - Flat colours: color-mix(in srgb, var(--paper) 14.11764706%, transparent). The design's
     rgba(243, 242, 242, .14) is drawn with an 8-bit alpha (36/255 = 14.11764706%); the long
     percentages keep exactly that alpha, so the page draws pixel for pixel as before.
   - Gradient stops: rgb(var(--ink-rgb) / 0.72156863). Browsers draw gradients whose stops come
     from color-mix() on a different path (other interpolation and rounding), so gradients use the
     channel tokens, which inc/design.php prints next to the colours. */

:root {
	/* Design settings (Pan Motors → Design). These are the defaults; inc/design.php prints the saved
	   values in <head> after this file, on the front end and in the block editor. */
	--ink: #0c0b0b;
	--paper: #f3f2f2;
	--accent: #ec3013;
	/* Accent for small text (eyebrows, labels, footer links) on light backgrounds: the accent
	   darkened just enough to reach WCAG AA 4.5 : 1 on --paper. inc/design.php works it out from
	   the saved accent; this is the value for the default one. Buttons, large text and everything
	   on dark backgrounds keep --accent. */
	--accent-text-light: #d32c12;
	--surface: #161514;
	/* The same two colours as channels, for gradient stops. */
	--ink-rgb: 12 11 11;
	--paper-rgb: 243 242 242;
	--r: 24px;
	/* Fallbacks as in the design: glyphs the subsets lack (e.g. the → arrow) come from the same generic font. */
	--font-display: 'Bodoni Moda', serif;
	--font-body: 'Archivo', sans-serif;
	--h-scale: 1; /* Multiplies every heading clamp(). */
	--fs-body: 16px; /* Body text; smaller text sizes are fractions of it. */
	--logo-h: 46px;
	--logo-h-m: 46px;
	/* Fixed: text on accent buttons and selection, the design system's caption ink, shadows. */
	--on-accent: #fff;
	--ink-soft: #201e1d;
	--shadow: #000;
	--ease: cubic-bezier(.16, .84, .3, 1);
	/* The design's text sits on Google Archivo's "normal" line height, 1.55. Self-hosted Archivo
	   has different font metrics, so "normal" would be tighter here: use this instead. */
	--lh: 1.55;
	--line-dark: color-mix(in srgb, var(--paper) 14.11764706%, transparent);
	--line-light: color-mix(in srgb, var(--ink) 18.03921569%, transparent);
	--pad-x: 40px;
	--pad-y: 132px;
	--nav-h: 82px;
}

@media (max-width: 880px) {
	:root {
		--pad-x: 20px;
		--pad-y: 88px;
	}
}

/* 3. Reset */

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

* {
	-webkit-tap-highlight-color: transparent;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--nav-h);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

img,
video {
	height: auto;
	backface-visibility: hidden;
}

figure,
dl,
dd {
	margin: 0;
}

address {
	font-style: normal;
}

summary {
	display: block;
	cursor: pointer;
	list-style: none;
}

summary::-webkit-details-marker {
	display: none;
}

a {
	color: inherit;
	text-decoration: none;
}

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

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

::selection {
	background: var(--accent);
	color: var(--on-accent);
}

/* 4. Base type — every heading is set explicitly, weight 400, Bodoni. */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
}

h1 {
	font-size: calc(clamp(56px, 9.4vw, 176px) * var(--h-scale));
	line-height: .86;
	letter-spacing: -.02em;
}

h2 {
	font-size: calc(clamp(40px, 6vw, 96px) * var(--h-scale));
	line-height: .92;
}

h3 {
	font-size: calc(clamp(26px, 2.2vw, 34px) * var(--h-scale));
	line-height: 1.02;
}

h4,
h5,
h6 {
	font-size: calc(clamp(20px, 1.6vw, 24px) * var(--h-scale));
	line-height: 1.2;
}

p {
	margin: 0;
}

/* 5. Utilities */

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

.pm-skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	transform: translateY(-200%);
	transition: transform .4s var(--ease);
}

.pm-skip-link:focus {
	transform: none;
	color: var(--ink);
}

/* Unstyled list (marquee, link rows). */
.pm-list-reset {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Horizontal / vertical section padding. */
.pm-pad {
	padding-left: var(--pad-x);
	padding-right: var(--pad-x);
}

.pm-pad-y {
	padding-top: var(--pad-y);
	padding-bottom: var(--pad-y);
}

/* Light section: paper background, ink text. */
.pm-light {
	background: var(--paper);
	color: var(--ink);
}

/* Small uppercase accent label above headings. A <p>, or a <span> inside the home H1. */
.pm-eyebrow {
	display: block;
	margin: 0 0 22px;
	color: var(--accent);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .32em;
	line-height: var(--lh);
	text-transform: uppercase;
}

/* Section title: H2 scale on any element. */
.pm-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: calc(clamp(40px, 6vw, 96px) * var(--h-scale));
	line-height: .92;
}

/* Heading on the left, short intro or controls on the right. */
.pm-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 40px;
	margin-bottom: 54px;
}

/* Intro with a button under it (Featured Cars on the homepage, v2). */
.pm-section-head__aside {
	display: grid;
	justify-items: start;
	gap: 22px;
}

.pm-lede {
	max-width: 340px;
	font-size: calc(var(--fs-body) * .875);
	line-height: 1.7;
	opacity: .6;
}

/* Small uppercase meta text. */
.pm-meta {
	font-size: 11px;
	letter-spacing: .2em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* Outlined pill link or button. Inverts to paper on hover. */
.pm-pill {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	flex: none;
	padding: 15px 28px;
	border: 1px solid color-mix(in srgb, var(--paper) 34.11764706%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: .2em;
	line-height: var(--lh);
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .4s, color .4s, border-color .4s;
}

.pm-pill:hover,
.pm-pill:focus-visible {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

.pm-light .pm-eyebrow {
	color: var(--accent-text-light);
}

.pm-light .pm-pill {
	border-color: color-mix(in srgb, var(--ink) 27.84313725%, transparent);
	color: var(--ink);
}

.pm-light .pm-pill:hover,
.pm-light .pm-pill:focus-visible {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

/* Smaller outlined pill (v2 "All featured cars"). */
.pm-pill--small {
	display: inline-block;
	padding: 13px 24px;
	transition-duration: .5s;
}

/* Solid pill: paper by default, accent on hover, lifts and widens. */
.pm-pill--solid {
	gap: 18px;
	padding: 18px 30px;
	border: 0;
	background: var(--paper);
	color: var(--ink);
	font-size: 12px;
	transition: background .6s var(--ease), color .6s, transform .6s, letter-spacing .6s;
}

.pm-pill--solid:hover,
.pm-pill--solid:focus-visible {
	background: var(--accent);
	color: var(--on-accent);
	transform: translateY(-3px);
	letter-spacing: .26em;
}

/* Round icon button (slider arrows). */
.pm-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--paper) 34.11764706%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1;
	transition: background .4s, color .4s, border-color .4s;
}

.pm-round:hover,
.pm-round:focus-visible {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

.pm-light .pm-round {
	border-color: color-mix(in srgb, var(--ink) 27.84313725%, transparent);
	color: var(--ink);
}

.pm-light .pm-round:hover,
.pm-light .pm-round:focus-visible {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

/* Link underline that grows from the left. */
.pm-underline {
	position: relative;
}

.pm-underline::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -7px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .7s var(--ease);
}

.pm-underline:hover::after,
.pm-underline:focus-visible::after {
	transform: scaleX(1);
}

/* Rounded media frame. Children fill it. */
.pm-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface);
}

.pm-media > img,
.pm-media > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Slow zoom on hover for images inside [data-zoom]. */
[data-zoom] img,
[data-zoom] video {
	transition: transform 1.5s var(--ease), filter 1.2s ease;
}

[data-zoom]:hover img,
[data-zoom]:hover video,
[data-zoom]:focus-visible img,
[data-zoom]:focus-visible video,
[data-zoom]:focus-within img,
[data-zoom]:focus-within video {
	transform: scale(1.055);
}

/* 6. Motion */

@keyframes pm-rise {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

@keyframes pm-rise-l {
	from { opacity: 0; transform: translateX(-36px); }
	to { opacity: 1; transform: none; }
}

@keyframes pm-hero-in {
	from { opacity: 0; transform: translateY(44px); filter: blur(6px); }
	to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes pm-drift {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/*
 * Scroll reveal. Hidden only when JS runs (html.pm-js, set in <head>),
 * so content stays visible if reveal.js fails or is missing.
 * reveal.js adds .in and sets the stagger delay.
 */
.pm-js [data-rise],
.pm-js [data-rise-l] {
	opacity: 0;
}

.pm-js [data-rise].in {
	animation: pm-rise 1s var(--ease) forwards;
}

.pm-js [data-rise-l].in {
	animation: pm-rise-l 1.1s var(--ease) forwards;
}

/* Revealed: the finished animation is dropped (reveal.js), so its held transform no longer blocks
   hover transforms such as the lift of the light value cards. */
.pm-js [data-rise].in-done,
.pm-js [data-rise-l].in-done {
	opacity: 1;
	animation: none;
}

[data-hero-in] {
	animation: pm-hero-in 1.5s var(--ease) both;
}

[data-hero-in="2"] {
	animation-delay: .2s;
}

[data-hero-in="3"] {
	animation-delay: .38s;
}

/* 7. Header: fixed nav and mobile menu panel */

.pm-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px clamp(20px, 3vw, 40px);
	background: linear-gradient(to bottom, rgb(var(--ink-rgb) / 0.72156863), transparent);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	color: var(--paper);
}

.admin-bar .pm-nav,
.admin-bar .pm-menu {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.pm-nav__logo {
	display: flex;
	flex: none;
	align-items: center;
}

.pm-nav__logo-img {
	width: auto;
	height: var(--logo-h);
}

@media (max-width: 880px) {
	.pm-nav__logo-img {
		height: var(--logo-h-m);
	}
}

.pm-nav__logo-text {
	font-family: var(--font-display);
	font-size: 26px;
	letter-spacing: .04em;
}

.pm-nav__links {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 34px);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .18em;
	line-height: var(--lh);
	text-transform: uppercase;
	white-space: nowrap;
}

.pm-nav__link {
	display: inline-block;
	opacity: .78;
	transition: opacity .3s, color .3s;
}

.pm-nav__link:hover,
.pm-nav__link:focus-visible {
	opacity: 1;
}

.pm-nav__contact {
	flex: none;
	padding: 11px 24px;
	border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: .2em;
	line-height: var(--lh);
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .4s, color .4s, border-color .4s;
}

.pm-nav__contact:hover,
.pm-nav__contact:focus-visible {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

.pm-burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 34.90196078%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--paper);
	transition: background .5s, border-color .5s, color .5s;
}

.pm-burger:hover,
.pm-burger:focus-visible,
.pm-burger[aria-expanded="true"] {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

.pm-burger__line {
	display: block;
	width: 18px;
	height: 1px;
	background: currentColor;
}

/* Mobile menu panel. Closed: moved up and out, hidden from assistive tech after the slide. */
.pm-menu {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 55;
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
	padding: 104px 24px 40px;
	border-radius: 0 0 var(--r) var(--r);
	background: color-mix(in srgb, var(--ink) 96.8627451%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: var(--paper);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-102%);
	transition: transform .85s var(--ease), opacity .5s ease, visibility 0s linear .85s;
}

.pm-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: transform .85s var(--ease), opacity .5s ease, visibility 0s;
}

.pm-menu__links {
	display: grid;
	gap: 4px;
}

.pm-menu__link {
	display: block;
	padding: 6px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--paper) 12.15686275%, transparent);
	font-family: var(--font-display);
	font-size: 30px;
	letter-spacing: .01em;
	line-height: 1.5;
	transition: padding-left .5s var(--ease), color .4s;
}

.pm-menu__link:hover,
.pm-menu__link:focus-visible {
	padding-left: 14px;
	color: var(--accent);
}

.pm-menu__link:focus-visible {
	outline-offset: -2px;
}

/* Current page: accent at full opacity (v2). WordPress sets aria-current on menu links. On the
   Contact page the Contact pill shows filled. */
.pm-nav__link[aria-current="page"] {
	opacity: 1;
	color: var(--accent);
}

.pm-nav__contact[aria-current="page"] {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

.pm-menu__link[aria-current="page"] {
	padding-left: 14px;
	color: var(--accent);
}

.pm-footer a[aria-current="page"] {
	opacity: 1;
	color: var(--accent-text-light);
}

.pm-footer--dark a[aria-current="page"] {
	color: var(--accent);
}

@media (max-width: 1080px) {
	.pm-nav__links,
	.pm-nav__contact {
		display: none;
	}

	.pm-burger {
		display: inline-flex;
	}
}

@media (min-width: 1081px) {
	.pm-menu {
		display: none;
	}
}

/* Body scroll lock while the mobile menu is open. */
.pm-menu-open,
.pm-menu-open body {
	overflow: hidden;
}

/* 8. Footer */

.pm-footer {
	padding: 0 var(--pad-x) 44px;
	font-size: 11px;
	letter-spacing: .18em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-top: 34px;
	/* --line-light at the .62 the row's text is shown at. */
	border-top: 1px solid color-mix(in srgb, var(--ink) 11.18431373%, transparent);
}

/* Footer text at .62, set on each part rather than the row, so the current page and a hovered or
   focused link can show at full strength: the accent at .62 is below 4.5 : 1 on both backgrounds. */
.pm-footer__brand,
.pm-footer__copy,
.pm-footer__links a {
	opacity: .62;
}

.pm-footer__brand {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pm-footer__logo {
	width: auto;
	height: 34px;
	filter: invert(1);
}

/* The logo for light backgrounds (Pan Motors → Design) is used as it is. */
.pm-footer__logo--light {
	filter: none;
}

.pm-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

.pm-footer a:hover,
.pm-footer a:focus-visible {
	opacity: 1;
	color: var(--accent-text-light);
}

/* Dark footer (Footer style, inner-pages §2.2): on the ink page, main logo as it is. */
.pm-footer--dark .pm-footer__row {
	border-top-color: color-mix(in srgb, var(--paper) 9.96862745%, transparent);
}

.pm-footer--dark .pm-footer__logo {
	filter: none;
}

.pm-footer--dark a:hover,
.pm-footer--dark a:focus-visible {
	color: var(--accent);
}

@media (max-width: 880px) {
	.pm-footer__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}
}

/* 9. Homepage sections */

/* Hero */
.pm-hero {
	position: relative;
	height: 100vh;
	min-height: 680px;
	overflow: hidden;
}

.pm-hero__media {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pm-hero__poster,
.pm-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%) scale(1.04);
	filter: grayscale(0.3) contrast(1.06) brightness(.64);
}

/* The video fades in over the poster once it actually plays. */
.pm-js .pm-hero__video {
	opacity: 0;
	transition: opacity 1.2s ease;
}

.pm-js .pm-hero__video.is-playing {
	opacity: 1;
}

.pm-hero__shade {
	position: absolute;
	inset: 0;
	/* Near-solid ink from the eyebrow down: the red eyebrow reaches 4.5 : 1 over the brightest
	   pixel of the poster (TASKS 6). */
	background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.54901961) 0%, rgb(var(--ink-rgb) / 0.14901961) 58%, rgb(var(--ink-rgb) / .97) 80%, rgb(var(--ink-rgb) / .98) 100%);
}

.pm-hero__copy {
	position: absolute;
	left: 40px;
	right: 40px;
	bottom: 56px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
}

.pm-hero__title {
	max-width: 900px;
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
}

.pm-hero__eyebrow {
	margin-bottom: 26px;
}

.pm-hero__line {
	display: block;
	font-family: var(--font-display);
	font-size: calc(clamp(56px, 9.4vw, 176px) * var(--h-scale));
	font-weight: 400;
	line-height: .86;
	letter-spacing: -.02em;
}

.pm-hero__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pm-hero__cta-arrow {
	font-size: 16px;
	line-height: var(--lh); /* Pill height about 61px, as in the design. */
}

@media (max-width: 880px) {
	.pm-hero {
		height: 100vh;
		height: 100svh;
		min-height: 560px;
	}

	.pm-hero__copy {
		left: 20px;
		right: 20px;
		bottom: 32px;
		gap: 28px;
	}
}

/* Marquee */
.pm-marquee {
	overflow: hidden;
	padding: 20px 0;
	border-top: 1px solid var(--line-dark);
	border-bottom: 1px solid var(--line-dark);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.pm-marquee__track {
	display: flex;
	width: max-content;
	animation: pm-drift 34s linear infinite;
}

.pm-marquee__list {
	display: flex;
	gap: 64px;
	padding-left: 64px;
}

.pm-marquee__item {
	font-family: var(--font-display);
	font-size: 26px;
	letter-spacing: .12em;
	line-height: var(--lh);
	text-transform: uppercase;
	white-space: nowrap;
	opacity: .5;
}

@media (max-width: 880px) {
	.pm-marquee__item {
		font-size: 19px;
	}
}

/* Featured Cars */
.pm-featured {
	padding-top: 132px;
	padding-bottom: 40px;
}

.pm-featured__tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.pm-tile {
	position: relative;
	/* Basis 0 (not the design's calc(25% - 11px)) so flex-grow has room to work:
	   same widths at rest, and the hovered tile visibly widens. */
	flex: 1 1 0;
	min-width: 0;
	max-width: calc(50% - 7px);
	height: 620px;
	max-height: 72vh;
	min-height: 460px;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface);
	transition: flex-grow 1.05s var(--ease), box-shadow .9s ease;
}

.pm-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.5s var(--ease), filter 1.2s ease;
}

.pm-tile__shade {
	position: absolute;
	inset: 0;
	/* Near-solid ink behind the copy, so the red marque reaches 4.5 : 1 (TASKS 6). */
	background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.10196078) 30%, rgb(var(--ink-rgb) / .97) 68%, rgb(var(--ink-rgb) / .98) 100%);
	pointer-events: none;
}

.pm-tile__copy {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 24px;
}

.pm-tile__marque {
	margin-bottom: 12px;
	color: var(--accent);
	font-size: 10px;
	letter-spacing: .28em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-tile__model {
	margin: 0 0 14px;
	font-size: calc(clamp(26px, 2.2vw, 34px) * var(--h-scale));
	line-height: 1.02;
}

.pm-tile__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 11px;
	letter-spacing: .14em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: .66;
}

/* Optional per-tile link: the whole tile is the target. */
.pm-tile__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

/* Hover only where hover exists: touch screens keep the even row. */
@media (hover: hover) {
	.pm-tile:hover {
		flex-grow: 2.6;
		box-shadow: 0 34px 90px color-mix(in srgb, var(--shadow) 54.90196078%, transparent);
	}

	.pm-tile:hover .pm-tile__img {
		transform: scale(1.055);
	}
}

.pm-tile:focus-within {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

@media (max-width: 880px) {
	.pm-tile {
		flex: 1 1 100%;
		max-width: 100%;
		height: 78vw;
		min-height: 400px; /* max-height 72vh still applies, as in the design */
	}
}

/* Our Values */
.pm-values__title {
	margin-bottom: 54px;
}

.pm-values__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 14px;
}

/* Dark cards (Home): between phone and wide screens four cards would break 3 + 1 with cramped
   titles, so two by two. The light section (About) keeps the v2 auto-fit grid. */
@media (min-width: 641px) and (max-width: 1180px) {
	.pm-values:not(.pm-values--light) .pm-values__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.pm-value {
	display: block;
	min-height: 340px;
	padding: 44px 36px 36px;
	border: 1px solid color-mix(in srgb, var(--paper) 16.07843137%, transparent);
	border-radius: var(--r);
	background: transparent;
	color: var(--paper);
	transition: background .75s var(--ease), color .75s, border-color .75s, transform .75s var(--ease), box-shadow .75s;
}

.pm-value:hover,
.pm-value:focus-visible {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
	transform: translateY(-8px);
	box-shadow: 0 30px 70px color-mix(in srgb, var(--shadow) 45.09803922%, transparent);
}

.pm-value__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 22px;
	border-bottom: 1px solid currentColor;
	opacity: .9;
}

.pm-value__index {
	font-size: 11px;
	letter-spacing: .28em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-value__arrow {
	font-size: 20px;
	line-height: var(--lh);
}

.pm-value__title {
	margin: 40px 0 18px;
	font-size: calc(clamp(32px, 4.4vw, 44px) * var(--h-scale));
	line-height: 1;
}

.pm-value__body {
	max-width: 34ch;
	font-size: calc(var(--fs-body) * .875);
	line-height: 1.75;
	opacity: .68;
}

/* Our Values, light section (About, v2): paper panel with rounded top, heading and intro, cards
   with an ink hairline that invert to ink and lift on hover. Not links. */
.pm-values--light {
	padding-top: 140px;
	padding-bottom: 140px;
	border-radius: var(--r) var(--r) 0 0;
}

.pm-values--light .pm-lede {
	opacity: .62;
}

.pm-values--light .pm-value {
	min-height: 320px;
	padding: 40px 32px 34px;
	border-color: color-mix(in srgb, var(--ink) 16.07843137%, transparent);
	color: var(--ink);
}

.pm-values--light .pm-value:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
	transform: translateY(-8px);
	box-shadow: 0 30px 70px color-mix(in srgb, var(--ink) 30.19607843%, transparent);
}

.pm-values--light .pm-value__top {
	padding-bottom: 20px;
	opacity: 1;
}

.pm-values--light .pm-value__title {
	margin: 38px 0 16px;
	font-size: calc(clamp(30px, 2.8vw, 40px) * var(--h-scale));
}

.pm-values--light .pm-value__body {
	max-width: none;
	opacity: .7;
}

@media (max-width: 880px) {
	.pm-values--light {
		padding-top: var(--pad-y);
		padding-bottom: var(--pad-y);
	}
}

/* About (home): background blends ink → paper while scrolling (heritage-fade.js). */
.pm-about {
	--fade: 0;
	--tfade: 0;
	background: color-mix(in oklab, var(--ink), var(--paper) calc(var(--fade) * 100%));
	color: color-mix(in oklab, var(--paper), var(--ink) calc(var(--tfade) * 100%));
	transition: background-color .12s linear, color .45s cubic-bezier(.4, 0, .2, 1);
}

.pm-about__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	align-items: center;
	gap: 48px;
}

.pm-about__media {
	aspect-ratio: 4 / 5;
}

/* Media type Video (about-video.js; Home About and About Story, components/media-video.php): the
   clip fades in over the poster once it plays. */
.pm-media > .pm-about__video {
	opacity: 0;
	transition: opacity .8s ease, transform 1.5s var(--ease), filter 1.2s ease;
}

.pm-media > .pm-about__video.is-playing {
	opacity: 1;
}

.pm-about__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Pause / play (upload) and play (YouTube, Vimeo): round buttons on the photo. */
.pm-about__toggle,
.pm-about__play {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 35%, transparent);
	color: var(--paper);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: background .5s, color .5s, border-color .5s;
}

.pm-about__toggle {
	bottom: 18px;
	left: 18px;
	width: 48px;
	height: 48px;
}

.pm-about__play {
	top: 50%;
	left: 50%;
	width: 84px;
	height: 84px;
	transform: translate(-50%, -50%);
}

.pm-about__toggle[hidden],
.pm-about__play[hidden] {
	display: none;
}

.pm-about__toggle:hover,
.pm-about__toggle:focus-visible,
.pm-about__play:hover,
.pm-about__play:focus-visible {
	border-color: var(--paper);
	background: var(--paper);
	color: var(--ink);
}

/* Play: a triangle. Pause (while the clip plays): two bars. */
.pm-about__icon {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 11px solid currentColor;
}

.pm-about__play .pm-about__icon {
	margin-left: 5px;
	border-top-width: 11px;
	border-bottom-width: 11px;
	border-left-width: 17px;
}

.pm-about__toggle.is-playing .pm-about__icon {
	width: 12px;
	height: 14px;
	margin-left: 0;
	border: 0;
	border-right: 4px solid currentColor;
	border-left: 4px solid currentColor;
}

.pm-about__eyebrow {
	margin-bottom: 26px;
}

.pm-about__title {
	margin: 0 0 32px;
	font-size: calc(clamp(40px, 5.4vw, 88px) * var(--h-scale));
	line-height: .94;
}

.pm-about__text {
	max-width: 46ch;
	margin: 0 0 22px;
	font-size: var(--fs-body);
	line-height: 1.8;
	opacity: .78;
}

.pm-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 38px;
	padding-top: 30px;
	border-top: 1px solid color-mix(in oklab, currentColor, transparent 72%);
}

.pm-stats__value {
	font-family: var(--font-display);
	font-size: calc(clamp(30px, 2.6vw, 40px) * var(--h-scale));
	line-height: 1;
}

.pm-stats__label {
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .58;
}

@media (max-width: 880px) {
	.pm-stats {
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}
}

/* Latest Cars (home): drag slider. */
.pm-latest {
	padding: 120px 0 132px;
	overflow: hidden;
}

.pm-latest__head {
	margin-bottom: 44px;
}

.pm-latest__controls {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pm-latest__counter {
	margin-right: 14px;
	font-size: 12px;
	letter-spacing: .2em;
	opacity: .55;
}

.pm-latest__viewport {
	width: 100%;
	overflow: hidden;
}

.pm-latest__viewport:focus-visible {
	outline-offset: -2px;
}

.pm-latest__track {
	display: flex;
	gap: 18px;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	will-change: transform;
}

.pm-latest__track.is-dragging {
	cursor: grabbing;
}

.pm-slide {
	flex: none;
	width: min(68vw, 980px);
	margin: 0;
}

.pm-slide__media {
	aspect-ratio: 16 / 9;
}

.pm-slide__caption {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 4px; /* From the design system's figcaption rule. */
	padding-top: 18px;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .6;
}

@media (max-width: 880px) {
	.pm-slide {
		width: 84vw;
	}
}

/* Pan Motors Live (home only) */
.pm-live {
	padding-top: 118px;
	padding-bottom: 140px;
	background: var(--ink);
}

.pm-live__head {
	margin-bottom: 44px;
}

.pm-live__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 16px;
	max-width: 1120px;
	margin: 0 auto;
}

.pm-post {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface);
	color: var(--paper);
	transition: transform .9s var(--ease), box-shadow .9s ease;
}

.pm-post:hover,
.pm-post:focus-visible {
	transform: translateY(-8px);
	box-shadow: 0 30px 70px color-mix(in srgb, var(--shadow) 50.19607843%, transparent);
}

.pm-post__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pm-post__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 52%, rgb(var(--ink-rgb) / 0.81960784) 100%);
	pointer-events: none;
}

.pm-post__meta {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	pointer-events: none;
}

.pm-post__caption {
	margin-left: auto;
	opacity: .5;
}

@media (max-width: 880px) {
	.pm-live {
		padding-top: var(--pad-y);
		padding-bottom: var(--pad-y);
	}
}

/* Showroom (home): paper section, blurred copy of the current photo behind a radial wash. */
.pm-showroom {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 120px 0 104px;
	border-radius: var(--r) var(--r) 0 0;
}

.pm-showroom__backdrop {
	position: absolute;
	inset: -8%;
	z-index: 0;
	pointer-events: none;
}

.pm-showroom__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(64px) saturate(.35) brightness(1.5) contrast(.55);
	opacity: 0;
	transform: scale(1.2);
	transition: opacity .8s;
}

.pm-showroom__bg.is-active {
	opacity: .5;
}

.pm-showroom__wash {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(120% 80% at 50% 40%, rgb(var(--paper-rgb) / 0.54901961) 0%, rgb(var(--paper-rgb) / 0.94117647) 72%);
	pointer-events: none;
}

.pm-showroom__inner {
	position: relative;
	z-index: 2;
}

.pm-showroom__head {
	margin-bottom: 52px;
}

.pm-showroom__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 3vw, 40px);
}

.pm-showroom__arrow {
	width: 60px;
	height: 60px;
	background: color-mix(in srgb, var(--paper) 50.19607843%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.pm-showroom__figure {
	flex: 1 1 auto;
	max-width: min(1080px, 76vw);
	margin: 0;
}

.pm-showroom__photos {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: 0 40px 110px color-mix(in srgb, var(--ink) 27.84313725%, transparent);
}

.pm-showroom__photos:focus-visible {
	outline-offset: 4px;
}

/* Two classes so this outranks the generic [data-zoom] img transition, which has no opacity. */
.pm-showroom__photos .pm-showroom__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .75s ease, transform 1.5s var(--ease);
}

.pm-showroom__photos .pm-showroom__photo.is-active {
	opacity: 1;
}

/* Colour and 4px top margin from the design system's figcaption rule. */
.pm-showroom__caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-top: 4px;
	padding-top: 20px;
	color: color-mix(in srgb, var(--ink-soft) 62%, transparent); /* 4.5 : 1 on the wash (TASKS 6). */
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.pm-showroom__caption-text,
.pm-showroom__count {
	opacity: 1; /* Was .72 and .48: 2.5 and 1.8 : 1. */
}

.pm-showroom__photos[data-slider-viewport] {
	touch-action: pan-y;
}

/* The dots, as on the Showroom page's Photo slider (.pm-slider__dot). */
.pm-showroom__dots {
	margin-top: 26px;
}

.pm-showroom__nav {
	display: none;
	justify-content: center;
	gap: 12px;
	padding-top: 22px;
}

.pm-showroom__nav-btn {
	width: 52px;
	height: 52px;
	font-size: 17px;
}

/* Opening hours rows. */
.pm-hours {
	display: grid;
	margin-top: 76px;
	border-top: 1px solid var(--line-light);
}

.pm-hours__row {
	display: grid;
	grid-template-columns: 220px 1fr auto;
	align-items: center;
	gap: 28px;
	padding: 26px 20px;
	border-bottom: 1px solid var(--line-light);
	transition: background .45s, color .45s, padding-left .45s;
}

.pm-hours__row:hover {
	padding-left: 34px;
	background: var(--ink);
	color: var(--paper);
}

.pm-hours__day,
.pm-hours__note {
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .6;
}

.pm-hours__time {
	font-family: var(--font-display);
	font-size: calc(clamp(22px, 2vw, 30px) * var(--h-scale));
	line-height: 1.05;
}

@media (max-width: 880px) {
	.pm-showroom__figure {
		max-width: 100%;
	}

	.pm-showroom__arrow {
		display: none;
	}

	.pm-showroom__nav {
		display: flex;
	}

	.pm-hours__row {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 20px 4px;
	}
}

/* Questions (pm/faq, Contact): hairline rows on the dark page like the contact rows; Bodoni
   question, body answer, accent on the open item; native details/summary. */
.pm-faq__title {
	margin-bottom: 56px;
}

.pm-contact-form + .pm-faq {
	padding-top: 0;
}

.pm-faq__list {
	border-top: 1px solid color-mix(in srgb, var(--paper) 16.07843137%, transparent);
}

.pm-faq__item {
	border-bottom: 1px solid color-mix(in srgb, var(--paper) 16.07843137%, transparent);
}

.pm-faq__question {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 30px 20px;
	font-family: var(--font-display);
	font-size: calc(clamp(22px, 2.4vw, 36px) * var(--h-scale));
	line-height: 1.15;
	list-style: none;
	cursor: pointer;
	transition: color .5s, padding-left .6s var(--ease);
}

.pm-faq__question::-webkit-details-marker {
	display: none;
}

/* A plus that turns into a cross when open. */
.pm-faq__question::after {
	content: "+";
	flex: none;
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 1;
	transition: transform .5s var(--ease);
}

.pm-faq__question:hover,
.pm-faq__question:focus-visible {
	padding-left: 34px;
}

.pm-faq__question:focus-visible {
	outline-offset: -2px;
}

.pm-faq__item[open] .pm-faq__question {
	color: var(--accent);
}

.pm-faq__item[open] .pm-faq__question::after {
	transform: rotate(45deg);
}

.pm-faq__answer {
	max-width: 68ch;
	margin: 0;
	padding: 0 20px 30px;
	font-size: calc(var(--fs-body) * .9375);
	line-height: 1.8;
	opacity: .72;
}

@media (max-width: 880px) {
	.pm-faq__question {
		padding: 22px 4px;
	}

	.pm-faq__question:hover,
	.pm-faq__question:focus-visible {
		padding-left: 4px;
	}

	.pm-faq__answer {
		padding: 0 4px 24px;
	}
}

/* Come And See (home): dark card on paper, contact details and the form. */
.pm-enquire {
	padding-top: 20px;
	padding-bottom: 120px;
}

.pm-enquire__card {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 64px;
	padding: 72px 56px;
	border-radius: var(--r);
	background: var(--ink);
	color: var(--paper);
}

.pm-enquire__title {
	margin: 0 0 24px;
	font-size: calc(clamp(40px, 5vw, 80px) * var(--h-scale));
	line-height: .94;
}

.pm-enquire__intro {
	max-width: 40ch;
	margin: 0 0 34px;
	font-size: calc(var(--fs-body) * .9375);
	line-height: 1.8;
	opacity: .66;
}

.pm-enquire__details {
	display: grid;
	gap: 10px;
	font-size: calc(var(--fs-body) * .8125);
	letter-spacing: .1em;
	opacity: .7;
}

.pm-enquire__details a:hover,
.pm-enquire__details a:focus-visible {
	color: var(--accent);
}

.pm-enquire__logo {
	width: auto;
	height: 54px;
	margin-top: 18px;
}

@media (max-width: 880px) {
	.pm-enquire__card {
		gap: 38px;
		padding: 40px 24px;
	}
}

/*
 * .pm-form: the form plugin's markup, styled to the design. Covers Contact Form 7
 * (.wpcf7-*), Fluent Forms (.ff-*) and WPForms (.wpforms-*) plus the static fallback.
 * Labels use a 50% colour, not opacity, so inputs nested inside a label (CF7's default
 * template) are not dimmed.
 */
.pm-form form,
.pm-form .ff-el-group-wrap {
	display: grid;
	align-content: start;
	gap: 18px;
	margin: 0;
}

.pm-form p,
.pm-form .ff-el-group,
.pm-form .wpforms-field,
.pm-form .wpcf7-form > p {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.pm-form .wpforms-field-container,
.pm-form .wpforms-submit-container {
	display: grid;
	gap: 18px;
	padding: 0;
}

.pm-form label,
.pm-form legend,
.pm-form .ff-el-input--label label,
.pm-form .wpforms-field-label {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	color: color-mix(in srgb, var(--paper) 50.19607843%, transparent);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .26em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-form .ff-el-is-required.asterisk-right label::after,
.pm-form .wpforms-required-label {
	color: var(--accent);
}

.pm-form input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="file"]),
.pm-form textarea,
.pm-form select,
.pm-form .ff-default .ff-el-form-control { /* Fluent Forms' own rule is .ff-default .ff-el-form-control. */
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--paper) 27.84313725%, transparent);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 16px;
	letter-spacing: normal;
	line-height: normal; /* Form controls don't inherit the page line height, as in the design. */
	text-transform: none;
	outline: none;
	transition: border-color .35s;
}

.pm-form textarea {
	min-height: 0;
	resize: none;
}

.pm-form select option {
	color: var(--ink);
}

/* Focus: the accent underline is the focus indicator, as in the design. */
.pm-form input:focus,
.pm-form textarea:focus,
.pm-form select:focus,
.pm-form .ff-default .ff-el-form-control:focus {
	background: transparent;
	color: var(--paper);
	border-bottom-color: var(--accent);
	box-shadow: none;
	outline: none;
}

.pm-form input::placeholder,
.pm-form textarea::placeholder {
	color: color-mix(in srgb, var(--paper) 40%, transparent);
	opacity: 1;
}

.pm-form [type="submit"],
.pm-form button:not([type="button"]),
.pm-form .wpcf7-submit,
.pm-form .ff-btn-submit,
.pm-form .ff-default .ff-btn-submit:not(.ff_btn_no_style), /* Beats Fluent Forms' blue default. */
.pm-form .wpforms-submit {
	justify-self: start;
	width: auto;
	margin-top: 14px;
	padding: 18px 34px;
	border: 0;
	border-radius: 999px;
	background: var(--accent-text-light); /* White on --accent is 4.2 : 1; this is 5.1. */
	box-shadow: none;
	color: var(--on-accent);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .2em;
	line-height: normal;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .6s var(--ease), color .6s, letter-spacing .6s, transform .6s;
}

.pm-form [type="submit"]:not(:disabled):is(:hover, :focus-visible),
.pm-form .ff-btn-submit:not(:disabled):is(:hover, :focus-visible),
.pm-form .ff-default .ff-btn-submit:not(.ff_btn_no_style):not(:disabled):is(:hover, :focus-visible),
.pm-form .wpforms-submit:not(:disabled):is(:hover, :focus-visible) {
	background: var(--paper);
	color: var(--ink);
	letter-spacing: .28em;
	transform: translateY(-3px);
}

.pm-form [type="submit"]:disabled {
	cursor: not-allowed;
}

/* Loading: CF7 adds .submitting to the form, Fluent .disabled to the button, WPForms a spinner. */
.pm-form .submitting [type="submit"],
.pm-form .ff-btn-submit.disabled,
.pm-form .ff-working .ff-btn-submit,
.pm-form .wpforms-submit[disabled] {
	opacity: .6;
	pointer-events: none;
}

.pm-form .wpcf7-spinner,
.pm-form .ff-loader,
.pm-form .wpforms-submit-spinner {
	width: 18px;
	height: 18px;
	margin: 0 0 0 14px;
	border: 2px solid color-mix(in srgb, var(--paper) 60%, transparent);
	border-right-color: transparent;
	border-radius: 50%;
	background: none;
	opacity: 1;
	vertical-align: middle;
	animation: pm-spin .8s linear infinite;
}

.pm-form .wpcf7-spinner::before {
	display: none;
}

.pm-form form:not(.submitting) .wpcf7-spinner {
	visibility: hidden;
}

@keyframes pm-spin {
	to { transform: rotate(360deg); }
}

/* Validation. */
.pm-form .wpcf7-not-valid,
.pm-form .ff-el-is-error .ff-el-form-control,
.pm-form input.wpforms-error,
.pm-form textarea.wpforms-error,
.pm-form [aria-invalid="true"] {
	border-bottom-color: var(--accent);
}

.pm-form .wpcf7-not-valid-tip,
.pm-form .ff-el-is-error .error,
.pm-form .text-danger,
.pm-form label.wpforms-error,
.pm-form em.wpforms-error {
	display: block;
	margin-top: 8px;
	color: var(--accent);
	font-size: 11px;
	font-style: normal;
	letter-spacing: .1em;
	text-transform: none;
}

/* On the Contact card (--surface) the accent is under 4.5 : 1 at this size; a touch of paper
   lifts it. */
.pm-contact-form__card .pm-form .wpcf7-not-valid-tip,
.pm-contact-form__card .pm-form .ff-el-is-error .error,
.pm-contact-form__card .pm-form .text-danger,
.pm-contact-form__card .pm-form label.wpforms-error,
.pm-contact-form__card .pm-form em.wpforms-error {
	color: color-mix(in srgb, var(--accent) 85%, var(--paper));
}

/* Messages after sending. (.wpcf7 form: CF7's own rule for the box is .wpcf7 form …) */
.pm-form .wpcf7 form .wpcf7-response-output,
.pm-form .ff-message-success,
.pm-form .ff-errors-in-stack,
.pm-form .wpforms-confirmation-container-full,
.pm-form .wpforms-error-container {
	margin: 18px 0 0;
	padding: 16px 20px;
	border: 1px solid color-mix(in srgb, var(--paper) 27.84313725%, transparent);
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	color: var(--paper);
	font-size: 13px;
	letter-spacing: .04em;
	line-height: 1.6;
}

/* CF7's own rules (.wpcf7 form.invalid .wpcf7-response-output) are more specific than
   .pm-form .invalid …, hence the extra .wpcf7 form. */
.pm-form .wpcf7 form.invalid .wpcf7-response-output,
.pm-form .wpcf7 form.unaccepted .wpcf7-response-output,
.pm-form .wpcf7 form.payment-required .wpcf7-response-output,
.pm-form .wpcf7 form.failed .wpcf7-response-output,
.pm-form .wpcf7 form.aborted .wpcf7-response-output,
.pm-form .wpcf7 form.spam .wpcf7-response-output,
.pm-form .ff-errors-in-stack,
.pm-form .wpforms-error-container {
	border-color: var(--accent);
}

.pm-form .wpcf7 form.sent .wpcf7-response-output,
.pm-form .ff-message-success,
.pm-form .wpforms-confirmation-container-full {
	border-color: var(--paper);
}

.pm-form__admin-note {
	margin: 0 0 18px;
	padding: 10px 14px;
	border: 1px dashed var(--accent);
	border-radius: 12px;
	color: var(--paper);
	font-size: 12px;
	letter-spacing: .04em;
}

/* 10. Inner pages (D9): page hero, breadcrumb, intro, CTA band */

.pm-page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: min(72vh, 720px);
	min-height: 460px;
	overflow: hidden;
	background: var(--ink);
}

.pm-page-hero__media {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pm-page-hero__img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%) scale(1.04);
	filter: grayscale(1) contrast(1.06) brightness(.64);
}

.pm-page-hero__shade {
	position: absolute;
	inset: 0;
	/* The home hero gradient, darker in the middle (the copy sits higher on this shorter hero)
	   and ending in solid ink so there is no seam above the page content. */
	background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.6) 0%, rgb(var(--ink-rgb) / 0.4) 38%, rgb(var(--ink-rgb) / .97) 56%, var(--ink) 100%);
}

.pm-page-hero__copy {
	position: relative;
	width: 100%;
	padding: 0 40px 56px;
}

.pm-breadcrumb {
	margin-bottom: 30px;
}

.pm-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	font-size: 11px;
	letter-spacing: .18em;
	line-height: 1.5;
	text-transform: uppercase;
	opacity: .6;
}

.pm-breadcrumb__item + .pm-breadcrumb__item::before {
	content: '/';
	margin: 0 12px;
	opacity: .6;
}

.pm-page-hero__eyebrow {
	margin-bottom: 22px;
}

.pm-page-hero__title {
	max-width: 16ch;
	font-size: calc(clamp(48px, 7vw, 128px) * var(--h-scale));
	line-height: .9;
	letter-spacing: -.01em;
}

.pm-page-hero__intro {
	max-width: 46ch;
	margin-top: 28px;
	font-size: var(--fs-body);
	line-height: 1.7;
	opacity: .78;
}

/* Inner pages built from blocks (D11): pm/* sections full width, core text blocks in a readable column. */
.pm-blocks > :not(section) {
	box-sizing: content-box;
	max-width: 72ch;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--pad-x);
	padding-left: var(--pad-x);
	font-size: var(--fs-body);
	line-height: 1.8;
}

.pm-blocks > :not(section):first-child,
.pm-blocks > section + :not(section) {
	margin-top: 88px;
}

.pm-blocks > :not(section) + :not(section) {
	margin-top: 1.1em;
}

.pm-blocks > :not(section):last-child,
.pm-blocks > :not(section):has(+ section) {
	margin-bottom: 88px;
}

.pm-blocks > h2 {
	font-size: calc(clamp(30px, 3vw, 44px) * var(--h-scale));
	line-height: 1;
}

.pm-blocks > h3 {
	font-size: calc(clamp(22px, 2vw, 28px) * var(--h-scale));
	line-height: 1.1;
}

.pm-blocks > p,
.pm-blocks > ul,
.pm-blocks > ol {
	opacity: .78;
}

/* Links in plain text blocks; the sections style their own links and buttons. */
.pm-blocks > :not(section) a:not(.pm-pill, .wp-element-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pm-blocks > .wp-block-image img {
	height: auto;
	border-radius: var(--r);
}

.pm-blocks .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Legal pages: editor content on paper. */
.pm-page-body {
	padding-top: 88px;
	padding-bottom: 120px;
}

/* CTA band (inner-pages §2.4, v2 cars.html): a paper card on the dark page, heading left, an ink
   button right that turns accent on hover. */
.pm-cta {
	padding-bottom: 120px;
}

.pm-cta__card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 72px);
	overflow: hidden;
	border-radius: var(--r);
}

.pm-cta__title {
	font-size: calc(clamp(40px, 6vw, 96px) * var(--h-scale));
	line-height: .92;
}

.pm-cta__text {
	max-width: 40ch;
	margin-top: 18px;
	font-size: calc(var(--fs-body) * .875);
	line-height: 1.7;
	opacity: .62;
}

.pm-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 18px 30px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--paper);
	font-size: 12px;
	letter-spacing: .2em;
	line-height: var(--lh);
	text-transform: uppercase;
	transition: background .6s var(--ease), color .6s, letter-spacing .6s, transform .6s;
}

.pm-cta__link:hover,
.pm-cta__link:focus-visible {
	background: var(--accent);
	color: var(--on-accent);
	letter-spacing: .26em;
	transform: translateY(-3px);
}

@media (max-width: 880px) {
	.pm-page-hero__copy {
		padding: 0 20px 32px;
	}

	.pm-page-body {
		padding-top: 56px;
	}
}

/* 11. Page templates (index, 404) */

.pm-page {
	min-height: 70vh;
	padding-top: calc(var(--nav-h) + 96px);
	padding-bottom: 120px;
}

.pm-page__head {
	max-width: 1080px;
	margin: 0 auto 56px;
}

.pm-page__title {
	font-size: calc(clamp(40px, 6vw, 96px) * var(--h-scale));
	line-height: .92;
}

.pm-page__body {
	max-width: 1080px;
	margin: 0 auto;
}

/* Readable rich text from the editor (privacy, cookie policy). */
.pm-prose {
	max-width: 72ch;
	font-size: var(--fs-body);
	line-height: 1.8;
}

.pm-prose > * + * {
	margin-top: 1.1em;
}

.pm-prose h2 {
	margin-top: 1.8em;
	font-size: calc(clamp(30px, 3vw, 44px) * var(--h-scale));
	line-height: 1;
}

.pm-prose h3 {
	margin-top: 1.6em;
	font-size: calc(clamp(22px, 2vw, 28px) * var(--h-scale));
	line-height: 1.1;
}

.pm-prose h4,
.pm-prose h5,
.pm-prose h6 {
	margin-top: 1.4em;
}

.pm-prose p,
.pm-prose li {
	opacity: .78;
}

.pm-prose ul,
.pm-prose ol {
	padding-left: 1.2em;
}

.pm-prose li + li {
	margin-top: .4em;
}

.pm-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pm-prose img,
.pm-prose video,
.pm-prose iframe {
	border-radius: var(--r);
}

.pm-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: calc(var(--fs-body) * .875);
}

.pm-prose th,
.pm-prose td {
	padding: 12px 10px 12px 0;
	border-bottom: 1px solid currentColor;
	border-bottom-color: color-mix(in oklab, currentColor, transparent 82%);
	text-align: left;
	vertical-align: top;
}

.pm-prose blockquote {
	margin-left: 0;
	padding-left: 24px;
	border-left: 1px solid var(--accent);
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.4;
}

.pm-prose .alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.pm-prose .alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.pm-prose .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.pm-prose .wp-caption-text,
.pm-prose figcaption {
	padding-top: 12px;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .6;
}

/* Post list (index.php fallback). */
.pm-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line-dark);
}

.pm-list__item {
	border-bottom: 1px solid var(--line-dark);
}

.pm-list__link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 24px;
	padding: 28px 4px;
	transition: padding-left .45s var(--ease), color .4s;
}

.pm-list__link:hover,
.pm-list__link:focus-visible {
	padding-left: 18px;
}

.pm-list__title {
	font-family: var(--font-display);
	font-size: calc(clamp(24px, 2.4vw, 36px) * var(--h-scale));
	line-height: 1.05;
}

.pm-pagination,
.pm-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pm-pagination {
	margin-top: 48px;
}

.pm-pagination .page-numbers,
.pm-pagination .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 16px;
	border: 1px solid color-mix(in srgb, var(--paper) 34.11764706%, transparent);
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: .14em;
	transition: background .4s, color .4s, border-color .4s;
}

.pm-pagination .current,
.pm-pagination a:hover,
.pm-pagination a:focus-visible {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

.pm-light .pm-pagination .page-numbers,
.pm-light .pm-pagination .post-page-numbers {
	border-color: color-mix(in srgb, var(--ink) 27.84313725%, transparent);
}

.pm-light .pm-pagination .current,
.pm-light .pm-pagination a:hover,
.pm-light .pm-pagination a:focus-visible {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

/* 404 */
.pm-404 {
	display: grid;
	align-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: calc(var(--nav-h) + 40px);
	padding-bottom: 80px;
}

.pm-404__code {
	margin-bottom: 16px;
	font-family: var(--font-display);
	font-size: calc(clamp(120px, 24vw, 360px) * var(--h-scale));
	line-height: .8;
	letter-spacing: -.03em;
	opacity: .12;
}

.pm-404__title {
	margin: 0 0 28px;
}

.pm-404__text {
	max-width: 44ch;
	margin-bottom: 40px;
	font-size: calc(var(--fs-body) * .9375);
	line-height: 1.8;
	opacity: .66;
}

.pm-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* 11b. Inner page blocks (D12, docs/inner-pages.md, _design/v2/) */

/* Page header: the page's H1. Photo style: full-bleed photo that settles from a slow zoom, copy at
   the bottom. Text style: the title on the dark page. */
@keyframes pm-hero-zoom {
	from { transform: scale(1.14); }
	to { transform: scale(1.02); }
}

.pm-page-header__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.pm-page-header__eyebrow {
	margin-bottom: 26px;
}

.pm-page-header__title {
	font-size: calc(clamp(56px, 10vw, 184px) * var(--h-scale));
}

.pm-page-header__intro {
	max-width: 360px;
	margin: 0;
	font-size: calc(var(--fs-body) * .9375);
	line-height: 1.75;
	opacity: .66;
}

.pm-page-header--text {
	padding: 190px var(--pad-x) 72px;
}

.pm-page-header--image {
	position: relative;
	height: 92vh;
	min-height: 640px;
	overflow: hidden;
}

.pm-page-header__media {
	position: absolute;
	inset: 0;
	animation: pm-hero-zoom 3.2s var(--ease) both;
}

.pm-page-header__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(var(--pm-brightness, .62));
}

.pm-page-header--grayscale .pm-page-header__img {
	filter: grayscale(1) contrast(1.06) brightness(var(--pm-brightness, .6));
}

.pm-page-header__shade {
	position: absolute;
	inset: 0;
	/* Near-solid ink from the eyebrow down, so it reaches 4.5 : 1 (TASKS 6). */
	background: linear-gradient(180deg, rgb(var(--ink-rgb) / .5) 0%, rgb(var(--ink-rgb) / .1) 40%, rgb(var(--ink-rgb) / .97) 58%, rgb(var(--ink-rgb) / .98) 100%);
}

.pm-page-header--image .pm-page-header__copy {
	position: absolute;
	right: var(--pad-x);
	bottom: 56px;
	left: var(--pad-x);
}

.pm-page-header--image .pm-page-header__title {
	font-size: calc(clamp(56px, 9.4vw, 176px) * var(--h-scale));
}

.pm-page-header--image .pm-page-header__intro {
	opacity: .72;
}

@media (max-width: 880px) {
	.pm-page-header--image {
		height: 88svh;
		min-height: 520px;
	}

	.pm-page-header--image .pm-page-header__copy {
		bottom: 32px;
	}
}

/* Story: copy left, 4:5 photo right (stacks when narrow). */
.pm-story {
	padding-top: 140px;
	padding-bottom: 140px;
}

.pm-story__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	align-items: center;
	gap: clamp(40px, 6vw, 96px);
}

.pm-story__eyebrow {
	margin-bottom: 26px;
}

.pm-story__title {
	margin-bottom: 34px;
	font-size: calc(clamp(40px, 5.4vw, 88px) * var(--h-scale));
	line-height: .94;
}

.pm-story__text p {
	max-width: 48ch;
	margin: 0 0 22px;
	font-size: var(--fs-body);
	line-height: 1.8;
	opacity: .74;
}

.pm-story__text p:last-child {
	margin-bottom: 0;
}

.pm-story__text a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pm-story__media {
	aspect-ratio: 4 / 5;
}

@media (max-width: 880px) {
	.pm-story {
		padding-top: var(--pad-y);
		padding-bottom: var(--pad-y);
	}
}

/* What We Do: photo tiles in a row; the hovered tile grows to 2.2 and its photo zooms. */
.pm-services {
	padding-bottom: 140px;
}

.pm-services__title {
	margin-bottom: 54px;
}

.pm-services__tiles {
	display: flex;
	gap: 14px;
}

.pm-service {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: clamp(440px, 42vw, 600px);
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface);
	transition: flex-grow 1.05s var(--ease), box-shadow .9s ease;
}

.pm-service:hover {
	flex-grow: 2.2;
	box-shadow: 0 34px 90px color-mix(in srgb, var(--shadow) 55%, transparent);
}

.pm-service__media {
	position: absolute;
	inset: 0;
}

.pm-service__shade {
	position: absolute;
	inset: 0;
	/* Near-solid ink behind the copy, so the red index reaches 4.5 : 1 (TASKS 6). */
	background: linear-gradient(180deg, rgb(var(--ink-rgb) / .1) 30%, rgb(var(--ink-rgb) / .98) 52%, rgb(var(--ink-rgb) / .99) 100%);
	pointer-events: none;
}

.pm-service__copy {
	position: absolute;
	right: 26px;
	bottom: 28px;
	left: 26px;
	pointer-events: none;
}

.pm-service__index {
	margin: 0 0 12px;
	color: var(--accent);
	font-size: 10px;
	letter-spacing: .28em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-service__title {
	margin-bottom: 14px;
	font-size: calc(clamp(32px, 3vw, 48px) * var(--h-scale));
	line-height: 1;
}

.pm-service__body {
	max-width: 36ch;
	margin: 0;
	font-size: calc(var(--fs-body) * .875);
	line-height: 1.7;
	opacity: .72;
}

@media (max-width: 880px) {
	.pm-services__tiles {
		flex-direction: column;
	}

	.pm-service {
		flex: none;
		height: 88vw;
		max-height: 480px;
	}
}

/* Photo call to action: dark photo card on a paper section. Inside the card the text is light, so
   the light-section colours are set back. */
.pm-cta-image {
	padding-bottom: 120px;
}

.pm-cta-image__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(80px, 11vw, 160px) clamp(28px, 5vw, 72px);
	border-radius: var(--r);
	background: var(--surface);
	color: var(--paper);
}

.pm-cta-image__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.pm-cta-image__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(var(--pm-brightness, .55));
}

.pm-cta-image__card--colour .pm-cta-image__media img {
	filter: brightness(var(--pm-brightness, .55));
}

/* Standard height (Showroom): a little less padding, a lighter gradient on the right. */
.pm-cta-image__card--standard {
	padding-top: clamp(80px, 10vw, 140px);
	padding-bottom: clamp(80px, 10vw, 140px);
}

.pm-cta-image__card--standard .pm-cta-image__shade {
	background: linear-gradient(90deg, rgb(var(--ink-rgb) / .85) 0%, rgb(var(--ink-rgb) / .25) 70%);
}

.pm-cta-image__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(var(--ink-rgb) / .85) 0%, rgb(var(--ink-rgb) / .3) 70%);
}

.pm-cta-image .pm-cta-image__eyebrow {
	margin-bottom: 24px;
	color: var(--accent);
}

.pm-cta-image__title {
	margin-bottom: 40px;
	font-size: calc(clamp(44px, 7vw, 120px) * var(--h-scale));
	line-height: .9;
}

.pm-cta-image__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pm-cta-image .pm-pill--solid:hover,
.pm-cta-image .pm-pill--solid:focus-visible {
	background: var(--accent);
	color: var(--on-accent);
}

.pm-pill__arrow {
	font-size: 16px;
}

.pm-cta-image .pm-cta-image__outline {
	padding: 18px 30px;
	border-color: color-mix(in srgb, var(--paper) 50%, transparent);
	color: var(--paper);
	font-size: 12px;
	transition-duration: .5s;
}

.pm-cta-image .pm-cta-image__outline:hover,
.pm-cta-image .pm-cta-image__outline:focus-visible {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

@media (max-width: 880px) {
	.pm-cta-image__card {
		padding: 56px 24px;
	}
}

/* Featured Cars page: the Text page header runs straight into the filter buttons (v2 cars.html:
   its intro is a step smaller, and the header's bottom space sits under the buttons). */
.pm-page-header--text:has(+ .pm-cars) {
	padding-bottom: 0;
}

.pm-page-header--text:has(+ .pm-cars) .pm-page-header__intro {
	font-size: calc(var(--fs-body) * .875);
	opacity: .62;
}

/* Cars grid (inner-pages §6.2). */
.pm-cars {
	padding-bottom: 140px;
}

.pm-cars__intro {
	max-width: 60ch;
	margin: 40px 0 0;
	font-size: calc(var(--fs-body) * .875);
	line-height: 1.7;
	opacity: .62;
}

.pm-cars__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 56px 0 64px;
	padding-top: 28px;
	border-top: 1px solid var(--line-dark);
}

.pm-cars__filters[hidden] {
	display: none;
}

/* Without JS the buttons stay hidden: keep the header's space above the cars. */
.pm-page-header--text + .pm-cars > .pm-cars__grid:first-child,
.pm-cars__filters[hidden] + .pm-cars__grid {
	margin-top: 64px;
}

.pm-cars__filter {
	padding: 12px 22px;
	border: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: .2em;
	line-height: 12px; /* The design's button: Archivo's own line height at 11px. */
	text-transform: uppercase;
	cursor: pointer;
	transition: background .5s var(--ease), color .5s, border-color .5s;
}

.pm-cars__filter:hover,
.pm-cars__filter:focus-visible {
	border-color: var(--paper);
}

.pm-cars__filter[aria-pressed="true"] {
	border-color: var(--paper);
	background: var(--paper);
	color: var(--ink);
}

.pm-cars__count {
	margin-left: 6px;
	opacity: .5;
}

/* On the selected (paper) pill, .5 is 3.6 : 1; .6 reaches 4.5 : 1. */
.pm-cars__filter[aria-pressed="true"] .pm-cars__count {
	opacity: .6;
}

.pm-cars__grid {
	display: grid;
	gap: 14px;
	transition: opacity .45s ease, transform .6s var(--ease);
}

.pm-cars__grid.is-fading {
	opacity: 0;
	transform: translateY(18px);
}

.pm-cars__row {
	display: flex;
	gap: 14px;
}

.pm-car {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: clamp(420px, 44vw, 640px);
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface);
	transition: flex-grow 1.05s var(--ease), box-shadow .9s ease;
}

.pm-car--wide {
	flex: 1.5 1 0;
}

.pm-car:hover,
.pm-car:has(.pm-car__open:focus-visible) {
	flex-grow: 2.4;
	box-shadow: 0 34px 90px color-mix(in srgb, var(--shadow) 55%, transparent);
}

.pm-car__media {
	position: absolute;
	inset: 0;
	border-radius: 0;
}

.pm-car__shade {
	position: absolute;
	inset: 0;
	/* Near-solid ink behind the copy, so the red marque reaches 4.5 : 1 (TASKS 6). */
	background: linear-gradient(180deg, rgb(var(--ink-rgb) / .35) 0%, rgb(var(--ink-rgb) / 0) 26%, rgb(var(--ink-rgb) / 0) 45%, rgb(var(--ink-rgb) / .98) 68%, rgb(var(--ink-rgb) / .99) 100%);
	pointer-events: none;
}

.pm-car__top {
	position: absolute;
	top: 22px;
	right: 24px;
	left: 24px;
	display: flex;
	justify-content: space-between;
	margin: 0;
	font-size: 11px;
	letter-spacing: .22em;
	line-height: var(--lh);
	text-transform: uppercase;
	pointer-events: none;
}

.pm-car__top span {
	opacity: .8;
}

.pm-car__copy {
	position: absolute;
	right: 24px;
	bottom: 26px;
	left: 24px;
	pointer-events: none;
}

.pm-car__marque {
	margin: 0 0 12px;
	color: var(--accent);
	font-size: 10px;
	letter-spacing: .28em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-car__model {
	margin-bottom: 16px;
	font-size: calc(clamp(28px, 2.6vw, 42px) * var(--h-scale));
	line-height: 1;
}

.pm-car__spec {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	font-size: 11px;
	letter-spacing: .14em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .6s ease, transform .8s var(--ease);
}

.pm-car:hover .pm-car__spec,
.pm-car:has(.pm-car__open:focus-visible) .pm-car__spec {
	opacity: .7;
	transform: none;
}

/* The whole card opens its sheet: a real button laid over it. */
.pm-car__open {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	cursor: pointer;
}

.pm-car__open:focus-visible {
	outline-offset: -4px;
}

@media (hover: none) {
	.pm-car__spec {
		opacity: .7;
		transform: none;
	}
}

@media (max-width: 880px) {
	.pm-cars__row {
		flex-direction: column;
	}

	.pm-car,
	.pm-car--wide {
		flex: none;
		height: 108vw;
		max-height: 560px;
	}

	.pm-car__spec {
		opacity: .7;
		transform: none;
	}
}

/* Car sheet: a native modal <dialog> with every car's sheet inside, one shown at a time. */
@keyframes pm-lb-in {
	from { opacity: 0; transform: scale(.97); }
	to { opacity: 1; transform: none; }
}

.pm-lb-open {
	overflow: hidden;
}

.pm-lightbox {
	width: min(1320px, 94vw);
	max-width: none;
	max-height: 92vh;
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: var(--r);
	background: color-mix(in srgb, var(--surface) 88%, var(--ink));
	color: var(--paper);
}

.pm-lightbox[open] {
	animation: pm-lb-in .7s var(--ease) both;
}

.pm-lightbox::backdrop {
	background: color-mix(in srgb, var(--ink) 90%, transparent);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.pm-sheet {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
	align-items: center;
	gap: 44px;
	padding: 28px;
}

/* By class as well as [hidden]: the block editor's preview drops the hidden attribute. */
.pm-sheet:not(.is-current) {
	display: none;
}

.pm-sheet__media {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	border-radius: calc(var(--r) - 8px);
	background: color-mix(in srgb, var(--surface) 97%, var(--paper));
}

.pm-sheet__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pm-sheet__info {
	display: grid;
	gap: 26px;
	padding-right: 12px;
}

.pm-sheet__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pm-sheet__marque {
	margin: 0;
	color: var(--accent);
	font-size: 11px;
	letter-spacing: .22em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-sheet__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--paper);
	font-size: 16px;
	cursor: pointer;
	transition: background .4s, color .4s;
}

.pm-sheet__button--nav {
	width: 50px;
	height: 50px;
}

.pm-sheet__button:hover,
.pm-sheet__button:focus-visible {
	background: var(--paper);
	color: var(--ink);
}

.pm-sheet__title {
	font-size: calc(clamp(36px, 3.6vw, 60px) * var(--h-scale));
	line-height: .95;
}

.pm-sheet__note {
	margin: 0;
	font-size: calc(var(--fs-body) * .875);
	line-height: 1.75;
	opacity: .66;
}

.pm-sheet__specs {
	display: grid;
	margin: 0;
	border-top: 1px solid var(--line-dark);
}

.pm-sheet__spec {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line-dark);
	font-size: 12px;
	letter-spacing: .14em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-sheet__spec dt {
	opacity: .5;
}

.pm-sheet__spec dd {
	margin: 0;
	text-align: right;
}

.pm-sheet__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.pm-sheet__enquire {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 26px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 11px;
	letter-spacing: .2em;
	line-height: var(--lh);
	text-transform: uppercase;
	transition: background .5s, color .5s;
}

.pm-sheet__enquire:hover,
.pm-sheet__enquire:focus-visible {
	background: var(--paper);
	color: var(--ink);
}

.pm-sheet__counter {
	margin: 0 0 0 auto;
	font-size: 11px;
	letter-spacing: .2em;
	line-height: var(--lh);
	opacity: .5;
}

@media (max-width: 880px) {
	.pm-sheet {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 20px;
	}
}

/* Photo slider (Showroom "Inside", inner-pages §7.2): paper panel overlapping the page header by
   24px, a blurred copy of the current photo under a radial wash, photos crossfading. */
.pm-slider {
	position: relative;
	isolation: isolate;
	margin-top: -24px;
	padding: 130px 0 110px;
	overflow: hidden;
	border-radius: var(--r) var(--r) 0 0;
}

.pm-slider__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.pm-slider__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(64px) saturate(.35) brightness(1.5) contrast(.55);
	opacity: 0;
	transform: scale(1.2);
}

.pm-slider__bg.is-current {
	opacity: .5;
}

.pm-slider__wash {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 80% at 50% 40%, rgb(var(--paper-rgb) / .55) 0%, rgb(var(--paper-rgb) / .94) 72%);
}

.pm-slider__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 52px;
}

/* One caption and one counter show at a time. By class as well as [hidden]: the block editor's
   preview drops the hidden attribute. */
.pm-slider [data-slide-part]:not(.is-current) {
	display: none;
}

.pm-slider__count {
	margin: 0;
	font-size: 12px;
	letter-spacing: .2em;
	line-height: var(--lh);
	opacity: .6; /* 4.5 : 1 (was .55). */
}

.pm-slider__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 3vw, 44px);
}

.pm-slider__arrow {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--paper) 50%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--ink);
	font-size: 18px;
	cursor: pointer;
	transition: background .4s, color .4s, border-color .4s;
}

.pm-slider__arrow:hover,
.pm-slider__arrow:focus-visible {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.pm-slider__figure {
	flex: 1 1 auto;
	max-width: min(1080px, 76vw);
	margin: 0;
}

.pm-slider__stage {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: 0 40px 110px color-mix(in srgb, var(--ink) 28%, transparent);
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.pm-slider__stage.is-dragging {
	cursor: grabbing;
}

.pm-slider__stage:focus-visible {
	outline-offset: 4px;
}

.pm-slider__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	-webkit-user-drag: none;
}

/* The change, as in the design: the current photo fades out (.6s), at 320ms the next one takes
   over and fades in, and the one that left drops out at once. Two classes, so this outranks the
   generic [data-zoom] img transition. */
.pm-slider__stage .pm-slider__photo {
	transition: transform 1.5s var(--ease);
}

.pm-slider__stage .pm-slider__photo.is-current {
	transition: opacity .6s ease, transform 1.5s var(--ease);
}

.pm-slider__photo.is-current {
	opacity: 1;
}

.pm-slider__photo.is-leaving {
	opacity: 0;
}

/* Colour and 4px top margin from the design system's figcaption rule, as on the homepage. */
.pm-slider__caption {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 4px;
	padding-top: 20px;
	color: color-mix(in srgb, var(--ink-soft) 60%, transparent); /* 4.5 : 1 on the wash (TASKS 6). */
	font-size: 11px;
	letter-spacing: .2em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-slider__hint {
	opacity: 1; /* Was .55: 2 : 1. */
}

.pm-slider__nav {
	display: none;
	justify-content: center;
	gap: 12px;
	padding-top: 22px;
}

.pm-slider__arrow--small {
	width: 52px;
	height: 52px;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	font-size: 17px;
}

.pm-slider__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
}

.pm-slider__dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 25%, transparent);
	cursor: pointer;
	transition: width .6s var(--ease), background .4s;
}

.pm-slider__dot[aria-current="true"] {
	width: 34px;
	background: var(--ink);
}

.pm-slider__dot:focus-visible {
	outline-offset: 4px;
}

@media (max-width: 880px) {
	.pm-slider__row > .pm-slider__arrow {
		display: none;
	}

	.pm-slider__nav {
		display: flex;
	}

	.pm-slider__figure {
		max-width: 100%;
	}
}

/* Visit (Showroom, inner-pages §7.3): opening hours and address on paper. */
.pm-visit {
	padding-top: 40px;
	padding-bottom: 120px;
}

.pm-visit__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(40px, 6vw, 96px);
}

.pm-visit__hours {
	display: grid;
	margin: 0;
	border-top: 1px solid var(--line-light);
}

.pm-visit__row {
	display: grid;
	grid-template-columns: 180px 1fr;
	align-items: center;
	gap: 24px;
	padding: 24px 16px;
	border-bottom: 1px solid var(--line-light);
	transition: background .45s, color .45s, padding-left .45s;
}

.pm-visit__row:hover {
	padding-left: 30px;
	background: var(--ink);
	color: var(--paper);
}

.pm-visit__day {
	font-size: 11px;
	letter-spacing: .2em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: .6;
}

.pm-visit__time {
	margin: 0;
	font-family: var(--font-display);
	font-size: calc(clamp(22px, 2vw, 30px) * var(--h-scale));
	line-height: var(--lh);
}

.pm-visit__address {
	font-style: normal;
}

.pm-visit__lines {
	margin: 0 0 28px;
	font-family: var(--font-display);
	font-size: calc(clamp(26px, 2.6vw, 40px) * var(--h-scale));
	line-height: 1.15;
}

.pm-visit__contact {
	display: grid;
	gap: 8px;
	margin: 0 0 32px;
	font-size: calc(var(--fs-body) * .875);
	letter-spacing: .06em;
	line-height: var(--lh);
	opacity: .75;
}

.pm-visit__contact a:hover,
.pm-visit__contact a:focus-visible {
	color: var(--accent-text-light);
}

.pm-visit__directions {
	display: inline-block; /* One run of text, as in the design: "Get directions →". */
	padding: 15px 26px;
	border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: .2em;
	line-height: var(--lh);
	text-transform: uppercase;
	transition: background .5s, color .5s, border-color .5s;
}

.pm-visit__directions:hover,
.pm-visit__directions:focus-visible {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

@media (max-width: 880px) {
	.pm-visit__row {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 20px 4px;
	}
}

/* Contact rows (Contact, inner-pages §8.2): each row one link; hover and keyboard focus invert
   to paper and indent. */
.pm-contact-rows {
	padding-bottom: 24px;
}

.pm-contact-rows__list {
	display: grid;
	border-top: 1px solid color-mix(in srgb, var(--paper) 16.07843137%, transparent);
}

.pm-contact-rows__row {
	display: grid;
	grid-template-columns: 220px 1fr auto;
	align-items: center;
	gap: 28px;
	padding: 30px 20px;
	border-bottom: 1px solid color-mix(in srgb, var(--paper) 16.07843137%, transparent);
	color: var(--paper);
	transition: background .5s var(--ease), color .5s, padding-left .6s var(--ease);
}

.pm-contact-rows__row:hover,
.pm-contact-rows__row:focus-visible {
	padding-left: 34px;
	background: var(--paper);
	color: var(--ink);
}

.pm-contact-rows__row:focus-visible {
	outline-offset: -2px;
}

.pm-contact-rows__label {
	font-size: 11px;
	letter-spacing: .22em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: .55;
}

.pm-contact-rows__value {
	font-family: var(--font-display);
	font-size: calc(clamp(22px, 2.4vw, 36px) * var(--h-scale));
	line-height: 1.15;
}

.pm-contact-rows__action {
	font-size: 11px;
	letter-spacing: .2em;
	line-height: var(--lh);
	text-transform: uppercase;
}

@media (max-width: 880px) {
	.pm-contact-rows__row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 22px 4px;
	}

	.pm-contact-rows__row:hover,
	.pm-contact-rows__row:focus-visible {
		padding-left: 4px;
	}
}

/* Contact form and map (inner-pages §8.3). */
.pm-contact-form {
	padding-top: 96px;
	padding-bottom: 120px;
}

.pm-contact-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: 14px;
}

.pm-contact-form__card {
	padding: 56px 48px;
	border-radius: var(--r);
	background: var(--surface);
}

.pm-contact-form__title {
	margin-bottom: 40px;
	font-size: calc(clamp(36px, 4vw, 64px) * var(--h-scale));
	line-height: .94;
}

/* v2 Contact spaces its fields 20px apart (the homepage form: 18px). */
.pm-contact-form .pm-form form,
.pm-contact-form .pm-form .ff-el-group-wrap,
.pm-contact-form .pm-form .wpforms-field-container,
.pm-contact-form .pm-form .wpforms-submit-container {
	gap: 20px;
}

.pm-contact-form__side {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 14px;
}

.pm-contact-form__map {
	position: relative;
	min-height: 420px;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface);
}

.pm-contact-form__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 22px;
	padding: 24px;
	text-align: center;
}

.pm-contact-form__note {
	margin: 0;
	font-size: 11px;
	letter-spacing: .22em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: .55;
}

.pm-contact-form__show:disabled {
	cursor: default;
}

.pm-contact-form__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) invert(.92) contrast(.9);
	transition: filter 1s ease;
}

.pm-contact-form__map:hover .pm-contact-form__iframe,
.pm-contact-form__iframe:focus-visible {
	filter: grayscale(.2) invert(0) contrast(1);
}

.pm-contact-form__hours {
	padding: 36px 36px 30px;
	border-radius: var(--r);
}

.pm-contact-form__eyebrow {
	margin-bottom: 20px;
	letter-spacing: .28em;
}

.pm-contact-form__dl {
	margin: 0;
}

.pm-contact-form__row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	font-size: 13px;
	letter-spacing: .08em; /* Inherited by the time, as in the design. */
	border-top: 1px solid color-mix(in srgb, var(--ink) 14.11764706%, transparent);
}

.pm-contact-form__row dt {
	font-size: 11px;
	letter-spacing: .18em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: .6;
}

.pm-contact-form__row dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: calc(20px * var(--h-scale));
	line-height: var(--lh);
}

@media (max-width: 880px) {
	.pm-contact-form__card {
		padding: 40px 24px;
	}
}

/* 11c. Events (TASKS 4d, _design/events/) */

/* Events page: the Text page header runs into the tabs, as the Featured Cars header runs into its
   filters (events.html: the intro a step smaller, the header's bottom space under the tabs). */
.pm-page-header--text:has(+ .pm-events) {
	padding-bottom: 0;
}

.pm-page-header--text:has(+ .pm-events) .pm-page-header__intro {
	font-size: calc(var(--fs-body) * .875);
	opacity: .62;
}

.pm-events {
	padding-bottom: 120px;
}

.pm-events__intro {
	max-width: 60ch;
	margin: 40px 0 0;
	font-size: calc(var(--fs-body) * .875);
	line-height: 1.7;
	opacity: .62;
}

.pm-events__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 56px 0 64px;
	padding-top: 28px;
	border-top: 1px solid var(--line-dark);
}

.pm-events__tabs[hidden] {
	display: none;
}

/* Without JS the tabs stay hidden: keep the header's space above the list. */
.pm-events__tabs[hidden] + .pm-events__list {
	margin-top: 64px;
}

.pm-events__tab {
	padding: 12px 24px;
	border: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: .2em;
	line-height: 12px; /* As the cars filters: Archivo's own line height at 11px. */
	text-transform: uppercase;
	cursor: pointer;
	transition: background .5s var(--ease), color .5s, border-color .5s;
}

.pm-events__tab:hover,
.pm-events__tab:focus-visible {
	border-color: var(--paper);
}

.pm-events__tab[aria-pressed="true"] {
	border-color: var(--paper);
	background: var(--paper);
	color: var(--ink);
}

.pm-events__count {
	margin-left: 6px;
	opacity: .5;
}

/* On the selected (paper) tab, .5 is 3.6 : 1; .6 reaches 4.5 : 1. */
.pm-events__tab[aria-pressed="true"] .pm-events__count {
	opacity: .6;
}

.pm-events__list {
	border-top: 1px solid var(--line-dark);
	transition: opacity .45s ease, transform .6s var(--ease);
}

.pm-events__list.is-fading {
	opacity: 0;
	transform: translateY(18px);
}

.pm-events__group[hidden] {
	display: none;
}

/* No events at all. */
.pm-events--empty {
	padding-top: 64px;
}

.pm-events__empty {
	display: grid;
	justify-items: start;
	gap: 28px;
	padding: 64px 0;
	border-top: 1px solid var(--line-dark);
	border-bottom: 1px solid var(--line-dark);
}

.pm-events__empty-text {
	max-width: 42ch;
	font-family: var(--font-display);
	font-size: calc(clamp(26px, 2.6vw, 40px) * var(--h-scale));
	line-height: 1.2;
}

/* One event: copy left, photos right, hairline under. */
.pm-event-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
	padding: 64px 0;
	border-bottom: 1px solid var(--line-dark);
}

.pm-event-row__date {
	margin-bottom: 26px;
}

.pm-event-row__date time {
	display: flex;
	align-items: baseline;
	gap: 18px;
}

.pm-event-row__day {
	font-family: var(--font-display);
	font-size: calc(clamp(56px, 6vw, 96px) * var(--h-scale));
	line-height: .8;
}

.pm-event-row__month {
	font-size: 11px;
	letter-spacing: .24em;
	line-height: 1.6;
	text-transform: uppercase;
	opacity: .6;
}

.pm-event-row__type {
	margin-bottom: 14px;
	color: var(--accent);
	font-size: 10px;
	letter-spacing: .28em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-event-row__title {
	margin: 0 0 20px;
	font-size: calc(clamp(34px, 3.4vw, 54px) * var(--h-scale));
	line-height: .98;
}

.pm-event-row__title a {
	transition: color .4s;
}

.pm-event-row__summary {
	max-width: 42ch;
	margin-bottom: 28px;
	font-size: calc(var(--fs-body) * .9375);
	line-height: 1.75;
	opacity: .7;
}

.pm-event-row__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
}

.pm-event-row__place {
	font-size: 11px;
	letter-spacing: .2em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: .55;
}

.pm-event-row__view {
	display: inline-flex;
	gap: 5px; /* The arrow sits a space after the label, as in the design. */
	padding: 13px 22px;
}

.pm-event-row__pics {
	display: flex;
	gap: 12px;
	height: clamp(320px, 34vw, 500px);
}

.pm-event-row__pic {
	flex: 1 1 0;
	min-width: 0;
	transition: flex-grow 1.05s var(--ease);
}

.pm-event-row__pic--first {
	flex: 1.6 1 0;
}

.pm-event-row__pic:hover {
	flex-grow: 3;
}

.pm-event-row__pic:hover img {
	transform: scale(1.06);
}

@media (max-width: 880px) {
	.pm-event-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 44px 0;
	}

	.pm-event-row__pics {
		height: 72vw;
		min-height: 260px;
	}
}

/* Events intro on Home (_design/home-events/events-intro.html): a hairline over the head, then
   auto-fit cards of at least 320px. The whole card is one link: it lifts, its image zooms. */
.pm-ei {
	padding-top: 40px;
	padding-bottom: var(--pad-y);
}

.pm-ei__head {
	padding-top: 72px;
	border-top: 1px solid var(--line-dark);
}

.pm-ei__intro {
	max-width: 360px;
}

.pm-ei__empty {
	max-width: 42ch;
	font-family: var(--font-display);
	font-size: calc(clamp(24px, 2vw, 30px) * var(--h-scale));
	line-height: 1.2;
	opacity: .8;
}

.pm-ei__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 14px;
}

.pm-ei__card {
	display: grid;
	align-content: start;
	gap: 22px;
	border-radius: var(--r);
	color: var(--paper);
	transition: transform .75s var(--ease);
}

.pm-ei__card:hover,
.pm-ei__card:focus-visible {
	color: var(--paper); /* Not the accent of a:hover: the card lifts instead. */
	transform: translateY(-8px);
}

.pm-ei__card:focus-visible {
	outline-offset: 6px;
}

.pm-ei__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface);
}

.pm-ei__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.5s var(--ease);
}

.pm-ei__card:hover .pm-ei__media img,
.pm-ei__card:focus-visible .pm-ei__media img {
	transform: scale(1.055);
}

.pm-ei__pills {
	position: absolute;
	top: 18px;
	left: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	pointer-events: none;
}

.pm-ei__pill {
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font-size: 10px;
	letter-spacing: .24em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-ei__foot {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--line-dark);
}

.pm-ei__day {
	font-family: var(--font-display);
	font-size: calc(56px * var(--h-scale));
	line-height: .85;
}

.pm-ei__copy {
	display: grid;
	gap: 10px;
}

.pm-ei__meta {
	margin: 0;
	font-size: 11px;
	letter-spacing: .22em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: .6;
}

.pm-ei__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: calc(clamp(24px, 2vw, 30px) * var(--h-scale));
	line-height: 1.05;
}

/* Event page header: the Photo page header with a back link, the type and a status pill, and a
   narrower title (event.html). */
.pm-page-header__back {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 30px;
	font-size: 11px;
	letter-spacing: .24em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: .8;
	transition: opacity .4s, gap .5s var(--ease), color .4s;
}

.pm-page-header__back:hover,
.pm-page-header__back:focus-visible {
	gap: 18px;
	opacity: 1;
}

.pm-page-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
}

.pm-page-header__meta .pm-page-header__eyebrow {
	margin: 0;
}

.pm-page-header__pill {
	padding: 6px 14px;
	border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: .22em;
	line-height: var(--lh);
	text-transform: uppercase;
}

.pm-page-header--event .pm-page-header__title {
	max-width: 14ch;
	font-size: calc(clamp(52px, 8.6vw, 160px) * var(--h-scale));
	line-height: .88;
}

@media (max-width: 880px) {
	.pm-page-header--event {
		height: 86svh;
	}
}

/* Facts: date, time, place, guests between hairlines. The count of facts sets the columns. */
.pm-event-facts__list {
	display: grid;
	grid-template-columns: repeat(var(--pm-facts, 4), minmax(0, 1fr));
	margin: 0;
	border-top: 1px solid color-mix(in srgb, var(--paper) 16.07843137%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--paper) 16.07843137%, transparent);
}

.pm-event-facts__item {
	display: grid;
	align-content: start;
	gap: 12px;
	padding: 30px 20px 30px 0;
}

.pm-event-facts__label {
	font-size: 10px;
	letter-spacing: .26em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: .5;
}

.pm-event-facts__value {
	margin: 0;
	font-family: var(--font-display);
	font-size: calc(clamp(20px, 1.8vw, 28px) * var(--h-scale));
	line-height: 1.15;
}

@media (max-width: 880px) {
	.pm-event-facts__list {
		grid-template-columns: repeat(min(var(--pm-facts, 4), 2), minmax(0, 1fr));
	}
}

/* Lede left; story and buttons right. */
.pm-event-body {
	padding-top: 110px;
	padding-bottom: 120px;
}

.pm-event-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: clamp(40px, 6vw, 110px);
}

.pm-event-body__lede p {
	font-family: var(--font-display);
	font-size: calc(clamp(26px, 2.6vw, 40px) * var(--h-scale));
	line-height: 1.2;
}

.pm-event-body__main {
	grid-column: 2;
	display: grid;
	align-content: start;
	gap: 22px;
	max-width: 62ch;
}

.pm-event-body__story {
	display: grid;
	gap: 22px;
}

.pm-event-body__story > * {
	margin: 0;
}

.pm-event-body__story p,
.pm-event-body__story li {
	font-size: var(--fs-body);
	line-height: 1.85;
	opacity: .76;
}

.pm-event-body__story :is(h2, h3, h4) {
	margin-top: 18px;
	font-size: calc(clamp(26px, 2.2vw, 34px) * var(--h-scale));
	line-height: 1.1;
}

.pm-event-body__story ul,
.pm-event-body__story ol {
	padding-left: 1.2em;
}

.pm-event-body__story blockquote {
	padding-left: 24px;
	border-left: 1px solid var(--accent);
	font-family: var(--font-display);
	font-size: calc(clamp(22px, 2vw, 30px) * var(--h-scale));
	line-height: 1.3;
}

.pm-event-body__story blockquote p {
	font: inherit;
	opacity: 1;
}

.pm-event-body__story img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--r);
}

.pm-event-body__story a:not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pm-event-body__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

.pm-event-body__pill {
	padding: 18px 30px;
	border-color: color-mix(in srgb, var(--paper) 40%, transparent);
	font-size: 12px;
	transition-duration: .5s;
}

/* Accent pill (Register interest): turns paper on hover, lifts and widens. White 12px text on the
   design's accent is 3.9 : 1; the accent shade made for small text on paper (--accent-text-light,
   inc/design.php) carries white at 4.5 : 1 or more. */
.pm-pill--accent {
	background: var(--accent-text-light);
	color: var(--on-accent);
}

.pm-pill--accent:hover,
.pm-pill--accent:focus-visible {
	background: var(--paper);
	color: var(--ink);
}

@media (max-width: 880px) {
	.pm-event-body__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.pm-event-body__main {
		grid-column: auto;
	}
}

/* Photographs: a moving track of 3:2 photos. */
.pm-event-photos {
	padding-bottom: 130px;
	overflow: hidden;
}

.pm-event-photos__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 40px;
}

.pm-event-photos__title {
	font-size: calc(clamp(40px, 5vw, 80px) * var(--h-scale));
	line-height: .92;
}

.pm-event-photos__controls {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
}

.pm-event-photos__count {
	flex: none;
	margin-right: 14px;
	font-size: 12px;
	letter-spacing: .2em;
	line-height: var(--lh);
	white-space: nowrap;
	opacity: .55;
}

.pm-event-photos__count [hidden] {
	display: none;
}

.pm-event-photos__viewport {
	width: 100%;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
}

.pm-event-photos__viewport.is-dragging {
	cursor: grabbing;
}

.pm-event-photos__viewport:focus-visible {
	outline-offset: -4px;
}

.pm-event-photos__track {
	display: flex;
	gap: 18px;
	transition: transform 1.05s var(--ease);
	will-change: transform;
}

.pm-event-photos__track.is-instant {
	transition: none;
}

.pm-event-photos__slide {
	flex: none;
	width: min(62vw, 900px);
	margin: 0;
}

.pm-event-photos__frame {
	aspect-ratio: 3 / 2;
}

.pm-event-photos__frame img {
	user-select: none;
}

.pm-event-photos__caption {
	margin-top: 14px;
	font-size: 11px;
	letter-spacing: .2em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: .6;
}

@media (max-width: 880px) {
	.pm-event-photos__slide {
		width: 84vw;
	}
}

/* Previous and next event. */
.pm-event-nav {
	padding-bottom: 120px;
}

.pm-event-nav__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.pm-event-nav__card {
	position: relative;
	display: block;
	height: 300px;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface);
	color: var(--paper);
	transition: box-shadow .9s ease, color .4s;
}

.pm-event-nav__card:hover,
.pm-event-nav__card:focus-visible {
	box-shadow: 0 30px 70px color-mix(in srgb, var(--shadow) 50%, transparent);
}

.pm-event-nav__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.45);
}

.pm-event-nav__copy {
	position: absolute;
	right: 28px;
	bottom: 26px;
	left: 28px;
}

.pm-event-nav__card--next .pm-event-nav__copy {
	text-align: right;
}

.pm-event-nav__label {
	display: block;
	margin-bottom: 12px;
	font-size: 11px;
	letter-spacing: .24em;
	line-height: var(--lh);
	text-transform: uppercase;
	opacity: .7;
}

.pm-event-nav__title {
	display: block;
	font-family: var(--font-display);
	font-size: calc(clamp(26px, 2.6vw, 40px) * var(--h-scale));
	line-height: 1;
}

@media (max-width: 880px) {
	.pm-event-nav__grid {
		grid-template-columns: 1fr;
	}
}

/* Draft without a start date (preview only). */
.pm-event-body > .pm-event-body__story {
	max-width: 62ch;
}

/* Red labels over photos: a 1px ink outline and a soft ink halo, so the accent keeps 4.5 : 1
   next to the brightest pixel behind it (with the near-solid shades above; TASKS 6). */
.pm-hero__eyebrow,
.pm-page-header--image .pm-page-header__eyebrow,
.pm-page-hero--image .pm-page-hero__eyebrow,
.pm-tile__marque,
.pm-car__marque,
.pm-service__index {
	text-shadow: 1px 0 0 rgb(var(--ink-rgb)), -1px 0 0 rgb(var(--ink-rgb)), 0 1px 0 rgb(var(--ink-rgb)), 0 -1px 0 rgb(var(--ink-rgb)), 1px 1px 0 rgb(var(--ink-rgb)), -1px -1px 0 rgb(var(--ink-rgb)), 1px -1px 0 rgb(var(--ink-rgb)), -1px 1px 0 rgb(var(--ink-rgb)), 0 0 6px rgb(var(--ink-rgb) / .8);
}

/* 12. Reduced motion: no reveals, no hero entrance, no video, static marquee. */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.pm-js [data-rise],
	.pm-js [data-rise-l],
	[data-hero-in] {
		opacity: 1;
		animation: none !important;
	}

	/* Contact rows and questions: colour change only, no indent. */
	.pm-contact-rows__row:hover,
	.pm-contact-rows__row:focus-visible,
	.pm-faq__question:hover,
	.pm-faq__question:focus-visible {
		padding-left: 20px;
	}

	@media (max-width: 880px) {
		.pm-contact-rows__row:hover,
		.pm-contact-rows__row:focus-visible,
		.pm-faq__question:hover,
		.pm-faq__question:focus-visible {
			padding-left: 4px;
		}
	}

	/* Poster only: hero-video.js never plays the video under this setting. */
	.pm-hero__video {
		display: none;
	}

	/* Marquee: one static, centered list. */
	.pm-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.pm-marquee__track {
		width: auto;
		justify-content: center;
		animation: none !important;
	}

	.pm-marquee__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 40px;
		padding: 0 var(--pad-x);
	}

	.pm-form .wpcf7-spinner,
	.pm-form .ff-loader,
	.pm-form .wpforms-submit-spinner {
		animation-duration: 2s !important;
		animation-iteration-count: infinite !important;
	}

	.pm-marquee__list[aria-hidden="true"],
	.pm-marquee__item[aria-hidden="true"]:not(.pm-marquee__dash),
	.pm-marquee__item[aria-hidden="true"]:not(.pm-marquee__dash) + .pm-marquee__dash,
	.pm-marquee__dash:last-child {
		display: none;
	}
}