/* ==========================================================================
   Sell With Reineke: The Ledger
   Hand coded. No framework. Two self hosted variable fonts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */

/*
 * Fraunces set the headings and the ledger figures until both moved to
 * Saira. Nothing references it now, so it is not declared and not
 * downloaded. The woff2 is still in assets/fonts if the serif is ever
 * wanted back.
 */

@font-face {
	font-family: "InterVar";
	src: url("../fonts/inter-var-latin.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* Headings. Variable weight, but no optical size or WONK axis, which is why
   the wonk animation no longer runs on the H1 and the H2. */
@font-face {
	font-family: "Saira";
	src: url("../fonts/saira-var-latin.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
	--paper: #f4f1ea;
	--paper-lift: #fbfaf7;
	--ink: #1a1614;
	--oxblood: #ec1a4f;
	--oxblood-deep: #c9123f;
	--rule: #d9d2c5;
	--muted: #736a63;

	--display: "Saira", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sans: "InterVar", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--gutter: 1.5rem;
	--maxw: 84rem;
	--pad-y: clamp(4.5rem, 10vw, 9rem);

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 60rem) {
	:root {
		--gutter: 2rem;
	}
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	overflow-wrap: break-word;
}

/* Nothing is allowed to push the page wider than the viewport. */
.section,
.section__inner,
.main,
.foot {
	max-width: 100%;
	min-width: 0;
}

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

a {
	color: inherit;
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

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

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

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

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--oxblood);
	color: var(--paper);
	padding: 0.75rem 1.25rem;
	text-decoration: none;
}

.skip:focus {
	left: 0;
}

.swr-defs {
	position: absolute;
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

/* Saira is a narrow grotesque, so it holds a tighter measure than the serif
   it replaced and carries weight rather than contrast at display sizes. */
.display-xl,
.display-l,
.display-m {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.display-xl {
	font-size: clamp(2.75rem, 7.5vw, 6.5rem);
	line-height: 1;
}

.display-l {
	font-size: clamp(2rem, 4.6vw, 3.625rem);
	line-height: 1.06;
}

.display-m {
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* Every description under a heading is 16px, flat, at every width. */
.body-l {
	font-size: 1rem;
	line-height: 1.65;
	max-width: 38em;
}

p {
	max-width: 38em;
}

.label {
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.figure-xl {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--oxblood);
	font-variant-numeric: tabular-nums lining-nums;
}

em {
	font-style: italic;
}


/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

/* Transparent over the hero image, solid oxblood once scrolled past it.
   The supplied logo is white on transparent, so the masthead is never
   allowed to become a light surface. */
.masthead {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 50;
	background: none;
	/* Very light hairline, enough to separate the header from the image
	   without reading as a rule. */
	border-bottom: 1px solid rgb(244 241 234 / 13%);
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

/* Dark rather than brand red. At the old oxblood the bar sat back behind the
   page; at the crimson it comes forward and competes with every button on it.
   Ink is also what the mobile nav panel is already filled with, so the bar and
   the panel hanging off it read as one surface. */
.masthead.is-stuck {
	background: var(--ink);
	border-bottom-color: rgb(244 241 234 / 18%);
}


/* Three tracks so the nav pill is centred on the page, not merely
   between the logo and the button. */
.masthead__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 0.875rem var(--gutter);
}

.masthead__end {
	display: flex;
	justify-content: flex-end;
}

.masthead__brand img {
	width: auto;
	height: 3.25rem;
}

@media (min-width: 60rem) {
	.masthead__brand img {
		height: 4rem;
	}
}

/* Floating nav pill. */
.masthead__nav {
	display: none;
	justify-self: center;
	gap: 0.125rem;
	padding: 0.3125rem;
	border-radius: 999px;
	background: rgb(244 241 234 / 9%);
	border: 1px solid rgb(244 241 234 / 13%);
	backdrop-filter: blur(14px);
}

@media (min-width: 64rem) {
	.masthead__nav {
		display: flex;
	}
}

.masthead__nav a {
	font-size: 0.8125rem;
	color: var(--paper);
	text-decoration: none;
	padding: 0.5rem 0.9375rem;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color 0.18s var(--ease);
}

.masthead__nav a:hover {
	background: rgb(244 241 234 / 15%);
}

/* Off the home page there is no hero image behind the bar, and the supplied
   logo is a white wordmark, so the masthead is solid from the first pixel. */
.masthead--solid {
	background: var(--ink);
	border-bottom-color: rgb(244 241 234 / 18%);
}

.masthead__group {
	position: relative;
}

.masthead__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--paper);
	padding: 0.5rem 0.9375rem;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color 0.18s var(--ease);
}

.masthead__toggle:hover,
.masthead__group.is-open .masthead__toggle {
	background: rgb(244 241 234 / 15%);
}

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

.masthead__group.is-open .masthead__caret {
	transform: rotate(180deg);
}

/* Kept in the flow rather than hidden, so the panel can transition. It is
   pulled out of the tab order while closed by the visibility. */
.masthead__menu {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 50%;
	transform: translate(-50%, -0.375rem);
	min-width: 12rem;
	display: flex;
	flex-direction: column;
	padding: 0.375rem;
	border-radius: 1rem;
	background: var(--ink);
	border: 1px solid rgb(244 241 234 / 14%);
	box-shadow: 0 18px 40px rgb(10 8 7 / 45%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}

.masthead__group.is-open .masthead__menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.masthead__menu a {
	font-size: 0.8125rem;
	color: var(--paper);
	text-decoration: none;
	padding: 0.5625rem 0.875rem;
	border-radius: 0.625rem;
	white-space: nowrap;
	transition: background-color 0.16s linear;
}

.masthead__menu a:hover {
	background: rgb(244 241 234 / 12%);
}


/* Pill call to action with a circular arrow, per the reference. */
.btn-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.375rem 0.375rem 0.375rem 1.125rem;
	border-radius: 999px;
	background: var(--oxblood);
	border: 1px solid var(--oxblood);
	color: var(--paper);
	font-size: 0.8125rem;
	font-weight: 600;
	/* Same case and tracking as .btn, so the header button and the ones in
	   the page read as the same control. */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.16s linear, border-color 0.16s linear;
}

.btn-pill:hover {
	background: var(--oxblood-deep);
	border-color: var(--oxblood-deep);
}

.btn-pill__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--paper);
	color: var(--oxblood);
	transition: transform 0.2s var(--ease);
}

.btn-pill:hover .btn-pill__icon {
	transform: rotate(45deg);
}

/* Once the bar goes solid, the CTA inverts to white so it still carries the
   weight it had over the hero, with the brand colour kept for the arrow. */
.masthead.is-stuck .btn-pill {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--oxblood);
}

.masthead.is-stuck .btn-pill:hover {
	background: #fff;
	border-color: #fff;
}

.masthead.is-stuck .btn-pill__icon {
	background: var(--oxblood);
	color: var(--paper);
}

@media (max-width: 26rem) {
	.btn-pill {
		gap: 0.4375rem;
		padding-left: 0.8125rem;
		font-size: 0.75rem;
		letter-spacing: 0.05em;
	}

	.masthead__brand img {
		height: 2.75rem;
	}
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.btn {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.8125rem 1.625rem;
	border-radius: 999px;
	border: 1px solid var(--oxblood);
	transition: background-color 0.14s linear, color 0.14s linear;
}

.btn--solid {
	background: var(--oxblood);
	color: var(--paper);
}

.btn--solid:hover {
	background: var(--oxblood-deep);
	border-color: var(--oxblood-deep);
}

/* For the inverted close section, where an oxblood fill would disappear
   into the glow behind it. */
.btn--paper {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--oxblood);
	padding-inline: 2.25rem;
}

.btn--paper:hover {
	background: #fff;
	border-color: #fff;
	color: var(--oxblood-deep);
}

.btn--ghost {
	color: var(--oxblood);
}

.btn--ghost:hover {
	background: var(--oxblood);
	color: var(--paper);
}

.linkarrow {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-bottom: 1px solid var(--oxblood);
	padding-bottom: 0.125rem;
	color: var(--oxblood);
}

.linkarrow::after {
	content: " \2192";
	display: inline-block;
	transition: transform 0.18s var(--ease);
}

.linkarrow:hover::after {
	transform: translateX(0.25rem);
}

.section__more {
	margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   Section shell. Rules run to the viewport edge, content stays on the grid.
   -------------------------------------------------------------------------- */

.main {
	position: relative;
}

.section {
	position: relative;
	padding-block: var(--pad-y);
	border-top: 1px solid var(--rule);
}

.section:first-child {
	border-top: 0;
}

/* Same max width, same gutter and same auto margins as .masthead__inner,
   so every section starts on the same vertical as the logo. */
.section__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   01 Hero. The panel overlaps the headline.
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	padding-top: clamp(7rem, 14vw, 10rem);
	padding-bottom: 0;
	border-top: 0;
	color: var(--paper);
}

/* Pushes the counter band to the foot of the banner. */
.hero__inner {
	flex: 1 1 auto;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Background photograph, no colour cast, with a neutral scrim so the type
   holds. Darker at the top where the masthead sits. */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--ink);
}

.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 58%;
}

/* Two scrims multiply, so keep the vertical one light or the truck goes
   black. Heavy down the left where the headline sits, much lighter across
   the centre and right so the vehicle actually reads. */
.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgb(10 8 7 / 84%) 0%, rgb(10 8 7 / 55%) 45%, rgb(10 8 7 / 26%) 100%),
		linear-gradient(to bottom, rgb(10 8 7 / 45%) 0%, rgb(10 8 7 / 8%) 35%, rgb(10 8 7 / 32%) 100%);
}

.hero__eyebrow {
	margin-bottom: 1.5rem;
	color: rgb(244 241 234 / 75%);
}

.hero__h {
	margin-bottom: 0;
	color: var(--paper);
	text-shadow: 0 1px 40px rgb(14 11 10 / 35%);
}

.hero__h .line {
	display: block;
	overflow: hidden;
}

/* Form sits straight on the image. No card, no panel fill. */
.hero__panel {
	margin-top: 2.75rem;
	background: none;
	border: 0;
	padding: 0;
}

@media (min-width: 64rem) {
	.hero {
		min-height: 100svh;
		padding-top: clamp(8rem, 12vw, 11rem);
	}

	/* Tall enough for the form to sit whole above the fold, without taking
	   the whole screen the way the home page banner does. */
	.hero--compact {
		min-height: 0;
		padding-top: clamp(7rem, 9vw, 8.5rem);
		padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
	}

	.hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 27rem;
		gap: 0 4.5rem;
		align-content: center;
		align-items: center;
		width: 100%;
	}

	.hero__panel {
		margin-top: 0;
		position: relative;
		z-index: 2;
	}

	.hero__copy .hero__h {
		max-width: 12ch;
	}
}

@media (min-width: 90rem) {
	.hero__inner {
		grid-template-columns: minmax(0, 1fr) 29rem;
	}
}

.panel__label {
	padding-bottom: 0.875rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--rule);
}

/* The form brings its own card, so the label drops its rule rather than
   drawing a line that does not line up with the card edge. Both the label
   above and the note below are centred on the form. */
.hero .panel__label {
	color: rgb(244 241 234 / 78%);
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0.875rem;
	text-align: center;
}

.hero .panel__foot {
	color: rgb(244 241 234 / 65%);
	text-align: center;
	max-width: none;
	margin-top: 1rem;
}

.panel__foot {
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   02 Ledger strip
   -------------------------------------------------------------------------- */


/* Counter band at the foot of the banner, sitting over the photograph.

   The band itself is the dark surface and runs edge to edge, so dividers
   are drawn with borders and stripped from the leading cell of each row
   per breakpoint. A grid gap will not work here: the gaps would show the
   band's own dark, not a light line. */
.hero__stats {
	position: relative;
	z-index: 2;
	width: 100%;
	background: rgb(12 10 9 / 62%);
	backdrop-filter: blur(10px);
	border-top: 1px solid rgb(244 241 234 / 16%);
}

.statbar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.statbar__item {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: center;
	gap: 0.4375rem;
	padding: 1.125rem 0.75rem;
	text-align: center;
	border-left: 1px solid rgb(244 241 234 / 14%);
	border-top: 1px solid rgb(244 241 234 / 14%);
}

/* Two columns: rows start at items 1, 3 and 5. */
.statbar__item:nth-child(2n + 1) {
	border-left: 0;
}

.statbar__item:nth-child(-n + 2) {
	border-top: 0;
}

/* Five cells over two columns leaves an orphan, so it takes the full row. */
.statbar__item:last-child {
	grid-column: 1 / -1;
}

.statbar__num {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.875rem, 4.5vw, 2.75rem);
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--paper);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

.statbar__prefix {
	font-size: 0.55em;
	vertical-align: 0.5em;
	margin-right: 0.04em;
	color: rgb(244 241 234 / 70%);
}

.statbar__label {
	font-family: var(--sans);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(244 241 234 / 55%);
	line-height: 1.3;
}

