/*
 * Smith Scale - main stylesheet
 *
 * Palette, type and layout metrics lifted from the existing site's own style
 * blocks, captured 2026-07-23. Where design-cues.md estimated a value from a
 * screenshot, the measured value wins and the difference is noted inline.
 *
 * Industrial: yellow and red on white. Rubik throughout, Abril Fatface for
 * display headings, matching the original.
 */

/* Rubik and Abril Fatface, as the original site loaded them. Every rule below
   carries a real fallback stack, so the page is correct if the fonts do not
   arrive. */
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Rubik:wght@300;400;500;700&display=swap");

:root {
	/* Brand. Measured from the live site's style blocks. */
	--color-red: #960c19;
	--color-red-accent: #b81c23;
	--color-yellow: #ffd300; /* design-cues estimated #FFC72C from a screenshot */
	--color-ink: #161922;
	--color-body: #626262;
	--color-muted: #929292;
	--color-rule: #e4e4e4;
	--color-bg: #ffffff;
	--color-bg-alt: #f7f7f7;

	/* Type */
	--font-body: "Rubik", Helvetica, Arial, sans-serif;
	--font-display: "Abril Fatface", Georgia, serif;
	--line-height: 1.7;

	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4.5rem;

	/* Layout. The original header rows are 80px tall. */
	--wrap: 1180px;
	--header-row: 80px;

	/* Mobile header. The compact bar's height is read by nav.js, so it stays
	   in px. The full height (--header-full) is measured and set by nav.js.
	   The header switches to its desktop layout at 64em; media queries cannot
	   read custom properties, so that value is written out where it is used. */
	--header-compact: 64px;

	/* Smallest comfortable touch target. */
	--tap-min: 48px;
}

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: var(--line-height);
	color: var(--color-body);
	background-color: var(--color-bg);
}

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

a {
	color: var(--color-red);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus {
	color: var(--color-ink);
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--space-md);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-ink);
}

h1 {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 400;
	text-transform: uppercase;
}

/* Section headings on the original are red, 24px, centred. */
h2 {
	font-size: 1.5rem;
	color: var(--color-red);
}

h3 {
	font-size: 1.125rem;
}

h4 {
	font-size: 1rem;
}

p {
	margin: 0 0 var(--space-md);
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--space-md);
}

/* Keeps a phone number, a time range or half an address on one line. */
.text-nowrap {
	white-space: nowrap;
}

/* Read out by screen readers, never shown. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	position: fixed;
	top: var(--space-md);
	left: var(--space-md);
	z-index: 20;
	padding: var(--space-sm) var(--space-md);
	color: var(--color-red);
	background: var(--color-yellow);
}

/* Header ------------------------------------------------------------------ */
/* Phones and tablets, below 64em: the logo row carries a hamburger, and the
   hours, phone and address sit underneath it, because they are what most
   visitors came for. As the page scrolls, the contact details squeeze away
   and leave a slim bar: [Logo] [Call] [Menu]. nav.js drives the squeeze
   through --collapse, which runs from 0 (full) to 1 (compact).

   Without JavaScript the header is an ordinary block in the page flow and
   the nav is always open.

   From 64em up it is the original two-row header: a white utility bar over
   the yellow nav, sticky as a whole. 64em rather than the 48em used
   elsewhere, because phones held sideways are 640-930px wide. */

.site-header {
	position: relative;
	z-index: 10;
	background: var(--color-bg);
	box-shadow: 0 1px 12px rgb(0 0 0 / 8%);
}

/* Fixed over padding exactly as tall as the full header, so shrinking the
   header never moves the page underneath it. */
.has-fixed-header body {
	padding-top: var(--header-full);
}

.has-fixed-header .site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
}

.site-header__bar {
	overflow: hidden;
	background: var(--color-bg);
}

.has-fixed-header .site-header__bar {
	height: calc(
		var(--header-compact) +
		(var(--header-full) - var(--header-compact)) * (1 - var(--collapse, 0))
	);
}

