/* ==========================================================================
   Alderman — main stylesheet
   ========================================================================== */

/* Fonts (self-hosted variable fonts, latin subset)
   ========================================================================== */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/cormorant-garamond.woff2") format("woff2");
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope.woff2") format("woff2");
}

/* Variables
   Sizes written with clamp() shrink smoothly on small screens and reach the
   design value (in the comment) at the 1512px design width.
   ========================================================================== */
:root {
	--color-primary: #3f4f4c; /* Green */
	--color-secondary: #c6a77d; /* Gold */
	--color-grey: #323232;
	--color-light-brown: #f4f1ea; /* L Brown BG */
	--color-white: #ffffff;
	--color-off-white: #f7f5f2; /* Newsletter background */
	--color-deep-green: #1c2926; /* A deeper green: the gradient over the about photo on the Service pages */
	--color-line: rgb(255 255 255 / 0.5); /* Lines and outlines over photos. Plain backgrounds set their own (.section--light, .section--dark) */

	/* The same colours as bare channels, for the faint tints written rgb(var(--color-primary-rgb) / 0.03).
	   They are not written with color-mix(), which Safari before 16.2 (an iPhone 7, for instance) does not
	   know: a colour a browser cannot read falls back to the text colour, which made the watermark letter
	   solid black on such phones. */
	--color-primary-rgb: 63 79 76;
	--color-secondary-rgb: 198 167 125;
	--color-grey-rgb: 50 50 50;
	--color-deep-green-rgb: 28 41 38;

	--font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	--fs-h1: clamp(2.75rem, 2.11rem + 2vw, 4rem); /* 64px */
	--fs-h2: clamp(2.25rem, 1.875rem + 1.6vw, 3.375rem); /* 54px */
	--fs-h3: clamp(1.625rem, 1.4rem + 0.64vw, 2rem); /* 32px */
	--fs-h4: 1.875rem; /* 30px */
	--fs-number: clamp(2.75rem, 2.2rem + 1.65vw, 3.75rem); /* 60px */
	--fs-lead: clamp(1.1875rem, 1rem + 0.53vw, 1.5rem); /* 24px */
	--fs-body: clamp(0.9375rem, 0.824rem + 0.45vw, 1.25rem); /* 20px; 15px on a phone, as in the hero's phone design */
	--fs-amount: clamp(2.25rem, 2.34rem + 0.7vw, 3rem); /* 48px */
	--fs-small: clamp(1rem, 0.9rem + 0.24vw, 1.125rem); /* 18px */
	--fs-menu: clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem); /* 38px */

	--container-width: 94.5rem; /* 1512px */
	--container-padding: clamp(1.25rem, 4vw, 3.75rem); /* 60px */
	--space-section: clamp(3rem, 5.3vw, 5rem); /* 80px */
	--space-group: clamp(2.5rem, 4vw, 3.75rem); /* 60px */
	--header-height: clamp(4.5rem, 3.9rem + 2.5vw, 6.25rem); /* 100px */
}

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

/* Links to a section of the page, such as the buttons to the enquiry form, scroll to it smoothly. */
html {
	scroll-behavior: smooth;
	/* The page never scrolls sideways, whatever sticks out: on a phone a few pixels of overflow let
	   the whole page be dragged left and right. The viewport takes this from <html>; clip is the
	   modern form and hidden the fallback for Safari before 16. */
	overflow-x: hidden;
	overflow-x: clip;
}

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
	margin: 0;
}

body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--color-grey);
	background: var(--color-white);
}

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

a {
	color: var(--color-primary);
}

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

/* A field's text is never smaller than 16px: iPhones zoom in on a smaller field when it is tapped
   and leave the page wider than the screen afterwards. On a phone the body text is 15px. */
input,
select,
textarea {
	font-size: max(1rem, 1em);
}

/* Anything with the hidden attribute stays hidden, whatever display its class sets. */
[hidden] {
	display: none !important;
}

/* Lists that carry a class are layout lists, not bulleted content.
   :where() keeps this reset weaker than any class, so .container padding still applies. */
:where(ul, ol)[class] {
	padding: 0;
	list-style: none;
}

/* .heading applies the heading style to any element. */
h1,
h2,
h3,
h4,
h5,
h6,
.heading {
	font-family: var(--font-heading);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.04em;
}

h1 {
	font-size: var(--fs-h1);
}

h2,
.heading {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs-h3);
}

h4 {
	font-size: var(--fs-h4);
}

/* The gold italic second line of a heading: <h2>First line <em>second line</em></h2> */
:is(h1, h2, .heading) em {
	display: block;
	font-style: italic;
	color: var(--color-secondary);
}

/* Accent inline: the gold part stays on the same line: <h2 class="accent-inline">Client <em>Testimonials</em></h2> */
.accent-inline em {
	display: inline;
}

/* .text is a block of body copy from a meta box, kept to a readable width.
   Set --text-width on a parent to change that width. */
.text {
	max-width: var(--text-width, 39.625rem);
}

.text--center {
	margin-inline: auto;
	text-align: center;
}

/* Lead: larger body copy. */
.text--lead {
	font-size: var(--fs-lead);
}

/* Small: the size used for short descriptions under a title. */
.small {
	font-size: var(--fs-small);
	line-height: 1.4;
	letter-spacing: 0;
}

.center {
	text-align: center;
}

/* One blank line between paragraphs of body copy and of editor content. */
:is(.text, .entry__content) > * + * {
	margin-top: 1.6em;
}

/* Editor content: the text written in the editor (a content page, a post).
   Sub-headings are smaller than section headings, with more space above them
   than between paragraphs; lists keep their bullets; tables get lines. */
.entry__content > * + :is(h2, h3, h4) {
	margin-top: var(--space-group);
}

.entry__content h2 {
	font-size: var(--fs-h3);
}

.entry__content h3 {
	font-size: var(--fs-h4);
}

.entry__content h4 {
	font-size: var(--fs-lead);
}

.entry__content :is(ul, ol) {
	padding-left: 1.5em;
}

.entry__content li + li {
	margin-top: 0.5em;
}

.entry__content a {
	text-underline-offset: 0.2em;
}

.entry__content blockquote {
	padding-left: 1.5rem;
	border-left: 2px solid var(--color-secondary);
	font-family: var(--font-heading);
	font-size: var(--fs-lead);
	font-style: italic;
	line-height: 1.4;
}

.entry__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.entry__content :is(th, td) {
	padding: 0.75em 1em;
	border: 1px solid rgb(var(--color-grey-rgb) / 0.2);
	text-align: left;
	vertical-align: top;
}

.entry__content th {
	font-weight: 600;
	background: var(--color-light-brown);
}

.entry__content hr {
	margin-block: var(--space-group);
	border: 0;
	border-top: 1px solid rgb(var(--color-grey-rgb) / 0.2);
}

/* Layout
   ========================================================================== */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* Section: the standard space above and below a section's content, and the
   two usual backgrounds. Each sets its own line colour: fainter white on
   plain green than over a photo, and green on light brown. */
.section {
	padding-block: var(--space-section);
}

.section--light {
	--color-line: rgb(var(--color-primary-rgb) / 0.375);
	color: var(--color-primary);
	background: var(--color-light-brown);
}

.section--dark {
	--color-line: rgb(255 255 255 / 0.375);
	color: var(--color-white);
	background: var(--color-primary);
}