@media (min-width: 40rem) {
	.statbar {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Five over three leaves the sixth cell empty, so the last one
	   widens to close the row. */
	.statbar__item:last-child {
		grid-column: span 2;
	}

	/* Rows now start at items 1 and 4. */
	.statbar__item:nth-child(2n + 1) {
		border-left: 1px solid rgb(244 241 234 / 14%);
	}

	.statbar__item:nth-child(3n + 1) {
		border-left: 0;
	}

	.statbar__item:nth-child(-n + 3) {
		border-top: 0;
	}
}

@media (min-width: 62rem) {
	.statbar {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.statbar__item {
		padding: 1.375rem 1rem;
	}

	.statbar__item:last-child {
		grid-column: auto;
	}

	/* Single row, so only the first cell loses its divider. */
	.statbar__item:nth-child(3n + 1) {
		border-left: 1px solid rgb(244 241 234 / 14%);
	}

	.statbar__item:first-child {
		border-left: 0;
	}

	.statbar__item {
		border-top: 0;
	}

	.statbar__label {
		font-size: 0.6875rem;
	}
}

/* --------------------------------------------------------------------------
   02 About
   -------------------------------------------------------------------------- */

.about {
	position: relative;
	overflow: hidden;
	background: #fff;
}

/* The year count as image, cropped by the section edge. */
/* Sits fully inside the section. line-height 1 keeps the glyph box taller
   than the numerals, so nothing is clipped at the baseline. */
.about__bleed {
	position: absolute;
	right: clamp(0.75rem, 3vw, 3.5rem);
	bottom: clamp(0.75rem, 3vw, 3rem);
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: clamp(7rem, 22vw, 20rem);
	line-height: 1;
	color: color-mix(in srgb, var(--oxblood) 8%, transparent);
	font-variant-numeric: tabular-nums lining-nums;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.about .section__inner {
	position: relative;
	z-index: 1;
}

.about__grid {
	display: grid;
	gap: 3rem;
}

.about__timeline {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* All eight entries visible at once. Dividers are borders with the leading
   cell of each row stripped per breakpoint, since a grid gap would show the
   page background rather than a rule. */
.timeline {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.timeline__item {
	padding: 1.25rem 0;
	border-top: 1px solid var(--rule);
}

.timeline__item:first-child {
	border-top: 0;
}

.timeline__year {
	display: block;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	margin-bottom: 0.25rem;
}

.timeline__text {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 30ch;
}

@media (min-width: 40rem) {
	.timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.timeline__item {
		padding: 1.375rem 1.5rem;
		border-left: 1px solid var(--rule);
	}

	.timeline__item:nth-child(2n + 1) {
		border-left: 0;
		padding-left: 0;
	}

	.timeline__item:nth-child(-n + 2) {
		border-top: 0;
	}
}

@media (min-width: 64rem) {
	.timeline {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.timeline__item {
		padding: 1.75rem 1.5rem;
	}

	.timeline__item:nth-child(2n + 1) {
		border-left: 1px solid var(--rule);
		padding-left: 1.5rem;
	}

	.timeline__item:nth-child(4n + 1) {
		border-left: 0;
		padding-left: 0;
	}

	.timeline__item:nth-child(-n + 4) {
		border-top: 0;
	}
}

/* Archive collage: the portrait anchors the left, the two landscape plates
   stack beside it. These originals are small (the largest is 644px wide),
   so the grid is sized to display them at or below native resolution. */
.about__media {
	display: grid;
	grid-template-columns: 1.28fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 0.75rem;
	max-width: 34rem;
	padding: 0.875rem;
	border: 1px solid var(--rule);
	border-radius: 1.125rem;
}

.about__plate {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--rule);
	border-radius: 0.75rem;
	background: #e6e0d6;
}

.about__plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.about__plate--tall {
	grid-row: 1 / 3;
	aspect-ratio: 644 / 939;
}

.about__credit {
	grid-column: 1 / -1;
	margin-top: 0.125rem;
	letter-spacing: 0.18em;
}

.about__eyebrow {
	letter-spacing: 0.32em;
	margin-bottom: 1.5rem;
}

.about__h {
	margin-bottom: 1.75rem;
}

.about__h .line {
	display: block;
	overflow: hidden;
}

.about__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}

.about__tag {
	padding: 0.4375rem 1.0625rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.about__body {
	color: var(--muted);
	max-width: 34em;
	margin-bottom: 2.25rem;
}

.about__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
}

.about__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--ink);
}

.about__link-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var(--rule);
	color: var(--oxblood);
	transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.about__link:hover .about__link-icon {
	background: var(--oxblood);
	border-color: var(--oxblood);
	color: var(--paper);
}

@media (min-width: 64rem) {
	.about__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 5rem;
		align-items: center;
	}

	.about__media {
		max-width: none;
	}
}


/* --------------------------------------------------------------------------
   03 How it works. Three points on one curve.
   -------------------------------------------------------------------------- */

.how {
	background: var(--paper);
}

.how__lede {
	margin-top: 1.5rem;
	color: var(--muted);
}

.process {
	margin-top: 3rem;
}

.process__curve {
	display: none;
}

.process__step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 1.125rem;
	padding-bottom: 2rem;
}

.process__step:last-child {
	padding-bottom: 0;
}

/* Ghosted numeral. Decorative texture behind each step. */
.process__num {
	position: absolute;
	right: 0;
	top: -0.35em;
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: 6rem;
	line-height: 1;
	color: color-mix(in srgb, var(--ink) 7%, transparent);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* Rounded square, not a circle, matching the reference. */
.process__badge {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.9375rem;
	background: #fff;
	color: var(--oxblood);
	/* The section is pure white, so the badge needs a hairline ring or a
	   white tile on white loses its edge and only the shadow reads. */
	box-shadow:
		0 0 0 1px var(--rule),
		0 0.75rem 1.5rem -0.5rem rgb(26 22 20 / 16%),
		0 0.125rem 0.375rem rgb(26 22 20 / 6%);
	position: relative;
	z-index: 2;
}

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

.process__h {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	line-height: 1.2;
	margin-bottom: 0.375rem;
}

.process__text p {
	font-size: 1rem;
	color: var(--muted);
	max-width: 34ch;
}

/* Desktop: badges sit on the curve. Each text block and its ghosted
   numeral sit to the LEFT of the badge, as in the reference, not centred
   under it. Percentages map to the path's control points in the viewBox. */
@media (min-width: 64rem) {
	.process {
		position: relative;
		height: 28rem;
		margin-top: 3.5rem;
	}

	.process__curve {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.process__steps {
		position: absolute;
		inset: 0;
	}

	.process__step {
		position: static;
		display: block;
		padding: 0;
	}

	.process__badge {
		position: absolute;
		left: var(--x);
		top: var(--y);
		transform: translate(-50%, -50%);
	}

	.process__text {
		position: absolute;
		left: var(--tx);
		top: var(--ty);
		width: 15.5rem;
	}

	.process__num {
		position: absolute;
		left: var(--nx);
		top: var(--ny);
		right: auto;
		font-size: 10rem;
	}

	/* Path point 200,250 in a 1200 by 380 box. The left of the curve was
	   raised and the text dropped, so the badge and line sit close to the
	   first step rather than stranded far below it. */
	.process__step--1 {
		--x: 16.7%;
		--y: 65.8%;
		--tx: 2%;
		--ty: 24%;
		--nx: 20%;
		--ny: 11%;
	}

	/* 620,50. Text sits right of the ascent and low enough to clear it,
	   otherwise the rising curve cuts straight through the paragraph. */
	.process__step--2 {
		--x: 51.7%;
		--y: 12.1%;
		--tx: 43.5%;
		--ty: 42%;
		--nx: 60%;
		--ny: 30%;
	}

	/* 1010,172 */
	.process__step--3 {
		--x: 84.2%;
		--y: 45.8%;
		--tx: 70.5%;
		--ty: 63%;
		--nx: 89%;
		--ny: 51%;
	}
}

/* --------------------------------------------------------------------------
   04 What we buy
   -------------------------------------------------------------------------- */

/* The photograph runs to the viewport edge, so this section drops the
   centred container and the copy column carries its own padding. */
.buy {
	padding-block: 0;
	overflow: hidden;
}

.buy__split {
	display: grid;
}

.buy__media {
	margin: 0;
}

.buy__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center 55%;
}

/* Dark panel against the photograph. Everything inside inverts. */
.buy__copy {
	padding: clamp(3rem, 7vw, 4.5rem) var(--gutter);
	max-width: var(--maxw);
	margin-inline: auto;
	width: 100%;
	background: var(--ink);
	color: var(--paper);
}

.buy__copy .display-l {
	color: var(--paper);
}

.buy__lede {
	margin-top: 1.75rem;
	color: rgb(244 241 234 / 82%);
}

.buy__promises {
	display: grid;
	gap: 0;
	margin-top: clamp(2.25rem, 4vw, 3rem);
	border-top: 1px solid rgb(244 241 234 / 18%);
}

.buy__promise {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	padding-block: 0.8125rem;
	border-bottom: 1px solid rgb(244 241 234 / 12%);
}

.buy__promise dt {
	flex: 0 0 11.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(244 241 234 / 50%);
}

.buy__promise dd {
	flex: 1 1 12rem;
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -0.01em;
	color: var(--paper);
}

/* The last commitment is the one worth ending on. */
.buy__promise:last-child {
	border-bottom: 0;
}

.buy__promise:last-child dd {
	color: var(--paper);
}

.buy__copy .linkarrow {
	color: var(--paper);
	border-bottom-color: rgb(244 241 234 / 55%);
}

.buy__copy .linkarrow:hover {
	border-bottom-color: var(--paper);
}

@media (min-width: 64rem) {
	.buy__split {
		grid-template-columns: 46% minmax(0, 1fr);
		align-items: stretch;
	}

	.buy__media img {
		height: 100%;
		aspect-ratio: auto;
		min-height: 36rem;
	}

	/* The panel fills its grid column so the dark reaches the right edge of
	   the viewport. Line length is capped on the children instead, because
	   a max-width here would crop the background with it. */
	.buy__copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding: clamp(4rem, 7vw, 6rem) clamp(3rem, 5vw, 5rem);
		max-width: none;
		margin-inline: 0;
	}

	.buy__copy > * {
		max-width: 40rem;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   04b Marques. Seven badges across, dots underneath.

   The slide movement is native scroll snapping, so it drags and swipes
   without script. JavaScript only builds the dots and keeps them in sync.
   -------------------------------------------------------------------------- */

.marques {
	padding-block: clamp(1rem, 2vw, 1.75rem);
	border-top: 0;
}

.marques__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.marques__viewport::-webkit-scrollbar {
	display: none;
}

.marques__viewport:focus-visible {
	outline: 2px solid var(--oxblood);
	outline-offset: 6px;
}

/* --per is the number of badges in view. Overridden per breakpoint below. */
.marques__track {
	--per: 2;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(100% / var(--per));
	list-style: none;
	margin: 0;
	padding: 0;
}

.marques__item {
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: clamp(0.5rem, 1.5vw, 1.25rem);
}

/* The source files are square with a lot of transparent margin, so the
   box has to be generous for the mark itself to read. */
.marques__logo {
	width: 100%;
	max-width: 10rem;
	height: clamp(5rem, 8vw, 8rem);
	object-fit: contain;
	opacity: 0.9;
	transition: opacity 0.2s linear;
}

.marques__item:hover .marques__logo {
	opacity: 1;
}

.marques__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* Empty until the script fills it, so it takes no space without JS. */
.marques__dots:empty {
	display: none;
}

.marques__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.18s linear, border-color 0.18s linear, transform 0.18s var(--ease);
}

.marques__dot[aria-current="true"] {
	background: var(--oxblood);
	border-color: var(--oxblood);
	transform: scale(1.25);
}

@media (min-width: 40rem) {
	.marques__track {
		--per: 4;
	}
}

@media (min-width: 64rem) {
	.marques__track {
		--per: 7;
	}
}

/* --------------------------------------------------------------------------
   05 The difference. Seven cards, one question each, both answers on
   the card. No table, so nothing scrolls sideways on a phone.
   -------------------------------------------------------------------------- */

/* Heading left, standfirst right. Baselines aligned at the bottom so the
   paragraph sits against the foot of the headline rather than its top. */
.diff__intro {
	display: grid;
	gap: 1.75rem;
}

.diff__lede {
	max-width: 38em;
}

@media (min-width: 64rem) {
	.diff__intro {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 4rem;
		align-items: end;
	}

	.diff__lede {
		padding-bottom: 0.375rem;
	}
}


/* Named once, above the grid, so the cards do not repeat the attribution. */
.diff__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	max-width: none;
	margin-top: clamp(2rem, 4vw, 3rem);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.diff__key {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.diff__key--us {
	color: var(--oxblood);
}

.diff__key--them {
	color: var(--muted);
}

.diff__grid {
	display: grid;
	gap: 1rem;
	margin-top: 1.25rem;
}

.diff__item {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
	padding: clamp(1.375rem, 2.5vw, 1.75rem);
}

.diff__aspect {
	max-width: none;
	color: var(--muted);
}

/* The answer is the reason the card exists, so it carries the weight. */
.diff__ours {
	max-width: none;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.diff__theirs {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	max-width: none;
	margin-top: auto;
	padding-top: 0.875rem;
	border-top: 1px solid var(--rule);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--muted);
}

.diff__icon {
	flex: 0 0 auto;
}

.diff__theirs .diff__icon {
	margin-top: 0.3125rem;
	color: var(--rule);
}

/* The last card closes the section, so it takes the full row and inverts. */
.diff__item--wide {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.diff__item--wide .diff__aspect {
	color: rgb(244 241 234 / 55%);
}

.diff__item--wide .diff__ours {
	color: var(--paper);
}

.diff__item--wide .diff__theirs {
	border-top-color: rgb(244 241 234 / 16%);
	color: rgb(244 241 234 / 60%);
}

.diff__item--wide .diff__theirs .diff__icon {
	color: rgb(244 241 234 / 40%);
}

@media (min-width: 40rem) {
	.diff__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.diff__item--wide {
		grid-column: 1 / -1;
	}
}

@media (min-width: 64rem) {
	.diff__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.diff__legend {
		margin-top: clamp(2.5rem, 5vw, 3.5rem);
	}

	/* Wide enough to run the answer beside the question rather than under it. */
	.diff__item--wide {
		flex-direction: row;
		align-items: center;
		gap: 2rem;
		padding-block: clamp(1.5rem, 2.5vw, 2rem);
	}

	.diff__item--wide .diff__aspect {
		flex: 0 0 14rem;
	}

	.diff__item--wide .diff__ours {
		flex: 1 1 auto;
		font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	}

	.diff__item--wide .diff__theirs {
		flex: 0 0 auto;
		margin-top: 0;
		padding-top: 0;
		padding-left: 2rem;
		border-top: 0;
		border-left: 1px solid rgb(244 241 234 / 16%);
		align-items: center;
	}

	.diff__item--wide .diff__theirs .diff__icon {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   07 Locations, over a photograph. Cards are translucent so the image
   stays visible through them.
   -------------------------------------------------------------------------- */

.where {
	position: relative;
	isolation: isolate;
	color: var(--paper);
	border-top: 0;
}

.where__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--ink);
}

.where__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
}

.where__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgb(10 8 7 / 88%) 0%, rgb(10 8 7 / 74%) 45%, rgb(10 8 7 / 90%) 100%);
}

.where__intro {
	display: grid;
	gap: 1.5rem;
}

.where__lede {
	color: rgb(244 241 234 / 78%);
}

.where__grid {
	display: grid;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.where__card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid rgb(244 241 234 / 16%);
	border-radius: 1rem;
	background: rgb(10 8 7 / 42%);
	backdrop-filter: blur(8px);
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.where__card:hover {
	border-color: rgb(244 241 234 / 34%);
	background: rgb(10 8 7 / 58%);
}

.where__town {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--paper);
	margin-bottom: 1.125rem;
	padding-bottom: 1.125rem;
	border-bottom: 1px solid rgb(244 241 234 / 16%);
}

.where__state {
	font-size: 0.55em;
	color: rgb(244 241 234 / 55%);
}

.where__stores {
	flex: 1 1 auto;
}

.where__store {
	margin-bottom: 1rem;
}

.where__store:last-child {
	margin-bottom: 0;
}

.where__name {
	display: block;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--paper);
}

.where__addr {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgb(244 241 234 / 62%);
}

.where__tel {
	display: inline-block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--paper);
	text-decoration: none;
	border-bottom: 1px solid rgb(244 241 234 / 40%);
}

.where__tel:hover {
	border-bottom-color: var(--paper);
}

.where__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	margin-top: 1.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--paper);
	text-decoration: none;
}

.where__link svg {
	transition: transform 0.2s var(--ease);
}

.where__link:hover svg {
	transform: translate(0.15rem, -0.15rem);
}