/* The first row is exactly the compact bar's height, so what is left on
   screen when the header has finished squeezing is that row, centred. */
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: calc(var(--header-compact) - 2 * var(--space-sm)) auto;
	grid-template-areas:
		"logo actions"
		"contact contact";
	align-items: center;
	column-gap: var(--space-md);
	padding-block: var(--space-sm) var(--space-lg);
}

.site-header__logo {
	grid-area: logo;
	justify-self: start;
}

/* Laid out at the compact size and scaled up from the top-left corner, so the
   logo shrinks without reflowing anything. 1.8 x 40px is 72px at full size;
   the contact block's top margin leaves room for the overhang. */
.site-header__logo img {
	display: block;
	width: auto;
	height: 40px;
	mix-blend-mode: multiply;
	transform: scale(calc(1 + 0.8 * (1 - var(--collapse, 0))));
	transform-origin: left top;
}

.site-header__contact {
	display: grid;
	grid-area: contact;
	gap: var(--space-md);
	margin-top: 2.25rem;
	opacity: calc(1 - 1.5 * var(--collapse, 0));
}

/* Squeezed out of sight, so out of the tab order and the accessibility tree
   too. The phone number is still there, behind the call button. */
.site-header.is-compact .site-header__contact {
	visibility: hidden;
}

/* Yellow pictogram, then a dark label over a red value, as on the original. */
.site-header__item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.site-header__icon {
	flex: none;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.site-header__label,
.site-header__value {
	display: block;
}

.site-header__label {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--color-ink);
}

.site-header__value {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-red);
	text-decoration: none;
}

a.site-header__value:hover,
a.site-header__value:focus {
	color: var(--color-red);
}

.site-header__actions {
	position: relative;
	display: flex;
	grid-area: actions;
}

.site-header__call,
.site-header__menu {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	padding: 0;
	border: 0;
}

/* Brand yellow, like every other button on the site. Hidden while the full
   contact block is showing, then fading in as the block squeezes away.
   Positioned beside the menu button rather than in the row, so while it is
   hidden it takes no width from the contact details on narrow landscape
   screens. */
.site-header__call {
	position: absolute;
	top: 0;
	right: calc(100% + var(--space-sm));
	color: var(--color-ink);
	background: var(--color-yellow);
	opacity: 0;
	visibility: hidden;
}

.site-header.is-collapsing .site-header__call {
	opacity: var(--collapse);
	visibility: visible;
}

/* Hover only where there is a real pointer: touch browsers leave :hover stuck
   on whatever was last tapped. */
.site-header__call:focus-visible {
	color: var(--color-yellow);
	background: var(--color-ink);
}

/* A menu button that does nothing is worse than none, so it only appears
   once JavaScript is known to be running. */
.site-header__menu {
	display: none;
	color: var(--color-ink);
	background: transparent;
	cursor: pointer;
}

.has-js .site-header__menu {
	display: flex;
}

.site-header__menu:focus-visible {
	color: var(--color-red);
}

@media (hover: hover) {
	.site-header__call:hover {
		color: var(--color-yellow);
		background: var(--color-ink);
	}

	.site-header__menu:hover {
		color: var(--color-red);
	}
}

.site-header__menu-close,
.site-header.is-menu-open .site-header__menu-open {
	display: none;
}

.site-header.is-menu-open .site-header__menu-close {
	display: block;
}

/* Phones held sideways: logo on the left, the contact details stacked on the
   right, all in one row so the header costs as little height as possible.
   The labels go (to screen readers only) because the icons carry them. */
@media (orientation: landscape) {
	/* The logo column is sized for the logo at full scale (40px x 1.8, at the
	   image's 193:87 ratio, is 160px wide), not for its compact layout box, or
	   the contact details slide in under it on narrow landscape screens. */
	.site-header__inner {
		grid-template-columns: 10rem 1fr auto;
		grid-template-rows: auto;
		grid-template-areas: "logo contact actions";
		align-items: start;
		column-gap: var(--space-sm);
		padding-block: var(--space-sm);
	}

	.site-header__logo {
		margin-top: var(--space-xs);
	}

	.site-header__contact {
		gap: var(--space-xs);
		justify-self: end;
		margin-top: 0;
	}

	.site-header__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* A step smaller on the narrowest landscape screens (480px), where the
	   unbroken hours line would otherwise push the menu off the edge. */
	.site-header__value {
		font-size: 0.875rem;
	}
}