/* Split: two columns. The first pins its heading to the top and whatever
   follows it to the bottom. Set --split on the section to change the column
   widths, and --split-gap for space between them. */
.split {
	display: grid;
	grid-template-columns: var(--split, 1fr 1fr);
	gap: var(--split-gap, 0);
}

.split__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2.5rem;
}

/* Stack: things placed one under another with even space between them,
   e.g. a heading and its text. The wide version separates the parts of a section. */
.stack {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.stack--wide {
	gap: var(--space-group);
}

/* Watermark: the large, faint letter "A" behind a section. Each section sets
   its colour (--watermark-color) and may move it (--watermark-top,
   --watermark-left) or enlarge it (--watermark-size, 1 = the standard size). */
.watermark {
	position: relative;
	isolation: isolate;
	overflow: hidden; /* Browsers without clip (Safari before 16) */
	overflow: clip;
}

.watermark::before {
	content: "A";
	position: absolute;
	top: var(--watermark-top, -0.063em);
	left: var(--watermark-left, -0.279em);
	z-index: -1;
	font-family: var(--font-heading);
	font-size: calc(min(103vw, 97.5rem) * var(--watermark-size, 1));
	line-height: 1;
	color: var(--watermark-color);
}

/* Section header: the section heading on the left and a short text on the right. */
.section-header {
	--text-width: 28.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2rem;
}

/* Wide: room for a longer text beside the heading. */
.section-header--wide {
	--text-width: 37.5rem;
}

/* Cover: a section filled by a background image or video, with its content
   pinned to the top and bottom. Set --cover-overlay on the section to put a
   dark layer over the picture. */
.cover {
	position: relative;
	display: flex;
	color: var(--color-white);
	background: var(--color-primary);
}

.cover__media,
.cover__media::after {
	position: absolute;
	inset: 0;
}

.cover__media::after {
	content: "";
	background: var(--cover-overlay, none);
}

.cover__media :is(img, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cover__inner {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-section);
	min-width: 0;
	padding-block: var(--space-section);
}

.cover__inner > .button {
	align-self: flex-start;
}

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

.skip-link:focus {
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	clip-path: none;
	background: var(--color-white);
}

/* Components
   ========================================================================== */

/* Buttons and tabs share their box: same height, border and colour change. */
.button,
.tabs__tab {
	padding: 0.9375rem 1.5rem;
	border: 1px solid var(--color-primary);
	transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

/* Button: green by default, with an arrow after the label. */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--color-white);
	text-decoration: none;
	background: var(--color-primary);
}

.button::after {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13.5M9.5 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center / contain no-repeat;
}

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

/* Outline: transparent, in the colour of the text around it: white on green or a photo, green on light brown. */
.button--outline {
	border-color: currentColor;
	color: inherit;
	background: transparent;
}

/* Secondary: gold, for green backgrounds. */
.button--secondary {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
	cursor: pointer;
}

.button--outline:hover,
.button--outline:focus-visible,
.button--secondary:hover,
.button--secondary:focus-visible {
	border-color: var(--color-white);
	color: var(--color-grey);
	background: var(--color-white);
}

/* Outline, green: for white backgrounds, where the outline and text are green and fill green on hover
   (the links between case studies). */
.button--outline-green {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: transparent;
}

.button--outline-green:hover,
.button--outline-green:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-white);
	background: var(--color-primary);
}

/* Plain: no arrow after the label. */
.button--plain {
	cursor: pointer;
}

.button--plain::after {
	content: none;
}

/* Back: the arrow before the label, pointing left (the link to the previous case study). */
.button--back::after {
	order: -1;
	transform: scaleX(-1);
}

/* Actions: a row of buttons. Both take the width of the wider one, and each
   fills a row of its own on a small screen. */
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.actions .button {
	flex: 1 0 13.5rem;
}

/* Centred, and no wider than its buttons. */
.actions--center {
	justify-content: center;
	width: fit-content;
	margin-inline: auto;
}

/* Field: a form control with its label shown as the placeholder. On its own
   it is a line to write on, for dark backgrounds. */
.field :is(input, select, textarea) {
	display: block;
	width: 100%;
	padding: 0.75rem 0.625rem;
	border: 0;
	border-bottom: 1px solid var(--color-line);
	border-radius: 0;
	background-color: transparent;
}

.field :is(input, select, textarea):focus {
	border-color: var(--color-secondary);
	outline: 0;
}

.field ::placeholder {
	opacity: 1;
	color: inherit;
}

/* The browser's own arrow is replaced by a chevron drawn in the text colour. */
.field select {
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
	appearance: none;
	padding-right: 2.5rem;
	background: var(--chevron) right 1rem center / 0.75rem no-repeat;
}

/* Browsers that cannot style the opened list of choices draw it themselves, in dark text on white. */
.field option {
	color: var(--color-grey);
	background: var(--color-white);
}

/* Dropdown: browsers that can style the opened list (Chrome and Edge) get a
   green panel under the field. The chevron turns while the list is open, the
   choice under the pointer is highlighted and the chosen one is gold. */
@supports (appearance: base-select) {
	.field select,
	.field select::picker(select) {
		appearance: base-select;
	}

	/* The chevron becomes the select's own icon, so it can turn. */
	.field select {
		display: flex;
		gap: 0.5rem;
		align-items: center;
		padding-right: 1rem;
		background-image: none;
	}

	.field select::picker-icon {
		content: "";
		flex: none;
		width: 0.75rem;
		height: 0.5rem;
		background: currentColor;
		mask: var(--chevron) center / contain no-repeat;
		transition: rotate 0.2s;
	}

	.field select:open::picker-icon {
		rotate: 180deg;
	}

	.field select::picker(select) {
		max-height: 20rem;
		padding: 0.5rem 0;
		border: 1px solid var(--color-line);
		color: var(--color-white);
		background: var(--color-primary);
		box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.25);
		opacity: 0;
		transition: opacity 0.2s, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
	}

	.field select:open::picker(select) {
		opacity: 1;
	}

	@starting-style {
		.field select:open::picker(select) {
			opacity: 0;
		}
	}

	.field option {
		padding: 0.75rem 1.25rem;
		color: inherit;
		background: none;
		transition: color 0.2s, background-color 0.2s;
	}

	.field option:is(:hover, :focus-visible) {
		background: rgb(255 255 255 / 0.08);
	}

	.field option:checked {
		color: var(--color-secondary);
	}

	/* The first choice is the field's own label, shown fainter even while it is the chosen one. */
	.field option[value=""] {
		color: rgb(255 255 255 / 0.8);
	}

	.field option::checkmark {
		display: none;
	}
}

.field textarea {
	height: 11.875rem;
	resize: vertical;
}

/* The message shown above a form after it has been submitted. */
.form-notice {
	padding: 1rem 1.5rem;
	border: 1px solid;
}

/* Tabs: a row of buttons that each show one panel (main.js switches them).
   The negative margins make neighbouring borders overlap into a single line. */
.tabs__list {
	display: flex;
	flex-wrap: wrap;
	align-self: center;
	width: 100%;
	max-width: 56.125rem;
	padding: 0 1px 1px 0;
}

.tabs__tab {
	flex: 1 0 12rem;
	margin: 0 -1px -1px 0;
	color: var(--color-primary);
	background: transparent;
	cursor: pointer;
}

.tabs__tab:hover,
.tabs__tab[aria-selected="true"] {
	color: var(--color-white);
	background: var(--color-primary);
}