@media (min-width: 48rem) {
	.where__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 68rem) {
	.where__intro {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 4rem;
		align-items: end;
	}

	.where__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* --------------------------------------------------------------------------
   08 Gallery. Four explicit columns, each a tall frame and a short one in
   alternating order. Each column is its own flex stack, so the two frames
   size independently. A grid would force both rows to a shared height and
   the alternation would collapse.
   -------------------------------------------------------------------------- */

.gallery {
	background: #fff;
}

.gallery__head {
	text-align: center;
}

.gallery__intro {
	margin: 1.25rem auto 0;
	max-width: 34em;
	color: var(--muted);
}

.gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

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

.gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: 0.875rem;
	background: var(--paper);
}

.gallery__item img {
	width: 100%;
	display: block;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.gallery__item:hover img {
	transform: scale(1.04);
}

.gallery__item--tall img {
	height: clamp(15rem, 34vw, 26rem);
}

.gallery__item--short img {
	height: clamp(10rem, 23vw, 17rem);
}

@media (min-width: 48rem) {
	.gallery__grid,
	.gallery__col {
		gap: 1rem;
	}
}

@media (min-width: 68rem) {
	.gallery__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.gallery__grid,
	.gallery__col {
		gap: 1.125rem;
	}
}

/* --------------------------------------------------------------------------
   09 Reviews
   -------------------------------------------------------------------------- */

.reviews {
	background: #fff;
}

.reviews__head {
	text-align: center;
}

.reviews__lede {
	margin: 1.5rem auto 0;
}

/* The reviews themselves come from the Trustindex widget, so the theme
   only owns the spacing around it. */
.reviews__widget {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}


/* --------------------------------------------------------------------------
   10 Questions. Accordion left, photograph running off the right edge.
   -------------------------------------------------------------------------- */

/* Drops the centred container so the image can reach the viewport edge.
   The copy column carries the padding instead. Mirrors .buy__split,
   flipped. */
.faq {
	padding-block: 0;
	overflow: hidden;
}

.faq__split {
	display: grid;
}

.faq__split > * {
	min-width: 0;
}

.faq__media {
	margin: 0;
	grid-row: 1;
}

.faq__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center 55%;
}

.faq__copy {
	grid-row: 2;
	padding: clamp(3rem, 7vw, 4.5rem) var(--gutter);
	max-width: var(--maxw);
	margin-inline: auto;
	width: 100%;
}

@media (min-width: 64rem) {
	.faq__split {
		grid-template-columns: minmax(0, 1fr) 46%;
		align-items: stretch;
	}

	.faq__copy {
		grid-row: 1;
		grid-column: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: clamp(4rem, 7vw, 6rem) clamp(3rem, 5vw, 5rem);
		max-width: none;
		margin-inline: 0;
	}

	.faq__copy > * {
		max-width: 44rem;
		width: 100%;
	}

	.faq__media {
		grid-column: 2;
	}

	.faq__media img {
		height: 100%;
		aspect-ratio: auto;
		min-height: 38rem;
	}
}

.faq__list {
	margin-top: 3rem;
	border-top: 1px solid var(--rule);
	max-width: 48rem;
}

.faq__item {
	border-bottom: 1px solid var(--rule);
}

.faq__q {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.faq__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	text-align: left;
	padding-block: 1.375rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
	line-height: 1.25;
}

.faq__btn:hover {
	color: var(--oxblood);
}

.faq__mark {
	position: relative;
	flex: 0 0 auto;
	width: 0.875rem;
	height: 0.875rem;
}

.faq__mark::before,
.faq__mark::after {
	content: "";
	position: absolute;
	background: var(--oxblood);
	transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}

.faq__mark::before {
	inset-block-start: 50%;
	left: 0;
	width: 100%;
	height: 1px;
}

.faq__mark::after {
	left: 50%;
	inset-block-start: 0;
	width: 1px;
	height: 100%;
}

.faq__btn[aria-expanded="true"] .faq__mark::after {
	transform: scaleY(0);
	opacity: 0;
}

.faq__panel {
	padding-bottom: 1.5rem;
}

.faq__panel p {
	font-size: 1rem;
	color: var(--muted);
	max-width: 46em;
}

.swr-todo {
	display: inline-block;
	padding: 0.0625rem 0.4375rem;
	background: color-mix(in srgb, var(--oxblood) 12%, transparent);
	border: 1px dashed var(--oxblood);
	color: var(--oxblood);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   11 Close. The one inverted section. Centred, with brand colour rising
   out of the bottom corners.
   -------------------------------------------------------------------------- */

.close {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #12100f;
	color: var(--paper);
	border-top: 0;
	text-align: center;
	padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.close__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	background: #12100f;
}

.close__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 58%;
}

/* Heavy enough that cream type holds against a photograph in daylight. */
.close__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgb(12 10 9 / 92%) 0%, rgb(12 10 9 / 80%) 45%, rgb(12 10 9 / 94%) 100%);
}

/* Two soft pools of oxblood in the upper corners, plus a wide wash across
   the top to tie them together. Painted, not an image, so it scales cleanly. */
.close__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(50% 70% at 2% 0%, rgb(236 26 79 / 85%) 0%, rgb(236 26 79 / 0%) 66%),
		radial-gradient(50% 70% at 98% 0%, rgb(236 26 79 / 85%) 0%, rgb(236 26 79 / 0%) 66%),
		radial-gradient(85% 46% at 50% -12%, rgb(236 26 79 / 40%) 0%, rgb(236 26 79 / 0%) 72%);
}

.close__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Pill label with a hairline running out to either side. */
.close__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	max-width: none;
	margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.close__badge::before,
.close__badge::after {
	content: "";
	height: 1px;
	width: clamp(1.5rem, 9vw, 7rem);
	background: linear-gradient(to right, rgb(244 241 234 / 0%), rgb(244 241 234 / 40%));
}

.close__badge::after {
	background: linear-gradient(to left, rgb(244 241 234 / 0%), rgb(244 241 234 / 40%));
}

.close__badge span {
	display: inline-block;
	padding: 0.5rem 1.125rem;
	border: 1px solid rgb(244 241 234 / 26%);
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(244 241 234 / 78%);
	white-space: nowrap;
}

.close__h {
	color: var(--paper);
	max-width: 20ch;
}

.close__lede {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	max-width: 42em;
	font-size: 1rem;
	line-height: 1.7;
	color: rgb(244 241 234 / 66%);
}

.close__cta {
	margin-top: clamp(2rem, 4vw, 2.75rem);
	max-width: none;
}

.close__call {
	margin-top: 1.5rem;
	max-width: none;
	font-size: 0.875rem;
	color: rgb(244 241 234 / 55%);
}

.close__tel {
	color: var(--paper);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 1px solid rgb(244 241 234 / 35%);
	padding-bottom: 0.125rem;
	transition: border-color 0.16s linear;
}

.close__tel:hover {
	border-bottom-color: var(--paper);
}

.close .swr-todo {
	background: rgb(244 241 234 / 14%);
	border-color: rgb(244 241 234 / 48%);
	color: var(--paper);
}

/* --------------------------------------------------------------------------
   Inner pages. The About page is the only one built so far.
   -------------------------------------------------------------------------- */

/* A banner, not a hero: one heading over a photograph. The top padding
   clears the fixed masthead, which sits over this transparently. */
.pagehero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--ink);
	color: var(--paper);
	border-top: 0;
	display: flex;
	align-items: flex-end;
	min-height: clamp(16rem, 34vw, 26rem);
	padding-top: clamp(7rem, 12vw, 9rem);
	padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

/* The flex context would otherwise shrink the container to the width of the
   heading, and its auto margins would centre it away from the logo. */
.pagehero > .section__inner {
	width: 100%;
}

.pagehero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ink);
}

.pagehero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}

/* Enough weight for cream type over a bright sky, heaviest at the top
   where the masthead sits. */
.pagehero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgb(12 10 9 / 82%) 0%, rgb(12 10 9 / 48%) 45%, rgb(12 10 9 / 88%) 100%);
}

.pagehero__h {
	max-width: 22ch;
	margin-inline: auto;
	color: var(--paper);
	text-align: center;
	text-shadow: 0 1px 32px rgb(12 10 9 / 45%);
}


/* Get to know us. Collage left, copy right.

   The inset photograph and the badge are positioned against the media
   column rather than the grid, so they keep their relationship to the main
   image at every width. */
.getknow__grid {
	display: grid;
	gap: clamp(3rem, 6vw, 4.5rem);
}

.getknow__media {
	position: relative;
	padding: 0 clamp(1.5rem, 6vw, 4rem) clamp(2.5rem, 5vw, 3.5rem) 0;
}

.getknow__main {
	margin: 0;
	position: relative;
	z-index: 1;
	border-radius: 1.5rem;
	overflow: hidden;
	max-width: 26rem;
}

.getknow__main img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 30%;
}

/* Sits over the top right corner of the main image, with a paper coloured
   gap so the two never read as one photograph. */
.getknow__inset {
	position: absolute;
	z-index: 2;
	top: clamp(1.5rem, 5vw, 3rem);
	right: 0;
	width: clamp(9rem, 22vw, 13rem);
	margin: 0;
	padding: 0.5rem;
	background: var(--paper);
	border-radius: 1.125rem;
}

.getknow__inset img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.75rem;
}

.getknow__badge {
	position: absolute;
	z-index: 3;
	left: 0;
	bottom: 0;
	max-width: none;
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
	padding: 1rem 1.375rem;
	background: var(--oxblood);
	color: var(--paper);
	border-radius: 1rem;
}

.getknow__badge-num {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums lining-nums;
}

.getknow__badge-txt {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.35;
	color: rgb(244 241 234 / 82%);
}

/* Loose dot field behind the collage, painted rather than an image. */
.getknow__dots {
	position: absolute;
	z-index: 0;
	right: 0;
	top: clamp(6rem, 16vw, 10rem);
	width: clamp(7rem, 18vw, 11rem);
	height: clamp(7rem, 18vw, 11rem);
	background-image: radial-gradient(var(--rule) 1.5px, transparent 1.5px);
	background-size: 0.875rem 0.875rem;
}


/* Pulled back from the section scale: the line is short and the collage
   beside it is already carrying the weight. */
.getknow__h {
	font-size: clamp(1.625rem, 3vw, 2.375rem);
	max-width: 20ch;
}

.getknow__lede {
	margin-top: 1.5rem;
}

.getknow__list {
	margin-top: 1.75rem;
	display: grid;
	gap: 0.875rem;
}

.getknow__fact {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
}

.getknow__tick {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.1875rem;
	border-radius: 50%;
	background: var(--oxblood);
	color: var(--paper);
}

.getknow__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
	margin-top: clamp(2rem, 4vw, 2.75rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--rule);
}

.getknow__who {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	max-width: none;
}

.getknow__roundel {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	border: 1px solid var(--oxblood);
	color: var(--oxblood);
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums lining-nums;
}

.getknow__who-txt {
	display: flex;
	flex-direction: column;
}

.getknow__name {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
}

.getknow__role {
	font-size: 0.8125rem;
	color: var(--muted);
}

@media (min-width: 64rem) {
	.getknow__grid {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		align-items: center;
		gap: clamp(3rem, 6vw, 5.5rem);
	}

	.getknow__grid > * {
		min-width: 0;
	}
}

/* Counter band. Its own classes rather than the hero stat bar, whose
   divider rules are written around exactly five cells. */
.counters {
	background: var(--ink);
	color: var(--paper);
	border-top: 0;
	padding-block: clamp(1rem, 1.8vw, 1.5rem);
}

.counters__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.counter {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: clamp(0.875rem, 1.8vw, 1.125rem) 0.75rem;
	text-align: center;
	border-top: 1px solid rgb(244 241 234 / 14%);
	border-left: 1px solid rgb(244 241 234 / 14%);
}

.counter:nth-child(-n + 2) {
	border-top: 0;
}

.counter:nth-child(odd) {
	border-left: 0;
}

.counter__num {
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.875rem, 4vw, 2.625rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--paper);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

.counter__label {
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	color: rgb(244 241 234 / 55%);
}

@media (min-width: 48rem) {
	.counters__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* One row, so every cell keeps its divider except the first. The odd
	   child rule above has to be undone before that can hold. */
	.counter,
	.counter:nth-child(odd) {
		border-top: 0;
		border-left: 1px solid rgb(244 241 234 / 14%);
	}

	.counter:first-child {
		border-left: 0;
	}
}


/* --------------------------------------------------------------------------
   The storyline. A serpentine path through the timeline entries.
   -------------------------------------------------------------------------- */

.storyline {
	background: var(--paper-lift);
	overflow: hidden;
}

.storyline__head {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.storyline__lede {
	margin-inline: auto;
}

.storyline__lede {
	margin-top: 1.25rem;
}

.storyline__path {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.storyline__step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 1.25rem;
	padding-block: 1.125rem;
	border-top: 1px solid var(--rule);
}

.storyline__step:first-child {
	border-top: 0;
}

.storyline__disc {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--oxblood);
	color: var(--paper);
}

.storyline__year {
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums lining-nums;
}

/* The year is inside the disc at this width, so the copy does not repeat it. */
.storyline__when {
	display: none;
}

.storyline__text {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 42ch;
}

@media (min-width: 64rem) {
	.storyline__path {
		margin-top: clamp(2rem, 4vw, 3rem);
		padding-bottom: 0;
	}

	.storyline__step {
		display: block;
		min-height: 8.5rem;
		padding-block: 0;
		border-top: 0;
	}

	/* One C per row, filling it top to bottom, bulging right on odd steps
	   and left on even ones. Each row shares its boundary line with the
	   next, which is what makes the path continuous, and it puts the apex
	   of every curve exactly on the row centre line. */
	/* Both turns are curves, and every curve is drawn by a box whose two
	   adjacent borders are both painted. A radius on a corner where one of
	   the two sides is missing tapers the stroke to nothing instead of
	   turning it, which is what used to leave a hard angle at the bottom.

	   ::before is the run across the top and the turn down into the disc.
	   ::after is the turn back out of the disc into the next run. Each row
	   starts its run a corner width in from the side the previous row
	   turned on, so the two meet exactly. */
	.storyline__step::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 0;
		bottom: 3rem;
		left: calc(20% + 3rem);
		right: 20%;
		border: 2px solid var(--rule);
		border-left-width: 0;
		border-bottom-width: 0;
		border-radius: 0 3rem 0 0;
	}

	.storyline__step::after {
		content: "";
		position: absolute;
		z-index: 0;
		right: 20%;
		bottom: -2px;
		width: 3rem;
		height: 3rem;
		border: 2px solid var(--rule);
		border-top-width: 0;
		border-left-width: 0;
		border-radius: 0 0 3rem 0;
	}

	.storyline__step:nth-child(even)::before {
		left: 20%;
		right: calc(20% + 3rem);
		border-left-width: 2px;
		border-right-width: 0;
		border-radius: 3rem 0 0 0;
	}

	.storyline__step:nth-child(even)::after {
		right: auto;
		left: 20%;
		border-left-width: 2px;
		border-right-width: 0;
		border-radius: 0 0 0 3rem;
	}

	/* The path closes the way it opened: out of the last disc, round the
	   turn, and away along a run that ends square. */
	.storyline__step:last-child::after {
		width: auto;
	}

	.storyline__step:last-child:nth-child(odd)::after {
		left: calc(20% + 3rem);
		right: 20%;
	}

	.storyline__step:last-child:nth-child(even)::after {
		left: 20%;
		right: calc(20% + 3rem);
	}

	/* Centred on the point where the horizontal run meets the curve, so the
	   path appears to pass through the disc rather than stop short of it. */
	.storyline__disc {
		position: absolute;
		z-index: 1;
		top: 50%;
		right: 20%;
		transform: translate(50%, -50%);
		width: clamp(5rem, 9vw, 7.5rem);
		height: clamp(5rem, 9vw, 7.5rem);
	}

	.storyline__step:nth-child(even) .storyline__disc {
		right: auto;
		left: 20%;
		transform: translate(-50%, -50%);
	}

	/* Centred in the band between the two runs, level with the disc, and on
	   the same axis for every entry so the column of text does not shift
	   from side to side as the path alternates. */
	.storyline__copy {
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		width: 36%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.storyline__year {
		font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	}

	/* The disc already shows it. */
	.storyline__when {
		display: none;
	}

	.storyline__text {
		font-size: 0.9375rem;
		max-width: none;
	}
}