@media (orientation: landscape) and (min-width: 36em) {
	.site-header__value {
		font-size: 0.9375rem;
	}
}

/* Yellow primary nav. On phones it drops down under the compact bar when the
   hamburger is pressed: one link per row, each a full-width tap target. */
.nav {
	background-color: var(--color-yellow);
}

.has-js .nav {
	display: none;
}

.site-header.is-menu-open .nav {
	display: block;
	max-height: calc(100vh - var(--header-compact));
	max-height: calc(100dvh - var(--header-compact));
	overflow-y: auto;
}

.nav .wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding-bottom: var(--space-lg);
}

.nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__list li + li {
	border-top: 1px solid rgb(0 0 0 / 12%);
}

.nav__list a {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	padding-block: var(--space-xs);
	font-size: 1.0625rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--color-ink);
}

/* The original marks the current page in red, wrapped in braces. */
.nav__list a[aria-current="page"] {
	font-weight: 700;
	color: var(--color-red);
}

.nav__list a[aria-current="page"]::before { content: "{\00a0"; }
.nav__list a[aria-current="page"]::after  { content: "\00a0}"; }

.nav__list a:hover,
.nav__list a:focus {
	color: var(--color-red);
}

.nav__search {
	display: flex;
	align-items: center;
	background: var(--color-bg);
	border: 1px solid rgb(0 0 0 / 12%);
}

.nav__search-label {
	position: absolute;
	left: -9999px;
}

/* 1rem on phones: iOS zooms the whole page into any input smaller than
   16px when it takes focus. */
.nav__search-input {
	flex: 1;
	min-width: 0;
	padding: 0.6875rem 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--color-ink);
	background: transparent;
	border: 0;
}

.nav__search-input:focus {
	outline: 2px solid var(--color-ink);
	outline-offset: -2px;
}

.nav__search-button {
	display: flex;
	align-items: center;
	align-self: stretch;
	padding: 0.4375rem 0.875rem;
	color: var(--color-body);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.nav__search-button:hover,
.nav__search-button:focus {
	color: var(--color-red);
}

/* Desktop: the original header, restored. */
@media (min-width: 64em) {
	.site-header,
	.has-fixed-header .site-header {
		position: sticky;
		top: 0;
	}

	.has-fixed-header body {
		padding-top: 0;
	}

	.site-header__bar,
	.has-fixed-header .site-header__bar {
		height: auto;
		border-bottom: 1px solid var(--color-rule);
		overflow: visible;
	}

	.site-header__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-md);
		min-height: var(--header-row);
		padding-block: var(--space-md);
	}

	.site-header__logo {
		margin-top: 0;
	}

	.site-header__logo img {
		height: auto;
		max-height: var(--header-row);
		transform: none;
	}

	.site-header__contact {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-md) var(--space-xl);
		margin-top: 0;
		text-align: right;
		opacity: 1;
	}

	.site-header__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.site-header__actions {
		display: none;
	}

	/* Nav row: links left, search right, as on the original. */
	.has-js .nav,
	.site-header.is-menu-open .nav {
		display: block;
		max-height: none;
		overflow-y: visible;
	}

	.nav .wrap {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 0;
	}

	.nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--space-lg);
	}

	.nav__list li + li {
		border-top: 0;
	}

	.nav__list a {
		display: block;
		min-height: 0;
		padding-block: var(--space-md);
		font-size: 1rem;
	}

	.nav__search-input {
		flex: none;
		width: 13rem;
		max-width: 40vw;
		padding: 0.4375rem 0.625rem;
		font-size: 0.875rem;
	}

	.nav__search-button {
		padding: 0.4375rem 0.625rem;
	}
}