/* Amount: a small gold label with a large figure under it, e.g. "Amount Settled: £21,000". */
.amount {
	color: var(--color-secondary);
}

.amount strong {
	display: block;
	color: var(--color-white);
}

/* Figure: a large number in the heading font, e.g. "£21,000" or "£0". */
.figure {
	font-size: var(--fs-amount);
	letter-spacing: 0;
}

/* Quote: a gold quotation mark above a quote, for green backgrounds. */
.quote {
	color: rgb(255 255 255 / 0.8);
}

.quote img {
	width: 3.25rem;
	height: 2.375rem;
	margin-bottom: 2.875rem;
}

/* A quote cut to a few lines (.quote--clamped, the testimonials carousel) until its "Read more"
   button is pressed; main.js adds the button only where the text is longer. Only where the
   script runs (html.js, inc/enqueue.php): without it the whole quote shows. */
.js .quote--clamped .quote__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	overflow: hidden;
}

/* The button under a quote: plain text in gold, underlined on hover, like a link. */
.quote__more {
	margin-top: 1rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--color-secondary);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	cursor: pointer;
	transition: text-decoration-color 0.2s;
}

.quote__more:hover,
.quote__more:focus-visible {
	text-decoration-color: currentColor;
}

/* On a short screen (a small laptop, a phone on its side) the testimonials section, which fills the
   screen, has less room: a quote is cut to 5 lines and the carousel's controls sit closer. */
@media (max-height: 52rem) {
	.js .quote--clamped .quote__text {
		-webkit-line-clamp: 5;
	}

	.testimonials .carousel {
		gap: 2.5rem;
	}
}

/* Reveal: main.js gives the elements inside a .section--reveal section (the
   "Our work" section) this class and adds .is-visible as each comes into view,
   so its content fades up, in turn: the script sets the delay between elements
   that appear together, and removes both classes once an element has faded in.
   The transition belongs to the visible state alone, so an element goes hidden
   at once when it gets .reveal and fades up when it gets .is-visible. Without
   the script nothing is hidden; with reduced motion the script does nothing. */
.reveal {
	opacity: 0;
	translate: 0 1.5rem;
}

.reveal.is-visible {
	opacity: 1;
	translate: 0;
	transition: opacity 0.7s ease-out, translate 0.7s ease-out;
}

/* Faded word: a large, letter-spaced word that fades out towards the bottom,
   e.g. ALDERMAN. Where it is used sets its size and margins, and can set
   --faded-word-color for a stronger start to the fade. */
.faded-word {
	overflow: hidden;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.39em;
	text-align: right;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	background: linear-gradient(rgb(255 255 255 / 20%), #00000000 90%);
	background-clip: text;
}

/* Bullets: a list with a gold four-pointed star before each item. */
.bullets li {
	position: relative;
	padding-left: 1.625rem;
}

.bullets li + li {
	margin-top: 1.875rem;
}

.bullets li::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0;
	width: 1rem;
	height: 1.1875rem;
	background: var(--color-secondary);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 19'%3E%3Cpath d='M8 0l2.6 6.9L16 9.5l-5.4 2.6L8 19l-2.6-6.9L0 9.5l5.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Rows: a list whose items are separated by lines, with no space above the
   first item or below the last. --rows-padding sets the space around each
   item; .rows--closed keeps the line and the space under the last item too. */
.rows > li {
	padding-block: var(--rows-padding, 2.5rem);
	border-bottom: 1px solid var(--color-line);
}

.rows > li:first-child {
	padding-top: 0;
}

.rows:not(.rows--closed) > li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* Numbered row: a number beside a title, with the description under the title
   and the number centred on both. The columns variant moves the description
   into a column on the right, level with the title. */
.numbered-row {
	display: grid;
	grid-template-columns: 4.25rem 1fr;
	gap: 1rem 0;
	align-items: center;
}

.numbered-row__number {
	grid-row: span 2;
	font-size: var(--fs-h4);
	letter-spacing: 0;
}

.numbered-row p {
	grid-column: 2;
}

.numbered-row--columns {
	grid-template-columns: 4.25rem 1fr 34.375rem;
}

.numbered-row--columns .numbered-row__number {
	grid-row: auto;
}

.numbered-row--columns p {
	grid-column: auto;
}

/* Media fill: a picture as tall as the content beside it, cropped to fit. */
.media-fill {
	position: relative;
	min-height: 20rem;
}

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

/* Numbered list: items headed "01.", "02." … Each item draws the line under
   its number through the gap to the next column, and a vertical line in the
   gap to its left; the list clips whatever sticks out at the ends of a row. */
.numbered {
	--gap: clamp(2.5rem, 5.47vw, 5.1667rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-group) var(--gap);
	overflow: hidden; /* Browsers without clip (Safari before 16) */
	overflow: clip;
}

.numbered__item {
	display: flex;
	flex-direction: column;
	color: var(--color-grey);
}

.numbered__number {
	width: calc(100% + var(--gap));
	padding-bottom: 0.5625rem;
	border-bottom: 1px solid var(--color-grey);
	font-size: var(--fs-number);
	line-height: 1;
	color: var(--color-primary);
}

.numbered__body {
	position: relative;
	flex: 1;
	margin-top: 1.875rem;
}

.numbered__body::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--gap) / -2);
	border-left: 1px solid;
}

/* The items left over on the last row are centred by main.js, which starts the first of them
   further in. That one has nothing beside it, so it draws no line to its left. */
.numbered__item--row-start .numbered__body::before {
	content: none;
}

.numbered__body img {
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1.875rem;
}

.numbered__body p {
	margin-top: 1.25rem;
}

/* Carousel: a row of slides that scrolls sideways, with a counter, dots and
   arrows under it (main.js connects them). The row runs to both edges of the
   screen; --gutter lines the first slide up with the container. */
.carousel {
	display: flex;
	flex-direction: column;
	gap: var(--space-section);
}

.carousel__track {
	--gutter: max(var(--container-padding), calc((100% - var(--container-width)) / 2 + var(--container-padding)));
	display: flex;
	gap: 2.5rem;
	padding-inline: var(--gutter);
	overflow-x: auto;
	overflow-y: hidden; /* A sideways scroller scrolls up and down as well; nothing in the track may, or a wheel turn over a card would move the track instead of the page. */
	overscroll-behavior-x: contain; /* A swipe past the last slide does not move the page sideways. */
	scroll-padding-inline: var(--gutter);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

.carousel__slide {
	flex: none;
	width: min(50.75rem, 100%);
	scroll-snap-align: start;
}

.carousel__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 1.75rem;
}

.carousel__count {
	font-size: var(--fs-number);
	line-height: 1;
	letter-spacing: -0.02em;
}

/* The dots are 8px apart. The top margin drops them from the middle of the row to the middle of the numerals. */
.carousel__dots {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.875rem;
}

.carousel__dot {
	position: relative;
	width: 1.875rem;
	height: 0.25rem;
	padding: 0;
	border: 0;
	background: currentColor;
	cursor: pointer;
}

.carousel__dot[aria-current="true"] {
	background: var(--color-secondary);
}

/* A taller invisible area around each dot, so it is easy to press. */
.carousel__dot::before {
	content: "";
	position: absolute;
	inset: -0.75rem 0;
}

.carousel__arrows {
	display: flex;
	gap: 0.5rem;
	margin-left: auto;
}