/* Same treatment as the home page closer, without the photograph. */
.pageclose {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #12100f;
	color: var(--paper);
	border-top: 0;
	text-align: center;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

/* --------------------------------------------------------------------------
   Contact page. Form on the left, the ways to reach a person on the right.
   -------------------------------------------------------------------------- */

.contact__grid {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4rem);
}

.contact__h {
	margin-bottom: 1.25rem;
}

.contact__lede + .contact__lede {
	margin-top: 1.25rem;
}

/* Sits between the copy and the form, and points at the other route. */
.contact__aside-note {
	margin: 1.5rem 0 clamp(2rem, 4vw, 2.5rem);
	padding-left: 1.125rem;
	border-left: 2px solid var(--oxblood);
	font-size: 0.9375rem;
	color: var(--muted);
}

.contact__aside {
	align-self: start;
	background: var(--paper-lift);
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.contact__stores {
	margin-top: 0;
}

.contact__town {
	padding-top: 1.125rem;
	margin-top: 1.125rem;
	border-top: 1px solid var(--rule);
}

.contact__town:first-child {
	border-top: 0;
	margin-top: 0;
}

.contact__townname {
	max-width: none;
	margin-bottom: 0.625rem;
	color: var(--oxblood);
}

/* Two stores share some towns, so each one is its own block rather than a
   run of lines that would read as a single address. */
.contact__store {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	max-width: none;
}

.contact__store + .contact__store {
	margin-top: 0.875rem;
}

.contact__storename {
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: -0.005em;
}

.contact__addr {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--muted);
}

.contact__tel {
	align-self: flex-start;
	margin-top: 0.1875rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--oxblood);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--oxblood) 35%, transparent);
	font-variant-numeric: tabular-nums lining-nums;
	transition: border-color 0.16s linear;
}

.contact__tel:hover {
	border-bottom-color: var(--oxblood);
}

.contact__fallback {
	padding: 1.25rem 1.5rem;
	background: var(--paper-lift);
	border: 1px solid var(--rule);
	border-radius: 1rem;
}

@media (min-width: 64rem) {
	.contact__grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: start;
	}

	.contact__grid > * {
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   Contact Form 7. The plugin prints its own markup, so this styles what it
   gives us rather than asking it to output something else.
   -------------------------------------------------------------------------- */

/* Small heading over the fields, a step below the section heading. */
.cform__h {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	padding-bottom: 0.875rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--rule);
}

.cform__grid {
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 40rem) {
	.cform__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cform__field,
.cform__submit {
	display: block;
	max-width: none;
	margin: 0;
}


.cform select {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23736a63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
	border: 1px solid var(--rule);
	border-radius: 0.75rem;
	padding: 0.8125rem 2.5rem 0.8125rem 1rem;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.16s linear;
}

.cform select:focus {
	border-color: var(--oxblood);
	outline: 2px solid color-mix(in srgb, var(--oxblood) 30%, transparent);
	outline-offset: 1px;
}

/* Location, phone and comments run the width of the grid. */
.cform__field--wide {
	grid-column: 1 / -1;
}

.cform .wpcf7-form-control-wrap {
	display: block;
}

.cform ::placeholder {
	color: var(--muted);
	opacity: 1;
}

.cform input[type="text"],
.cform input[type="email"],
.cform input[type="tel"],
.cform textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 0.75rem;
	padding: 0.8125rem 1rem;
	transition: border-color 0.16s linear;
}

.cform input:focus,
.cform textarea:focus {
	border-color: var(--oxblood);
	outline: 2px solid color-mix(in srgb, var(--oxblood) 30%, transparent);
	outline-offset: 1px;
}

.cform textarea {
	resize: vertical;
	min-height: 8rem;
}

.cform__submit {
	margin-top: 1.25rem;
}

.cform .btn {
	cursor: pointer;
}

/* Status and validation messages come from the plugin, so they are styled
   where they land rather than restructured. */
.cform .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	color: var(--oxblood);
}

.cform .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.875rem 1.125rem;
	border: 1px solid var(--rule);
	border-radius: 0.75rem;
	font-size: 0.9375rem;
}

.cform form.sent .wpcf7-response-output {
	border-color: var(--oxblood);
	color: var(--oxblood);
}

.cform .wpcf7-spinner {
	margin-left: 0.75rem;
}


/* --------------------------------------------------------------------------
   FAQs page. The accordion itself reuses the .faq rules from the home page.
   -------------------------------------------------------------------------- */

.faqpage__head {
	max-width: 44rem;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.faqpage__lede {
	margin-inline: auto;
}

.faqpage__lede {
	margin-top: 1.25rem;
}

.faqpage__tel {
	font-weight: 600;
	color: var(--oxblood);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--oxblood) 35%, transparent);
	font-variant-numeric: tabular-nums lining-nums;
}

.faqpage__tel:hover {
	border-bottom-color: var(--oxblood);
}

/* Wider than the home page column, which sits beside a photograph. */
.faqpage__list {
	margin-top: 0;
	max-width: 52rem;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Shared eyebrow: a short rule, then the label.
   -------------------------------------------------------------------------- */

.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: none;
	margin-bottom: 1.25rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oxblood);
}

.eyebrow--centred {
	justify-content: center;
}

.eyebrow__dash {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 2px;
	background: var(--oxblood);
}

/* --------------------------------------------------------------------------
   Location page. Copy on the left, map and details on the right.
   -------------------------------------------------------------------------- */

.hood__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
}

.hood__h {
	max-width: 18ch;
}

.hood__lede {
	margin-top: 1.25rem;
}

.hood__label {
	color: var(--muted);
}

.hood__areas {
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

/* Names wrap as a set of tags: the reader is scanning for their own town,
   not reading a sequence. */
.hood__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.hood__place {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.5rem 0.9375rem;
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-size: 0.875rem;
	color: var(--ink);
}

.hood__place svg {
	flex: 0 0 auto;
	color: var(--oxblood);
}

.hood__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem;
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.hood__fact {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	padding: 1rem 1.125rem;
	background: var(--oxblood);
	color: var(--paper);
	border-radius: 1rem;
}

.hood__fig {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums lining-nums;
}

.hood__factlabel {
	font-size: 0.75rem;
	line-height: 1.35;
	color: rgb(244 241 234 / 78%);
}

.hood__side {
	display: grid;
	gap: 1rem;
}

.hood__map {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 1.25rem;
	background: var(--paper-lift);
	box-shadow: 0 18px 40px rgb(26 22 20 / 10%);
}

.hood__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	filter: saturate(0.55) brightness(1.05) contrast(0.94);
}

.hood__card {
	display: grid;
	gap: 1rem;
	padding: 1.25rem 1.375rem;
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
}

.hood__cardrow {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	max-width: none;
}

.hood__street {
	font-size: 0.9375rem;
	line-height: 1.45;
}

.hood__tel {
	align-self: flex-start;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	color: var(--oxblood);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--oxblood) 35%, transparent);
	font-variant-numeric: tabular-nums lining-nums;
}

.hood__tel:hover {
	border-bottom-color: var(--oxblood);
}

@media (min-width: 48rem) {
	.hood__card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.hood__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: start;
	}

	.hood__grid > * {
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   Three steps, as cards. Location pages only: the home page keeps its curve.
   -------------------------------------------------------------------------- */

.steps {
	background: var(--paper-lift);
}

.steps__head {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.steps__lede {
	margin-top: 1.25rem;
	margin-inline: auto;
}

.steps__grid {
	display: grid;
	gap: 1.25rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.steps__card {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
	text-align: center;
}

/* Sits behind the content as a watermark, so it never competes with the
   heading for attention. */
.steps__num {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	font-family: var(--display);
	font-weight: 700;
	font-size: 3rem;
	letter-spacing: -0.03em;
	line-height: 1;
	color: color-mix(in srgb, var(--oxblood) 10%, transparent);
	font-variant-numeric: tabular-nums lining-nums;
	pointer-events: none;
	user-select: none;
}

.steps__icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 auto 1.25rem;
	border-radius: 1rem;
	background: var(--oxblood);
	color: var(--paper);
}

.steps__h {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	margin-bottom: 0.625rem;
}

.steps__p {
	margin-inline: auto;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--muted);
}

@media (min-width: 48rem) {
	.steps__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}

	.steps__grid > * {
		min-width: 0;
	}

	/* A dashed run between the cards, drawn on the gap rather than in it. */
	.steps__card + .steps__card::before {
		content: "";
		position: absolute;
		top: 4.125rem;
		left: calc(-1.5rem - 1px);
		width: 1.5rem;
		border-top: 2px dashed var(--rule);
	}
}

/* --------------------------------------------------------------------------
   Location page questions. Head on the left, cards on the right.
   -------------------------------------------------------------------------- */

.qa__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

.qa__h {
	max-width: 16ch;
}

.qa__lede {
	margin-top: 1.25rem;
}

.qa__tel {
	font-weight: 600;
	color: var(--oxblood);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--oxblood) 35%, transparent);
}

.qa__tel:hover {
	border-bottom-color: var(--oxblood);
}

/* Each question is its own card rather than a row in a ruled list. */
.qa__list {
	display: grid;
	gap: 0.875rem;
	margin-top: 0;
	max-width: none;
	border-top: 0;
}

.qa__item {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 1rem;
	border-bottom: 1px solid var(--rule);
	padding-inline: clamp(1.125rem, 2vw, 1.5rem);
}

.qa__item .faq__btn {
	padding-block: 1.125rem;
	font-size: 1rem;
}

/* The mark becomes a small tile, matching the reference. */
.qa__item .faq__mark {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 0.5rem;
	background: var(--paper-lift);
	border: 1px solid var(--rule);
}

.qa__item .faq__mark::before {
	inset-block-start: 50%;
	left: 50%;
	width: 0.6875rem;
	height: 1px;
	transform: translate(-50%, -50%);
}

.qa__item .faq__mark::after {
	left: 50%;
	inset-block-start: 50%;
	width: 1px;
	height: 0.6875rem;
	transform: translate(-50%, -50%);
}

.qa__item .faq__btn[aria-expanded="true"] .faq__mark::after {
	transform: translate(-50%, -50%) scaleY(0);
}

.qa__item .faq__panel {
	padding-bottom: 1.25rem;
}