/* Search page --------------------------------------------------------------- */

.search__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-xl);
}

.search__label {
	position: absolute;
	left: -9999px;
}

.search__input {
	flex: 1 1 18rem;
	padding: 0.6875rem 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--color-ink);
	background: var(--color-bg);
	border: 1px solid var(--color-rule);
}

.search__input:focus {
	border-color: var(--color-yellow);
	outline: 2px solid var(--color-yellow);
	outline-offset: 1px;
}

.search__count,
.search__hint {
	margin: 0 0 var(--space-lg);
	color: var(--color-body);
}

.search__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-rule);
}

.search__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--color-rule);
}

.search__link {
	font-weight: 500;
	color: var(--color-ink);
	text-decoration: none;
}

.search__link:hover,
.search__link:focus {
	color: var(--color-red);
	text-decoration: underline;
}

.search__kind {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}

/* Hero --------------------------------------------------------------------- */
/* Full-bleed photograph with the headline panel over it, as on the original.
   The image is a CSS background there too, which is why an <img>-only crawl
   never found it. */

.hero {
	position: relative;
	background-color: var(--color-ink);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Darkens the photograph just enough for white text to stay legible over the
   bright parts of it. On phones the copy spans the full width at the foot of
   the photograph, so the shade rises from the bottom instead. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgb(0 0 0 / 62%) 0%,
		rgb(0 0 0 / 38%) 55%,
		rgb(0 0 0 / 10%) 100%
	);
}

@media (min-width: 48em) {
	.hero::before {
		background: linear-gradient(
			to right,
			rgb(0 0 0 / 0%) 0%,
			rgb(0 0 0 / 0%) 42%,
			rgb(0 0 0 / 28%) 62%,
			rgb(0 0 0 / 42%) 100%
		);
	}
}

/* The original cuts the photograph off with a white diagonal rising to the
   right, rather than a straight edge. clip-path rather than the wedge image
   the old theme used. It hangs 1px below the hero so a fractional hero
   height cannot leave a dark hairline under it. */
.hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 120px;
	background: var(--color-bg);
	clip-path: polygon(0 62%, 100% 0, 100% 100%, 0 100%);
}

/* Shorter on phones, with the copy sitting at the foot of the photograph, so
   the headline and both buttons are on the first screen. */
.hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	min-height: 26rem;
	padding-block: var(--space-2xl) 6rem;
}

.hero__panel {
	max-width: 34rem;
	align-self: flex-end;
}

@media (min-width: 48em) {
	.hero__inner {
		min-height: 40rem;
		padding-block: var(--space-2xl) 7rem;
	}

	.hero__panel {
		align-self: center;
	}
}

.hero__heading {
	margin: 0 0 var(--space-md);
	font-family: var(--font-body);
	font-size: clamp(1.75rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: #ffffff;
}

.hero__text {
	margin: 0 0 var(--space-lg);
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.5;
	color: rgb(255 255 255 / 92%);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin: 0;
}

/* The buttons share the row and stack full width once it gets too narrow for
   both, so each is a large target on a phone. */
.hero__actions .button {
	flex: 1 1 11rem;
	text-align: center;
}

@media (min-width: 48em) {
	.hero__actions .button {
		flex: none;
	}
}

/* Homepage sections -------------------------------------------------------- */

.section {
	padding-block: var(--space-2xl);
}

/* Brand red, not the original's yellow. Yellow on white measures 1.44:1
   against a 4.5:1 minimum, and darkening it enough to pass turns it brown.
   Red is 8.89:1 and already the section-heading colour, so the eyebrow reads
   as a lighter-weight version of the heading below it. */
.section__eyebrow {
	margin: 0 0 var(--space-xs);
	font-size: 0.9375rem;
	font-weight: 700;
	text-align: center;
	color: var(--color-red);
}

/* On the dark splash panels the brand yellow is 12.18:1 and stays. */
.section__eyebrow--light {
	color: var(--color-yellow);
}

.section__heading {
	margin: 0 0 var(--space-xl);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	text-align: center;
	color: var(--color-red);
}

.services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.services__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--space-md);
	object-fit: cover;
}