/* Arrows are square buttons with a chevron in place of the usual arrow. */
.carousel__arrow {
	width: 4rem;
	height: 4rem;
	padding: 0;
	cursor: pointer;
}

.carousel__arrow::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

.carousel__arrow--prev::after {
	transform: scaleX(-1);
}

/* On a green background both arrows are outlines. */
.carousel__arrow.button--outline {
	border-color: var(--color-line);
}

/* Without a counter, the dots sit on the bottom edge. */
.carousel__controls:not(:has(.carousel__count)) .carousel__dots {
	align-self: flex-end;
	margin-top: 0;
}

/* Single: one slide fills the width of the container. */
.carousel--single .carousel__track {
	margin-inline: var(--gutter);
	padding-inline: 0;
	scroll-padding-inline: 0;
}

.carousel--single .carousel__slide {
	width: 100%;
}

/* Header
   ========================================================================== */
.site-header {
	position: relative;
	z-index: 100;
	height: var(--header-height);
	border-bottom: 1px solid var(--color-line);
	color: var(--color-white);
	background: var(--color-primary);
}

/* On a page that starts with a hero, the header is transparent and the hero slides up underneath it. */
.site-header:has(+ .site-main > .hero:first-child) {
	margin-bottom: calc(var(--header-height) * -1);
	background: transparent;
}

.site-header a {
	color: inherit;
	text-decoration: none;
}

.site-header__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

/* The site name as text, until a logo is uploaded: on one line, smaller on a phone. */
.site-title {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.custom-logo {
	width: auto;
	max-height: calc(var(--header-height) / 2);
}

.menu-toggle {
	position: relative;
	width: 2.8125rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	color: inherit;
	background: none;
	cursor: pointer;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.3s, background-color 0.3s;
}

.menu-toggle__icon {
	top: calc(50% - 1px);
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
	content: "";
}

.menu-toggle__icon::before {
	top: -0.6875rem;
}

.menu-toggle__icon::after {
	top: 0.6875rem;
}

/* Full-screen menu, opened by the toggle (main.js adds .menu-open to <html>).
   The list sits in the middle of the screen. An item with pages nested under
   it (a group) ends with an arrow; opened (main.js adds .is-open to it and
   .site-nav--expanded to the menu) the list moves to the left and its pages
   show in gold on the right. The menu covers the header band too, with no
   line under it (it drew one where the header's was until 28 October 2026,
   when the client asked for it to go). */
.site-nav {
	--color-line: rgb(var(--color-secondary-rgb) / 0.12);
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding-top: var(--header-height);
	overflow-y: auto;
	scrollbar-width: none;
	visibility: hidden;
	opacity: 0;
	color: rgb(255 255 255 / 0.9);
	background: var(--color-grey);
	transition: opacity 0.3s, visibility 0.3s;
}

/* On a short screen the menu scrolls, but no scrollbar is drawn. */
.site-nav::-webkit-scrollbar {
	display: none;
}

/* One column, or two once a group is open: the second is where its pages go. */
.site-nav__inner {
	--gap: clamp(2.5rem, 10.6vw, 10rem);
	position: relative;
	display: grid;
	flex: 1 0 auto;
	grid-template-columns: 1fr 0fr;
	column-gap: 0;
	padding: 2.5rem var(--container-padding);
	transition: grid-template-columns 0.3s, column-gap 0.3s;
}

.site-nav--expanded .site-nav__inner {
	grid-template-columns: 1fr 1fr;
	column-gap: var(--gap);
}

.site-nav__menu > li {
	border-bottom: 1px solid var(--color-line);
}

/* The items: the heading font, centred, with a group's arrow after its text.
   Once a group is open they slide to the left, with the arrow at the end of
   the row: each link is a grid of five tracks (space, text, space, arrow,
   space) and the spaces animate between the two states. While the list is
   centred the arrow's track is empty (the arrow's negative right margin takes
   back its width), so the text is centred exactly, like the items without an
   arrow, and the arrow hangs after it in the space to its right. */
.site-nav__menu > li > a {
	display: grid;
	grid-template-columns: 1fr auto 0fr auto 1fr;
	align-items: center;
	padding-block: 2.875rem;
	transition: color 0.2s, grid-template-columns 0.35s;
}

.site-nav__menu > li > a::before {
	content: "";
}

.site-nav--expanded .site-nav__menu > li > a {
	grid-template-columns: 0fr auto 1fr auto 0fr;
}

.site-nav__menu > li > a,
.site-nav__toggle {
	font-family: var(--font-heading);
	font-size: var(--fs-menu);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.site-nav__group::after,
.site-nav__toggle::after {
	content: "";
	grid-column: 4;
	width: 1.5rem;
	height: 0.625rem;
	margin-left: 1rem;
	background: var(--color-secondary);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M0 6h30M25 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.75;
	transition: opacity 0.2s;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--color-secondary);
}

/* Keyboard focus shows as the gold text and a gold line under the item, not the browser's ring. */
.site-nav a:focus-visible,
.site-nav__toggle:focus-visible {
	outline: none;
}

.site-nav__menu > li:has(:focus-visible) {
	border-color: var(--color-secondary);
}

.is-open > .site-nav__group::after,
.is-open > .site-nav__toggle::after,
.site-nav__group:hover::after,
.site-nav__toggle:hover::after {
	opacity: 1;
}

.site-nav__group::after {
	justify-self: start;
	margin-right: -2.5rem; /* Its width and its left margin, so its track is empty while the list is centred. */
	transition: opacity 0.2s, margin-right 0.35s;
}

.site-nav--expanded .site-nav__group::after {
	margin-right: 0;
}

/* A group whose link goes to a page gets an arrow button beside the link (main.js adds it). The
   row is then the same five-track grid, with the link in the text track and the button in the
   arrow's, taking no room of its own while the list is centred, like a group's arrow. */
.site-nav__menu > li:has(> .site-nav__toggle) {
	display: grid;
	grid-template-columns: 1fr auto 0fr auto 1fr;
	align-items: center;
	transition: grid-template-columns 0.35s;
}

.site-nav--expanded .site-nav__menu > li:has(> .site-nav__toggle) {
	grid-template-columns: 0fr auto 1fr auto 0fr;
}

.site-nav__menu > li:has(> .site-nav__toggle) > a {
	display: block;
	grid-column: 2;
	padding-inline: 1rem;
	margin-inline: -1rem; /* The padding widens what can be pressed without moving the text. */
}

.site-nav__menu > li:has(> .site-nav__toggle) > .sub-menu {
	grid-column: 1 / -1;
}

.site-nav__toggle {
	grid-column: 4;
	justify-self: start;
	display: flex;
	align-items: center;
	padding: 2.875rem 1rem;
	margin-right: -3.5rem; /* Its width and padding, so its track is empty while the list is centred. */
	border: 0;
	color: inherit;
	background: none;
	cursor: pointer;
	transition: margin-right 0.35s;
}

.site-nav--expanded .site-nav__toggle {
	margin-right: 0;
}

.site-nav__toggle::after {
	margin-left: 0;
}

/* A group's pages: hidden until it is open, then in the second column, level with the top of the list. */
.site-nav__menu .sub-menu {
	display: none;
}

.is-open > .sub-menu {
	display: block;
	position: absolute;
	top: 2.5rem;
	right: var(--container-padding);
	left: calc(50% + var(--gap) / 2);
}

/* The pages fade and slide in one after another, just behind the moving list. */
.is-open > .sub-menu > li {
	animation: site-nav-page 0.4s calc(0.1s + 0.06s * var(--n, 0)) both;
}

.site-nav__menu .sub-menu > li:nth-child(2) {
	--n: 1;
}

.site-nav__menu .sub-menu > li:nth-child(3) {
	--n: 2;
}

.site-nav__menu .sub-menu > li:nth-child(4) {
	--n: 3;
}

.site-nav__menu .sub-menu > li:nth-child(5) {
	--n: 4;
}

.site-nav__menu .sub-menu > li:nth-child(n + 6) {
	--n: 5;
}

@keyframes site-nav-page {
	from {
		opacity: 0;
		translate: 1rem 0;
	}
}

.site-nav__menu .sub-menu a {
	display: block;
	padding-block: 1.75rem;
	font-family: var(--font-heading);
	font-size: var(--fs-menu);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-secondary);
	transition: color 0.2s;
}