@media (min-width: 64rem) {
	.qa__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: start;
	}

	.qa__grid > * {
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   How it works. A ledger walk: each stage a full width band with its
   numeral bleeding off the outer edge, alternating sides.
   -------------------------------------------------------------------------- */

.walk__head {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.walk__lede {
	margin-top: 1.25rem;
	margin-inline: auto;
}

.walk__list {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.walk__stage {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--rule);
}

.walk__stage:nth-child(even) {
	background: var(--paper-lift);
}

/* Set large, low contrast and cropped by the section, so it reads as a
   watermark rather than a label. */
.walk__num {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -0.15em;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(6rem, 18vw, 13rem);
	line-height: 1;
	letter-spacing: -0.05em;
	color: color-mix(in srgb, var(--oxblood) 8%, transparent);
	font-variant-numeric: tabular-nums lining-nums;
	pointer-events: none;
	user-select: none;
}

.walk__stage:nth-child(even) .walk__num {
	left: auto;
	right: -0.15em;
}

.walk__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.walk__kicker {
	color: var(--oxblood);
	margin-bottom: 0.75rem;
}

.walk__h {
	margin-bottom: 0.875rem;
}

.walk__p {
	color: var(--muted);
}

.walk__aside {
	padding: clamp(1.25rem, 2.5vw, 1.625rem);
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
	align-self: start;
}

.walk__label {
	color: var(--muted);
	margin-bottom: 0.875rem;
}

.walk__items {
	display: grid;
	gap: 0.625rem;
}

.walk__item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.walk__tick {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	border-radius: 50%;
	background: var(--oxblood);
	color: var(--paper);
}

@media (min-width: 64rem) {
	.walk__inner {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
		align-items: start;
		gap: 4rem;
	}

	.walk__inner > * {
		min-width: 0;
	}

	/* The copy steps aside so the numeral has room on its own side. */
	.walk__stage:nth-child(odd) .walk__inner {
		padding-left: 6rem;
	}

	.walk__stage:nth-child(even) .walk__inner {
		padding-right: 6rem;
	}
}

/* Two routes in, side by side. */
.drive {
	background: var(--paper-lift);
}

.drive__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
}

.drive__pair {
	display: grid;
	gap: 1rem;
}

.drive__card {
	padding: clamp(1.5rem, 3vw, 2rem);
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
}

.drive__card--dark {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.drive__label {
	color: var(--muted);
	margin-bottom: 0.75rem;
}

.drive__card--dark .drive__label {
	color: rgb(244 241 234 / 55%);
}

.drive__p {
	margin-bottom: 1.25rem;
	font-size: 1rem;
}

.drive__card--dark .drive__p {
	color: rgb(244 241 234 / 78%);
}

.drive__card--dark .linkarrow {
	color: var(--paper);
	border-bottom-color: rgb(244 241 234 / 55%);
}

@media (min-width: 48rem) {
	.drive__pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.drive__pair > * {
		min-width: 0;
	}
}

@media (min-width: 64rem) {
	.drive__grid {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		align-items: center;
	}

	.drive__grid > * {
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   What we buy. A mosaic with an inverted lead tile rather than an even grid.
   -------------------------------------------------------------------------- */

.mosaic__head {
	max-width: 40rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.mosaic__grid {
	display: grid;
	gap: 1rem;
}

/* The tile is the photograph and nothing else: no scrim, no copy over it. */
.mosaic__lead {
	overflow: hidden;
	border-radius: 1.25rem;
	background: var(--paper-lift);
	min-height: 14rem;
}

.mosaic__leadimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}


.mosaic__tile {
	padding: clamp(1.375rem, 2.5vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
}

.mosaic__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1rem;
	border-radius: 0.875rem;
	background: var(--paper-lift);
	border: 1px solid var(--rule);
	color: var(--oxblood);
}

.mosaic__tileh {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	margin-bottom: 0.375rem;
}

.mosaic__tilep {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--muted);
}

@media (min-width: 40rem) {
	.mosaic__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mosaic__grid > * {
		min-width: 0;
	}
}

@media (min-width: 64rem) {
	.mosaic__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* The statement takes the space of two tiles and sets the row height. */
	.mosaic__lead {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* The objections, as a ruled list against a heading. */
.objections {
	background: var(--paper-lift);
}

.objections__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

.objections__h {
	max-width: 14ch;
}

.objections__lede {
	margin-top: 1.25rem;
}

.objections__row {
	padding-block: clamp(1.125rem, 2vw, 1.5rem);
	border-top: 1px solid var(--rule);
}

.objections__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.objections__q {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	color: var(--oxblood);
	margin-bottom: 0.375rem;
}

.objections__a {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--muted);
}

@media (min-width: 64rem) {
	.objections__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: start;
	}

	.objections__grid > * {
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   Reviews page. A dark band of themes, then the carousel of quotations.
   -------------------------------------------------------------------------- */

.revband {
	background: var(--ink);
	color: var(--paper);
	border-top: 0;
}

.revband__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

.revband__eyebrow {
	color: var(--paper);
}

.revband__h {
	max-width: 16ch;
	color: var(--paper);
}

.revband__p {
	margin-top: 1.25rem;
	font-size: 1rem;
	line-height: 1.65;
	color: rgb(244 241 234 / 72%);
}

.revband__media {
	margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
	border-radius: 1.25rem;
	overflow: hidden;
}

.revband__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.revband__themes {
	display: grid;
	gap: 0.875rem;
	align-content: start;
}

/* Translucent rather than a solid fill, so the cards read as panels on the
   dark rather than as a second background colour. */
.revband__theme {
	display: flex;
	gap: 1rem;
	padding: clamp(1.125rem, 2vw, 1.375rem);
	background: rgb(244 241 234 / 5%);
	border: 1px solid rgb(244 241 234 / 12%);
	border-radius: 1rem;
}

.revband__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: rgb(244 241 234 / 8%);
	border: 1px solid rgb(244 241 234 / 14%);
	color: var(--paper);
}

.revband__themebody {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
}

.revband__themeh {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -0.01em;
}

.revband__themep {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgb(244 241 234 / 68%);
}

@media (min-width: 64rem) {
	.revband__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: 4rem;
		align-items: start;
	}

	.revband__grid > * {
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   Reviews page. A carousel of quotations inside one panel.
   -------------------------------------------------------------------------- */

.rvw__head {
	max-width: 40rem;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.rvw__panel {
	position: relative;
	padding: clamp(1rem, 2.5vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 1.5rem;
	box-shadow: 0 18px 40px rgb(26 22 20 / 6%);
}

/* Native scroll snapping, so it swipes and drags with no pointer handling.
   The arrows only nudge scrollLeft. */
.rvw__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 1rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.rvw__track::-webkit-scrollbar {
	display: none;
}

.rvw__track:focus-visible {
	outline: 2px solid var(--oxblood);
	outline-offset: 4px;
}

.rvw__card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: clamp(1.125rem, 2vw, 1.375rem);
	background: var(--paper-lift);
	border: 1px solid var(--rule);
	border-radius: 1rem;
}

.rvw__who {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.rvw__avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--oxblood);
	color: var(--paper);
	font-family: var(--display);
	font-weight: 600;
	font-size: 1rem;
}

.rvw__stars {
	display: flex;
	gap: 0.125rem;
	max-width: none;
	color: #e8a33d;
}

.rvw__avatar--img {
	object-fit: cover;
	background: var(--rule);
}

.rvw__meta {
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
	min-width: 0;
}

.rvw__name {
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: -0.005em;
}

.rvw__source {
	font-size: 0.75rem;
	color: var(--muted);
}

/* Reviews vary from four words to a paragraph, so the longer ones scroll
   inside their own card rather than setting the height of every card. */
.rvw__quote {
	margin: 0;
	max-height: 9.5rem;
	overflow-y: auto;
	scrollbar-width: thin;
}

.rvw__quote p {
	max-width: none;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted);
}

.rvw__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--rule);
	color: var(--ink);
	box-shadow: 0 6px 16px rgb(26 22 20 / 10%);
	transition: background-color 0.16s linear, color 0.16s linear;
}

.rvw__arrow:hover {
	background: var(--oxblood);
	border-color: var(--oxblood);
	color: var(--paper);
}

.rvw__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.rvw__arrow[disabled]:hover {
	background: #fff;
	border-color: var(--rule);
	color: var(--ink);
}

.rvw__arrow--prev {
	left: -0.75rem;
}

.rvw__arrow--next {
	right: -0.75rem;
}


@media (min-width: 40rem) {
	.rvw__track {
		grid-auto-columns: calc((100% - 1rem) / 2);
	}
}

@media (min-width: 64rem) {
	.rvw__track {
		grid-auto-columns: calc((100% - 2rem) / 3);
	}

	.rvw__arrow--prev {
		left: -1.25rem;
	}

	.rvw__arrow--next {
		right: -1.25rem;
	}
}

/* --------------------------------------------------------------------------
   Thank you. A receipt, not a landing page.
   -------------------------------------------------------------------------- */

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

/* Dark, so the white logo reads and the page is bookended by the hero. */
.foot {
	background: var(--ink);
	color: var(--paper);
	border-top: 0;
	padding-top: clamp(3rem, 6vw, 4.5rem);
	/*
	 * Was 6rem, which was clearance for the sticky bar that used to sit
	 * over the bottom of the viewport on mobile. That bar is gone, so the
	 * space under the copyright was doing nothing.
	 */
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.foot__blurb,
.foot__h,
.foot__legal {
	color: rgb(244 241 234 / 60%);
}

.foot__col a {
	color: var(--paper);
}

.foot__col a:hover {
	border-bottom-color: var(--paper);
}

.foot__legal {
	border-top-color: rgb(244 241 234 / 18%);
}

.foot__legal a {
	color: rgb(244 241 234 / 80%);
	border-bottom-color: rgb(244 241 234 / 35%);
}

.foot .swr-todo {
	background: rgb(244 241 234 / 12%);
	border-color: rgb(244 241 234 / 45%);
	color: var(--paper);
}

.foot__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 48rem) {
	.foot__inner {
		/* Brand column, then four link columns. */
		grid-template-columns: 1.5fr repeat(4, 1fr);
		gap: 2rem;
	}
}

.foot__logo {
	width: auto;
	height: 3.5rem;
	margin-bottom: 1.25rem;
}

.foot__blurb {
	font-size: 0.875rem;
	color: var(--muted);
	max-width: 26em;
}

.foot__h {
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1rem;
}

.foot__col li {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
}

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

.foot__col a:hover {
	border-bottom-color: var(--oxblood);
}

.foot__legal {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 2rem var(--gutter) 0;
	margin-top: 3rem;
	border-top: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	font-size: 0.8125rem;
	color: var(--muted);
}

.foot__legal-links {
	display: flex;
	gap: 1.25rem;
}

/* Copyright sits last on a phone. Reversing the column keeps the source
   order, where the copyright belongs first. */
@media (max-width: 47.9375rem) {

	/* Stacked into one column, so everything centres on that column rather
	   than hugging the left edge of a grid that is no longer there. */
	.foot__col,
	.foot__legal {
		text-align: center;
	}

	/* Both carry their own width, so the box has to centre as well as the
	   text inside it. */
	.foot__logo,
	.foot__blurb {
		margin-inline: auto;
	}

	.foot__legal {
		flex-direction: column-reverse;
		align-items: center;
		justify-content: center;
		gap: 1rem;
	}

	.foot__legal-links {
		justify-content: center;
	}
}

.foot__legal a {
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
}


/* --------------------------------------------------------------------------
   Reveals
   -------------------------------------------------------------------------- */

/* Gated on .js so content is never hidden when JavaScript does not run.
   Without the gate a script failure would blank most of the page. */
.js [data-reveal],
.js [data-reveal-line] {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-reveal-line] {
	transform: translateY(100%);
}

.js [data-reveal].is-in,
.js [data-reveal-line].is-in {
	opacity: 1;
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Reduced motion. Nothing here is load bearing.
   -------------------------------------------------------------------------- */

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

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

	/* Must match the .js prefix used above, or these lose on specificity
	   and the override silently does nothing. */
	.js [data-reveal],
	.js [data-reveal-line],
	[data-reveal],
	[data-reveal-line] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Phones. Every heading and every description centres.

   Last block in the file on purpose: these are single class selectors and
   have to beat the section rules they override without leaning on
   !important or inflated specificity.
   -------------------------------------------------------------------------- */

@media (max-width: 47.9375rem) {

	/*
	 * Every multi column section in the theme collapses to one column at this
	 * width. Once the columns are gone, so is the left edge the copy was
	 * aligned to, and text hard against it under a centred heading reads as
	 * though it failed to fill. So the whole page body centres, and the few
	 * places where that would break something rather than tidy it are put
	 * back at the end of this block.
	 *
	 * The named rules that follow are still here because they also move
	 * measures and flex axes, which this cannot do on its own.
	 */
	.main {
		text-align: center;
	}

	/* Headings, eyebrows and the descriptions that sit under them. */
	.hero__copy,
	.hero__h,
	.hero__eyebrow,
	.about__copy,
	.about__eyebrow,
	.about__h,
	.about__body,
	.about__credit,
	.how__lede,
	.buy__copy,
	.buy__lede,
	.diff__intro,
	.diff__lede,
	.gallery__head,
	.gallery__intro,
	.where__intro,
	.where__lede,
	.reviews__head,
	.reviews__lede,
	.faq__copy,
	.process__text,
	.timeline__item,
	.section > .section__inner > .display-l,
	.section > .section__inner > .display-xl {
		text-align: center;
	}

	/* Centred text still reads as left aligned if the box itself is off
	   to one side, so the measure has to be centred too. */
	.hero__h,
	.about__body,
	.how__lede,
	.buy__lede,
	.diff__lede,
	.gallery__intro,
	.where__lede,
	.reviews__lede,
	.process__text p,
	.timeline__text,
	.faq__copy .display-l {
		margin-inline: auto;
	}

	/*
	 * These two are flex rows, so align-items only ever moved them on the
	 * cross axis. Centring them across the page needs justify-content.
	 */
	.about__tags,
	.about__ctas {
		align-items: center;
		justify-content: center;
	}

	/*
	 * The steps run icon beside text on desktop. At this width that leaves
	 * the copy in a column barely wider than the words, so the icon goes
	 * above it and the whole step centres.
	 */
	.process__step {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 0.875rem;
	}

	/* The accordion keeps its question left and its mark right, so only
	   the section heading above it moves. */
	.faq__list,
	.faq__btn,
	.faq__panel p {
		text-align: left;
	}

	/* The inset photograph is a desktop flourish. At this width it covers a
	   third of the portrait it is meant to sit beside, so it goes, and the
	   room reserved for it goes with it. */
	.getknow__inset,
	.getknow__dots {
		display: none;
	}

	.getknow__media {
		padding-right: 0;
	}

	.getknow__main {
		max-width: none;
	}

	/* Too narrow for a label beside its answer, so they stack and both
	   centre. Left on one and centred on the other reads as a mistake. */
	.buy__promise {
		flex-direction: column;
		align-items: center;
		gap: 0.3125rem;
		text-align: center;
	}

	.buy__promise dt,
	.buy__promise dd {
		flex: 0 0 auto;
	}

	/*
	 * Blocks that stay left, and why.
	 *
	 * Forms: a centred label above a full width field, and centred text
	 * inside the field itself, is a different thing from tidy. Both of these
	 * are the client's plugins besides, and are not restyled.
	 */
	.wpcf7,
	.wpcf7 label,
	.offer__panel,
	.main input,
	.main select,
	.main textarea {
		text-align: left;
	}

	/*
	 * Icon tiles. Both are boxes with a fixed width, so text alignment never
	 * reached them and they stayed against the left edge of a card whose
	 * heading and copy had already centred.
	 *
	 * The tile on What We Buy sits above its text, so auto margins are all
	 * it needs.
	 */
	.mosaic__icon {
		margin-inline: auto;
	}

	/* The review theme card runs its icon beside the text. At this width the
	   copy is left in a column barely wider than the words, so the icon goes
	   above it and the card centres, the same as the steps on the home page. */
	.revband__theme {
		flex-direction: column;
		align-items: center;
		gap: 0.875rem;
	}

	/*
	 * The eyebrow is a flex row, a short rule then the label, so it starts
	 * at the left whatever the text alignment says. Only the --centred
	 * variant set the main axis; at this width they all want it.
	 */
	.eyebrow {
		justify-content: center;
	}

	/*
	 * The same problem wherever a row of capsules, a label with a pin, or a
	 * line of meta is built as a flex row: the text alignment around it has
	 * no effect and they stay hard left under centred copy.
	 *
	 *   fork__marques    the marque capsules on Reineke Car Sales
	 *   rcswhere__town   the town label above each store
	 *   hood__list       areas we buy from, on the location pages
	 *   hood__place      each pin and place name inside it
	 */
	.fork__marques,
	.rcswhere__town,
	.hood__list,
	.hood__place {
		justify-content: center;
	}

	/* The date and category above each blog card title. At this width the
	   card is already down to a title and two lines of excerpt, and the meta
	   line was the first thing read on the way to either.
	   Qualified with .jcard, because the rule that sets this to flex is
	   further down the file and a media query adds no specificity of its
	   own, so a bare class here would lose to it. */
	.jcard .jcard__meta {
		display: none;
	}

	/*
	 * The location facts sit two to a row at this width, so a third box
	 * lands on its own line beside an empty half and reads as a gap rather
	 * than a set. From the third on they are dropped, which keeps the row
	 * whole whatever the data supplies.
	 */
	.hood__fact:nth-child(n+3) {
		display: none;
	}

	/* The one control on the contact form that was not already the width of
	   the column it sits in. Every field above it is full width, so the
	   button that submits them reads as part of the same stack. */
	.cform .btn {
		width: 100%;
	}

	/*
	 * The phone numbers are pinned with align-self, so that the underline
	 * under them is the width of the number rather than the width of the
	 * card. That has to stay, so they move across rather than stretch.
	 */
	.contact__tel,
	.hood__tel {
		align-self: center;
	}

	/*
	 * Ticked points stay left. Each is a flex row of an icon and a line of
	 * text, and centring only shows once a line wraps, at which point the
	 * second line sits under the middle of the first and the list stops
	 * looking like a list. The heading above them still centres.
	 */
	.walk__item,
	.getknow__fact {
		text-align: left;
	}

	/* The history keeps its two columns at this width, the year disc beside
	   the entry, so the entry is not the full width of anything and centring
	   it only bounced each line against the disc. */
	.storyline__copy {
		text-align: left;
	}

	/* The comparison rows on Why sell to Reineke are the exception: they are
	   short verdicts under a centred label rather than a list to read down,
	   so they centre with it. The tick is a flex item, so the row needs its
	   main axis set as well as the text alignment it inherits. */
	.whycmp__us {
		justify-content: center;
	}

	/*
	 * Buttons that text-align cannot reach.
	 *
	 * The location card is a flex column, so its link is a flex item and
	 * stretches the full width of the card. The box therefore looked
	 * centred while the label inside it sat hard left. Shrinking it back to
	 * its content is what actually centres it.
	 */
	.where__link {
		align-self: center;
	}

	/* A flex row starts its items at the left whatever the text alignment
	   says, so this one needs the main axis set. */
	.getknow__foot {
		justify-content: center;
	}

	/* An upright bar down the left of centred text reads as a mistake, so
	   the accent moves above the note it marks. */
	.contact__aside-note {
		padding-left: 0;
		padding-top: 0.875rem;
		border-left: 0;
		border-top: 2px solid var(--oxblood);
	}

	/*
	 * Running prose. A heading or a standfirst centres well because it is
	 * two or three lines. An article or a policy is dozens, and a centred
	 * ragged left edge makes the eye hunt for the start of every one of
	 * them. The headings above these still centre.
	 */
	.post__prose,
	.legal__prose,
	.legal__toclist {
		text-align: left;
	}

	/* The accordions keep their question left and their mark right, so only
	   the heading above the list moves. Same reasoning as .faq__list. */
	.offer__qbtn,
	.offer__qpanel p {
		text-align: left;
	}
}


/* ==========================================================================
   Get Offer. A copy of the current live home page.

   Palette, typefaces and metrics were read off sellwithreineke.com with the
   DevTools protocol, not guessed from a screenshot:

     headings   600, text-transform: capitalize
     body       400, 16/26
     buttons    500, 17px, 0.5px tracking, capitalize, 50px radius
     accent     #ec1a4f      container 1140px

   The two typefaces the source uses, Prompt and Noto Sans, were replaced
   at the client's request with the site's own Saira and Inter. Everything
   else about the copy still comes from the measurements above.

   This is the one page on the site that does not use the oxblood palette,
   because the brief is an exact copy. Everything is namespaced .offer so
   none of it can reach the pages that do.
   ========================================================================== */

.offer {
	--pink: #ec1a4f;
	--pink-deep: #c9123f;
	--pink-pale: #f9c3d1;
	--offer-ink: #111;
	--offer-body: #333;
	--offer-grey: #f2f2f2;
	/* The site container, so every section lines up with the logo on the
	   left and the button on the right. */
	--wrap: var(--maxw);
	/* The site's own faces, not the ones the source page uses. */
	--disp: var(--display);
	--text: var(--sans);

	background: #fff;
	color: var(--offer-body);
	font-family: var(--text);
	font-size: 1rem;
	line-height: 1.625;
	overflow-x: clip;
}

/* The theme rules this page has to opt out of: hairline section borders,
   the sitewide vertical rhythm, and the 38em cap on every paragraph. */
.offer .section {
	border-top: 0;
	padding-block: clamp(3.25rem, 6vw, 5.625rem);
}

.offer p,
.offer li {
	max-width: none;
}

.offer__wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Headings. Capitalize is what gives the source its Title Case: the copy
   itself is sentence case underneath. */
.offer__h {
	font-family: var(--disp);
	font-weight: 600;
	font-size: clamp(2rem, 4.2vw, 3.75rem);
	line-height: 1.167;
	letter-spacing: normal;
	text-transform: capitalize;
	color: var(--offer-ink);
	text-wrap: balance;
}

.offer__lede {
	margin-top: 1.25rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--offer-body);
}

/* The short accent rule that sits under most headings on the source. */
.offer__rule {
	display: block;
	width: 5.25rem;
	height: 3px;
	margin: 1.125rem 0 1.5rem;
	background: var(--pink);
}

.offer__rule--mid {
	margin-inline: auto;
}

.offer__rule--stat {
	width: 2.5rem;
	margin: 0.5rem auto 0.625rem;
}

.offer__btn {
	display: inline-block;
	font-family: var(--disp);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.588;
	letter-spacing: 0.5px;
	text-transform: capitalize;
	text-decoration: none;
	color: #fff;
	background: var(--pink);
	border: 0;
	border-radius: 50px;
	padding: 0.625rem 1.75rem;
	transition: background-color 0.16s linear;
}

.offer__btn:hover,
.offer__btn:focus-visible {
	background: var(--pink-deep);
	color: #fff;
}

.offer__cta {
	margin-top: 1.75rem;
}

.offer__cta--mid {
	text-align: center;
}

.offer__head {
	text-align: center;
	margin-bottom: 2.75rem;
}

.offer__head .offer__lede {
	margin-inline: auto;
	max-width: 60rem;
}

/*
 * The masthead grid is auto / 1fr / auto for brand, nav and button. With
 * the nav gone this page had an empty third column, and the grid gap before
 * it held the button 16px inside the container, so it no longer lined up
 * with the sections. Two columns, and it sits flush.
 */
.page-get-offer .masthead__inner {
	grid-template-columns: auto 1fr;
}

/* On this page only, the masthead button takes the source's crimson so the
   header over the hero matches the reference. */
.page-get-offer .masthead__cta {
	background: var(--pink, #ec1a4f);
	border-color: #ec1a4f;
}

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

.offer__hero {
	position: relative;
	isolation: isolate;
	padding-top: clamp(7rem, 12vw, 9.5rem) !important;
	padding-bottom: clamp(3.5rem, 7vw, 5.5rem) !important;
	color: #fff;
}

.offer__herobg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: #1b1b1b;
}

.offer__herobg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
}

.offer__herobg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 46%) 55%, rgb(0 0 0 / 34%) 100%),
		rgb(0 0 0 / 22%);
}