.services__title {
	margin: 0 0 var(--space-sm);
	font-size: 1.25rem;
	color: var(--color-red);
}

/* On a phone each card's copy runs to fifteen lines, which is hard to read
   centred and bold, so it is left-aligned and regular weight until the cards
   sit side by side. */
.services__text {
	margin: 0;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-ink);
}

@media (min-width: 48em) {
	.services {
		text-align: center;
	}

	.services__text {
		font-weight: 700;
		line-height: 1.5;
	}
}

/* Full-bleed splash panels. The original ends each with a yellow diagonal
   wedge; that is a clip-path here rather than an image, so it scales cleanly
   and costs nothing to download. */
.splash {
	position: relative;
	padding-block: var(--space-2xl);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.splash::before {
	content: "";
	position: absolute;
	inset: 0;
}

.splash::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 90px;
	background: var(--color-yellow);
	clip-path: polygon(0 100%, 100% 22%, 100% 100%);
}

.splash--cta::before {
	background: rgb(150 12 25 / 82%);
}

.splash--quotes::before {
	background: rgb(0 0 0 / 55%);
}

.splash__inner {
	position: relative;
	z-index: 1;
	padding-bottom: var(--space-2xl);
}

.splash__heading {
	max-width: 46rem;
	margin: 0 0 var(--space-lg);
	font-size: clamp(1.5rem, 3.4vw, 2.5rem);
	line-height: 1.2;
	text-transform: uppercase;
	text-wrap: balance;
	color: #ffffff;
}

/* "We service all," sits on its own line above the county list. */
.splash__heading .splash__highlight {
	display: block;
}

.splash__heading--center {
	max-width: none;
	text-align: center;
}

.splash__highlight {
	color: var(--color-yellow);
}

.splash__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin: 0;
}

/* The service-area panel carries a photo collage to the right of the copy. */
.splash__collage {
	display: none;
}

.splash__lede {
	max-width: 36rem;
	margin: 0 auto var(--space-lg);
	text-align: center;
	color: rgb(255 255 255 / 92%);
}

.splash__form {
	max-width: 44rem;
	margin-inline: auto;
	padding: var(--space-lg);
	background: rgb(255 255 255 / 96%);
}

.splash--quote::before {
	background: rgb(0 0 0 / 62%);
}

/* A tinted band rather than a photograph, to separate the featured products
   from the white sections either side of it. */
.section--alt {
	background: var(--color-bg-alt);
}

.section__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md);
	margin: var(--space-xl) 0 0;
}

/* Project photographs. Fixed aspect ratio so a portrait shot does not make its
   row taller than the others. */
.projects {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Three across, as on the original, so nine photographs fall into a clean
   3x3 rather than leaving an orphan on the last row. */
@media (min-width: 48em) {
	.projects--all {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* The projects page leads with a section-style heading rather than the
   display face used elsewhere, matching the original. */
.page-heading {
	margin: 0 0 var(--space-xl);
	font-family: var(--font-body);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 700;
	text-align: center;
	text-transform: none;
	color: var(--color-red);
}

.projects__item {
	overflow: hidden;
	background: var(--color-bg-alt);
}

.projects__item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.projects__item:hover img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.projects__item img {
		transition: none;
	}

	.projects__item:hover img {
		transform: none;
	}
}

.quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.quotes__item {
	padding: var(--space-lg);
	background: #ffffff;
}

.quotes__text {
	margin: 0 0 var(--space-md);
	font-size: 0.9375rem;
	color: var(--color-body);
}

.quotes__author {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-ink);
}

/* Main -------------------------------------------------------------------- */

main {
	padding-block: 0 var(--space-2xl);
}

main > .wrap {
	padding-top: var(--space-xl);
}

.hero + .wrap {
	padding-top: var(--space-2xl);
}

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

.prose h2 {
	margin-top: var(--space-xl);
}

.prose h3 {
	margin-top: var(--space-lg);
	color: var(--color-ink);
}

.prose ul {
	padding-left: 1.25rem;
}

.page__hero {
	display: block;
	width: 100%;
	max-height: 420px;
	margin-bottom: var(--space-lg);
	object-fit: cover;
}

/* Buttons. Yellow with red text, as on the original. */
/* Yellow with dark text. The measured '#ffd300 on #960c19' rule in the old
   CSS applies to the form submit button; the hero and splash buttons render
   with dark text, which the screenshots confirm. */
.button {
	display: inline-block;
	padding: 0.6875rem 1.5rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--color-ink);
	background: var(--color-yellow);
	border: 1px solid var(--color-yellow);
	cursor: pointer;
}