.site-nav__menu .sub-menu a:hover,
.site-nav__menu .sub-menu a:focus-visible {
	color: var(--color-white);
}

/* Visitors who prefer reduced motion get the two states without the movement. */
@media (prefers-reduced-motion: reduce) {
	.site-nav__inner,
	.site-nav__menu > li > a {
		transition-duration: 0s;
	}

	.is-open > .sub-menu > li {
		animation: none;
	}
}

/* The page cannot scroll under the opened menu, but the space for its scrollbar is kept (scrollbar-gutter),
   so nothing shifts sideways when the scrollbar goes and comes back. That strip is outside the menu, so
   the page's background behind it takes the menu's colour. The splash screen does the same (.splash-open). */
.menu-open {
	overflow: hidden;
	scrollbar-gutter: stable;
	background: var(--color-grey);
}

.menu-open .site-nav {
	visibility: visible;
	opacity: 1;
}

.menu-open .menu-toggle__icon {
	background: transparent;
}

.menu-open .menu-toggle__icon::before {
	transform: translateY(0.6875rem) rotate(45deg);
}

.menu-open .menu-toggle__icon::after {
	transform: translateY(-0.6875rem) rotate(-45deg);
}

/* Footer
   ========================================================================== */

/* The footer's content sits a little further in from the sides than the rest of the page (80px). */
.site-footer {
	--container-padding: clamp(1.25rem, 5.3vw, 5rem);
	padding-block: clamp(3rem, 4.9vw, 4.625rem) 2.5rem;
	color: var(--color-white);
	background: var(--color-primary);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--color-secondary);
}

.site-footer__top,
.site-footer__columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 3.5rem;
}

.site-footer__top {
	justify-content: space-between;
}

.site-footer__brand {
	margin-top: 0.625rem;
}

.site-footer__social {
	display: flex;
	gap: 2.375rem;
	margin-top: 2.75rem;
}

.site-footer__title {
	margin-bottom: 1.875rem;
	font-size: var(--fs-h4);
	font-weight: 600;
	color: var(--color-secondary);
}

.site-footer__list li + li {
	margin-top: 0.75rem;
}

/* The faded word ends at the right edge; the negative margin cancels the space after its last letter. */
.site-footer__word {
	margin: clamp(3rem, 8vw, 7.625rem) -0.39em 1px 0;
	font-size: min(10.58vw, 10rem);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-light-brown);
}

.site-footer__badges {
	display: flex;
	flex-wrap: wrap;
}

.site-footer__badges li + li {
	margin-left: 1.375rem;
	padding-left: 1.375rem;
	border-left: 1px solid;
}

/* Splash screen
   ========================================================================== */
/* A video over the whole page when the site opens (template-parts/splash.php, inc/splash.php),
   gone when it ends or "Skip" is pressed: main.js fades it out (.is-done) and removes it. It shows
   only where the script runs (html.js), and not on a page whose head script has decided against it
   (html.splash-done: the visit has seen it, or the visitor prefers reduced motion). Under a showing
   splash the page does not scroll (html.splash-open). Above everything else, the opened menu and
   the back-to-top button included. */
.splash {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: none;
	background: var(--color-primary);
	transition: opacity 0.5s, visibility 0.5s;
}

.js .splash {
	display: block;
}

.splash-done .splash {
	display: none;
}

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

.splash__skip {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
}

.splash.is-done {
	visibility: hidden;
	opacity: 0;
}

.splash-open {
	overflow: hidden;
	scrollbar-gutter: stable; /* The scrollbar's space is kept, so nothing shifts when the splash goes; see .menu-open. */
	background: var(--color-primary); /* That strip, outside the splash, in the splash's colour. */
}

/* Back to top
   ========================================================================== */

/* A green square with an upward arrow, fixed at the bottom right, shown once the page has been
   scrolled a screen's height (main.js adds .is-visible). It is a .button, so it turns gold on hover;
   the faint white border keeps it visible on green sections. It sits under the opened menu. */
.to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 90;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border-color: rgb(255 255 255 / 0.5);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s, visibility 0.3s, color 0.2s, background-color 0.2s, border-color 0.2s;
}

.to-top::after {
	rotate: -90deg;
}

.to-top.is-visible {
	visibility: visible;
	opacity: 1;
}

/* Section: hero
   ========================================================================== */
.hero {
	min-height: 100svh;
}

/* Leaves room for the transparent header that sits on top of the hero. */
.hero .cover__inner {
	padding-top: calc(var(--header-height) + var(--space-section));
}

/* The photo or video settles in as the page opens: a slow zoom out from 6% larger, unless the visitor prefers reduced motion. */
.hero .cover__media {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.hero .cover__media :is(img, video) {
		animation: hero-settle 1.6s ease-out both;
	}
}

@keyframes hero-settle {
	from {
		scale: 1.06;
	}
}

/* Keeps a long heading to two lines, as in the service page design. */
.hero h1 {
	max-width: 37.5rem;
}

.hero__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
}

.hero__intro {
	flex: 1 1 40rem;
}

.hero__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.hero__badges img {
	max-height: 3rem;
}

/* The review site's logo, its rating and the number of reviews stay together, in a row like the other badges. */
.hero__reviews {
	display: flex;
	align-items: center;
	gap: inherit;
}

/* A badge's link (hero.php): a block around the picture, so the link is the picture and no more. */
.hero__badge-link {
	display: block;
	cursor: pointer; /* The hand, as on any link, whatever the cursor is set to around it. */
}

/* The review site's link covers its logo and rating, and lays them out as its item does: in a row on
   a wide screen, under one another on a phone. */
.hero__reviews .hero__badge-link {
	display: flex;
	flex-direction: inherit;
	align-items: inherit;
	gap: inherit;
}

/* Section: statistics
   ========================================================================== */
.stats {
	padding-block: var(--space-group);
	background: var(--color-light-brown);
}

.stats__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
}

.stat {
	width: 15rem;
	text-align: center;
}

.stat__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-bottom: 0.75rem;
}

.stat__value {
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 0.85;
}