.offer__heroh {
	color: #fff;
}

.offer__herosub {
	margin-top: 0.875rem;
	font-family: var(--disp);
	font-weight: 600;
	font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
	text-transform: capitalize;
	color: var(--pink);
}

/*
 * Qualified with p, because .offer p carries max-width: none to beat the
 * sitewide 38em cap on paragraphs, and that reset was quietly outranking
 * this measure and letting the standfirst run the full column.
 *
 * Sized to break across three lines, as the source does.
 */
p.offer__herolede {
	margin-top: 1rem;
	max-width: 30rem;
	font-size: 1rem;
	line-height: 1.625;
	text-transform: capitalize;
	color: #fff;
}

/*
 * The form is the client's plugin and is not restyled. The one thing set
 * here is the accent it already publishes as a custom property, so the
 * copied page matches the source instead of running oxblood buttons.
 */
.offer__panel [class*="cof-"] {
	--cof-brand-color: #ec1a4f;
	--cof-brand-rgb: 236, 26, 79;
}

.offer__panel {
	margin-top: 2.5rem;
}

@media (min-width: 62rem) {
	.offer__heroinner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 28rem;
		gap: 0 3.5rem;
		align-items: center;
	}

	.offer__panel {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   02 Sixty five years. Black, closed off by the mountains divider.
   -------------------------------------------------------------------------- */

.offer__years {
	position: relative;
	background: #000;
	color: #fff;
	padding-bottom: clamp(5rem, 9vw, 8rem) !important;
}

.offer__yearsh {
	color: #fff;
	letter-spacing: 0.06em;
	font-size: clamp(1.875rem, 3.4vw, 3rem);
}

.offer__yearsp {
	font-size: 1rem;
	line-height: 1.625;
	color: #fff;
}

@media (min-width: 56rem) {
	.offer__yearsgrid {
		display: grid;
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		gap: 3.5rem;
		align-items: center;
	}
}

.offer__divider {
	position: absolute;
	inset: auto 0 -1px;
	overflow: hidden;
	line-height: 0;
	direction: ltr;
	pointer-events: none;
	/*
	 * The rotation lives on the container, not on the svg. Elementor turns
	 * a bottom divider through 180 here; the svg itself only carries the
	 * centring translate. Reading the svg alone gave "no rotation", which
	 * is how this ended up upside down.
	 */
	transform: rotate(180deg);
}

/* Every value here was read off the live page, not chosen. */
.offer__divider svg {
	display: block;
	position: relative;
	left: 50%;
	width: calc(100% + 1.3px);
	height: 36px;
	fill: #fff;
	transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   03 Transparency
   -------------------------------------------------------------------------- */

.offer__transgrid {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 56rem) {
	.offer__transgrid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3.75rem;
	}
}

.offer__collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.875rem;
}

.offer__colstack {
	display: grid;
	gap: 0.875rem;
}

/* The portrait in the right hand stack carries more height than the plate
   beneath it, which is how the source arranges these five. */
.offer__colstack--tall {
	grid-template-rows: 1.42fr 1fr;
}

.offer__collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1.75rem;
	background: var(--offer-grey);
}

.offer__transp {
	font-size: 1rem;
	line-height: 1.625;
	color: #000;
}

.offer__transp strong {
	font-weight: 700;
}

.offer__transstats {
	display: flex;
	flex-wrap: wrap;
	gap: 2.25rem;
	margin-top: 1.75rem;
	list-style: none;
}

.offer__transstat {
	padding-left: 1rem;
	border-left: 3px solid var(--pink);
}

.offer__transfig {
	display: block;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--offer-ink);
}

.offer__translabel {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--offer-ink);
}

/* --------------------------------------------------------------------------
   04 Marques
   -------------------------------------------------------------------------- */

.offer__brands {
	padding-block: clamp(2rem, 3.5vw, 3rem) !important;
}

.offer__brandrow {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(100% / 3);
	gap: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	align-items: center;
}

.offer__brandrow::-webkit-scrollbar {
	display: none;
}

@media (min-width: 40rem) {
	.offer__brandrow {
		grid-auto-columns: calc(100% / 5);
	}
}

@media (min-width: 56rem) {
	.offer__brandrow {
		grid-auto-columns: calc(100% / 7);
	}
}

.offer__brand {
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
}

/* Full colour, as on the source. */
.offer__brand img {
	display: block;
	width: 100%;
	max-width: 6.5rem;
	height: auto;
}

.offer__dots {
	display: flex;
	justify-content: center;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

.offer .marques__dot {
	width: 0.4375rem;
	height: 0.4375rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #c9c9c9;
	cursor: pointer;
	transition: background-color 0.16s linear;
}

.offer .marques__dot[aria-current="true"] {
	background: #222;
}

/* --------------------------------------------------------------------------
   05 Skip the private sale stress
   -------------------------------------------------------------------------- */

.offer__stress {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	padding-block: clamp(3.5rem, 6.5vw, 5.5rem) !important;
}

.offer__stressbg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #1b1b1b;
}

.offer__stressbg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

.offer__stressbg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 72%);
}

.offer__stressgrid {
	display: grid;
	gap: 1.75rem;
}

.offer__stressh {
	color: #fff;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	max-width: 12ch;
}

.offer__stressp {
	font-size: 1rem;
	line-height: 1.625;
	color: #fff;
}

.offer__stresscta {
	margin-top: 0;
}

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

	/* The upright accent rule between the heading and the copy. */
	.offer__stressgrid::before {
		content: "";
		grid-column: 2;
		grid-row: 1;
		align-self: stretch;
		min-height: 5rem;
		width: 3px;
		background: var(--pink);
	}

	.offer__stressh {
		grid-column: 1;
	}

	.offer__stressp {
		grid-column: 3;
	}

	.offer__stresscta {
		grid-column: 4;
	}
}

/* --------------------------------------------------------------------------
   06 Figures
   -------------------------------------------------------------------------- */

.offer__stats {
	background: #5a5a5a;
	padding-block: clamp(2.25rem, 4vw, 3.25rem) !important;
}

.offer__statgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem 1rem;
	text-align: center;
}

@media (min-width: 48rem) {
	.offer__statgrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.offer__statfig {
	margin: 0;
	font-family: var(--disp);
	font-weight: 600;
	font-size: clamp(2rem, 3.6vw, 2.875rem);
	line-height: 1.1;
	color: #fff;
}

.offer__statlabel {
	font-family: var(--disp);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

/* --------------------------------------------------------------------------
   07 Our buying process
   -------------------------------------------------------------------------- */

.offer__processgrid {
	display: grid;
	gap: 1.5rem;
	list-style: none;
}

@media (min-width: 56rem) {
	.offer__processgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.offer__step {
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--pink);
	border-radius: 1rem;
}

.offer__steptop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.offer__stepnum {
	font-family: var(--disp);
	font-weight: 600;
	font-size: 2.875rem;
	line-height: 1;
	color: var(--pink-pale);
}

.offer__steptile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.75rem;
	background: var(--pink);
	color: #fff;
}

.offer__steph {
	margin-top: 1.75rem;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.35;
	text-transform: capitalize;
	color: var(--offer-ink);
}

.offer__stepp {
	margin-top: 0.75rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--offer-body);
}

/* --------------------------------------------------------------------------
   08 A faster, fairer way to sell
   -------------------------------------------------------------------------- */

.offer__why {
	background: var(--offer-grey);
}

.offer__whygrid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 62rem) {
	.offer__whygrid {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		gap: 4rem;
		align-items: center;
	}
}

.offer__whyp {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--offer-body);
	text-align: justify;
}

.offer__reasons {
	display: grid;
	gap: 1.25rem;
	list-style: none;
}

@media (min-width: 40rem) {
	.offer__reasons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto;
		grid-auto-flow: column;
		align-items: start;
		padding-bottom: 3rem;
	}

	/* The right hand pair sits higher than the left, as on the source. */
	.offer__reason:nth-child(n+3) {
		transform: translateY(-3rem);
	}
}

.offer__reason {
	border-radius: 1.25rem;
	background: #fff;
	overflow: hidden;
}

.offer__reason--fill {
	background: var(--pink);
}

/* The white header block sits proud of the body on the filled cards, which
   is what gives that pair their two tone look. */
.offer__reasonhead {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border-radius: 1.25rem;
	box-shadow: 0 6px 18px rgb(0 0 0 / 8%);
	position: relative;
	z-index: 1;
}

.offer__reasonicon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: var(--pink);
	color: #fff;
}

.offer__reasonh {
	font-family: var(--disp);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	text-transform: capitalize;
	color: var(--offer-ink);
}

.offer__reasonp {
	display: block;
	padding: 1.125rem 1.25rem 1.5rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--offer-body);
}

.offer__reason--fill .offer__reasonp {
	color: #fff;
}

/* --------------------------------------------------------------------------
   09 Reviews. The cards overhang the foot of the photograph.
   -------------------------------------------------------------------------- */

.offer__reviews {
	--tail: clamp(3.25rem, 6vw, 5.625rem);

	position: relative;
	isolation: isolate;
	/* Clips the white panel below to the section's exact edge. */
	overflow: hidden;
	padding: 0 0 var(--tail) !important;
	color: #fff;
	background: #fff;
}

.offer__reviewsband {
	position: relative;
	z-index: 2;
	padding-block: clamp(3.25rem, 6vw, 5.625rem) clamp(2.5rem, 4vw, 3.5rem);
}

/* The photograph covers the whole section. Where it stops is decided by
   the white panel below, not by the size of this element. */
.offer__reviewsbg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #111;
}

.offer__reviewsbg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.offer__reviewsbg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 62%);
}

.offer__reviewsh {
	color: #fff;
	max-width: 21ch;
	margin-inline: auto;
	text-wrap: wrap;
}