.button:hover,
.button:focus {
	color: var(--color-yellow);
	background: var(--color-ink);
	border-color: var(--color-ink);
}

/* The secondary action: near-white with a hairline border. */
.button--ghost {
	color: var(--color-ink);
	background: rgb(255 255 255 / 92%);
	border-color: rgb(255 255 255 / 92%);
}

.button--ghost:hover,
.button--ghost:focus {
	color: #ffffff;
	background: var(--color-ink);
	border-color: var(--color-ink);
}

/* NOTE: every .button--* modifier MUST be declared after .button. They share a
   specificity of 0,1,0, so whichever comes last wins. Declaring a modifier
   above .button silently does nothing, which has bitten this file twice. */

/* Outlined variant, for the secondary action beside a yellow button on white. */
.button--outline {
	color: var(--color-ink);
	background: transparent;
	border-color: var(--color-ink);
}

.button--outline:hover,
.button--outline:focus {
	color: #ffffff;
	background: var(--color-ink);
	border-color: var(--color-ink);
}

/* Solid red action, used beside the outlined one on the Projects section. */
.button--red {
	color: #ffffff;
	background: var(--color-red);
	border-color: var(--color-red);
}

.button--red:hover,
.button--red:focus {
	color: var(--color-red);
	background: #ffffff;
	border-color: var(--color-red);
}


/* Product and category grids ---------------------------------------------- */

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-lg);
	margin: 0 0 var(--space-xl);
	padding: 0;
	list-style: none;
}

.card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-rule);
	background: var(--color-bg);
	transition: border-color 0.15s ease;
}

.card:hover {
	border-color: var(--color-yellow);
}

.card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.card__body {
	padding: var(--space-md);
}

.card__title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}

.card__title a {
	color: var(--color-ink);
	text-decoration: none;
}

.card__title a:hover,
.card__title a:focus {
	color: var(--color-red);
}

/* Services page: the scale types Smith Scale services, in three columns
   on wider screens as on the original. */

.service-points {
	margin: 0 0 var(--space-lg);
	padding-left: 1.25rem;
}

.service-points li {
	break-inside: avoid;
}

@media (min-width: 640px) {
	.service-points {
		columns: 3;
		column-gap: var(--space-lg);
	}
}

/* Products page: jump links to each category, as small cards. One column on
   phones, two on tablets, 3 x 3 on desktop. */

.catalogue-nav {
	margin: 0 0 var(--space-xl);
}

.catalogue-nav__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.catalogue-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	height: 100%;
	padding: var(--space-md) var(--space-lg);
	border: 1px solid var(--color-rule);
	border-left: 4px solid var(--color-yellow);
	background: var(--color-bg-alt);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.catalogue-nav__link:hover,
.catalogue-nav__link:focus {
	border-color: var(--color-yellow);
	background: var(--color-bg);
}

.catalogue-nav__name {
	color: var(--color-ink);
	font-weight: 500;
}

.catalogue-nav__link:hover .catalogue-nav__name,
.catalogue-nav__link:focus .catalogue-nav__name {
	color: var(--color-red);
}

.catalogue-nav__count {
	color: var(--color-muted);
	font-size: 0.875rem;
}

/* Twice as many tracks as visible columns, with each card spanning two, so a
   short last row can be shifted by half a card and sit centred instead of
   hanging off the left edge. */