/* The small word under the figure, e.g. "Years". */
.stat__value small {
	display: block;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Section: about
   ========================================================================== */

/* The height of the photo in the design, so the text stays on its dark upper half. */
.about {
	min-height: 61.375rem;
}

.about .cover__media img {
	object-position: right center;
}

/* On the Service pages the photo lies under a deep green gradient, nearly solid on the left where the
   text is and lighter towards the right (the client's gradient of 28 October 2026), on every screen. */
.page-template-template-service .about {
	--cover-overlay: linear-gradient(90deg, rgb(var(--color-deep-green-rgb) / 0.96) 0%, rgb(var(--color-deep-green-rgb) / 0.85) 60%, rgb(var(--color-deep-green-rgb) / 0.55) 100%);
}

/* Section: our work
   ========================================================================== */
/* The two --text-width values are the widths of the note and of the text above the items. */
.work {
	--text-width: 45.5rem;
	--watermark-color: rgb(var(--color-primary-rgb) / 0.02);
}

.work .tabs__panel {
	--text-width: 56.125rem;
}

/* Section: cases
   ========================================================================== */

/* Grey, not the usual green, so the green cards stay visible when there is no photo. */
.cases {
	background: var(--color-grey);
}

.case-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.75rem;
	border-radius: 0.5rem;
	background: var(--color-primary);
}

.case-card .amount {
	margin-bottom: 4.125rem;
}

/* The title keeps the design's 32px on a phone too (its mobile design), instead of shrinking with the other h3s. */
.case-card h3 {
	font-size: 2rem;
}

.case-card__text {
	margin-block: 1rem 1.75rem;
}

/* The button sits at the bottom of the card, however short the text is. */
.case-card .button {
	margin-top: auto;
	border-color: var(--color-line);
}

/* Section: outcomes, and what it shares with the testimonials section
   ========================================================================== */
.outcomes,
/* The section fills the screen (100vh, or the small viewport height where a browser's bars take
   part of it): the header at the top, the carousel and its controls at the bottom, the space
   between them whatever the screen leaves. Taller content (a quote opened with "Read more")
   lets it grow. */
.testimonials {
	--watermark-color: rgb(255 255 255 / 0.01);
	--watermark-top: -0.191em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	min-height: 100svh;
}

.outcomes h2 {
	margin-bottom: clamp(4rem, 13.25vw, 12.5rem);
}

/* One testimonial: the case on the left, a gold line, the quote on the right. */
.outcome {
	display: flex;
	align-items: center;
	gap: 5rem;
}

.outcome__case {
	flex: 0 0 25rem;
	border: 0 solid rgb(var(--color-secondary-rgb) / 0.12);
	border-right-width: 1px;
	color: rgb(255 255 255 / 0.8);
}

.outcome__case .amount {
	margin-bottom: 2.75rem;
}

.outcome__client {
	max-width: 17.5rem;
	margin-top: 3rem;
}

/* Section: testimonials
   ========================================================================== */
.testimonials__header {
	--text-width: 35rem;
	margin-bottom: 4rem; /* The least space above the carousel; the section's height gives the rest. */
}



.testimonials__slide {
	width: min(33.75rem, 100%);
}

.testimonials__slide p {
	max-width: 28.75rem;
}

/* Section: access to justice, and what it shares with the newsletter section
   ========================================================================== */
.access,
.newsletter {
	text-align: center;
	color: var(--color-primary);
}

:is(.access, .newsletter) h2 {
	color: var(--color-grey);
}

.access {
	--text-width: 50rem;
	padding-block: clamp(4rem, 8.1vw, 7.625rem);
}

.access .text {
	margin-block: 1rem 5rem;
}

/* Section: enquiry
   ========================================================================== */
.enquiry {
	--split: 1fr 2fr;
	--text-width: 24.25rem;
	--watermark-color: rgb(255 255 255 / 0.03);
	--watermark-size: 1.5;
	--watermark-top: -0.238em;
	--watermark-left: 0.1295em;
}

.enquiry .split__intro {
	line-height: 1.4;
}

.enquiry__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 1.25rem;
	margin-top: 4.5rem;
}

.enquiry__form :is(.field--message, .form-notice, .button) {
	grid-column: 1 / -1;
}

.enquiry__form .button {
	justify-self: start;
	margin-top: clamp(1rem, 9.2vw, 8.6875rem);
}

/* Section: newsletter
   ========================================================================== */
.newsletter {
	--text-width: 45rem;
	--watermark-color: rgb(var(--color-primary-rgb) / 0.03);
	--watermark-size: 1.5;
	--watermark-top: -0.456em;
	--watermark-left: -0.3345em;
	background: var(--color-off-white);
}

.newsletter h2 + .text {
	margin-top: 1.875rem;
}

/* The email box and its button, joined together. They share the row unevenly
   (999 to 1) so the button keeps its own width, and each fills a row when they wrap. */
.newsletter__form {
	display: flex;
	flex-wrap: wrap;
	max-width: 45.375rem;
	margin: 3rem auto 1.25rem;
}

.newsletter__form .field {
	flex: 999 1 16rem;
}

.newsletter__form .field input {
	padding: 1.0625rem 1.5rem;
	border: 1px solid rgb(var(--color-grey-rgb) / 0.4);
}

.newsletter__form .button {
	flex: 1 0 auto;
}

.newsletter .form-notice {
	max-width: 45.375rem;
	margin: 3rem auto -1.5rem;
}

/* Section: features
   ========================================================================== */
.features {
	--split-gap: var(--space-group);
}

.features__list p {
	margin-top: 1rem;
}

/* Section: steps
   ========================================================================== */
.steps h2 {
	margin-bottom: clamp(4rem, 11.4vw, 10.8125rem);
}

/* Three steps to a row, with a shorter last row centred under it. */
.steps__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: clamp(3rem, 9.6vw, 9.0625rem);
	text-align: center;
}

.step {
	display: flex;
	flex: 0 0 max(33.333%, 16rem);
	flex-direction: column;
	align-items: center;
	padding-inline: 1rem;
}

.step__number {
	display: grid;
	place-items: center;
	width: 4.25rem;
	height: 4.25rem;
	margin-bottom: 1.125rem;
	border: 3px solid var(--color-secondary);
	border-radius: 50%;
	font-size: var(--fs-h4);
	line-height: 1;
	letter-spacing: 0;
	color: var(--color-primary);
	background: var(--color-white);
	/* The heading font's figures are old-style ones that sit low in their line box (3, 4 and 5 hang below
	   the baseline), so a line box centred in the circle leaves the numeral 4 to 8px low. Padding under
	   it lifts the box by half that: measured in WebKit on 28 October 2026, every numeral is then
	   within 2px of the centre. The font file has no lining figures to use instead. */
	padding-bottom: 0.35em;
}

.step p {
	max-width: 23.75rem;
	margin-top: 1.25rem;
}

/* Section: informed consent
   ========================================================================== */
.informed {
	--split-gap: 2rem;
	--watermark-color: rgb(var(--color-primary-rgb) / 0.02);
	--watermark-size: 1.05;
	--watermark-top: -0.305em;
	--watermark-left: 0.228em;
	color: var(--color-grey);
}

/* The design leaves a tall gap between the heading and the text under it. */
.informed .split__intro {
	gap: clamp(2.5rem, 13.2vw, 12.5rem);
}

/* The list ends level with the text in the first column. */
.informed__list {
	align-self: end;
}

.informed__list h3 {
	margin-bottom: 2rem;
}

/* Section: fees
   ========================================================================== */
.fees {
	--split: 14fr 15fr;
	--text-width: 37.5rem;
}

/* The text sits level with the middle of the heading opposite. */
.fees .text {
	margin: 0.75rem 0 0 auto;
}