.offer__reviewsp {
	color: #fff;
}

/*
 * The cards straddle the foot of the photograph. The white panel starts at
 * 40% of this element's height, so the line always crosses the cards
 * whatever height the widget renders at, and the reviewer names below each
 * card land on white rather than disappearing into the photograph.
 */
.offer__widget {
	position: relative;
	z-index: 1;
}

.offer__widget::before {
	content: "";
	position: absolute;
	top: 40%;
	/* Deliberately overlong. The section clips it, so there is no sum
	   here that can come up a pixel short. */
	height: 100vh;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: #fff;
	z-index: -1;
}

/* --------------------------------------------------------------------------
   10 Showcase
   -------------------------------------------------------------------------- */

/* Paints its own white, so nothing from the section above can show as a
   line at the join. */
.offer__show {
	position: relative;
	z-index: 1;
	background: #fff;
}

/*
 * Multi column rather than grid: it fills top to bottom, column by column,
 * and lets every photograph keep its own height instead of cropping the
 * portraits square. That is the arrangement on the source.
 */
.offer__showgrid {
	columns: 2;
	column-gap: 0.75rem;
	list-style: none;
}

@media (min-width: 40rem) {
	.offer__showgrid {
		columns: 3;
	}
}

@media (min-width: 56rem) {
	.offer__showgrid {
		columns: 4;
	}
}

.offer__showitem {
	break-inside: avoid;
	margin-bottom: 0.75rem;
}

.offer__showitem img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.875rem;
}

/* --------------------------------------------------------------------------
   11 Questions
   -------------------------------------------------------------------------- */

.offer__faq {
	background: var(--offer-grey);
}

.offer__faqgrid {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 62rem) {
	.offer__faqgrid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: 4rem;
	}
}

.offer__faqp {
	margin-top: 1.5rem;
	padding-left: 1rem;
	border-left: 3px solid var(--pink);
	font-size: 1rem;
	line-height: 1.625;
	color: var(--offer-body);
}

.offer__faqlist {
	display: block;
}

.offer__qa {
	border-bottom: 1px solid #d5d5d5;
	background: none;
	border-radius: 0;
	padding: 0;
}

.offer__q {
	margin: 0;
}

.offer__qbtn {
	display: block;
	width: 100%;
	padding: 1.875rem 1.25rem;
	background: none;
	border: 0;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.4;
	text-align: left;
	color: var(--offer-ink);
	cursor: pointer;
}

.offer__qpanel {
	padding: 1.25rem;
}

.offer__qpanel p {
	margin-bottom: 1.6rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--offer-body);
}

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */

@media (max-width: 61.9375rem) {
	.offer__heroh,
	.offer__herolede,
	.offer__stressh {
		max-width: none;
	}
}

@media (max-width: 47.9375rem) {
	.offer__yearsh,
	.offer__transh,
	.offer__whyh,
	.offer__faqh,
	.offer__stressh {
		max-width: none;
	}

	/*
	 * Centred copy on phones. Every one of these sections is two columns on
	 * the source, with the copy set against the left one. Stacked into a
	 * single column that relationship is gone and left aligned text under a
	 * heading, with a button below it, reads as though it failed to fill.
	 *
	 * The form panel is deliberately not in this list: it is the client's
	 * plugin and is left exactly as it ships.
	 */
	.offer__herocopy,
	.offer__yearsgrid,
	.offer__transcopy,
	.offer__stressgrid,
	.offer__whycopy,
	.offer__faqhead {
		text-align: center;
	}

	/* Justified cannot centre, and at this measure it was opening rivers
	   between the words anyway. */
	.offer__whyp {
		text-align: center;
	}

	/* These carry a measure from the two column layout. Without auto margins
	   the block stays hard left while its lines centre inside it. */
	p.offer__herolede,
	.offer__stressh {
		margin-inline: auto;
	}

	/* The accent rules start at the left edge of the column. */
	.offer__rule {
		margin-inline: auto;
	}

	/* An upright bar down the left of centred text reads as a mistake, so
	   the accent moves above the block it marks and keeps its width. */
	.offer__faqp,
	.offer__transstat {
		padding-left: 0;
		padding-top: 0.875rem;
		border-left: 0;
		border-top: 3px solid var(--pink);
	}

	.offer__transstats {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Landing page chrome

   Get Offer runs without navigation and with a copyright only footer, so
   the masthead has nothing in its middle column and the footer has nothing
   above its legal line. Both need their spacing rebuilt rather than just
   emptied.
   -------------------------------------------------------------------------- */

.foot--bare {
	padding-top: 0;
	padding-bottom: 0;
}

.foot--bare .foot__legal {
	margin-top: 0;
	padding-block: 1.75rem;
	border-top: 0;
	justify-content: center;
	text-align: center;
}

/* Without the nav the grid keeps a 1fr middle column, which is what holds
   the logo left and the button right. Nothing else to do. */


/* ==========================================================================
   One screen pages: thank you, and not found.

   No masthead, no footer. Everything is centred in a single viewport height
   field with two soft shapes behind it. Both pages are dead ends on
   purpose: the only ways out are the phone and the home link.
   ========================================================================== */

/* Retired from the rest of the site, kept for the one display line here. */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

.solo-page {
	background: var(--paper);
}

.solo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: clamp(2.5rem, 7vw, 5rem) var(--gutter);
	background:
		radial-gradient(120% 90% at 78% 8%, #fdfcfa 0%, rgb(253 252 250 / 0%) 60%),
		linear-gradient(168deg, var(--paper-lift) 0%, var(--paper) 52%, #f0ebe1 100%);
	text-align: center;
}

/* The two shapes. Large, soft, and well under the type in contrast. */
.solo__blob {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.solo__blob--a {
	top: clamp(-16rem, -12vw, -8rem);
	right: clamp(-14rem, -8vw, -6rem);
	width: clamp(22rem, 42vw, 40rem);
	aspect-ratio: 1;
	background: radial-gradient(circle at 35% 35%, rgb(217 210 197 / 55%), rgb(217 210 197 / 18%) 70%);
}

.solo__blob--b {
	bottom: clamp(-15rem, -11vw, -7rem);
	left: clamp(-13rem, -9vw, -6rem);
	width: clamp(18rem, 34vw, 32rem);
	aspect-ratio: 1;
	background: radial-gradient(circle at 60% 40%, rgb(236 26 79 / 12%), rgb(236 26 79 / 3%) 70%);
}

.solo__inner {
	max-width: 46rem;
	margin-inline: auto;
}

/* Flat dark, because the supplied wordmark is white for dark backgrounds
   and would otherwise disappear into the page. */
.solo__logo {
	display: block;
	width: clamp(9rem, 16vw, 12.5rem);
	height: auto;
	margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
	filter: brightness(0);
	opacity: 0.88;
}

/* Sits alone between the wordmark and the headline. */
.solo__rule {
	display: block;
	width: 3.5rem;
	height: 2px;
	margin: 0 auto 1.5rem;
	background: var(--oxblood);
}

.solo__h {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-wrap: balance;
}

/* The second clause in a real italic serif, not a synthesised slant. */
.solo__h em {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* The status code, carried as a figure above the heading. */
.solo__code {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(4rem, 12vw, 7.5rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--oxblood);
}

/* Without the italic second clause the heading carries less weight, so it
   steps down under the figure rather than competing with it. */
.solo__h--plain {
	margin-top: 0.75rem;
	font-size: clamp(1.5rem, 3.4vw, 2.25rem);
	letter-spacing: -0.01em;
}

.solo__lede {
	max-width: 34rem;
	margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--muted);
}

.solo__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.875rem;
	margin-top: clamp(2rem, 4vw, 2.75rem);
}

.solo__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.9375rem 1.75rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.16s linear, border-color 0.16s linear, transform 0.16s var(--ease);
}

.solo__btn--solid {
	background: var(--oxblood);
	border-color: var(--oxblood);
	color: var(--paper);
	box-shadow: 0 10px 26px rgb(236 26 79 / 22%);
}

.solo__btn--solid:hover {
	background: var(--oxblood-deep);
	border-color: var(--oxblood-deep);
	color: var(--paper);
}

.solo__btn--ghost {
	background: #fff;
	border-color: var(--rule);
	color: var(--ink);
	box-shadow: 0 6px 18px rgb(26 22 20 / 6%);
}

.solo__btn--ghost:hover {
	border-color: var(--ink);
	color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
	.solo__btn:hover {
		transform: translateY(-1px);
	}
}

@media (max-width: 30rem) {
	.solo__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.solo__btn {
		justify-content: center;
	}
}


/* ==========================================================================
   Blog: the listing, the cards, and a single post.

   Shared by the posts page, the category archives and single posts, so all
   three read as one thing.
   ========================================================================== */

.journal__head {
	max-width: 46rem;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.journal__h {
	margin-top: 1rem;
}

.journal__lede {
	margin-top: 1.125rem;
}

.journal__grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 40rem) {
	.journal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.journal__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   A card
   -------------------------------------------------------------------------- */

.jcard {
	background: var(--paper-lift);
	border: 1px solid var(--rule);
	border-radius: 1rem;
	overflow: hidden;
	transition: border-color 0.16s linear, transform 0.2s var(--ease);
}

.jcard:hover {
	border-color: var(--oxblood);
}

@media (prefers-reduced-motion: no-preference) {
	.jcard:hover {
		transform: translateY(-2px);
	}
}

/* The whole card is the link, so there is no small target to hunt for. */
.jcard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.jcard__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--rule);
}

.jcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stands in when a post has no featured image, so the grid keeps its
   rhythm rather than one card sitting shorter than the rest. */
.jcard__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--paper);
	color: var(--muted);
}

.jcard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.375rem 1.375rem 1.5rem;
}

.jcard__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.jcard__dot {
	color: var(--rule);
}

.jcard__cat {
	color: var(--oxblood);
}

.jcard__h {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.1875rem;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--ink);
	text-wrap: balance;
}

.jcard__excerpt {
	display: block;
	margin-top: 0.625rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--muted);
}

.jcard__more {
	display: block;
	margin-top: auto;
	padding-top: 1.125rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oxblood);
}

.jcard__more::after {
	content: " \2192";
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.journal__empty {
	max-width: 34rem;
	padding: clamp(2.5rem, 5vw, 3.5rem);
	background: var(--paper-lift);
	border: 1px solid var(--rule);
	border-radius: 1rem;
}

.journal__empty p {
	margin-top: 0.875rem;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--ink);
	transition: border-color 0.16s linear, background-color 0.16s linear, color 0.16s linear;
}

.pagination .page-numbers:hover {
	border-color: var(--oxblood);
	color: var(--oxblood);
}

.pagination .page-numbers.current {
	background: var(--oxblood);
	border-color: var(--oxblood);
	color: var(--paper);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   A single post
   -------------------------------------------------------------------------- */

.post__h {
	max-width: 22ch;
}

.post__dot {
	margin-inline: 0.375rem;
}

.post__figure {
	margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
	border-radius: 1rem;
	overflow: hidden;
}

.post__figure img {
	display: block;
	width: 100%;
	height: auto;
}

.post__prose {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ink);
}

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

.post__prose h2 {
	margin-top: 2.5rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.post__prose h3 {
	margin-top: 2rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.25;
}

.post__prose a {
	color: var(--oxblood);
	text-underline-offset: 0.2em;
}

.post__prose img {
	max-width: 100%;
	height: auto;
	border-radius: 0.75rem;
}

/* The theme strips list markers globally, which is right for navigation
   and wrong for prose somebody writes in the editor. */
.post__prose ul,
.post__prose ol {
	padding-left: 1.25rem;
	list-style: revert;
}

.post__prose li {
	list-style: revert;
}

.post__prose li + li {
	margin-top: 0.5rem;
}

.post__prose blockquote {
	margin-inline: 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--oxblood);
	font-family: var(--display);
	font-size: 1.125rem;
	line-height: 1.5;
}

.post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: clamp(2rem, 4vw, 2.75rem);
}

.post__tag {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-size: 0.8125rem;
	text-decoration: none;
	color: var(--ink);
}

.post__tag:hover {
	border-color: var(--oxblood);
	color: var(--oxblood);
}

.post__nav {
	display: grid;
	gap: 0.75rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: clamp(1.75rem, 3vw, 2.25rem);
	border-top: 1px solid var(--rule);
}

@media (min-width: 40rem) {
	.post__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.post__navlink {
	display: block;
	padding: 1.125rem 1.25rem;
	background: var(--paper-lift);
	border: 1px solid var(--rule);
	border-radius: 0.875rem;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.16s linear;
}

.post__navlink:hover {
	border-color: var(--oxblood);
}

.post__navlink--next {
	text-align: right;
}

.post__navlabel {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.post__navtitle {
	display: block;
	margin-top: 0.375rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--ink);
}

.post__back {
	margin-top: 2rem;
}

@media (max-width: 47.9375rem) {
	.post__h {
		max-width: none;
	}

	.post__navlink--next {
		text-align: left;
	}
}


/* --------------------------------------------------------------------------
   A post, split: the article at three quarters, what else to read at one.
   -------------------------------------------------------------------------- */

.post__layout {
	--split: clamp(1.75rem, 3.5vw, 2.75rem);

	display: grid;
	gap: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 64rem) {
	.post__layout {
		grid-template-columns: 3fr 1fr;
		gap: var(--split);
		align-items: stretch;
	}

	/* The rule sits on the article, which is the taller column, so it runs
	   the depth of the piece rather than stopping with the short aside. */
	.post__main {
		padding-right: var(--split);
		border-right: 1px solid var(--rule);
	}
}

/*
 * The copy runs the width of the photograph above it. Paragraphs carry a
 * 38em cap sitewide, which is why they stopped short of the image, so the
 * children opt out rather than just the wrapper.
 */
.post__figure img,
.post__prose {
	width: 100%;
}

.post__prose > *,
.post__prose li {
	max-width: none;
}

.post__meta {
	margin: 0 0 1.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.post__metacat {
	color: var(--oxblood);
	text-decoration: none;
}

.post__metacat:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   The aside
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
	/* Follows the reader down a long article. */
	.aside__inner {
		position: sticky;
		top: 6.5rem;
	}
}

.aside__h {
	margin: 0 0 1.25rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--rule);
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
}

.aside__list {
	display: grid;
	gap: 1.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aside__link {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
}

.aside__media {
	flex: 0 0 auto;
	width: 4rem;
	height: 4rem;
	overflow: hidden;
	border-radius: 0.5rem;
	background: var(--rule);
}

.aside__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aside__title {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--ink);
	transition: color 0.16s linear;
}

.aside__link:hover .aside__title {
	color: var(--oxblood);
}

.aside__date {
	display: block;
	margin-top: 0.3125rem;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.aside__all {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
}

/* ==========================================================================
   Legal pages: privacy and terms.

   Long form prose with a contents list beside it. The measure is kept
   narrow deliberately: these are documents to be read, not landing pages.
   ========================================================================== */

.legal__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 64rem) {
	.legal__grid {
		grid-template-columns: 16rem minmax(0, 1fr);
		align-items: start;
	}
}