@media (min-width: 640px) {
	.catalogue-nav__list {
		grid-template-columns: repeat(4, 1fr);
	}

	.catalogue-nav__item {
		grid-column: span 2;
	}

	/* A lone card on the last row of two. */
	.catalogue-nav__item:last-child:nth-child(odd) {
		grid-column: 2 / span 2;
	}
}

@media (min-width: 960px) {
	.catalogue-nav__list {
		grid-template-columns: repeat(6, 1fr);
	}

	.catalogue-nav__item:last-child:nth-child(odd) {
		grid-column: span 2;
	}

	/* A lone card, or a pair, on the last row of three. */
	.catalogue-nav__item:last-child:nth-child(3n + 1) {
		grid-column: 3 / span 2;
	}

	.catalogue-nav__item:nth-last-child(2):nth-child(3n + 1) {
		grid-column: 2 / span 2;
	}
}

.catalogue-section {
	scroll-margin-top: calc(var(--header-compact) + var(--space-md));
}

@media (min-width: 64em) {
	.catalogue-section {
		scroll-margin-top: calc(var(--header-row) + var(--space-md));
	}
}

.catalogue-section h2 a {
	color: inherit;
	text-decoration: none;
}

.catalogue-section h2 a:hover,
.catalogue-section h2 a:focus {
	color: var(--color-red);
}

/* Gallery, used for the logo strip and section imagery. */
/* Manufacturer logo strip. Flex rather than grid so a short final row stays
   centred instead of stranding one logo against the left edge. */
.gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-xl);
	margin: var(--space-2xl) 0 0;
	padding: var(--space-xl) 0 0;
	border-top: 1px solid var(--color-rule);
	list-style: none;
}

.gallery__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 70px;
}

.gallery__item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Product page ------------------------------------------------------------ */

.product {
	display: grid;
	gap: var(--space-lg);
}

.product__media {
	padding: var(--space-lg);
	background: var(--color-bg-alt);
}

.product__media img {
	display: block;
	width: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* A photo of one version on a page that covers several (the CL5500's pole and
   hanging models), sitting under that version's heading. Kept small: the
   page's main photo is the hero. */
.product__variant-image {
	display: block;
	width: 100%;
	max-width: 16rem;
	margin: 0 0 var(--space-md);
	mix-blend-mode: multiply;
}

/* A strip of installation photos on a product page. Portrait crops so the
   three sit level whichever way each was shot. Scoped under .prose so it
   outranks the list indent from .prose ul. */
.prose .product__photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	margin: 0 0 var(--space-lg);
	padding: 0;
	list-style: none;
}

.product__photos img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.product__no-image {
	margin: 0;
	padding-block: var(--space-2xl);
	text-align: center;
	color: var(--color-muted);
}

.product__related {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-rule);
}

.product__related h2 {
	margin-bottom: var(--space-sm);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.product__related ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.product__related li + li {
	margin-top: var(--space-xs);
}

.product__related a {
	font-size: 0.9375rem;
	color: var(--color-ink);
	text-decoration: none;
}

.product__related a:hover,
.product__related a:focus {
	color: var(--color-red);
	text-decoration: underline;
}

.product__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md) var(--space-lg);
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-rule);
}

.product__cta .button {
	flex: 1 1 100%;
	text-align: center;
}

.product__phone {
	font-size: 0.9375rem;
	color: var(--color-muted);
}

@media (min-width: 48em) {
	.product__cta .button {
		flex: none;
	}
}

/* Tables ------------------------------------------------------------------ */

.table-scroll {
	overflow-x: auto;
}

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

th,
td {
	padding: var(--space-sm);
	text-align: left;
	border-bottom: 1px solid var(--color-rule);
}

/* Contact page ------------------------------------------------------------ */
/* Phone and email, hours, address: the same yellow pictograms and dark label
   over red value as the header, stacked on phones and in three columns once
   there is room. */

.contact-lede {
	max-width: 40rem;
	font-size: 1.0625rem;
	color: var(--color-ink);
}