.fees__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5.2rem 2.5rem;
	margin-block: clamp(3rem, 10.5vw, 9.9375rem) clamp(0rem, 2.5vw, 2.375rem);
	color: var(--color-grey);
}

.fees__list .small {
	max-width: 19rem;
	margin-top: 1.4rem;
}

/* Section: claim ("Dedicated to establishing your claim")
   ========================================================================== */
.claim {
	--split: 712fr 600fr;
	--split-gap: 5rem;
	--text-width: 37.5rem;
	color: var(--color-grey);
}

/* The photo keeps the shape it has in the design, and the text column is as tall as it. */
.claim__media img {
	width: 100%;
	aspect-ratio: 356 / 411;
	object-fit: cover;
}

/* Section: team ("Led by senior specialists")
   ========================================================================== */

/* Two square photos side by side, centred. */
.team__photos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem;
}

.team__photos li {
	flex: 0 1 31rem;
}

.team__photos img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* The button is centred, a little further from the photos than the standard group space. */
.team .button {
	align-self: center;
	margin-top: 1.25rem;
}

/* Section: principles
   ========================================================================== */
.principles {
	color: var(--color-grey);
}

/* Section: location ("Find us in the heart of Manchester")
   ========================================================================== */
.location {
	--split: 680fr 712fr;
	color: var(--color-grey);
}

/* The photo keeps the shape it has in the design; the details beside it end level with its bottom. */
.location__media img {
	width: 100%;
	aspect-ratio: 712 / 605;
	object-fit: cover;
}

/* The details: a title with its value under it, two to a row when there is room (never more). */
.location__details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(16rem, 40%), 1fr));
	gap: 3.5rem 1rem;
	width: 100%;
}

.location__details dt {
	margin-bottom: 1.25rem;
	font-size: var(--fs-h4);
}

.location__details dd {
	margin: 0;
}

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

.location__details a:hover,
.location__details a:focus-visible {
	color: var(--color-secondary);
}

/* Section: reasons ("How Alderman outperforms other solicitors")
   ========================================================================== */

/* The rows are tighter than elsewhere, and the list ends on a line, level with the photo. */
.reasons {
	--split: 619fr 694fr;
	--split-gap: 5rem;
	--rows-padding: 1.75rem;
}

/* Page: not found (404.php)
   ========================================================================== */

/* Fills the screen under the header, with everything in the middle of it. */
.not-found {
	--text-width: 37.5rem;
	--watermark-color: rgb(var(--color-primary-rgb) / 0.02);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100svh - var(--header-height));
	text-align: center;
}

/* The error code: gold, close above the heading. */
.not-found__code {
	margin-bottom: 1.25rem;
	color: var(--color-secondary);
}

/* Page: content (page.php and the Content template)
   ========================================================================== */

/* Intro: the green band at the top, with the page's title, a short text and the date it was last changed. */
.page-intro {
	--text-width: 45rem;
	--watermark-color: rgb(255 255 255 / 0.03);
	--watermark-top: -0.35em;
}

.page-intro .text {
	margin-top: 1.875rem;
}

.page-intro__date {
	margin-top: 2.5rem;
	color: var(--color-secondary);
}

/* The text sits in a column no wider than is comfortable to read. */
.page-content .entry {
	max-width: 50rem;
}

/* Page: case study (single-case_study.php)
   ========================================================================== */

/* Banner: the case study's photo, darkened, with the small line and the title centred on it. */
.case-hero {
	--cover-overlay: rgb(0 0 0 / 0.45);
	min-height: clamp(18rem, 30vw, 28rem);
}

.case-hero .cover__inner {
	align-items: center;
	justify-content: center;
	gap: 1rem;
	text-align: center;
}

.case-hero h1 {
	max-width: 50rem;
	font-size: var(--fs-h2);
}

.case-hero__label {
	color: var(--color-secondary);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Overview: the heading with the facts of the case in a row under it, then the story beside the form. */
.case-overview__header {
	margin-bottom: var(--space-group);
}

.case-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1.5rem 2rem;
	max-width: 56rem;
	margin: 2.5rem auto 0;
	text-align: center;
}

.case-facts dt {
	font-weight: 600;
}

.case-facts dd {
	margin: 0.25rem 0 0;
	color: var(--color-primary);
}

.case-overview__body {
	--split: 1fr 25rem;
	--split-gap: var(--space-group);
	align-items: start;
}

/* The links to the previous and next case study keep their own width, rather than sharing the row. */
.case-nav {
	margin-top: var(--space-group);
}

.case-nav .button {
	flex: 0 1 auto;
	min-width: 13.5rem;
}

/* The form, in a green card like the enquiry section's background, with one field per row. */
.case-form {
	padding: 2rem;
	border-radius: 0.5rem;
	color: var(--color-white);
	text-align: center;
	background: var(--color-primary);
}

.case-form h2 {
	font-size: var(--fs-h3);
}

.case-form .text {
	margin-top: 1rem;
}

.case-form .enquiry__form {
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 2rem;
	text-align: left;
}

.case-form .enquiry__form .button {
	justify-self: stretch;
	margin-top: 0.5rem;
}

/* Small screens
   ========================================================================== */