/* Contents ---------------------------------------------------------------- */

@media (min-width: 64rem) {
	.legal__tocinner {
		position: sticky;
		top: 6.5rem;
	}
}

.legal__toch {
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--rule);
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
}

.legal__toclist {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.legal__toclist li {
	counter-increment: toc;
}

.legal__toclist a {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.35;
	text-decoration: none;
	color: var(--muted);
	transition: color 0.16s linear;
}

.legal__toclist a::before {
	content: counter(toc) ". ";
	color: var(--rule);
}

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

/* The document -------------------------------------------------------------- */

.legal__main {
	max-width: 44rem;
}

.legal__updated {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.legal__lede {
	margin-top: 1rem;
	padding-bottom: clamp(1.75rem, 3vw, 2.25rem);
	border-bottom: 1px solid var(--rule);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink);
}

.legal__section {
	/* Clears the sticky masthead when a contents link jumps here. */
	scroll-margin-top: 7rem;
	margin-top: clamp(2.25rem, 4vw, 3rem);
}

.legal__h {
	margin: 0 0 0.875rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.legal__prose {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--muted);
}

.legal__prose > * + * {
	margin-top: 1rem;
}

.legal__prose strong {
	color: var(--ink);
	font-weight: 600;
}

.legal__prose a {
	color: var(--oxblood);
	text-underline-offset: 0.2em;
}

.legal__prose ul {
	padding-left: 1.25rem;
	list-style: disc;
}

.legal__prose li {
	list-style: disc;
	max-width: none;
}

.legal__prose li + li {
	margin-top: 0.5rem;
}

/* ==========================================================================
   Reineke Car Sales: the buying side, for somebody who came here to sell.
   ========================================================================== */

/* The fork: buy or sell ---------------------------------------------------- */

.fork__head {
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* p is capped at 38em sitewide, and a class alone does not outrank a type
   selector plus class, so this is qualified. */
p.fork__lede {
	max-width: none;
}

.fork__h {
	margin-top: 1rem;
}

.fork__lede {
	margin-top: 1.125rem;
}

.fork__grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 56rem) {
	.fork__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.fork__card {
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	background: var(--paper-lift);
	border: 1px solid var(--rule);
	border-radius: 1rem;
}

/* The selling side is the one this site is for, so it carries the fill. */
.fork__card--alt {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.fork__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oxblood);
}

.fork__card--alt .fork__label {
	color: rgb(244 241 234 / 70%);
}

.fork__cardh {
	margin: 0.875rem 0 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.fork__card--alt .fork__cardh {
	color: var(--paper);
}

.fork__cardp {
	margin-top: 0.875rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--muted);
}

.fork__card--alt .fork__cardp {
	color: rgb(244 241 234 / 76%);
}

.fork__marques {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
	list-style: none;
}

.fork__marques li {
	padding: 0.3125rem 0.75rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var(--ink);
}

.fork__card--alt .fork__marques li {
	border-color: rgb(244 241 234 / 26%);
	color: var(--paper);
}

.fork__cta {
	margin-top: auto;
	padding-top: 1.75rem;
}

.fork__card--alt .fork__cta .btn--ghost {
	color: var(--paper);
}

/* History ------------------------------------------------------------------ */

.rcshist {
	background: var(--paper-lift);
	border-top: 1px solid var(--rule);
}

.rcshist__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 60rem) {
	.rcshist__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
}

.rcshist__lede {
	margin: 1.25rem 0 1.75rem;
}

.rcshist__list {
	display: grid;
	gap: 0;
	list-style: none;
}

.rcshist__item {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--rule);
}

.rcshist__item:last-child {
	border-bottom: 1px solid var(--rule);
}

.rcshist__year {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--oxblood);
}

.rcshist__text {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--muted);
}

/* Departments -------------------------------------------------------------- */

.rcsdept__head {
	max-width: 46rem;
	margin-bottom: clamp(2.25rem, 4vw, 3rem);
}

.rcsdept__lede {
	margin-top: 1.125rem;
}

.rcsdept__grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	list-style: none;
}

@media (min-width: 40rem) {
	.rcsdept__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.rcsdept__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rcsdept__card {
	padding: 1.625rem 1.5rem;
	background: var(--paper-lift);
	border: 1px solid var(--rule);
	border-radius: 1rem;
}

.rcsdept__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	border: 1px solid var(--oxblood);
	color: var(--oxblood);
}

.rcsdept__h {
	margin: 1.125rem 0 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.rcsdept__p {
	margin-top: 0.625rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--muted);
}

/* Where -------------------------------------------------------------------- */

.rcswhere {
	background: var(--paper-lift);
	border-top: 1px solid var(--rule);
}

.rcswhere__head {
	max-width: 42rem;
	margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.rcswhere__lede {
	margin-top: 1.125rem;
}

.rcswhere__grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.25rem);
	list-style: none;
}

@media (min-width: 40rem) {
	.rcswhere__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.rcswhere__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.rcswhere__card {
	display: flex;
	flex-direction: column;
	padding: 1.375rem 1.375rem 1.25rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 0.875rem;
	transition: border-color 0.16s linear;
}

.rcswhere__card:hover {
	border-color: var(--oxblood);
}

/* The town leads, because that is what somebody is scanning for. */
.rcswhere__town {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--oxblood);
}

.rcswhere__name {
	margin: 0.75rem 0 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.rcswhere__addr {
	margin-top: 0.4375rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--muted);
}

.rcswhere__call {
	margin-top: auto;
	padding-top: 1rem;
}

.rcswhere__tel {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--oxblood);
	white-space: nowrap;
}

.rcswhere__more {
	margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   A tall banner, for the one page that carries a standfirst in it.
   -------------------------------------------------------------------------- */

.pagehero--tall {
	min-height: clamp(26rem, 60vw, 40rem);
	padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

/* Sits inside .section__inner, so it only constrains the measure. The
   container keeps the site grid, which is what the logo aligns to. */
.pagehero__lead {
	max-width: 46rem;
}

.pagehero__eyebrow {
	margin-bottom: 1.25rem;
	color: rgb(244 241 234 / 76%);
}

/* Overrides the centring the other banners use. */
.pagehero__h--left {
	max-width: 16ch;
	margin-inline: 0;
	text-align: left;
}

p.pagehero__lede {
	max-width: 40rem;
	margin-top: 1.5rem;
	font-size: 1rem;
	line-height: 1.7;
	color: rgb(244 241 234 / 84%);
}

@media (max-width: 47.9375rem) {
	.pagehero__lead,
	.pagehero__h--left,
	p.pagehero__lede {
		text-align: center;
		margin-inline: auto;
		max-width: none;
	}
}

/* Dark, so the section reads as a break between the two pale ones either
   side of it rather than continuing them. The photograph sits under a heavy
   scrim: six cards of text have to stay readable over it. */
.rcsdept {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--ink);
	color: var(--paper);
	border-top: 0;
}

.rcsdept__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ink);
}

.rcsdept__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.42;
}

.rcsdept__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(26 22 20 / 62%), rgb(26 22 20 / 82%));
}

.rcsdept .display-l {
	color: var(--paper);
}

.rcsdept__lede {
	color: rgb(244 241 234 / 76%);
}

.rcsdept__card {
	background: rgb(26 22 20 / 62%);
	border-color: rgb(244 241 234 / 16%);
	backdrop-filter: blur(2px);
}

.rcsdept__icon {
	border-color: rgb(244 241 234 / 40%);
	color: var(--paper);
}

.rcsdept__h {
	color: var(--paper);
}

.rcsdept__p {
	color: rgb(244 241 234 / 72%);
}

/* ==========================================================================
   Why sell to Reineke: the reasons, the comparison, and the price of
   finding out.
   ========================================================================== */

.whyr__head {
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.whyr__h {
	margin-top: 1rem;
}

p.whyr__lede {
	max-width: none;
	margin-top: 1.125rem;
}

.whyr__grid {
	display: grid;
	gap: 0 0;
	list-style: none;
}

@media (min-width: 44rem) {
	.whyr__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 68rem) {
	.whyr__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.whyr__card {
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--rule);
}

@media (min-width: 44rem) {
	.whyr__card {
		padding: 1.75rem 1.75rem 0;
	}

	/* Second column onwards carries the upright rule. */
	.whyr__card:not(:nth-child(2n + 1)) {
		border-left: 1px solid var(--rule);
	}

	.whyr__card:nth-child(2n + 1) {
		padding-left: 0;
	}
}

@media (min-width: 68rem) {
	.whyr__card:not(:nth-child(2n + 1)) {
		border-left: 0;
	}

	.whyr__card:nth-child(2n + 1) {
		padding-left: 1.75rem;
	}

	.whyr__card:not(:nth-child(3n + 1)) {
		border-left: 1px solid var(--rule);
	}

	.whyr__card:nth-child(3n + 1) {
		padding-left: 0;
	}
}

.whyr__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	border: 1px solid var(--oxblood);
	color: var(--oxblood);
}

.whyr__cardh {
	margin: 1.125rem 0 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.whyr__cardp {
	margin-top: 0.75rem;
	padding-bottom: 1.75rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--muted);
}

/* The comparison -------------------------------------------------------- */

.whycmp {
	background: var(--paper-lift);
	border-top: 1px solid var(--rule);
}

.whycmp__head {
	max-width: 46rem;
	margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

p.whycmp__lede {
	max-width: none;
	margin-top: 1.125rem;
}

/* Three cards, one per alternative -------------------------------------- */

.whycmp__grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 52rem) {
	.whycmp__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.whycmp__card {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 1rem;
}

.whycmp__cardh {
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.whycmp__cardp {
	margin-top: 0.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--rule);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted);
}

.whycmp__rows {
	display: grid;
	gap: 1.125rem;
	margin: 1.25rem 0 0;
}

.whycmp__row + .whycmp__row {
	padding-top: 1.125rem;
	border-top: 1px solid var(--rule);
}

.whycmp__label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Ours reads first and carries the weight; the alternative sits under it,
   stated plainly rather than sneered at. */
.whycmp__us {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink);
}

.whycmp__tick {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	border-radius: 999px;
	background: var(--oxblood);
	color: var(--paper);
}

.whycmp__them {
	margin: 0.375rem 0 0;
	padding-left: 1.625rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   A post's banner.

   Shorter than the page banners: it carries a title and nothing else, so it
   is sized by its content rather than holding a fixed block of height. The
   scrim is heavier too, because a post title is longer than a page title
   and has to stay readable across a whole photograph.
   -------------------------------------------------------------------------- */

.post__hero {
	/* Content height plus the clearance the masthead needs, nothing more. */
	min-height: 0;
	padding-top: clamp(6.5rem, 10vw, 8rem);
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.post__hero .pagehero__bg::after {
	background:
		linear-gradient(to bottom, rgb(12 10 9 / 90%) 0%, rgb(12 10 9 / 74%) 45%, rgb(12 10 9 / 94%) 100%);
}

/* ==========================================================================
   Mobile navigation

   Below 1024px the nav pill becomes a panel hanging off the fixed masthead,
   opened by the hamburger. The dropdown groups stop being popovers and
   expand inline, because a popover inside a panel is a menu inside a menu.
   ========================================================================== */

.masthead__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.625rem;
	height: 2.625rem;
	margin-left: 0.625rem;
	padding: 0;
	border-radius: 999px;
	border: 1px solid rgb(244 241 234 / 22%);
	background: rgb(244 241 234 / 9%);
	color: var(--paper);
	cursor: pointer;
	transition: background-color 0.16s linear;
}

.masthead__burger:hover {
	background: rgb(244 241 234 / 18%);
}

@media (min-width: 64rem) {
	.masthead__burger {
		display: none;
	}
}

/* Three bars that become the close cross. */
.masthead__bars {
	position: relative;
	display: block;
	width: 1.0625rem;
	height: 0.6875rem;
}

.masthead__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.22s var(--ease), opacity 0.14s linear, top 0.22s var(--ease);
}

.masthead__bars span:nth-child(1) { top: 0; }
.masthead__bars span:nth-child(2) { top: 5px; }
.masthead__bars span:nth-child(3) { top: 10px; }

.masthead__burger[aria-expanded="true"] .masthead__bars span:nth-child(1) {
	top: 5px;
	transform: rotate(45deg);
}

.masthead__burger[aria-expanded="true"] .masthead__bars span:nth-child(2) {
	opacity: 0;
}

.masthead__burger[aria-expanded="true"] .masthead__bars span:nth-child(3) {
	top: 5px;
	transform: rotate(-45deg);
}

@media (max-width: 63.9375rem) {

	/* Three tracks are a desktop arrangement: the middle one exists only to
	   centre the nav pill. Once the nav lifts out as an overlay panel that
	   track has nothing left in it, and an absolutely positioned grid item is
	   still sized against its grid area rather than against the bar, which
	   pinned the panel into a narrow column in the middle. A flex row has
	   neither problem, and puts the logo and the buttons on the gutters. */
	.masthead__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
	}

	.masthead__end {
		flex: 0 0 auto;
		gap: 0.5rem;
	}

	/* The pill becomes a full width panel under the bar. Kept in the flow
	   and hidden by visibility so it can transition and so its links leave
	   the tab order while it is shut. */
	.masthead__nav {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		/* An explicit width rather than left:0 with right:0. The pair leaves
		   the panel shrink to fit, sized to its longest label and parked at
		   its static position in the middle of the bar. A width resolves
		   against the same containing block and spans it. */
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0.125rem;
		/* Measured off the bar rather than a percentage, which would resolve
		   against a height this panel is itself inside. */
		max-height: calc(100svh - 4.5rem);
		overflow-y: auto;
		padding: 0.875rem var(--gutter) 1.5rem;
		border: 0;
		border-top: 1px solid rgb(244 241 234 / 14%);
		border-radius: 0;
		background: var(--ink);
		box-shadow: 0 24px 48px rgb(10 8 7 / 45%);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.5rem);
		transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
	}

	.masthead.is-navopen .masthead__nav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.masthead__nav > a,
	.masthead__toggle {
		justify-content: space-between;
		width: 100%;
		padding: 0.8125rem 0.875rem;
		border-radius: 0.625rem;
		font-size: 0.9375rem;
		text-align: left;
	}

	.masthead__group {
		display: flex;
		flex-direction: column;
	}

	/* Inline, not floating. */
	.masthead__menu {
		position: static;
		transform: none;
		min-width: 0;
		margin: 0.125rem 0 0.375rem 0.875rem;
		padding: 0.25rem 0 0.25rem 0.75rem;
		border: 0;
		border-left: 1px solid rgb(244 241 234 / 18%);
		border-radius: 0;
		background: none;
		box-shadow: none;
		display: none;
		opacity: 1;
		visibility: visible;
	}

	.masthead__group.is-open .masthead__menu {
		display: flex;
		transform: none;
	}

	.masthead__menu a {
		padding: 0.625rem 0.625rem;
		font-size: 0.875rem;
		white-space: normal;
	}
}

/* The page behind a panel that fills the screen should not scroll under it. */
body.is-navlocked {
	overflow: hidden;
}