.contact-points {
	display: grid;
	gap: var(--space-lg);
	margin: var(--space-lg) 0 var(--space-xl);
	padding: 0;
}

.contact-points__item {
	position: relative;
	padding-left: 2.75rem;
}

/* The icons are CSS backgrounds because a dl group may only hold dt and dd. */
.contact-points__item::before {
	content: "";
	position: absolute;
	top: 0.125rem;
	left: 0;
	width: 28px;
	height: 28px;
	background: no-repeat center / contain;
}

.contact-points__item--phone::before {
	background-image: url("/assets/img/2021/10/phone-1.png");
}

.contact-points__item--hours::before {
	background-image: url("/assets/img/2021/10/bxs-time-five-1.png");
}

.contact-points__item--address::before {
	background-image: url("/assets/img/2021/10/location-sharp-1.png");
}

.contact-points__label {
	font-size: 0.875rem;
	color: var(--color-ink);
}

.contact-points__value {
	margin: 0;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-red);
}

/* Padded so each link is a comfortable tap target. */
.contact-points__value a {
	display: inline-block;
	padding-block: var(--space-xs);
	color: inherit;
	text-decoration: none;
}

.contact-points__value a:hover,
.contact-points__value a:focus {
	color: var(--color-ink);
	text-decoration: underline;
}

@media (min-width: 48em) {
	.contact-points {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Contact form ------------------------------------------------------------ */

.form {
	display: grid;
	gap: var(--space-md);
	max-width: 42rem;
	margin-top: var(--space-lg);
}

.form__field {
	display: grid;
	gap: var(--space-xs);
}

.form__field label {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.form__field input,
.form__field textarea {
	padding: 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--color-ink);
	background: var(--color-bg);
	border: 1px solid var(--color-rule);
}

.form__field input:focus,
.form__field textarea:focus {
	border-color: var(--color-yellow);
	outline: 2px solid var(--color-yellow);
	outline-offset: 1px;
}

.form__hp {
	position: absolute;
	left: -9999px;
}

/* Footer ------------------------------------------------------------------ */
/* White, with the 50px yellow band the original carries above it. */

.site-footer {
	margin-top: var(--space-2xl);
	border-top: 50px solid var(--color-yellow);
	background: var(--color-bg);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-lg);
	padding-block: var(--space-xl);
}

.site-footer h2 {
	margin-bottom: var(--space-md);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-red);
}

.site-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Padded out to a comfortable tap target on phones. */
.site-footer__col ul a {
	display: inline-block;
	padding-block: var(--space-sm);
}

@media (min-width: 48em) {
	.site-footer__col ul a {
		padding-block: 0;
	}

	.site-footer__col li + li {
		margin-top: var(--space-xs);
	}
}

.site-footer__col a {
	font-size: 0.9375rem;
	color: var(--color-body);
	text-decoration: none;
}

.site-footer__col a:hover,
.site-footer__col a:focus {
	color: var(--color-red);
}

.site-footer address {
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.8;
}

.site-footer__credit {
	border-top: 1px solid var(--color-rule);
	font-size: 0.8125rem;
	color: var(--color-muted);
}

.site-footer__credit .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-block: var(--space-md);
}

.site-footer__credit p {
	margin: 0;
}

/* Wider screens ------------------------------------------------------------ */

.form__row {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 48em) {
	h1 {
		font-size: 2.75rem;
	}

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

	/* Capped at 60% of the actual width as well, so on a tablet or a phone held
	   sideways the copy stops short of the collage (36% wide, on the right)
	   instead of running underneath it. */
	.splash--cta .splash__inner {
		max-width: min(calc(var(--wrap) * 0.62), 60%);
		margin-inline: 0 auto;
	}

	.splash__collage {
		position: absolute;
		top: 50%;
		right: max(var(--space-md), calc((100% - var(--wrap)) / 2));
		z-index: 1;
		display: block;
		width: min(36%, 26rem);
		transform: translateY(-50%);
	}

	h2 {
		font-size: 1.75rem;
	}

	.product {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card {
		transition: none;
	}
}