@media (max-width: 60rem) {
	/* The statistics, as in their phone design: three small ones in a row, each with its icon and
	   figure side by side and the description under them. */
	.stats {
		padding-block: 1rem;
	}

	.stats__list {
		align-items: flex-start;
		gap: 1rem;
	}

	.stat {
		flex: 1 1 0;
		width: auto;
	}

	.stat__figure {
		gap: 0.5rem;
		margin-bottom: 0.5rem;
	}

	.stat__figure img {
		width: auto;
		height: 1.875rem;
	}

	.stat__value {
		font-size: 1.5rem;
	}

	.stat__value small {
		font-size: 0.625rem;
	}

	.stat .text {
		font-size: 0.75rem;
	}

	/* Every piece of body copy under a heading is the one body size (15px): the "small" and "lead"
	   sizes, a step down and a step up from body text on a wide screen, would otherwise both be
	   larger than it here (16px and 19px). */
	.small,
	.text--lead {
		font-size: var(--fs-body);
	}

	/* Two-column sections become one column. */
	.split {
		grid-template-columns: 1fr;
		gap: var(--space-group);
	}

	/* One field per row, closer together, with a shorter message box and the button right under it
	   filling the width, so the fields and the button fit on one screen. */
	.enquiry__form {
		grid-template-columns: 1fr;
		gap: 1rem;
		margin-top: 2rem;
	}

	.field textarea {
		height: 6.5rem;
	}

	.enquiry__form .button {
		justify-self: stretch;
		margin-top: 0.5rem;
	}

	/* The opened menu stays one column; a group's pages open under its item, indented. */
	.site-nav--expanded .site-nav__inner {
		grid-template-columns: 1fr;
		column-gap: 0;
	}

	.site-nav__menu > li > a,
	.site-nav__toggle {
		padding-block: 1.5rem;
	}

	.is-open > .sub-menu {
		position: static;
		padding: 0 0 1rem 1.5rem;
	}

	.site-nav__menu .sub-menu a {
		padding-block: 0.75rem;
	}

	/* A smaller logo and menu button in the header: the button's three lines sit closer, so the
	   cross they form when the menu is open moves them by the same smaller distance. */
	.custom-logo {
		max-height: 1.375rem;
	}

	.menu-toggle {
		width: 2rem;
		height: 1.125rem;
	}

	.menu-toggle__icon::before {
		top: -0.5rem;
	}

	.menu-toggle__icon::after {
		top: 0.5rem;
	}

	.menu-open .menu-toggle__icon::before {
		transform: translateY(0.5rem) rotate(45deg);
	}

	.menu-open .menu-toggle__icon::after {
		transform: translateY(-0.5rem) rotate(-45deg);
	}

	/* The footer is shorter: less space around and between its parts, smaller text and titles, and the
	   four columns in two pairs side by side (Explore beside the address, the hours beside the contact
	   details) instead of one under another. */
	.site-footer {
		padding-block: 2.5rem 1.5rem;
		font-size: 0.875rem;
	}

	.site-footer__top {
		gap: 2rem;
	}

	.site-footer__social {
		gap: 1.75rem;
		margin-top: 1.5rem;
	}

	.site-footer__columns {
		display: grid;
		grid-template-columns: 1fr minmax(0, auto); /* The right pair is as wide as the email address when there is room, and narrower (the address breaking after its @) when there is not. */
		gap: 1.75rem 1.5rem;
	}

	.site-footer__title {
		margin-bottom: 0.75rem;
		font-size: 1.375rem;
	}

	.site-footer__list li + li {
		margin-top: 0.375rem;
	}

	.site-footer__word {
		margin-top: 2rem;
	}

	.site-footer__bottom {
		gap: 0.75rem;
		padding-top: 1.25rem;
	}

	/* The statements in the footer's bottom bar stack, without the lines between them. */
	.site-footer__badges {
		flex-direction: column;
	}

	.site-footer__badges li + li {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}

	/* The case goes above the quote, and the gold line runs between them, with less space
	   throughout: under the heading, between the amount, title and client, around the line and
	   under the quotation mark. */
	.outcomes h2 {
		margin-bottom: 2.5rem;
	}

	.outcome {
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
	}

	.outcome__case {
		flex-basis: auto;
		padding-bottom: 1.5rem;
		border-width: 0 0 1px;
	}

	.outcome__case .amount {
		margin-bottom: 1.25rem;
	}

	.outcome__client {
		margin-top: 1rem;
	}

	.quote img {
		margin-bottom: 1.25rem;
	}

	/* A carousel's controls sit closer under its slides, on two rows at most: the counter and the
	   arrows share the first and the dots take the second, instead of the three rows they fell into
	   once the dots no longer fitted beside the counter. The counter and the arrows are smaller. */
	.carousel {
		gap: 2rem;
	}

	.carousel__controls {
		gap: 1rem;
	}

	.carousel__count {
		font-size: 2rem;
	}

	.carousel__count ~ .carousel__dots {
		order: 1;
		flex-basis: 100%;
		margin-top: 0;
	}

	.carousel__arrow {
		width: 3rem;
		height: 3rem;
	}

	/* A step (how dental negligence is established) takes the whole row, instead of the 256px it kept
	   from the three-to-a-row layout, which squeezed its text into 224px of a 350px row. */
	.step {
		flex-basis: 100%;
	}

	/* A smaller circle for the step number: 52px with a 2px ring and a 22px numeral, instead of 68px, 3px and 30px. */
	.step__number {
		width: 3.25rem;
		height: 3.25rem;
		margin-bottom: 1rem;
		border-width: 2px;
		font-size: 1.375rem;
	}

	/* The back-to-top button is smaller and closer to the corner. */
	.to-top {
		right: 1rem;
		bottom: 1rem;
		width: 2.5rem;
		height: 2.5rem;
	}

	/* The text no longer fits on the dark half of the photo, so the photo is darkened instead. */
	.about {
		--cover-overlay: rgb(0 0 0 / 0.45);
		min-height: 0;
	}

	/* A picture gets a fixed shape once the content it filled beside is no longer there. */
	.media-fill {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.fees .text {
		margin: 0;
	}

	/* The contact details, one under another, sit closer to the heading and to each other, with
	   smaller titles closer to their values. */
	.location .split__intro {
		gap: 1.5rem;
	}

	.location__details {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.location__details dt {
		margin-bottom: 0.5rem;
		font-size: 1.375rem;
	}

	/* A numbered row's description moves under its title. */
	.numbered-row--columns {
		grid-template-columns: 4.25rem 1fr;
	}

	.numbered-row--columns .numbered-row__number {
		grid-row: span 2;
	}

	.numbered-row--columns p {
		grid-column: 2;
	}

	/* The numbered list is tighter: a smaller icon, less space around it and less between the items. */
	.numbered {
		row-gap: 2rem;
	}

	.numbered__body {
		margin-top: 1.25rem;
	}

	.numbered__body img {
		width: 1.75rem;
		height: 1.75rem;
		margin-bottom: 1rem;
	}

	.numbered__body p {
		margin-top: 0.75rem;
	}

	/* The cases section is shorter: less space under its heading, a card with less padding and
	   less space between the amount, title, text and button. */
	.cases .cover__inner {
		gap: 2rem;
	}

	.case-card {
		padding: 1.25rem;
	}

	.case-card .amount {
		margin-bottom: 1.25rem;
	}

	.case-card__text {
		margin-block: 0.75rem 1.25rem;
	}

	/* The call to action's button fills the width, closer under the text. */
	.access .text {
		margin-bottom: 2rem;
	}

	.access .button {
		width: 100%;
	}

	/* A case study: a lower banner, the facts in two columns and the form card with less padding. */
	.case-hero {
		min-height: 16rem;
	}

	.case-facts {
		grid-template-columns: repeat(2, 1fr);
	}

	.case-form {
		padding: 1.25rem;
	}

	/* The newsletter form, as in its phone design: the email field is a line to write on, with a
	   grey placeholder, and the button fills the width under it. */
	.newsletter__form {
		flex-direction: column;
		gap: 1rem;
		margin-top: 2.5rem;
	}

	.newsletter__form :is(.field, .button) {
		flex: none;
	}

	.newsletter__form .field input {
		padding: 0.75rem 0.5rem;
		border-width: 0 0 1px;
		text-align: left;
	}

	.newsletter__form ::placeholder {
		color: rgb(var(--color-grey-rgb) / 0.55);
	}

	/* The hero, as in its phone design: the text moves up under the heading, and the badges and
	   buttons stay at the bottom. Its two rows dissolve, so the heading, text, badges and buttons
	   are the inner box's own items, in that order. */
	.hero .cover__inner {
		justify-content: flex-start;
		gap: 1.75rem;
	}

	.hero__bottom,
	.hero__intro {
		display: contents;
	}

	.hero__badges,
	.hero .actions {
		order: 1;
	}

	/* The badges run the other way round (the review site first), smaller, with the review site's
	   logo, rating and number of reviews under one another. They never wrap: each gets at most a
	   third of the row (less its two gaps), and its pictures scale down to fit, so the three
	   always share one line whatever size the uploaded pictures are. */
	.hero__badges {
		flex-direction: row-reverse;
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: 1.25rem;
		margin-top: auto;
	}

	.hero__badges > li {
		max-width: calc((100% - 2.5rem) / 3);
	}

	.hero__badges img {
		max-height: 2.5rem;
	}

	.hero__reviews {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.hero__reviews-count {
		font-size: 0.625rem;
	}

	.hero .actions {
		margin-top: 1rem;
	}
}