/* =====================================================================
   aes-pages.css
   Part of the AES child theme. The non-product pages built with the "aes-page" styling.
   Moved out of style.css (3.22.363) without changes, in the same order.
   Loaded by functions.php (aes_page_styles) on: every normal page except the basket and checkout, blog posts, and the brand pages. The basket and checkout get it only if their theme-options HTML uses "aes-page" or a UX block.
   It always loads after style.css, so the order of the rules is as before.
   Sections: 19, 20, 21, 23, 24, 25, 27, 29, 30, 31, 32, 33, 34, 35, 36
   ===================================================================== */

/* =====================================================================
   19. New content pages: shared rules
   Every rebuilt content (non-product) page has the class "aes-page" on
   its row, so these rules only reach pages that have been rebuilt.
   Rules for one particular page go in a numbered section of their own
   after this one (20 onwards).
   ===================================================================== */

/* ---------- 19.1 Gaps, colours and the space around the page ---------- */

/* The gaps and colours are set once here. Every rule in sections 19 onwards takes its spacing
   from these, so every rebuilt page is spaced the same way. Each gap is the space you can see,
   from the last thing visible to the first thing visible in what follows (see 19.2).
   Small gap (10px): between identical things, such as one row and the next.
   Medium gap (20px): between different things inside a section, and the space inside a box.
   Heading gap (30px): between a heading and what follows it, as on the product page.
   Section gap (30px on phones and tablets, 40px on desktop): between the sections of a page
   and under the header.
   Column gap (25px): between two columns side by side, the same as between the gallery and
   the buy column on the product page. */
.aes-page {
	--aes-pale: #e7f1f8;
	--aes-pale-hover: #d9e9f4;
	--aes-grey: #f4f4f4;
	--aes-gap-s: 10px;
	--aes-gap-m: 20px;
	--aes-gap-head: 30px;
	--aes-gap: 30px;
	--aes-gap-col: 25px;
	padding-top: calc(var(--aes-gap) - 15px);
	padding-bottom: 1.5px;
}

/* Above the page. Up to 991px wide the theme leaves 15px under the header, so the page adds
   one section gap less 15px; from 992px it adds the whole gap (in 19.8).
   Below the page. The footer keeps 32px above itself. On phones and tablets the space from the
   last line of text to the footer's grey matches the space from the top of the grey down to
   "Help & advice" (measured from captures, October 2026): 37px on phones, so the page adds
   1.5px, and 47px on tablets, so the page adds 15px (in 19.8). On desktop the page adds 20px (in 19.8),
   which makes 52px: the same as on the product page, where the accordion has 20px under it. */

/* A stack spaces everything directly inside it by the section gap. When a stack sits beside a
   taller column its rows stay together at the top, rather than spreading out to fill it. */
.aes-page .aes-stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: var(--aes-gap);
}

/* ---------- 19.2 Text blocks ---------- */

/* A block is a heading with whatever belongs under it. Everything directly inside a block sits
   a medium gap below the thing before it, except the first thing under a heading. The space is set above each item, so an item that is
   hidden leaves none behind. */
.aes-page .aes-block > * {
	margin-top: 0;
	margin-bottom: 0;
}

.aes-page .aes-block > * + * {
	margin-top: var(--aes-gap-m);
}

/* Whatever follows a heading sits a heading gap below it */
.aes-page .aes-block > :is(h1, h2) + * {
	margin-top: var(--aes-gap-head);
}

/* WordPress can leave an empty paragraph around a form or shortcode */
.aes-page .aes-block > p:empty {
	display: none;
}

/* A block that a link jumps to (an address ending in #contact-form or #details, say) stops 70px
   short of the top of the screen, so its heading is not hidden under the fixed header on
   phones */
.aes-page .aes-block[id] {
	scroll-margin-top: 70px;
}

/* Headings and paragraphs are trimmed to their lettering. A line of text carries empty space
   above and below the letters, which made a gap beside text look 4 to 9px bigger than the
   same gap beside a box. The four figures below take that space off (measured from captures
   of the contact page, October 2026): a heading is trimmed from the top of its tall letters to
   the line the letters sit on, and a paragraph from the top of its tall letters to the bottom
   of its tails. They only hold for the line heights set here, so the two are kept together. */
.aes-page .aes-block > :is(h1, h2) {
	line-height: 1.3;
}

.aes-page .aes-block > p {
	line-height: 1.5;
}

.aes-page .aes-block > :is(h1, h2, p)::before,
.aes-page .aes-block > :is(h1, h2, p)::after {
	content: "";
	display: table;
}

.aes-page .aes-block > :is(h1, h2)::before {
	margin-bottom: -0.223em;
}

.aes-page .aes-block > :is(h1, h2)::after {
	margin-top: -0.272em;
}

.aes-page .aes-block > p::before {
	margin-bottom: -0.27em;
}

.aes-page .aes-block > p::after {
	margin-top: -0.23em;
}

.aes-page .aes-small {
	font-size: 14px;
	color: #3d3d3d;
}

/* ---------- 19.3 Action rows ---------- */

/* Links with a title, a short note and an arrow, in the same sizes as the route rows on
   the phone front page. The rows in a set are a small gap apart. */
.aes-page .aes-actions {
	display: grid;
	gap: var(--aes-gap-s);
	padding: 0;
	list-style: none;
}

.aes-page .aes-actions > li {
	margin: 0;
	padding: 0;
}

.aes-page .aes-action {
	position: relative;
	display: block;
	height: 100%;
	padding: 12px 40px 12px 14px;
	background: var(--aes-pale);
	text-decoration: none;
}

.aes-page .aes-action:hover,
.aes-page .aes-action:focus-visible {
	background: var(--aes-pale-hover);
}

.aes-page .aes-action::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	border-top: 1.5px solid #141414;
	border-right: 1.5px solid #141414;
	transform: translateY(-50%) rotate(45deg);
}

.aes-page .aes-action__title {
	display: block;
	font-size: 16px;
	line-height: 1.3;
	color: #141414;
}

.aes-page .aes-action__note {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: #3d3d3d;
	overflow-wrap: anywhere;
}

/* Outlined rows: white with a grey outline, for links that are less important than the
   coloured rows. The outline darkens and thickens on hover, as on the front page buttons. */
.aes-page .aes-action--outline,
.aes-page .aes-action--outline:hover,
.aes-page .aes-action--outline:focus-visible {
	background: #fff;
}

.aes-page .aes-action--outline {
	box-shadow: inset 0 0 0 1px #5c5c5c;
}

.aes-page .aes-action--outline:hover,
.aes-page .aes-action--outline:focus-visible {
	box-shadow: inset 0 0 0 2px #141414;
}

/* A pair of rows side by side, half the width each. Where a half would be narrower than
   240px (phones, and the narrowest desktop windows), they stack at full width. */
.aes-page .aes-actions--pair {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* A note under a set of rows, or under a table, starts in line with the text inside the rows,
   not with their left edge. Under a table every note after it does, not only the first. */
.aes-page .aes-actions + .aes-small,
.aes-page .aes-table ~ .aes-small {
	padding: 0 14px;
}

/* A row that states a fact and is not a link: no arrow, and no change on hover */
.aes-page .aes-action--static {
	padding-right: 14px;
}

.aes-page .aes-action--static::after {
	content: none;
}

.aes-page .aes-action--static:hover {
	background: var(--aes-pale);
}

/* ---------- 19.4 Forms (Ninja Forms) ---------- */

/* Ninja Forms spaces a form generously by default: 25px under every field, plus space of its
   own around each label. On a rebuilt page a form uses the page's gaps instead: a small gap
   from a label to its field, and a medium gap from one field to the next, before a tick box
   and before the send button. */

/* Divider fields are not shown. They are drawn as a white line, so they only ever acted as
   spacers, and each one added about 40px. */
.aes-page .hr-container {
	display: none;
}

/* The "Fields marked with an * are required" line: trimmed to its lettering like a paragraph
   (see 19.2), with a medium gap under it */
.aes-page .nf-before-form-content {
	margin: 0 0 var(--aes-gap-m);
}

.aes-page .nf-form-fields-required {
	line-height: 1.5;
}

/* A medium gap under each field. Nothing is left under the send button: whatever follows the
   form sets its own gap. */
.aes-page .nf-field-container {
	margin-bottom: var(--aes-gap-m);
}

.aes-page .nf-field-container.submit-container {
	margin-bottom: 0;
}

/* A tick box row carries 4px of its own space above and below (measured from a capture of the
   contact form), so it is moved up 4px and has 4px less under it. That leaves a medium gap
   either side of it. */
.aes-page .nf-field-container.checkbox-container {
	margin-top: -4px;
	margin-bottom: calc(var(--aes-gap-m) - 4px);
}

/* The send button has an empty label above it, which Ninja Forms still gives 10px */
.aes-page .nf-field-container.submit-container .nf-field-label {
	margin: 0;
}

/* A label above a field: trimmed to its lettering like a paragraph, and a small gap above
   the field */
.aes-page .label-above .nf-field-label {
	margin-bottom: var(--aes-gap-s);
}

.aes-page .label-above .nf-field-label label {
	display: block;
	margin: 0;
	font-weight: 400;
	line-height: 1.5;
}

.aes-page .nf-form-fields-required::before,
.aes-page .nf-form-fields-required::after,
.aes-page .label-above .nf-field-label label::before,
.aes-page .label-above .nf-field-label label::after {
	content: "";
	display: table;
}

.aes-page .nf-form-fields-required::before,
.aes-page .label-above .nf-field-label label::before {
	margin-bottom: -0.27em;
}

.aes-page .nf-form-fields-required::after,
.aes-page .label-above .nf-field-label label::after {
	margin-top: -0.23em;
}

/* A message box is set on a line of text by default, which leaves a few pixels under it */
.aes-page .nf-field-element textarea {
	display: block;
	margin: 0;
}

/* The empty space Ninja Forms keeps under each field for a character count is not shown.
   An error message, when there is one, sits 5px under its field. */
.aes-page .nf-input-limit:empty {
	display: none;
}

.aes-page .nf-error-msg {
	margin-top: 5px;
}

/* The send button on a form fills the width of the form, and is the same height as the
   buttons on the front page, so it is easy to hit on a phone */
.aes-page .submit-container .nf-field-element {
	width: 100%;
}

.aes-page .submit-container :is(input[type="submit"], input[type="button"], button) {
	display: block;
	width: 100%;
	min-height: 46px;
	margin-left: 0;
	margin-right: 0;
}

/* From tablet width the send button is only as wide as its words, not the whole form. On a
   phone it keeps the full width so it is easy to hit. */
@media (min-width: 550px) {
	.aes-page .submit-container .nf-field-element {
		width: auto;
	}

	.aes-page .submit-container :is(input[type="submit"], input[type="button"], button) {
		width: auto;
		min-width: 140px;
	}
}

/* ---------- 19.5 Two columns ---------- */

/* A split holds two parts, written in the order they appear on a phone: the left column, then
   the right. Each part is a block, or a stack of blocks. On phones and tablets the two follow one
   another, a section gap apart; on desktop (in 19.8) they sit side by side. */
.aes-page .aes-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aes-gap);
}

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

/* A list of things, each with a short detail and a price: three cells in every row, the thing,
   the detail and the price. Rows are told apart by shading every other one, not by lines, so a
   table does not compete with the lines of an accordion beside it. The text in a shaded row
   starts 14px in, in line with the text in the pale blue rows.
   Where the table is narrow (a phone, or the left column on a smaller desktop) the detail sits
   under the thing in smaller type, and the price is on the right. Where the table has 500px or
   more the three sit on one line, in columns that are the same width in every row. What is
   measured is the block round the table, so the layout follows the room the table really has,
   not the width of the screen. */
.aes-page .aes-block:has(> .aes-table) {
	container-type: inline-size;
}

.aes-page .aes-table,
.aes-page .aes-table tbody {
	display: block;
	width: 100%;
}

.aes-page .aes-table tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"name price"
		"detail .";
	column-gap: 15px;
	padding: 12px 14px;
}

.aes-page .aes-table tr:nth-child(odd) {
	background: var(--aes-grey);
}

.aes-page .aes-table td {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	color: #141414;
	font-size: 15px;
	line-height: 1.4;
}

.aes-page .aes-table td:nth-child(1) {
	grid-area: name;
}

.aes-page .aes-table td:nth-child(2) {
	grid-area: detail;
	font-size: 13px;
	color: #3d3d3d;
}

.aes-page .aes-table td:nth-child(3) {
	grid-area: price;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

@container (min-width: 500px) {

	/* With room for it the list is a real table, so the detail and the price each start in the
	   same place in every row, and the same space comes after the longest thing in each of the
	   first two columns. The price column takes up the rest of the width, and its text
	   starts at the left of it. The text in the first column starts 14px in, as before. */
	.aes-page .aes-table {
		/* The gap after the first two columns, and the same again after the last, is a third of
		   what is left once the text is in (about 400px of it), so the three gaps are even and
		   fill the table; never less than 40px, never more than 130px */
		--aes-table-gap: clamp(40px, calc((100cqw - 400px) / 3), 130px);
		display: table;
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}

	.aes-page .aes-table tbody {
		display: table-row-group;
	}

	.aes-page .aes-table tr {
		display: table-row;
		padding: 0;
	}

	.aes-page .aes-table td {
		display: table-cell;
		padding: 12px var(--aes-table-gap) 12px 0;
		vertical-align: top;
	}

	.aes-page .aes-table td:nth-child(1) {
		padding-left: 14px;
		white-space: nowrap;
	}

	.aes-page .aes-table td:nth-child(2) {
		font-size: 15px;
		white-space: nowrap;
	}

	.aes-page .aes-table td:nth-child(3) {
		width: 100%;
		padding-right: 14px;
		text-align: left;
	}

}

/* ---------- 19.7 Accordions ---------- */

/* The site's accordion (section 4), fitted to these pages: a line above the first item, so the
   accordion has a top edge to measure gaps from; titles and text start at the column's left
   edge, in line with the headings; and the page's gaps inside an open item. */
.aes-page .accordion {
	border-top: 1px solid #b0b0b0;
}

.aes-page a.accordion-title.plain {
	padding-left: 0;
}

.aes-page .accordion-inner {
	padding: 16px 0;
}

.aes-page .accordion-inner > * {
	margin-top: 0;
	margin-bottom: 12px;
}

.aes-page .accordion-inner > :last-child {
	margin-bottom: 0;
}

.aes-page .accordion-inner > p:empty {
	display: none;
}

.aes-page .accordion-inner ul {
	padding: 0;
}

.aes-page .accordion-inner li {
	margin: 0 0 6px 1.2em;
}

.aes-page .accordion-inner img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
}

/* The row of payment logos is a wide, thin picture. It is shown at 380px, not stretched to the
   width of the accordion. */
.aes-page .accordion-inner img[src*="payments-v2"] {
	width: 380px;
	max-width: 100%;
}

/* ---------- 19.8 Media queries ---------- */

/* Tablet (550px to 849px): the page is wide enough for more space between things than on a
   phone, so every gap is a fifth larger (October 2026), and the gap between sections is the
   desktop one. Everything on a rebuilt page takes its spacing from these five figures. */
@media (min-width: 550px) and (max-width: 849px) {

	.aes-page {
		--aes-gap-s: 12px;
		--aes-gap-m: 24px;
		--aes-gap-head: 36px;
		--aes-gap: 40px;
		padding-bottom: 15px;
	}

}

/* Desktop (850px and up) */
@media (min-width: 850px) {

	.aes-page {
		--aes-gap: 40px;
		padding-bottom: 20px;
	}

	/* A split: the two parts side by side, a column gap apart */
	.aes-page .aes-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--aes-gap-col);
	}

	/* The page heading at the top of the left column is larger than the heading at the top of
	   the right column, so once both are trimmed it is a little taller. The right-hand heading
	   is moved down by the difference (0.805 of the difference between the two font sizes),
	   which puts the two headings on the same line and starts what follows them level. */
	.aes-page .aes-split > :nth-child(2) > h2:first-child,
	.aes-page .aes-split > :nth-child(2) > :first-child > h2:first-child {
		font-size: 1.4rem;
		margin-top: calc(0.805 * (1.6rem - 1.4rem));
	}

}

/* Desktop (992px and up): the theme no longer leaves 15px under the header */
@media (min-width: 992px) {

	.aes-page {
		padding-top: var(--aes-gap);
	}

}

/* =====================================================================
   20. Contact page
   Rebuilt October 2026. Once the new page is live it no longer uses two
   older rules in section 14: .location (the mint address boxes) and
   .form_bg (the grey form column). Check no other page uses them before
   they are removed.
   ===================================================================== */

/* Phones and tablets: the action rows, then the form, then the offices, then the questions.
   When "Send us a message" jumps down to the form, its heading is kept clear of the fixed header
   by the rule in 19.2. The form and the questions share a wrapper, for the desktop layout below.
   Here the wrapper is taken out of the layout (display: contents), so the form and the
   questions are items of the page grid, and the questions are moved to the end. */
.aes-page .aes-contact__side {
	display: contents;
}

.aes-page .aes-contact__faq {
	order: 1;
}

/* The grey box holds the form and sits under its heading. On phones and tablets it runs to
   both edges of the screen: the column has 15px of padding either side, and the box is
   pulled out over it. The space inside the box is a medium gap; the form's own spacing is set
   in 19.4. */
.aes-page .aes-contact__panel {
	margin-left: -15px;
	margin-right: -15px;
	padding: var(--aes-gap-m) 15px;
	background: var(--aes-grey);
}

/* The form is the first thing you see in the box, but Ninja Forms puts a hidden notice in front
   of it, so the block rule in 19.2 treated the form as the second thing and pushed it down by
   a medium gap. That gap is taken off here. */
.aes-page .aes-contact__panel > .nf-form-cont,
.aes-page .aes-contact__panel > :has(.nf-form-cont) {
	margin-top: 0;
}

/* Small tablets (550px to 699px): the grey box is the width of the page's text, with the same space
   inside it as on desktop, rather than running to the edges of the screen; the four action
   rows are three across (the jump to the form is for phones only); and the note under them starts at the edge of the rows, not in line
   with the text inside them. From 700px (an iPad mini in portrait) the page is laid out as on
   desktop, below. */
@media (min-width: 550px) and (max-width: 699px) {

	.aes-page .aes-contact__panel {
		margin-left: 0;
		margin-right: 0;
		padding-left: var(--aes-gap-m);
		padding-right: var(--aes-gap-m);
	}

	/* "Send us a message" is for phones only: the form is only a short scroll down on a tablet, so
	   the rows left are the three across */
	.aes-page .aes-contact .aes-actions__jump {
		display: none;
	}

	.aes-page .aes-contact .aes-actions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.aes-page .aes-contact .aes-actions + .aes-small {
		padding: 0;
	}

}

/* The map is not shown on phones and tablets, where "Get directions" does its job */
.aes-page .aes-contact__map {
	display: none;
}

.aes-page .aes-contact__map iframe {
	display: block;
	width: 100%;
	height: 280px;
}

/* Desktop and larger tablets (700px and up): the details on the left, the form and the questions on
   the right */
@media (min-width: 700px) {

	.aes-page .aes-contact {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--aes-gap-col);
	}

	.aes-page .aes-contact__intro {
		grid-column: 1;
		grid-row: 1;
	}

	.aes-page .aes-contact__info {
		grid-column: 1;
		grid-row: 2;
	}

	/* The form and the questions are one column, the questions under the form */
	.aes-page .aes-contact__side {
		display: grid;
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
	}

	/* The page heading on the left is larger than the form's heading, so once both are
	   trimmed it is a little taller. The form's heading is moved down by the difference
	   (0.805 of the difference between the two font sizes), which puts the two headings
	   on the same line and starts the first blue row and the grey box level. */
	.aes-page .aes-contact__form > h2 {
		font-size: 1.4rem;
		margin-top: calc(0.805 * (1.6rem - 1.4rem));
	}

	/* The grey box is only as wide as its column, and only as tall as the form */
	.aes-page .aes-contact__panel {
		margin-left: 0;
		margin-right: 0;
		padding-left: var(--aes-gap-m);
		padding-right: var(--aes-gap-m);
	}

	/* The form is already alongside, so the row that jumps to it is not needed */
	.aes-page .aes-actions__jump {
		display: none;
	}

	.aes-page .aes-contact__map {
		display: block;
	}

}

/* =====================================================================
   21. Delivery page
   Rebuilt October 2026. This page has no rules of its own: it is built
   from the shared parts in section 19 (fact rows 19.3, two columns 19.5,
   the charges table 19.6 and the accordion 19.7). Once the new page is
   live it no longer uses the older rule .left-border in section 14.
   Check no other page uses it before it is removed.
   ===================================================================== */

/* Tablets (700px to 849px): a set of exactly three action rows (the three fact rows at the top
   of the delivery page and of warranty and returns, and "Need help?" on warranty and returns)
   is side by side, a third of the width each, rather than one under another or two and one.
   The paired rows (19.3) fit three across only on the wider tablets, because each needs 240px,
   and an iPad mini in portrait is just short of that. Below 700px the rows keep to the 240px
   rule. The fact rows of the service plans, About us and servicing pages have their own
   layout (24.1) and are left alone. */
@media (min-width: 700px) and (max-width: 849px) {

	.aes-page .aes-actions:not(.aes-plans__facts):has(> li:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

/* =====================================================================
   23. Heat pump sizing guide
   The interactive guide on the heat pump sizing page: six numbered
   steps that open one after another, the volume calculator, the result
   panel, and the quote form that opens inside it. The page is built
   from the shared parts in section 19 (its row has the class
   "aes-page"), so the guide takes its gaps and colours from there. The
   guide itself is built by the "AES heat pump sizing guide" block in
   functions.php, where the sizing figures and the wording are set.
   One column on phones and tablets. On desktop the steps are on the
   left and the result stays in view on the right (23.7).
   Once the new page is live it no longer uses three older rules in
   section 14: .title_row, .left-border and .form_bg. Check no other page
   uses them before they are removed.
   Added October 2026.
   ===================================================================== */

/* ---------- 23.1 Layout and steps ---------- */

/* On phones and tablets the guide is a single column the full width of the page: the steps,
   then the result, then the clear button. When
   "Clear and start again" jumps back to the top, the guide stops 70px short of
   the top of the screen, as in 19.2. No type size is set here: the guide's text is the same
   size as a paragraph anywhere else on the site. */
.aes-sizer {
	scroll-margin-top: 70px;
	color: #141414;
	line-height: 1.5;
	text-align: left;
}

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

/* Anything the guide hides stays hidden, whatever its usual display */
.aes-sizer [hidden] {
	display: none !important;
}

/* The line shown for a moment before the guide is built */
.aes-sizer .aes-sizer__fallback {
	margin: 0;
}

/* A step is a numbered heading with its answers under it. All the headings are on show from
   the start, so the customer can see what is coming. The steps are a step gap apart: one
   deep, even space (40px on phones and tablets, 50px on desktop, set in 23.7) from the end of
   one step to the heading of the next, whether a step is open or shut, so the eye has
   somewhere calm to rest between them. When a step slides open and is brought into view, it
   stops clear of the fixed header on phones and 20px from the bottom. */
.aes-sizer {
	--aes-sizer-gap: 40px;
}

/* The guide is set a little further from the text under it than its own steps are from one
   another (20px more than the page's section gap), so that text does not read as one more step */
.aes-page .aes-sizer {
	margin-bottom: 20px;
}

.aes-sizer .aes-sizer__step {
	margin: 0;
	padding: 0;
	scroll-margin: 70px 0 20px;
}

.aes-sizer .aes-sizer__step + .aes-sizer__step {
	margin-top: var(--aes-sizer-gap);
}

/* The result is the last step, in a column of its own (on desktop it sits beside the others) */
.aes-sizer .aes-sizer__side {
	min-width: 0;
	margin-top: var(--aes-sizer-gap);
}

/* The heading of a step (h2). The site-wide h2 is larger, with 20px under it, so the size and
   the gap are set here. Greyed to half strength, except on the step that is waiting for an
   answer, which is near black: that is where to look next. */
.aes-sizer .aes-sizer__step-title {
	margin: 0;
	padding: 0;
	color: rgba(20, 20, 20, 0.5);
	font-size: 20px;
	line-height: 1.3;
	transition: color 0.2s ease;
}

.aes-sizer .aes-sizer__step.is-active > .aes-sizer__step-title {
	color: #141414;
}

/* The answers slide open: the body is a one-row grid whose row grows from nothing to the
   height of what is inside it. While a step is shut, what is inside it cannot be reached with
   the keyboard either. */
.aes-sizer .aes-sizer__step-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

/* An open body is pulled up by the 4px it keeps under its answers (see below), so the space to
   the next heading is exactly the step gap */
.aes-sizer .aes-sizer__step.is-open > .aes-sizer__step-body {
	grid-template-rows: 1fr;
	margin-bottom: -4px;
}

/* The 4px either side leaves room for the outline that shows which tile the keyboard is on */
.aes-sizer .aes-sizer__step-inner {
	min-height: 0;
	margin: 0 -4px;
	padding: 0 4px;
	overflow: hidden;
	visibility: hidden;
}

.aes-sizer .aes-sizer__step.is-open .aes-sizer__step-inner {
	visibility: visible;
}

/* The answers sit 16px under their heading. The space is a block inside the body, so it slides
   open with it; the 4px under the answers is room for the keyboard outline. */
.aes-sizer .aes-sizer__step-inner::before,
.aes-sizer .aes-sizer__step-inner::after {
	content: "";
	display: block;
	height: 16px;
}

.aes-sizer .aes-sizer__step-inner::after {
	height: 4px;
}

/* A line under a step: what a pond is assumed to be, or that this answer means a sizing quote.
   The same height as an answer tile (23.2), with its text starting at the same point and
   centred in the same way, so the boxes in a step are all alike. */
.aes-sizer .aes-sizer__step-note {
	display: flex;
	align-items: center;
	min-height: 62px;
	margin: var(--aes-gap-s) 0 0;
	padding: 8px 14px;
	background: var(--aes-pale);
	color: #141414;
	line-height: 1.3;
}

/* ---------- 23.2 Labels and option tiles ---------- */

/* The smaller label used inside the calculator and the result panel: paragraph size, medium
   weight, so it stands apart from what is typed under it */
.aes-sizer .aes-sizer__sublabel {
	display: block;
	margin: 0 0 var(--aes-gap-s);
	padding: 0;
	color: #141414;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.3;
}

/* A note under a question, in the small type of 19.2 */
.aes-sizer .aes-sizer__hint {
	margin: var(--aes-gap-s) 0 0;
	color: #3d3d3d;
	font-size: 14px;
	line-height: 1.5;
}

/* Option tiles: each answer is a square-cornered grey tile, a small gap from the next. A set is
   one column unless it says otherwise. */
.aes-sizer .aes-sizer__opts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aes-gap-s);
}

.aes-sizer .aes-sizer__opts--2,
.aes-sizer .aes-sizer__opts--shape {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aes-sizer .aes-sizer__opts--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aes-sizer .aes-sizer__opt {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: 400;
	cursor: pointer;
}

/* The last tile of an odd-numbered set (Indoor pool, A longer season) runs the full width, so
   it is not left on its own beside a gap */
.aes-sizer .aes-sizer__opt--wide {
	grid-column: 1 / -1;
}

/* The radio button itself is not shown: the whole tile is the button */
.aes-sizer .aes-sizer__opt input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* Every tile is the same height, whether it has one line or two. Tiles are plain grey with no
   outline; the 2px border is there all along, unseen, so a tile does not shift when it is
   chosen and the border turns blue. */
.aes-sizer .aes-sizer__opt-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	min-height: 62px;
	padding: 8px 12px;
	background: var(--aes-grey);
	border: 2px solid transparent;
}

/* The top line of a tile is the answer itself: near black and medium weight. The line under it
   is a detail of that answer: smaller and greyer, like the notes in the action rows (19.3). */
.aes-sizer .aes-sizer__opt-title {
	display: block;
	color: #141414;
	font-weight: 500;
	line-height: 1.3;
}

.aes-sizer .aes-sizer__opt-sub {
	display: block;
	margin-top: 3px;
	color: #5c5c5c;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}

.aes-sizer .aes-sizer__opt:hover .aes-sizer__opt-box {
	background: #ebebeb;
}

/* The chosen tile: pale blue, outlined in blue. The others stay grey. */
.aes-sizer .aes-sizer__opt input:checked + .aes-sizer__opt-box {
	background: var(--aes-pale);
	border-color: #1076b6;
}

.aes-sizer .aes-sizer__opt input:focus-visible + .aes-sizer__opt-box {
	outline: 2px solid #1076b6;
	outline-offset: 2px;
}

/* ---------- 23.3 Volume field and calculator ---------- */

/* A text field with its unit (litres, m, ft) written inside it on the right. The type is 16px
   or more, so a phone does not zoom in when the field is tapped. */
.aes-sizer .aes-sizer__field {
	position: relative;
}

/* The volume field and "Continue" share a line: the field takes the room there is, up to
   320px, and the button sits to its right */
.aes-sizer .aes-sizer__volume-row {
	display: flex;
	gap: var(--aes-gap-s);
}

.aes-sizer .aes-sizer__field--volume {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 320px;
}

.aes-sizer .aes-sizer__input {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 76px 0 14px;
	background: #fff;
	border: 1px solid #b0b0b0;
	border-radius: 0;
	box-shadow: none;
	color: #141414;
	font-size: 20px;
	line-height: 1;
}

/* The example shown in an empty field ("e.g. 15,000") is the same size as the unit beside it
   (litres), so the two read as one line. What is typed stays at the field's larger size. */
.aes-sizer .aes-sizer__input::placeholder {
	color: #767676;
	font-size: 16px;
	opacity: 1;
}

.aes-sizer .aes-sizer__input:focus {
	background: #fff;
	border-color: #1076b6;
	box-shadow: inset 0 0 0 1px #1076b6;
	color: #141414;
	outline: 0;
}

.aes-sizer .aes-sizer__unit {
	position: absolute;
	top: 0;
	right: 14px;
	height: 52px;
	color: #3d3d3d;
	font-size: 16px;
	line-height: 52px;
	pointer-events: none;
}

/* "Not sure? Work it out from your measurements": a button that looks like a link */
.aes-sizer .aes-sizer__toggle {
	display: block;
	width: auto;
	min-height: 0;
	margin: 4px 0 0;
	padding: 8px 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: #1076b6;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-align: left;
	text-decoration: underline;
}

.aes-sizer .aes-sizer__toggle:hover {
	background: none;
	box-shadow: none;
	color: #0c5d90;
}

.aes-sizer .aes-sizer__toggle:focus-visible {
	outline: 2px solid #1076b6;
	outline-offset: 2px;
}

/* The calculator: a grey box under the volume field, a medium gap between its parts */
.aes-sizer .aes-sizer__calc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aes-gap-m);
	margin: 6px 0 0;
	padding: 15px;
	background: var(--aes-grey);
}

/* The calculator is grey itself, so its tiles are white. Shape tiles carry a small drawing of
   the shape above the name, lined up along the top. */
.aes-sizer .aes-sizer__calc .aes-sizer__opt-box {
	min-height: 48px;
	padding: 8px;
	background: #fff;
}

.aes-sizer .aes-sizer__calc .aes-sizer__opt:hover .aes-sizer__opt-box {
	background: #fff;
	border-color: #b0b0b0;
}

.aes-sizer .aes-sizer__calc .aes-sizer__opt input:checked + .aes-sizer__opt-box {
	background: var(--aes-pale);
	border-color: #1076b6;
}

.aes-sizer .aes-sizer__opts--shape .aes-sizer__opt-box {
	justify-content: flex-start;
}

.aes-sizer .aes-sizer__shape {
	display: block;
	width: 30px;
	height: 18px;
	margin: 0 0 8px;
	border: 2px solid #3d3d3d;
	color: #3d3d3d;
}

.aes-sizer .aes-sizer__shape--round {
	width: 18px;
	border-radius: 50%;
}

.aes-sizer .aes-sizer__shape--oval {
	border-radius: 9px;
}

.aes-sizer .aes-sizer__shape--kidney {
	border: 0;
}

.aes-sizer .aes-sizer__shape--kidney svg {
	display: block;
	width: 30px;
	height: 18px;
	overflow: visible;
}

.aes-sizer .aes-sizer__opt input:checked + .aes-sizer__opt-box .aes-sizer__shape {
	border-color: #1076b6;
	color: #1076b6;
}

/* Measurements: two to a line, with their labels lined up along the bottom */
.aes-sizer .aes-sizer__dims {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px var(--aes-gap-s);
	align-items: end;
}

/* The length of a kidney pool has a line to itself, with the two widths under it */
.aes-sizer .aes-sizer__dim--wide {
	grid-column: 1 / -1;
}

.aes-sizer .aes-sizer__dim .aes-sizer__input {
	height: 48px;
	padding-right: 40px;
	font-size: 18px;
}

.aes-sizer .aes-sizer__dim .aes-sizer__unit {
	height: 48px;
	line-height: 48px;
}

/* The note under the measurements sits close to them */
.aes-sizer .aes-sizer__calc-hint {
	margin: -8px 0 0;
	color: #3d3d3d;
	font-size: 14px;
	line-height: 1.5;
}

.aes-sizer .aes-sizer__calc-result {
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid #b0b0b0;
}

/* "Continue", beside the volume field, and "Use this volume" in the calculator: the one typed
   answer is confirmed with a button. Blue, like the button in the result panel, and the same
   height as the field. */
.aes-sizer .aes-sizer__next,
.aes-sizer .aes-sizer__use {
	display: block;
	flex: none;
	min-height: 52px;
	margin: 0;
	padding: 10px 22px;
	background: #1076b6;
	border: 0;
	box-shadow: none;
	color: #fff;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.3;
	opacity: 1;
	text-align: center;
}

.aes-sizer .aes-sizer__next:hover,
.aes-sizer .aes-sizer__use:hover {
	background: #0c5d90;
	box-shadow: none;
	color: #fff;
}

.aes-sizer .aes-sizer__next:focus-visible,
.aes-sizer .aes-sizer__use:focus-visible {
	outline: 2px solid #0c5d90;
	outline-offset: 2px;
}

/* "Continue" is grey until a volume has been entered. Once the volume has been confirmed it is
   out of sight, but its space is kept, so the field beside it does not change width. */
.aes-sizer .aes-sizer__next:disabled,
.aes-sizer .aes-sizer__next:disabled:hover {
	background: #e6e6e6;
	color: #767676;
	cursor: default;
	opacity: 1;
}

.aes-sizer .aes-sizer__next.is-done {
	visibility: hidden;
}

/* "Use this volume" fills the width of the calculator, and is 46px high like the other buttons */
.aes-sizer .aes-sizer__use {
	width: 100%;
	min-height: 46px;
}

/* ---------- 23.4 Result panel ---------- */

/* The result is the last step, "Based on your selections", and opens once every question is answered. Its
   pale blue box holds the answer. On phones and tablets the box runs to both edges of the
   screen, like the grey form box on the contact page (section 20): the column has 15px of
   padding either side, and the box is pulled out over it. The step's body is widened by the
   same 15px, so the box is not cut off while it slides open. */
.aes-sizer .aes-sizer__step--result .aes-sizer__step-inner {
	margin: 0 -15px;
	padding: 0 15px;
}

.aes-sizer .aes-sizer__result {
	margin: 0 -15px;
	padding: var(--aes-gap-m) 15px;
	background: var(--aes-pale);
}

/* What the panel is waiting for, before there is an answer (seen on desktop, where the panel is
   on show from the start): one line, near black, at full size. While it is waiting the panel
   is the same height as the answer tiles beside it (23.2), with its line centred in the same
   way, so the first row of boxes is level top and bottom. */
.aes-sizer .aes-sizer__prompt {
	margin: 0;
	color: #141414;
	line-height: 1.3;
}

.aes-sizer .aes-sizer__result.is-waiting {
	display: flex;
	align-items: center;
	min-height: 62px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.aes-sizer .aes-sizer__result-label {
	margin: 0 0 6px;
}

/* The kW figure: large and blue, not bold */
.aes-sizer .aes-sizer__kw {
	margin: 0 0 var(--aes-gap-m);
	color: #1076b6;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
}

.aes-sizer .aes-sizer__kw-num {
	font-size: 72px;
}

.aes-sizer .aes-sizer__kw-unit {
	margin-left: 4px;
	font-size: 32px;
	letter-spacing: 0;
}

/* What the figure is for: the pool, the water temperature and the season, one to a line, with
   the name on the left and the selection on the right. No kW is shown against them. */
.aes-sizer .aes-sizer__rows {
	margin: 0 0 16px;
}

.aes-sizer .aes-sizer__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-top: 1px solid rgba(16, 118, 182, 0.28);
	line-height: 1.4;
}

.aes-sizer .aes-sizer__row:last-child {
	border-bottom: 1px solid rgba(16, 118, 182, 0.28);
}

.aes-sizer .aes-sizer__row-value {
	flex: none;
	white-space: nowrap;
}

/* The step-up suggestion: a white box inside the panel, with a heading of its own */
.aes-sizer .aes-sizer__stepup {
	margin: 0 0 16px;
	padding: 14px 16px;
	background: #fff;
}

.aes-sizer .aes-sizer__stepup-title {
	margin: 0 0 4px;
	color: #141414;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.aes-sizer .aes-sizer__stepup-text {
	margin: 0;
	color: #3d3d3d;
	font-size: 14px;
	line-height: 1.5;
}

/* What the figure is based on */
.aes-sizer .aes-sizer__note {
	margin: 0 0 var(--aes-gap-m);
	color: #3d3d3d;
	font-size: 14px;
	line-height: 1.5;
}

/* The panel's button (Shop heat pumps, Request a sizing quote, Call): blue, full width, and the
   same height as the buttons on the front page */
.aes-sizer .aes-sizer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 0;
	padding: 10px 18px;
	background: #1076b6;
	color: #fff;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

.aes-sizer .aes-sizer__cta:hover {
	background: #0c5d90;
	color: #fff;
}

.aes-sizer .aes-sizer__cta:focus-visible {
	outline: 2px solid #0c5d90;
	outline-offset: 2px;
}

/* ---------- 23.5 Sizing quote and form ---------- */

/* When the answer is a sizing quote, the panel shows a heading and a reason in place of a
   figure. The heading is the largest in the guide. */
.aes-sizer .aes-sizer__result-title {
	margin: 0 0 var(--aes-gap-s);
	color: #141414;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.aes-sizer .aes-sizer__result-text {
	margin: 0 0 var(--aes-gap-m);
}

/* The extra questions asked before a quote (domestic or commercial, time uncovered, existing
   heating), a medium gap apart */
.aes-sizer .aes-sizer__extra {
	margin: 0 0 var(--aes-gap-m);
}

.aes-sizer .aes-sizer__extra .aes-sizer__input {
	height: 48px;
	padding: 0 14px;
	font-size: 18px;
}

/* Tiles inside the blue panel are white, so the chosen one is shown by its outline and blue
   lettering */
.aes-sizer .aes-sizer__result .aes-sizer__opt-box {
	min-height: 48px;
	background: #fff;
}

.aes-sizer .aes-sizer__result .aes-sizer__opt:hover .aes-sizer__opt-box {
	background: #fff;
	border-color: #b0b0b0;
}

.aes-sizer .aes-sizer__result .aes-sizer__opt input:checked + .aes-sizer__opt-box {
	background: #fff;
	border-color: #1076b6;
}

.aes-sizer .aes-sizer__result .aes-sizer__opt input:checked + .aes-sizer__opt-box .aes-sizer__opt-title {
	color: #1076b6;
}

/* The quote form (Ninja Forms) waits out of sight beside the guide. It is only shown once
   "Request a sizing quote" has been pressed and the guide has moved it into the result panel,
   under the heading "Your details". Its own spacing is set in 19.4. */
.aes-page .aes-sizer-form {
	display: none;
}

.aes-sizer .aes-sizer__result .aes-sizer-form {
	display: block;
}

.aes-sizer .aes-sizer__form-title {
	margin: 0 0 var(--aes-gap-m);
	padding: var(--aes-gap-m) 0 0;
	border-top: 1px solid rgba(16, 118, 182, 0.28);
	color: #141414;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

/* "Your details", the heading over the form itself, follows the recap without a second line */
.aes-sizer .aes-sizer__form-title--plain {
	margin-top: var(--aes-gap-m);
	padding-top: 0;
	border-top: 0;
}

/* The recap, under "Your sizing guide selections": a white box listing each selection, its name
   on the left in grey and the selection on the right, in the small type of 19.2. A line under
   the box says the selections are sent with the request. */
.aes-sizer .aes-sizer__recap {
	display: grid;
	gap: 6px;
	padding: 14px 16px;
	background: #fff;
	color: #141414;
	font-size: 14px;
	line-height: 1.4;
}

.aes-sizer .aes-sizer__recap-row {
	display: grid;
	grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
	column-gap: var(--aes-gap-s);
}

.aes-sizer .aes-sizer__recap-name {
	color: #5c5c5c;
}

.aes-sizer .aes-sizer__recap-note {
	margin: var(--aes-gap-s) 0 0;
	color: #3d3d3d;
	font-size: 14px;
	line-height: 1.5;
}

/* WordPress can leave an empty paragraph around the form's shortcode */
.aes-sizer .aes-sizer-form > p:empty {
	display: none;
}

/* The "Pool details" field is filled in by the guide and sent with the enquiry, but the
   customer does not see it. The class may be on the field or on its container. */
.aes-page .aes-sizer-details,
.aes-page .nf-field-container:has(.aes-sizer-details) {
	display: none !important;
}

/* The form's send button matches the panel's own button */
.aes-sizer .submit-container :is(input[type="submit"], input[type="button"], button) {
	background-color: #1076b6;
	border-color: #1076b6;
	color: #fff;
	font-size: 1em;
	font-weight: 400;
}

.aes-sizer .submit-container :is(input[type="submit"], input[type="button"], button):hover {
	background-color: #0c5d90;
	border-color: #0c5d90;
	color: #fff;
}

/* The privacy line under the form, a medium gap below the send button */
.aes-sizer .aes-sizer-form > .aes-small {
	margin: var(--aes-gap-m) 0 0;
	line-height: 1.5;
}

/* Once the request has been sent, the panel holds only its heading ("Sizing quote requested")
   and the form's own thank-you message, in a white box so it is clearly new. The privacy line
   has done its job and is not shown. */
.aes-sizer .aes-sizer__result.is-sent .aes-sizer__result-title {
	margin-bottom: var(--aes-gap-m);
}

.aes-sizer .aes-sizer__result.is-sent .nf-response-msg {
	margin: 0;
	padding: 14px 16px;
	background: #fff;
	color: #141414;
}

.aes-sizer .aes-sizer__result.is-sent .nf-response-msg > * {
	margin-top: 0;
}

.aes-sizer .aes-sizer__result.is-sent .nf-response-msg > :last-child {
	margin-bottom: 0;
}

.aes-sizer .aes-sizer__result.is-sent .aes-sizer-form > .aes-small {
	display: none;
}

/* ---------- 23.6 Clear button ---------- */

/* "Clear and start again": white with a grey outline that darkens and thickens on hover, as on
   the outlined buttons on the front page. Only shown once something has been entered, a
   step gap under the last step. */
.aes-sizer .aes-sizer__reset {
	display: block;
	width: 100%;
	min-height: 46px;
	margin: var(--aes-sizer-gap) 0 0;
	padding: 10px 18px;
	background: #fff;
	border: 1px solid #5c5c5c;
	box-shadow: none;
	color: #141414;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-align: center;
}

.aes-sizer .aes-sizer__reset:hover {
	background: #fff;
	border-color: #141414;
	box-shadow: inset 0 0 0 1px #141414;
	color: #141414;
}

.aes-sizer .aes-sizer__reset:focus-visible {
	outline: 2px solid #1076b6;
	outline-offset: 2px;
}

/* ---------- 23.7 Media queries ---------- */

/* Tablet and desktop (550px and up): the pool types two to a line, the four shapes on one line */
@media (min-width: 550px) {

	.aes-sizer .aes-sizer__opts--type {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aes-sizer .aes-sizer__opts--shape {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

}

/* Larger tablet and desktop (700px and up): the steps on the left, the result on the right */
@media (min-width: 700px) {

	/* Two columns, a column gap apart. The second row only holds the clear button, and takes
	   up whatever height is left, so the button stays directly under the steps when the
	   result beside them is the taller of the two. The steps are a little further apart.
	   There is no fixed header on desktop, so a jump back to the top, or to a step that has
	   just opened, stops 20px short. */
	.aes-sizer {
		--aes-sizer-gap: 50px;
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--aes-gap-col);
		align-items: start;
		scroll-margin-top: 20px;
	}

	/* The text above and below the guide (what 'ideal' capacity means) is kept to a comfortable
	   reading width, so it does not run the full width of a desktop page. On phones and
	   tablets it is the full width, like the guide. */
	.aes-page .aes-sizer-text {
		max-width: 680px;
	}

	.aes-sizer .aes-sizer__step {
		scroll-margin: 20px 0;
	}

	.aes-sizer .aes-sizer__main {
		grid-column: 1;
		grid-row: 1;
	}

	/* The result (its heading and panel) follows the page as it scrolls, so it is always in
	   view while the steps are worked through. Its heading is the same size as "1. What are
	   you heating?" beside it, so the top of the panel is level with the first row of
	   answers. Once the page has scrolled it rests 40px from the top of the screen. With the
	   quote form open it is taller than most screens, so it stays where it is. */
	.aes-sizer .aes-sizer__side {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: 40px;
		margin-top: 0;
	}

	.aes-sizer .aes-sizer__side.is-form-open {
		position: static;
	}

	/* The result is open from the start here, with a line saying what it is waiting for, so
	   it does not slide. Its heading stays grey until there is a result. */
	.aes-sizer .aes-sizer__step--result > .aes-sizer__step-body {
		grid-template-rows: 1fr;
		margin-bottom: 0;
		transition: none;
	}

	.aes-sizer .aes-sizer__step--result .aes-sizer__step-inner {
		margin: 0 -4px;
		padding: 0 4px;
		visibility: visible;
	}

	/* The result box is only as wide as its column */
	.aes-sizer .aes-sizer__result {
		margin: 0;
		padding: var(--aes-gap-m);
	}

	.aes-sizer .aes-sizer__kw-num {
		font-size: 84px;
	}

	/* "Clear and start again" is only as wide as it needs to be, under the steps. "Use this
	   volume" in the calculator is too. */
	.aes-sizer .aes-sizer__reset {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		width: auto;
		min-width: 220px;
	}

	.aes-sizer .aes-sizer__use {
		width: auto;
		min-width: 220px;
	}

}

/* Larger tablet (700px to 849px): the same two columns, a little tighter. The steps are not as far
   apart, the result is not as wide so its figure is smaller, and as there is a fixed header on a
   tablet (as on a phone) the result stays 90px below the top of the screen as it follows the
   page, and a jump to a step stops 70px short. */
@media (min-width: 700px) and (max-width: 849px) {

	.aes-sizer {
		--aes-sizer-gap: 40px;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		scroll-margin-top: 70px;
	}

	.aes-sizer .aes-sizer__step {
		scroll-margin: 70px 0;
	}

	.aes-sizer .aes-sizer__side {
		top: 90px;
	}

	.aes-sizer .aes-sizer__kw-num {
		font-size: 64px;
	}

	/* The five pool types are one under another, each the same height with its two lines of text.
	   Two to a line was too narrow in this column: some titles ran onto a second line and others
	   did not, so the tiles were different heights and their text did not line up. */
	.aes-sizer .aes-sizer__opts--type {
		grid-template-columns: minmax(0, 1fr);
	}

}

/* Visitors who prefer reduced motion: steps open at once, without sliding */
@media (prefers-reduced-motion: reduce) {

	.aes-sizer .aes-sizer__step-body,
	.aes-sizer .aes-sizer__step-title {
		transition: none;
	}

}

/* =====================================================================
   24. Service plans page
   Rebuilt October 2026. One set of plan cards for every screen size, in
   place of the desktop price tables and the separate phone slider. The
   rest of the page is built from the shared parts in section 19 (fact
   rows 19.3 and two columns 19.5).
   Once the new page is live it no longer uses the older service plan
   rules: in section 14, .pricing-table-header .price.is-xxlarge,
   .bronze, .silver, .gold and .platinum (with their .title and _bgd
   rules), .big_price, .service_bgd, .service_call and .left-border;
   and in section 5.3, .sml_price. Check no other page uses them before
   they are removed.
   ===================================================================== */

/* ---------- 24.1 Top of the page: heading, Direct Debit logo, photo and fact rows ---------- */

/* On phones and tablets the page runs: the heading and its line of text (with the Direct Debit
   logo beside the heading), the photo, the plans, then the three fact rows, so the first price
   is on the first screen. The heading, photo and fact rows share a wrapper, for the desktop
   layout in 24.7. Here the wrapper is taken out of the layout (display: contents), so the
   three are items of the page's own stack, a section gap apart like everything else, and the
   fact rows are moved to sit after the plans. */
.aes-page .aes-plans__top {
	display: contents;
}

.aes-page .aes-plans__facts {
	order: 1;
}

/* The theme leaves space under every list (1.3em). The fact rows are not inside a block, so
   nothing took that space off: it was added to the left-hand column on desktop, where the
   photo is as tall as that column, so the photo ran on past the last fact row. With it
   removed the photo ends level with the bottom of "Direct Debit Guarantee". */
.aes-page .aes-plans__facts {
	margin: 0;
}

.aes-page .aes-plans__cards ~ * {
	order: 2;
}

/* The Direct Debit logo is on white at the top right of the heading block, level with the top
   of the heading, so it is on show as soon as the page opens and takes up no height of its
   own. The heading keeps clear of it. The logo is the theme's own image block, so the
   width the theme gives that block is overridden here. */
.aes-page .aes-plans__intro {
	position: relative;
}

/* Only when the logo is there: the About us and pool heat pump servicing pages use the same top
   without it, and their headings use the full width */
.aes-page .aes-plans__intro:has(> .aes-plans__dd) > h1 {
	padding-right: 120px;
}

.aes-page .aes-plans__intro > .aes-plans__dd {
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	margin: 0;
}

.aes-page .aes-plans__dd .img {
	width: 100% !important;
	margin: 0;
}

.aes-page .aes-plans__dd img {
	display: block;
	width: 100%;
	height: auto;
}

/* The photo is cropped to a shallow band (five wide to two high, the same crop as on the old
   page), so it does not push the plans down the screen. On phones and tablets it runs to both
   edges of the screen, like the grey form box on the contact page: the column has 15px of
   padding either side, and the photo is pulled out over it. */
.aes-page .aes-plans__photo {
	position: relative;
	aspect-ratio: 5 / 2;
	margin: 0 -15px;
	overflow: hidden;
	background: var(--aes-grey);
}

.aes-page .aes-plans__photo img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- 24.2 Plan cards ---------- */

/* The four plans are a list of cards. Each card is white with a grey outline and a bar across
   the top in the colour of its metal. Square corners, as on the rest of the site.
   On phones the cards are a carousel: one card fills the width, the other three are off screen
   to the right, and the list slides sideways one card at a time, by a swipe or by the arrow
   buttons on the heading's line (24.3). Nothing shows beyond the edge, so there is no sliver
   of the next card, and the browser's own scrollbar is not shown. On tablets the cards sit two
   to a line and on wide desktops four (in 24.7).
   The list has ten rows, and every card lies across all ten: its name, its price, its seven
   rows and its button. That is what keeps the cards the same height. */
.aes-page .aes-plan-list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	grid-template-rows: repeat(10, auto);
	column-gap: var(--aes-gap-s);
	row-gap: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.aes-page .aes-plan-list::-webkit-scrollbar {
	display: none;
}

.aes-page .aes-plan {
	grid-row: span 10;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	margin: 0;
	padding: var(--aes-gap-m);
	border: 1px solid #c4c4c4;
	border-top: 6px solid var(--aes-plan-metal, #c4c4c4);
	background: #fff;
}

/* Silver and platinum are both greys, so platinum is the darker, cooler one */
.aes-page .aes-plan--bronze {
	--aes-plan-metal: #ce8946;
}

.aes-page .aes-plan--silver {
	--aes-plan-metal: #c0c0c0;
}

.aes-page .aes-plan--gold {
	--aes-plan-metal: #d4af37;
}

.aes-page .aes-plan--platinum {
	--aes-plan-metal: #6f7b85;
}

/* The plan's name (h3). The site-wide h3 is bold with 20px under it, so the weight and the
   gap are set here. */
.aes-page .aes-plan__name {
	margin: 0;
	color: #141414;
	font-size: 20px;
	font-weight: 500 !important;
	line-height: 1.3;
}

/* The price line. Only the price itself is bold; "from" and "monthly" are small and grey. */
.aes-page .aes-plan__price {
	margin: 6px 0 0;
	color: #3d3d3d;
	font-size: 14px;
	line-height: 1.3;
}

.aes-page .aes-plan__price strong {
	color: #141414;
	font-size: 24px;
	font-weight: 600;
}

/* Under a thin line, every card has the same seven rows in the same order: how long the plan
   runs, the visits, and parts; then the two discounts; then a link down to the optional extras
   and what is not covered; then the small print. Each row is one line of text, white with no
   lines between rows. A row is 8px under the one before it, and the first row of each group
   ("aes-plan__gap") is 20px under, which makes the thin gap between the four groups. */
.aes-page .aes-plan__points {
	margin: 16px 0 0;
	padding: 8px 0 0;
	border-top: 1px solid #e2e2e2;
	list-style: none;
}

.aes-page .aes-plan__points > li {
	--aes-plan-row: 8px;
	position: relative;
	margin: 0;
	padding: var(--aes-plan-row) 0 0 22px;
	color: #141414;
	font-size: 15px;
	line-height: 1.4;
}

.aes-page .aes-plan__points > .aes-plan__gap {
	--aes-plan-row: 20px;
}

/* What a plan gives has a tick, drawn in the same line weight as the arrows on the action
   rows */
.aes-page .aes-plan__points > li::before {
	content: "";
	position: absolute;
	top: calc(var(--aes-plan-row) + 4px);
	left: 3px;
	width: 6px;
	height: 10px;
	border-right: 1.5px solid #141414;
	border-bottom: 1.5px solid #141414;
	transform: rotate(45deg);
}

/* What a plan does not give ("aes-plan__no") is grey, with a dash in place of the tick */
.aes-page .aes-plan__points > .aes-plan__no {
	color: #5c5c5c;
}

.aes-page .aes-plan__points > .aes-plan__no::before {
	top: calc(var(--aes-plan-row) + 10px);
	left: 1px;
	width: 10px;
	height: 0;
	border-right: 0;
	border-bottom: 1.5px solid #5c5c5c;
	transform: none;
}

/* The last row is a link down the page, so it has no tick */
.aes-page .aes-plan__points > .aes-plan__jump::before {
	content: none;
}

.aes-page .aes-plan__jump a {
	color: #141414;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A row that has more to say than fits on one line keeps its first line as the row, with an
   arrow at the right-hand end. Clicking the row opens the rest underneath in small type, and
   clicking it again shuts it. The browser's own triangle is not shown. */
.aes-page .aes-plan__points details {
	margin: 0;
}

.aes-page .aes-plan__points summary {
	position: relative;
	display: block;
	padding-right: 22px;
	cursor: pointer;
	list-style: none;
}

.aes-page .aes-plan__points summary::-webkit-details-marker {
	display: none;
}

.aes-page .aes-plan__points summary::after {
	content: "";
	position: absolute;
	top: 5px;
	right: 4px;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid #141414;
	border-bottom: 1.5px solid #141414;
	transform: rotate(45deg);
}

.aes-page .aes-plan__points details[open] > summary::after {
	top: 9px;
	transform: rotate(-135deg);
}

.aes-page .aes-plan__points summary:focus-visible {
	outline: 2px solid #1076b6;
	outline-offset: 2px;
}

.aes-page .aes-plan__points details p {
	margin: 4px 0 0;
	color: #3d3d3d;
	font-size: 13px;
	line-height: 1.4;
}

/* The last row is the small print: smaller and greyer than the rows above it, with no tick,
   and it opens like the other rows. Bronze has no small print, so its last row is left empty
   ("aes-plan__blank"); it is still there, which keeps the four cards the same height. */
.aes-page .aes-plan__points > .aes-plan__small {
	color: #3d3d3d;
	font-size: 13px;
}

.aes-page .aes-plan__points > .aes-plan__small::before,
.aes-page .aes-plan__points > .aes-plan__blank::before {
	content: none;
}

.aes-page .aes-plan__small summary::after {
	top: 3px;
}

.aes-page .aes-plan__small details[open] > summary::after {
	top: 7px;
}

/* The foot of a card holds its button. It is pushed to the bottom of the card, so the buttons
   line up from card to card. WordPress can wrap what is in the foot in a paragraph
   of its own, which would leave space under the button, so a paragraph here has none. */
.aes-page .aes-plan__foot {
	margin-top: auto;
	padding-top: var(--aes-gap-m);
}

.aes-page .aes-plan__foot p {
	margin: 0;
}

/* The button fills the width of the card. The same blue, height and weight as the button in
   the heat pump sizing guide. */
.aes-page .aes-plan__btn {
	display: block;
	min-height: 46px;
	padding: 0 18px;
	background: #1076b6;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 46px;
	text-align: center;
	text-decoration: none;
}

.aes-page .aes-plan__btn:hover,
.aes-page .aes-plan__btn:focus-visible {
	background: #0c5d90;
	color: #fff;
}

.aes-page .aes-plan__btn:focus-visible {
	outline: 2px solid #141414;
	outline-offset: 2px;
}

/* The cards share the list's rows: the name, the price, the seven rows and the button each sit
   on one line that runs across all four cards. So if a row runs onto a second line on one
   card, or is opened to show the rest of its text, that row grows on every card and what
   follows stays level, on a phone as you move from card to card as much as on desktop.
   Browsers too old for this (before 2023) still get cards of one height, with the button at
   the bottom. */
@supports (grid-template-rows: subgrid) {

	.aes-page .aes-plan {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.aes-page .aes-plan__points {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: subgrid;
		grid-row: span 7;
		row-gap: 0;
	}

	.aes-page .aes-plan__foot {
		margin-top: 0;
		align-self: end;
	}

}

/* ---------- 24.3 Phone carousel: arrow buttons ---------- */

/* The same square buttons as on the front page carousels (18.7): 30px, white with a grey
   outline, the pair at the right-hand end of the "Plans and prices" line, which leaves 76px
   free for them. They are worked by the "AES service plans: phone carousel" block in
   functions.php, which also sends the list back to the first card once it has been out of
   view for 20 seconds. The buttons are not shown until that script has run, so a button never
   appears that does nothing; showing them is in 24.7, for phones only. The list is put back a
   heading gap under the heading, because the buttons now come between the two in the code. */
.aes-page .aes-plans__cards {
	position: relative;
}

.aes-page .aes-plans__cards > .aes-plan-nav {
	display: none;
	position: absolute;
	top: -7px;
	right: 0;
	gap: 6px;
	margin: 0;
}

.aes-page .aes-plans__cards > .aes-plan-nav + .aes-plan-list {
	margin-top: var(--aes-gap-head);
}

.aes-page .aes-plan-nav__btn {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #5c5c5c;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	line-height: 1;
	cursor: pointer;
}

.aes-page .aes-plan-nav__btn:hover {
	background: #fff;
	border-color: #141414;
	box-shadow: none;
}

.aes-page .aes-plan-nav__btn:focus-visible {
	outline: 2px solid #1076b6;
	outline-offset: 2px;
}

/* At the first card the back button is faded, and at the last card the forward one */
.aes-page .aes-plan-nav__btn:disabled {
	border-color: #e6e6e6;
	opacity: 0.4;
	cursor: default;
}

/* The buttons look 30px but respond to a tap over a taller area, so they stay easy to hit */
.aes-page .aes-plan-nav__btn::before {
	content: "";
	position: absolute;
	inset: -7px -3px;
}

/* The arrow, drawn in the same line weight as the arrows on the action rows */
.aes-page .aes-plan-nav__btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 1.5px solid #141414;
	border-right: 1.5px solid #141414;
	transform: translate(-70%, -50%) rotate(45deg);
}

.aes-page .aes-plan-nav__prev::after {
	transform: translate(-30%, -50%) rotate(-135deg);
}

/* Visitors who prefer reduced motion: the list moves to the next card at once */
@media (prefers-reduced-motion: reduce) {

	.aes-page .aes-plan-list {
		scroll-behavior: auto;
	}

}

/* ---------- 24.4 Plain lists ---------- */

/* A short bulleted list in a block, set like the lists inside an accordion (19.7): 6px
   between the points, and nothing left under the last one */
.aes-page .aes-list {
	padding: 0;
	list-style: disc;
}

.aes-page .aes-list li {
	margin: 0 0 6px 1.2em;
	line-height: 1.5;
}

.aes-page .aes-list li:last-child {
	margin-bottom: 0;
}

/* A numbered list (steps, such as returning a faulty item on the warranty and returns page):
   the same spacing, numbered 1, 2, 3 rather than bulleted */
.aes-page ol.aes-list {
	list-style: decimal;
}

/* A "Call us" row whose note shows whether the phone lines are open, with the handset in
   green or grey, as in the header (section 26); on desktop the phone number is shown in front
   of it as well, as nobody taps to dial from a desktop. On phones and tablets, where a tap on
   the row dials, only the open or closed line is shown. The wording is filled in by the phone
   lines script in functions.php, which looks for the class "aes-live-open"; until it runs,
   the opening hours show. Used on the warranty and returns page. */
.aes-page .aes-action__note:has(> .aes-call__live) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 12px;
}

/* The open or closed line may be longer than the row is wide (three rows across on a tablet,
   "Out of hours, opens 9am tomorrow"), so inside a row it is allowed to wrap, with the handset
   staying at the start of the first line, rather than running out under the arrow */
.aes-page .aes-action .aes-open {
	min-width: 0;
	align-items: flex-start;
	white-space: normal;
}

.aes-page .aes-action .aes-open__icon {
	margin-top: 2px;
}

@media (max-width: 849px) {

	.aes-page .aes-call__number {
		display: none;
	}

}

/* ---------- 24.5 Two columns that both start with a section heading ---------- */

/* Under the plans the sections are in pairs, side by side on desktop: "Optional extras" with
   "What is not covered", then "Why choose a service plan" with "Areas covered", then the terms
   with "Need help?". Each pair starts level, so the headings line up across the page.
   The split in 19.8 moves its right-hand heading down a little, because on the other pages
   the left column starts with the larger page heading. Here both columns start with a
   section heading of the same size, so that move is taken off. */
.aes-page .aes-split--level > :nth-child(2) > h2:first-child {
	margin-top: 0;
}

/* ---------- 24.6 Last pair: terms and conditions, and the call row ---------- */

/* On phones and tablets "Need help?" comes first and the terms are the last thing on the page,
   with every row at full width. On desktop (24.7) the terms are on the left with their two
   rows side by side, and "Need help?" is on the right with its one row. */
.aes-page .aes-plans__terms {
	order: 1;
}

/* "Full T&Cs" is white with an outline in AES blue, and "Download T&Cs" beside it is white
   with the usual grey outline, which tells the two apart. Like the grey one, the blue outline
   thickens when the mouse is over the row.
   The same blue outline is on the "Service plans" row at the top of the terms page, beside
   its own "Download T&Cs" row. Any outlined row on a rebuilt page can have it by adding the
   class "aes-action--blue". */
.aes-page .aes-action--outline.aes-plans__full,
.aes-page .aes-action--outline.aes-action--blue {
	box-shadow: inset 0 0 0 1px #1076b6;
}

.aes-page .aes-action--outline.aes-plans__full:hover,
.aes-page .aes-action--outline.aes-plans__full:focus-visible,
.aes-page .aes-action--outline.aes-action--blue:hover,
.aes-page .aes-action--outline.aes-action--blue:focus-visible {
	box-shadow: inset 0 0 0 2px #1076b6;
}

/* ---------- 24.7 Media queries ---------- */

/* Phone and tablet (up to 1199px): the plans are a carousel, so once the script has run the arrow
   buttons are shown and the heading keeps clear of them */
@media (max-width: 1199px) {

	.aes-page .aes-plans__cards.is-ready > h2 {
		padding-right: 76px;
	}

	.aes-page .aes-plans__cards.is-ready > .aes-plan-nav {
		display: flex;
	}

}

/* Tablet and small desktop (550px to 1199px): the carousel shows two plans at a time, Bronze and
   Silver, then Gold and Platinum. The arrow buttons (and the script, which moves the list one
   screenful at a time) are the same as on a phone. */
@media (min-width: 550px) {

	.aes-page .aes-plan-list {
		grid-auto-columns: calc((100% - var(--aes-gap-s)) / 2);
	}

}

/* Tablet (550px to 849px): the three fact rows side by side */
@media (min-width: 550px) and (max-width: 849px) {

	.aes-page .aes-plans__facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

/* Larger tablet (700px to 849px): the page is laid out as on desktop. The heading, text and fact
   rows are on the left and the photo on the right, and the sections under the plans are in
   pairs. The terms rows are one under the other, as the half is too narrow for two side by
   side, and "Need help?" keeps the height of its one row. */
@media (min-width: 700px) and (max-width: 849px) {

	.aes-page .aes-plans > .aes-plans__top {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--aes-gap-col);
		row-gap: var(--aes-gap-m);
	}

	.aes-page .aes-plans .aes-plans__intro {
		grid-column: 1;
		grid-row: 1;
	}

	.aes-page .aes-plans .aes-plans__facts {
		grid-column: 1;
		grid-row: 2;
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
	}

	.aes-page .aes-plans .aes-plans__photo {
		grid-column: 2;
		grid-row: 1 / span 2;
		aspect-ratio: auto;
		margin: 0;
	}

	.aes-page .aes-plans > .aes-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--aes-gap-col);
	}

	.aes-page .aes-plans .aes-plans__terms {
		order: 0;
	}

}

/* Desktop (850px and up) */
@media (min-width: 850px) {

	/* The heading and the fact rows on the left, a medium gap apart, and the photo on the
	   right, a column gap away. The photo is as tall as the left column, whatever that comes
	   to, and no longer runs to the edges of the screen. */
	.aes-page .aes-plans__top {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--aes-gap-col);
		row-gap: var(--aes-gap-m);
	}

	.aes-page .aes-plans__intro {
		grid-column: 1;
		grid-row: 1;
	}

	.aes-page .aes-plans__facts {
		grid-column: 1;
		grid-row: 2;
		align-content: start;
	}

	.aes-page .aes-plans__photo {
		grid-column: 2;
		grid-row: 1 / span 2;
		aspect-ratio: auto;
		margin: 0;
	}

	/* The last pair: the terms on the left, "Need help?" on the right. The two terms rows
	   share the left column half and half. All three rows start on one line and end on one
	   line: each section gives its rows whatever height is left under its heading, so if the
	   text in one row runs onto another line, the other two rows grow to match it. */
	.aes-page .aes-plans__terms {
		order: 0;
	}

	.aes-page .aes-plans__last > .aes-block {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
	}

	.aes-page .aes-plans__terms .aes-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/* Wide desktop (1200px and up): the plans four to a line, no carousel. Below this width a card is
   too narrow to keep each row to one line of text, so the plans are two at a time. */
@media (min-width: 1200px) {

	.aes-page .aes-plan-list {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: none;
		overflow: visible;
		scroll-snap-type: none;
	}

}

/* =====================================================================
   25. Terms pages (long numbered terms)
   The service plan terms, on a page of their own since October 2026
   (they were an accordion on the service plans page). The page is built
   from the shared parts in section 19 (its row has the class
   "aes-page"), with the terms themselves inside "aes-terms__body".
   Nothing here is particular to service plans, so another page of
   numbered terms can use the same classes.
   ===================================================================== */

/* The terms are kept to a comfortable reading width, so a clause does not run the full width
   of a desktop page. On phones and tablets they are the full width. */
.aes-page .aes-terms {
	max-width: 760px;
}

/* A numbered section: its heading, then its clauses. The site-wide h2 is larger, so the size
   is set here. Sections are a section gap apart, and a clause sits a small gap under the one
   before it. */
.aes-page .aes-terms__body > h2 {
	margin: var(--aes-gap) 0 16px;
	font-size: 18px;
	line-height: 1.3;
}

.aes-page .aes-terms__body > h2:first-child {
	margin-top: 0;
}

.aes-page .aes-terms__body > p,
.aes-page .aes-terms__body > ul {
	margin-top: 0;
	margin-bottom: var(--aes-gap-s);
	line-height: 1.5;
}

.aes-page .aes-terms__body > :last-child {
	margin-bottom: 0;
}

/* An email address is one long word, so it is allowed to break rather than push the page
   wider than a phone screen */
.aes-page .aes-terms__body a {
	overflow-wrap: anywhere;
}

/* A sub-clause (6.1.1, say) is set in by a medium gap, and what belongs under a sub-clause by
   two */
.aes-page .aes-terms__body > .aes-terms__sub {
	margin-left: var(--aes-gap-m);
}

.aes-page .aes-terms__body > .aes-terms__sub2 {
	margin-left: calc(var(--aes-gap-m) * 2);
}

/* The theme leaves space under every list. The row at the foot of the terms is not inside a
   block, so that space is taken off here; the page's own gap above the footer is enough. */
.aes-page .aes-terms > .aes-actions {
	margin: 0;
}

/* The privacy policy uses the same classes (October 2026). Its headings are jumped to from the
   contents list at the top, so they stop 70px short of the top of the screen and are not hidden
   under the fixed header on phones. A bold label (a right, a partner, a cookie type) is set in
   the 500 weight used for emphasis elsewhere, not full bold. A sub-heading within a section
   ("Children") is smaller than the section headings. */
.aes-page .aes-terms__body > h2[id] {
	scroll-margin-top: 70px;
}

.aes-page .aes-terms__body strong {
	font-weight: 500;
}

.aes-page .aes-terms__body > h3 {
	margin: var(--aes-gap-m) 0 var(--aes-gap-s);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

/* =====================================================================
   27. Service plan sign up page (and forms in parts)
   Rebuilt October 2026. The page is built from the shared parts in
   section 19 (its row has the class "aes-page"), with the heading and
   Direct Debit logo of the service plans page (24.1), the grey form box
   of the contact page (20) and the rows of 19.3.
   The sign up form (Ninja Forms form 25) comes in parts: contact
   details, address details, account details and plan details, one part
   at a time with Next and Previous buttons. The rules for that (27.2 and
   27.3) are not particular to this form, so any form in parts on a
   rebuilt page looks the same.
   Once the new page is live it no longer uses the older rules
   .title_row, .white_link and .page_subhead in section 14. Check no
   other page uses them before they are removed.
   ===================================================================== */

/* ---------- 27.1 Layout ---------- */

/* Phones and tablets: the heading, then the form, then "Before you sign up". On desktop (27.4)
   the form is on the left and "Before you sign up" on the right, so a long form does not
   run the full width of the page. */

/* ---------- 27.2 Steps: where you are in the form ---------- */

/* Ninja Forms shows an empty progress bar and a list of the parts' names, which wrapped onto
   two lines on a phone. In their place the list becomes a row of steps: a bar for each part,
   a small gap apart, the full width of the form, blue for the parts done and the part you are
   on, grey for the parts to come. On desktop each bar has its number and name under it, the
   current one in near-black and the rest in grey. A step already passed can be clicked to go
   back to it, as before.
   Ninja Forms styles the list itself (its own widths, positions, bold and underline for the
   current part), so these rules name the form's box (".nf-form-cont") as well, which makes
   them stronger than Ninja Forms' whichever loads last, and they set every property the list
   needs rather than relying on the defaults. */
.aes-page .nf-form-cont .nf-progress-container {
	display: none;
}

.aes-page .nf-form-cont .nf-mp-header {
	margin: 0;
	padding: 0;
}

.aes-page .nf-form-cont ul.nf-breadcrumbs {
	position: relative !important;
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	column-gap: 6px;
	width: 100%;
	margin: 0 0 var(--aes-gap-head) !important;
	padding: 0 !important;
	list-style: none;
	counter-reset: aes-step;
}

/* The theme gives lists an invisible "clearfix" before and after them. In a row of steps that
   counted as an extra step, so the four bars only filled four fifths of the width. */
.aes-page .nf-form-cont ul.nf-breadcrumbs::before,
.aes-page .nf-form-cont ul.nf-breadcrumbs::after {
	content: none !important;
	display: none !important;
}

.aes-page .nf-form-cont ul.nf-breadcrumbs > li {
	position: static !important;
	display: block;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	counter-increment: aes-step;
}

/* The bar */
.aes-page .nf-form-cont ul.nf-breadcrumbs > li::before {
	content: "";
	display: block;
	height: 4px;
	background: #d4d4d4;
}

.aes-page .nf-form-cont ul.nf-breadcrumbs > li.active::before,
.aes-page .nf-form-cont ul.nf-breadcrumbs > li:has(~ li.active)::before {
	background: #1076b6;
}

/* The name under the bar, with its number */
.aes-page .nf-form-cont ul.nf-breadcrumbs > li > a,
.aes-page .nf-form-cont ul.nf-breadcrumbs > li.active > a {
	position: static;
	display: block;
	width: auto;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #5c5c5c;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
}

.aes-page .nf-form-cont ul.nf-breadcrumbs > li > a::before {
	content: counter(aes-step) ". ";
}

.aes-page .nf-form-cont ul.nf-breadcrumbs > li.active > a {
	color: #141414;
}

/* ---------- 27.3 Next and Previous ---------- */

/* Ninja Forms sets the space round the row of buttons (20px above and below) with "!important",
   so the space set here has to be marked the same way to take its place.
   The buttons under each part: the same height as the form's send button (19.4), and the full
   width of the form between them. Next is AES blue; Previous is white with the grey outline of
   the outlined rows, which darkens and thickens on hover. On the first part, Next is on its
   own and takes the whole width. */
.aes-page .nf-form-cont .nf-next-previous {
	display: flex;
	gap: var(--aes-gap-s);
	margin: var(--aes-gap-m) 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* The same invisible "clearfix" before and after the list as on the steps (27.2): in a row of
   buttons it would add an extra gap at each end, so the buttons would not reach the edges */
.aes-page .nf-form-cont .nf-next-previous::before,
.aes-page .nf-form-cont .nf-next-previous::after {
	content: none !important;
	display: none !important;
}

.aes-page .nf-next-previous > li {
	flex: 1 1 0;
	float: none;
	margin: 0;
	padding: 0;
}

.aes-page .nf-next-previous input {
	display: block;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 0 18px;
	border-radius: 0;
	box-shadow: none;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-transform: none;
	cursor: pointer;
}

/* Next is AES blue and Previous white with a grey outline. The theme colours every button in a
   form blue, more strongly than a plain rule can undo, so these rules name the form's box as
   well and make their colours stick. Each button is found by its own class and, for Previous,
   also by being the first of two buttons in the row, in case the class is missing. */
.aes-page .nf-form-cont .nf-next-previous :is(li.nf-next-item input, input.nf-next),
.aes-page .nf-form-cont .nf-next-previous > li:last-child:not(:first-child) input {
	border: 1px solid #1076b6 !important;
	background: #1076b6 !important;
	box-shadow: none !important;
	color: #fff !important;
}

.aes-page .nf-form-cont .nf-next-previous :is(li.nf-next-item input, input.nf-next):hover,
.aes-page .nf-form-cont .nf-next-previous :is(li.nf-next-item input, input.nf-next):focus-visible,
.aes-page .nf-form-cont .nf-next-previous > li:last-child:not(:first-child) input:hover,
.aes-page .nf-form-cont .nf-next-previous > li:last-child:not(:first-child) input:focus-visible {
	border-color: #0c5d90 !important;
	background: #0c5d90 !important;
}

.aes-page .nf-form-cont .nf-next-previous :is(li.nf-previous-item input, input.nf-previous),
.aes-page .nf-form-cont .nf-next-previous > li:first-child:not(:last-child) input {
	border: 1px solid #5c5c5c !important;
	background: #fff !important;
	box-shadow: none !important;
	color: #141414 !important;
}

.aes-page .nf-form-cont .nf-next-previous :is(li.nf-previous-item input, input.nf-previous):hover,
.aes-page .nf-form-cont .nf-next-previous :is(li.nf-previous-item input, input.nf-previous):focus-visible,
.aes-page .nf-form-cont .nf-next-previous > li:first-child:not(:last-child) input:hover,
.aes-page .nf-form-cont .nf-next-previous > li:first-child:not(:last-child) input:focus-visible {
	border-color: #141414 !important;
	box-shadow: inset 0 0 0 1px #141414 !important;
}

.aes-page .nf-next-previous input:focus-visible {
	outline: 2px solid #141414;
	outline-offset: 2px;
}

/* Ninja Forms sets every field 5px in on each side (padding round the form, and again round each
   field and its column), so the fields sat 5px inside the required-fields line, the step bars
   and the buttons. All of that is taken off, so they all share the same left and right edges.
   Where a row holds two or more fields side by side, they keep a small gap between them, and
   the row is widened by the same amount so their outer edges still line up with everything
   else. Ninja Forms puts the fields of a row inside a wrapper of its own, so these rules look
   for fields anywhere inside the row rather than straight inside it (the first version of this
   rule did, and missed them, so the boxes touched). */
.aes-page .nf-form-cont .nf-form-content,
.aes-page .nf-form-cont .nf-row,
.aes-page .nf-form-cont .nf-cell,
.aes-page .nf-form-cont .nf-field-container,
.aes-page .nf-form-cont .nf-field,
.aes-page .nf-form-cont .field-wrap {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.aes-page .nf-form-cont .nf-row:has(.nf-cell + .nf-cell) {
	margin-left: calc(var(--aes-gap-s) / -2) !important;
	margin-right: calc(var(--aes-gap-s) / -2) !important;
}

.aes-page .nf-form-cont .nf-row:has(.nf-cell + .nf-cell) .nf-cell {
	box-sizing: border-box;
	padding-left: calc(var(--aes-gap-s) / 2) !important;
	padding-right: calc(var(--aes-gap-s) / 2) !important;
}

/* A list of choices (radio buttons or tick boxes) in a form: no bullets, and a small gap
   between the choices. Only the lists that hold choices: a list of points written into a
   text block in the form keeps its bullets (below). */
.aes-page .nf-form-cont :is(.listradio-container, .listcheckbox-container) .nf-field-element > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aes-page .nf-form-cont :is(.listradio-container, .listcheckbox-container) .nf-field-element > ul > li {
	margin: 0 0 var(--aes-gap-s);
	padding: 0;
}

.aes-page .nf-form-cont :is(.listradio-container, .listcheckbox-container) .nf-field-element > ul > li:last-child {
	margin-bottom: 0;
}

/* A block of text written into the form (a Ninja Forms "HTML" field), such as what the contact
   details will be used for: small type, set flush with the fields, with its points as a
   bulleted list one under another, whatever Ninja Forms does with the lists of choices. The
   wording for the sign up form's block is supplied separately and uses the class
   "aes-form-note". */
/* Ninja Forms draws text blocks in a faint box of their own with padding inside it. On the grey
   form box that read as a mistake, so the box and its padding are taken off and the text sits
   flush with the fields. */
.aes-page .nf-form-cont .html-container,
.aes-page .nf-form-cont .html-container .nf-field,
.aes-page .nf-form-cont .html-container .field-wrap,
.aes-page .nf-form-cont .html-container .nf-field-element {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.aes-page .nf-form-cont .html-container .nf-field,
.aes-page .nf-form-cont .html-container .field-wrap,
.aes-page .nf-form-cont .html-container .nf-field-element,
.aes-page .nf-form-cont .html-container .nf-field-element > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
}

/* The text block on the sign up form also carries the class "service_bgd" from the old page
   (section 14), which gave it 25px of padding above and 10px below, so it sat further from the
   fields round it than they do from each other. The padding is taken off here, so any text
   block is a field's gap from its neighbours whatever classes it has been given. */
.aes-page .nf-form-cont .nf-field-container.html-container {
	margin-top: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: inherit;
}

/* A text block has a label line above it that is never shown (Ninja Forms fills it with the
   word "HTML"). It is taken out altogether, so it can never add space. */
.aes-page .nf-form-cont .html-container .nf-field-label {
	display: none !important;
}

.aes-page .aes-form-note {
	color: #3d3d3d;
	font-size: 14px;
	line-height: 1.5;
}

.aes-page .aes-form-note > * {
	margin: 0;
}

.aes-page .aes-form-note > * + * {
	margin-top: var(--aes-gap-s);
}

.aes-page .aes-form-note ul {
	padding: 0;
	list-style: disc;
}

.aes-page .aes-form-note li {
	display: list-item;
	float: none;
	width: auto;
	margin: 0 0 6px 1.2em;
	padding: 0;
	line-height: 1.5;
}

.aes-page .aes-form-note li:last-child {
	margin-bottom: 0;
}

/* Boxes to type in and drop-down lists: all the same. The theme drew the drop-down lists its
   own way (taller or shorter than the boxes depending on the screen, a dark outline, wide
   letter spacing and bold), so on the last part they did not match the boxes on the parts
   before. Every box and list in a form on a rebuilt page is now 46px tall like the buttons,
   white with a grey outline, in 16px type. 16px also stops iPhones zooming in on the page
   when a box is tapped, which they do with anything smaller. The outline turns AES blue while
   you type. */
.aes-page .nf-form-cont .nf-field-element :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="url"], select, textarea) {
	width: 100%;
	height: 46px;
	min-height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #9a9a9a !important;
	border-radius: 0;
	background-color: #fff;
	box-shadow: none !important;
	color: #141414;
	font-size: 16px !important;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.3;
}

.aes-page .nf-form-cont .nf-field-element textarea {
	height: auto;
	min-height: 140px;
	padding: 10px 12px;
	line-height: 1.5;
}

/* The arrow on a drop-down list: 12px from the right-hand edge, with room left for it so a
   long choice never runs under it */
.aes-page .nf-form-cont .nf-field-element select {
	padding-right: 40px;
	background-position: right 12px center;
	background-size: auto 15px;
	cursor: pointer;
}

.aes-page .nf-form-cont .nf-field-element :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="url"], select, textarea):focus {
	border-color: #1076b6 !important;
	outline: 0;
	box-shadow: inset 0 0 0 1px #1076b6 !important;
}

/* The send button on the last part: AES blue like Next, in the same type as Next and Previous.
   The theme drew it dark grey and bold. */
.aes-page .nf-form-cont .submit-container :is(input[type="submit"], input[type="button"], button) {
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid #1076b6 !important;
	border-radius: 0;
	background: #1076b6 !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-transform: none;
	cursor: pointer;
}

.aes-page .nf-form-cont .submit-container :is(input[type="submit"], input[type="button"], button):is(:hover, :focus-visible) {
	border-color: #0c5d90 !important;
	background: #0c5d90 !important;
}

.aes-page .nf-form-cont .submit-container :is(input[type="submit"], input[type="button"], button):focus-visible {
	outline: 2px solid #141414;
	outline-offset: 2px;
}

/* On the last part the send button is part of the form and Previous comes after it on its
   own. Previous sits a small gap under the send button, as the two buttons do side by side on
   the other parts, rather than a field's gap away. */
.aes-page .nf-form-cont .nf-next-previous:not(:has(.nf-next-item, .nf-next)) {
	margin-top: var(--aes-gap-s) !important;
}

/* Space under the form. Flatsome puts 1.3em under every form on the site, which left the
   bottom of the grey box twice as far from the buttons as the top is from the required-fields
   line, and puts space under every button as well. Both are taken off on the rebuilt pages, so
   the grey box ends a medium gap under the buttons. The product page forms are not on a
   rebuilt page and keep their spacing. */
.aes-page .nf-form-cont form {
	margin-bottom: 0 !important;
}

.aes-page .nf-form-cont .submit-container :is(input[type="submit"], input[type="button"], button),
.aes-page .nf-form-cont .nf-next-previous input {
	margin: 0 !important;
}

/* A tick box and its words (such as agreeing to the data being kept): the words in ordinary
   weight and the small type of the form's notes, with the box level with their first line and
   a small gap between them. The theme set them bold and close together. */
.aes-page .nf-form-cont .checkbox-container .nf-field-label label,
.aes-page .nf-form-cont .listcheckbox-container .nf-field-element label {
	color: #3d3d3d;
	font-size: 14px;
	font-weight: 400 !important;
	line-height: 1.5;
}

.aes-page .nf-form-cont .checkbox-container .field-wrap {
	display: flex !important;
	align-items: flex-start;
	gap: var(--aes-gap-s);
}

.aes-page .nf-form-cont .checkbox-container .field-wrap > * {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.aes-page .nf-form-cont .checkbox-container .nf-field-element {
	flex: 0 0 auto;
	order: -1;
}

.aes-page .nf-form-cont .checkbox-container .nf-field-label {
	flex: 1 1 auto;
	margin: 0 !important;
}

.aes-page .nf-form-cont .checkbox-container input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #1076b6;
}

/* ---------- 27.4 Media queries ---------- */

/* Phone (up to 549px): only the step you are on is named, under the bars, at the full width
   of the form ("Step 1: Contact details"), as four names side by side would not fit */
@media (max-width: 549px) {

	/* The name is placed a fixed 10px under the bars (4px bars, so 14px from the top of the
	   list), whatever padding the list ends up with, so it can never sit on top of them. The
	   room it needs (about 30px) is added to the space under the list, so the first field is
	   still a heading gap below the name. */
	.aes-page .nf-form-cont ul.nf-breadcrumbs {
		margin-bottom: calc(var(--aes-gap-head) + 30px) !important;
	}

	.aes-page .nf-form-cont ul.nf-breadcrumbs > li > a {
		display: none;
	}

	.aes-page .nf-form-cont ul.nf-breadcrumbs > li.active > a {
		position: absolute;
		top: 14px;
		left: 0;
		right: 0;
		bottom: auto;
		display: block;
		margin: 0;
		font-size: 15px;
		white-space: nowrap;
	}

	.aes-page .nf-form-cont ul.nf-breadcrumbs > li.active > a::before {
		content: "Step " counter(aes-step) ": ";
	}

}

/* Tablets (550px to 849px): the four rows under "Before you sign up" are two by two rather than
   four full-width rows one under another. On a phone they stay one under another. */
@media (min-width: 550px) and (max-width: 849px) {

	.aes-page .aes-signup__split .aes-actions:has(> li:nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/* Desktop (850px and up): the form on the left, a little wider than "Before you sign up" on
   the right */
@media (min-width: 850px) {

	.aes-page .aes-signup__split {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}

}

/* =====================================================================
   29. About us page
   Rebuilt October 2026 from the shared parts in section 19 (its row has
   the class "aes-page"), with the top of the page laid out like the
   service plans page (24.1).
   ===================================================================== */

/* The top of the page is laid out like the top of the service plans page (24.1): the heading
   and opening paragraph with the fact rows under them on the left, the photo on the right,
   on desktop; on phones the heading, the photo, then the fact rows. On the service plans page
   the fact rows are moved down below the plans; here there are no plans, so they stay in
   place under the photo. */
.aes-page .aes-about .aes-plans__facts {
	order: 0;
}

/* The pair of photos further down (the forklift and the valves) are cut to the same shape (3
   wide by 2 high), whatever shape they were taken in, so they sit side by side at the same
   size. The middle of each photo is kept. */
.aes-page .aes-about .aes-block img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.aes-page .aes-about .aes-block :is(.img, .img-inner) {
	width: 100% !important;
	height: auto !important;
	padding-top: 0 !important;
}

/* The page keeps the business on the left (who we are, the range, the forklift, stock and
   delivery) and pumping stations on the right (packaged pumping stations, on-site servicing,
   the valves, service plans), in pairs side by side on desktop. On phones and tablets, where
   everything is one under another, the pairs are taken apart so each column reads through in
   one go: all of the left-hand column first, in its own order, then all of the right-hand
   column. (The pairs' boxes are taken out of the layout, so their sections become items of
   the page's own stack, a section gap apart, and are sorted by which column they belong to.) */
@media (max-width: 849px) {

	.aes-page .aes-about > .aes-split {
		display: contents;
	}

	.aes-page .aes-about .aes-about__left {
		order: 1;
	}

	.aes-page .aes-about .aes-about__right {
		order: 2;
	}

	/* The company details come last of all on phones */
	.aes-page .aes-about .aes-about__company {
		order: 3;
	}

}

/* Tablets (550px to 699px): everything is one column, so the two service plans rows have the
   room to sit side by side, half the width each. */
@media (min-width: 550px) and (max-width: 699px) {

	.aes-page .aes-about .aes-about__right .aes-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/* Tablets (700px to 849px): the page is laid out as on desktop, in two columns. The pairs are put
   back together (the business on the left, pumping stations on the right), the photos in the
   pairs sit side by side at the same size, and at the top the heading and opening paragraph are
   on the left with the photo on the right, the three fact rows across the full width under
   them. The two service plans rows stay one under the other, as a half column is too narrow
   for them side by side. */
@media (min-width: 700px) and (max-width: 849px) {

	.aes-page .aes-about .aes-plans__top {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--aes-gap-col);
		row-gap: var(--aes-gap);
	}

	.aes-page .aes-about .aes-plans__intro {
		grid-column: 1;
		grid-row: 1;
	}

	.aes-page .aes-about .aes-plans__photo {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		aspect-ratio: 4 / 3;
		margin: 0;
	}

	.aes-page .aes-about .aes-plans__facts {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.aes-page .aes-about > .aes-split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--aes-gap-col);
	}

	.aes-page .aes-about .aes-about__left,
	.aes-page .aes-about .aes-about__right,
	.aes-page .aes-about .aes-about__company {
		order: 0;
	}

	/* As on desktop: the right-hand heading is moved down by the difference in size so the two
	   headings sit on the same line, and the company details sit a medium gap under "Stock and
	   delivery" */
	.aes-page .aes-about > .aes-split > :nth-child(2) > h2:first-child {
		font-size: 1.4rem;
		margin-top: calc(0.805 * (1.6rem - 1.4rem));
	}

	.aes-page .aes-about .aes-about__company {
		margin-top: calc(var(--aes-gap-m) - var(--aes-gap));
	}

}

/* Desktop (850px and up): the company details are a third item in the last pair, so they drop
   into the left-hand column under "Stock and delivery". They are moved up to sit a medium gap
   under it, as if they were part of that section, rather than a section gap away. */
@media (min-width: 850px) {

	.aes-page .aes-about .aes-about__company {
		margin-top: calc(var(--aes-gap-m) - var(--aes-gap));
	}

}

/* =====================================================================
   30. Pool heat pump questions page
   Rebuilt October 2026 from the shared parts in section 19 (its row has
   the class "aes-page"). The page is kept short: the opening, two pairs
   of rows (what to do, and the key facts) and a banner picture, then four
   sections, each with its main answer on the left and its questions in
   an accordion on the right, closed.
   ===================================================================== */

/* The sections are 60px apart on every screen size, so each one stands clearly on its own */
.aes-page .aes-stack.aes-heat {
	row-gap: 60px;
}

/* Each section is a level pair (24.5): the heading and short answer on the left, and a heading
   for its questions ("How they work FAQs") with the accordion on the right, so the two headings
   sit on the same line and the section reads left to right. On phones and tablets the
   questions follow the answer. */

/* The banner picture beside the opening, and the heat pump diagram in the first "How they work"
   question: the full width of their space, never wider than they were drawn, centred */
.aes-page .aes-heat__banner {
	align-self: center;
}

.aes-page :is(.aes-heat__banner, .aes-heat__diagram) img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.aes-page .aes-heat__diagram .img {
	margin-bottom: 0;
}

/* Smaller tablets (550px to 699px): the banner picture is cropped to a band, two wide to one high,
   so it does not fill the screen. The crop is weighted towards the lower part, where the heat pump
   is. */
@media (min-width: 550px) and (max-width: 699px) {

	.aes-page .aes-heat__banner img {
		width: 100%;
		aspect-ratio: 2 / 1;
		object-fit: cover;
		object-position: 50% 75%;
	}

}

/* Larger tablets and desktop (700px and up): the opening is in two columns. The heading, the
   short answer and the four key facts are on the left, the facts one under another, and the
   picture is on the right, as tall as the left column, cropped to fit and weighted towards the
   lower part, where the heat pump is. */
@media (min-width: 700px) {

	.aes-page .aes-heat__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--aes-gap-col);
	}

	.aes-page .aes-heat__top .aes-actions--pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.aes-page .aes-heat__banner {
		position: relative;
		align-self: stretch;
		min-height: 260px;
		overflow: hidden;
	}

	.aes-page .aes-heat__banner img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: 60% 75%;
	}

}

/* The accordions look exactly as they do on the product pages (section 4): no line above the
   first question, the questions 5px in from the edge, and the product page space inside an open
   question. The shared page accordion (19.7) adds a top line and takes the 5px off; both are
   undone here. */
.aes-page .aes-heat .accordion {
	border-top: 0;
}

.aes-page .aes-heat a.accordion-title.plain {
	padding-left: 5px;
}

.aes-page .aes-heat .accordion-inner {
	padding: 2rem 0.1rem;
}

/* WordPress adds paragraph breaks round the accordion shortcodes, which leave empty paragraphs
   between the questions. They are hidden. (Each question was also 10px taller than on the
   product pages because of an old rule for this page, page-id-11698, which has been removed.) */
.aes-page .aes-heat :is(.accordion, .accordion-item) > p:empty,
.aes-page .aes-heat :is(.accordion, .accordion-item) > br {
	display: none;
}

/* Numbered steps inside an accordion, set like its bulleted lists */
.aes-page .aes-heat .accordion-inner ol {
	padding: 0;
}

.aes-page .aes-heat .accordion-inner ol li {
	margin: 0 0 6px 1.4em;
}

/* The balance point graph inside its answer: no wider than 300px, as it has a tall photo of a
   heat pump under it */
.aes-page .aes-heat .accordion-inner img {
	max-width: 300px;
}

/* The heat pump diagram is not held to 300px: its labels need the full width of the answer to
   be read */
.aes-page .aes-heat .accordion-inner .aes-heat__diagram img {
	max-width: 100%;
}

/* The accordion sits under its heading so the words of the first question line up with the first
line of the answer beside it: the heading gap, less the 15px of padding above the question and
about 5px of space above its letters. WordPress leaves an empty paragraph between the heading
and the accordion, which took the heading gap, so the gap is set on the accordion itself. */
.aes-page .aes-heat__group .aes-block > .accordion {
	margin-top: calc(var(--aes-gap-head) - 20px);
}

/* =====================================================================
   31. Pool heat pump servicing page
   Rebuilt October 2026 from the shared parts in section 19 (its row has
   the class "aes-page"), with the top of the page laid out like the
   service plans page (24.1): the heading and opening line with the fact
   rows under them on the left, the photo on the right on desktop. Then
   two columns: on the left what's included, areas covered, health and
   safety and booking; on the right when to book and the before and after
   slideshow. The
   drag to compare photos (31.1) are ready for the next page.
   ===================================================================== */

/* There are no plans on this page, so the fact rows stay under the photo on phones, as on the
   About us page (29) */
.aes-page .aes-hpservice .aes-plans__facts {
	order: 0;
}

/* The photo at the top is the theme's own image block, which wraps the picture in two boxes of
   its own. They are taken out of the way, so the picture fills the photo space (24.1) as a
   plain picture does. */
.aes-page .aes-hpservice .aes-plans__photo :is(.img, .img-inner) {
	position: static;
	width: 100% !important;
	height: auto !important;
	padding-top: 0 !important;
	margin: 0;
}

/* The before and after slideshow: the theme's own slider (no plugin needed), the full width of
   its column. The photos were taken in different shapes, mostly tall, so every one is cut to
   the same landscape shape (4 wide by 3 high), keeping the middle of the photo. The slideshow
   then stays one height as it moves, and is no taller than the section beside it. The pictures
   lose the theme's space under them. */
/* The photos sit a heading gap (30px) under the paragraph above them, rather than the medium
   gap, so the text and the photos read as two parts */
.aes-page .aes-block > .aes-hpservice__slider {
	margin-top: var(--aes-gap-head);
}

.aes-page .aes-hpservice__slider .img {
	margin-bottom: 0;
}

.aes-page .aes-hpservice__slider :is(.img, .img-inner) {
	width: 100% !important;
	height: auto !important;
	padding-top: 0 !important;
}

.aes-page .aes-hpservice__slider img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* The slideshow's markers, one for each photo: flat bars in a centred row under the photo, on
   the page's white, pale grey with the current photo's bar in AES blue. Square cornered, like
   everything else on the site. They sit under the photo rather than on it, so they show up
   whatever the photo looks like. The theme's own dot styles (an outline ring, placed with its
   own space under the slider) are replaced. Clicking a bar goes to that photo. */
.aes-page .aes-hpservice__slider .flickity-page-dots {
	position: static;
	width: auto;
	transform: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: var(--aes-gap-s) 0 0;
	padding: 0;
	background: none;
	list-style: none;
	line-height: 0;
}

.aes-page .aes-hpservice__slider .flickity-page-dots .dot {
	width: 36px;
	height: 4px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: #e6e6e6;
	opacity: 1;
	cursor: pointer;
}

.aes-page .aes-hpservice__slider .flickity-page-dots .dot.is-selected {
	background: #1076b6;
	opacity: 1;
}

/* ---------- 31.1 Before and after: drag to compare ---------- */

/* Two photos of the same view, one on top of the other: the "after" photo sets the size, and
   the "before" photo lies over it, cut off at the handle. Dragging anywhere on the photo (or
   using the arrow keys once it has focus) moves the handle, so more of one or the other shows.
   The handle starts in the middle. What does the dragging is an invisible slider control laid
   over the whole photo; the script "AES before and after: drag to compare" in functions.php
   passes its position to the stylesheet as --pos. Without the script both halves still show.
   The parts can be used on any page with the class "aes-page". */
.aes-page .aes-compare {
	--pos: 50%;
	position: relative;
	overflow: hidden;
	background: var(--aes-grey);
	-webkit-user-select: none;
	user-select: none;
}

.aes-page .aes-compare img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.aes-page .aes-compare .aes-compare__before {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* A wide comparison: both photos cut to the same landscape shape (4 wide by 3 high), keeping
   the middle of each, for a place where tall photos would stand far taller than the text
   beside them */
.aes-page .aes-compare--wide {
	aspect-ratio: 4 / 3;
}

.aes-page .aes-compare--wide img {
	height: 100%;
	object-fit: cover;
}

/* The handle: a white line down the photo, with a square grip in the middle */
.aes-page .aes-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 2px;
	margin-left: -1px;
	background: #fff;
	pointer-events: none;
}

.aes-page .aes-compare__handle::after {
	content: "\2039\00a0\203A";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	transform: translate(-50%, -50%);
	background: #fff;
	color: #141414;
	font-size: 20px;
	line-height: 38px;
	text-align: center;
}

/* "Before" at the top left and "After" at the top right, on white */
.aes-page .aes-compare__label {
	position: absolute;
	top: 10px;
	padding: 3px 8px;
	background: #fff;
	color: #141414;
	font-size: 0.8rem;
	line-height: 1.4;
	pointer-events: none;
}

.aes-page .aes-compare__label--before {
	left: 10px;
}

.aes-page .aes-compare__label--after {
	right: 10px;
}

/* The invisible slider control over the whole photo. Up and down movements on a phone still
   scroll the page; only side to side movements move the handle. */
.aes-page .aes-compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	box-shadow: none;
	touch-action: pan-y;
}

/* Someone using the keyboard sees a blue outline round the photo when the control has focus */
.aes-page .aes-compare:has(.aes-compare__range:focus-visible) {
	outline: 2px solid #1076b6;
	outline-offset: 2px;
}

/* Under the photo, a line telling people what to do */
.aes-page .aes-compare + .aes-small {
	margin-top: var(--aes-gap-s);
}

/* The right-hand column is a stack of two sections (when to book, before and after). The split (19.8)
   moves a heading at the top of a stack in the right-hand column down to line up with a
   larger page heading; here the left-hand column starts with a section heading of the same
   size, so that move is taken off, as for a level pair (24.5). */
.aes-page .aes-hpservice__right > .aes-block:first-child > h2:first-child {
	margin-top: 0;
}

/* =====================================================================
   32. Above ground pool connection guide
   Rebuilt October 2026 from the shared parts in section 19 (its row has
   the class "aes-page"). The opening, then the hoses to pick from in a
   row across the page; then one table of the fittings each heat pump or filter set needs;
   then the flow rate and PTFE tape notes side by side; then the products.
   ===================================================================== */

/* ---------- 32.1 Opening, and which hoses do I have? ---------- */

/* The opening is as wide as the left-hand column of a pair on desktop, so its lines are the
   same length as on the other pages */
@media (min-width: 850px) {

	.aes-page .aes-fitting__intro {
		max-width: calc((100% - var(--aes-gap-col)) / 2);
	}

}

/* The five hoses in one row across the page, set out like the products under "You might also
   need": five to a row on desktop, three on tablets and two on phones. Each hose is a picture
   with its name under it. */
.aes-page .aes-hoses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--aes-gap-m) var(--aes-gap-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 550px) {

	.aes-page .aes-hoses {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

@media (min-width: 850px) {

	.aes-page .aes-hoses {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: 30px;
	}

}

/* Each hose is a square grey tile, a shade lighter than the boxes in the table below, with its
   name centred along the bottom and its picture (square, like the tile) filling the space
   above it. The pictures are transparent, so they sit straight on the grey, and the white
   hoses keep a clear outline. The tiles are a small gap apart, as the boxes in the table are.
   They are not links, so they do not change on hover. */
.aes-page .aes-hoses {
	gap: var(--aes-gap-s);
}

@media (min-width: 850px) {

	.aes-page .aes-hoses {
		column-gap: var(--aes-gap-s);
	}

}

.aes-page .aes-hoses li {
	display: flex;
	flex-direction: column;
	align-items: center;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 14px;
	background: #f9f9f9;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	color: #3d3d3d;
}

.aes-page .aes-hoses img {
	display: block;
	flex: 1 1 0;
	min-height: 0;
	width: 100%;
	height: auto;
	margin: 0 0 var(--aes-gap-s);
	object-fit: contain;
}

.aes-page .aes-hoses span {
	display: block;
}

/* ---------- 32.2 Fittings you need ---------- */

/* One row for each heat pump or filter set: its name, then the fitting for push fit hoses and
   the fitting for threaded union hoses. Each fitting is a grey box that links to the product:
   a small picture, a short name and an arrow at the far right, like the action rows (19.3).
   The box turns a darker grey on hover, as the tiles in the sizing guide do. The links are
   not underlined. The rows are a small gap apart. The table is laid out as a grid, so the
   boxes can have gaps between them; the theme's table styles (lines, capitals and spacing in
   the headings) are replaced. */
.aes-page .aes-fits,
.aes-page .aes-fits :is(thead, tbody) {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

.aes-page .aes-fits tr {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--aes-gap-s);
	align-items: center;
	background: none;
}

.aes-page .aes-fits tbody {
	display: grid;
	row-gap: var(--aes-gap-s);
}

.aes-page .aes-fits :is(th, td) {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: #141414;
}

/* The column headings, small and grey, in line with the text in the boxes */
.aes-page .aes-fits thead th {
	padding: 0 0 8px;
	font-size: 14px;
	color: #5c5c5c;
}

.aes-page .aes-fits thead th + th {
	padding-left: 14px;
}

/* The heat pump or filter set's name is in a pale blue box of its own, the same height as the
   two fittings beside it, so each row reads as one row of the table and the name stands out
   as its heading. The name is a touch heavier (500) to hold its own on the blue; "No longer
   sold" under it stays at the normal weight. It is not a link, so it has
   no arrow and does not change on hover. */
.aes-page .aes-fits tbody th {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
	padding: 10px 14px;
	background: var(--aes-pale);
	font-weight: 500;
}

/* "No longer sold", under the name of a model that has been discontinued */
.aes-page .aes-fits__old {
	display: block;
	font-weight: 400;
	font-size: 14px;
	color: #5c5c5c;
}

/* A fitting's box: its picture, 56px square, its name, and the arrow. The pictures are
   transparent, so they sit straight on the grey. */
.aes-page .aes-fits__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 10px 40px 10px 10px;
	background: var(--aes-grey);
	color: #141414;
	text-decoration: none;
}

.aes-page .aes-fits__item:hover,
.aes-page .aes-fits__item:focus-visible {
	background: #ebebeb;
	color: #141414;
}

.aes-page .aes-fits__item,
.aes-page .aes-fits__item span {
	text-decoration: none !important;
}

.aes-page .aes-fits__item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	border-top: 1.5px solid #141414;
	border-right: 1.5px solid #141414;
	transform: translateY(-50%) rotate(45deg);
}

.aes-page .aes-fits__pic {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
}

.aes-page .aes-fits__pic :is(.img, .img-inner) {
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	padding: 0 !important;
}

.aes-page .aes-fits__pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Phones and tablets: each heat pump or filter set is a group of its own, the groups a medium
   gap apart. Its name is in a pale blue box across the top, so it stands out as the heading of
   the group; every name box is the same height, whether the name takes one line or two. Under
   it the two fittings sit side by side in two grey tiles, every tile the same height (170px,
   room for a name on two lines): in each, a small
   label at the top (Push fit or Threaded union, from the cell's data-label), the picture, the
   name under it and the arrow at the top right. */
@media (max-width: 849px) {

	.aes-page .aes-fits thead {
		display: none;
	}

	.aes-page .aes-fits tbody {
		row-gap: var(--aes-gap-m);
	}

	.aes-page .aes-fits tr {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--aes-gap-s);
		align-items: stretch;
	}

	.aes-page .aes-fits tbody th {
		grid-column: 1 / -1;
		min-height: 66px;
	}

	.aes-page .aes-fits td {
		position: relative;
	}

	.aes-page .aes-fits td::before {
		content: attr(data-label);
		position: absolute;
		top: 10px;
		left: 12px;
		right: 32px;
		z-index: 1;
		font-size: 13px;
		line-height: 1.4;
		color: #5c5c5c;
		pointer-events: none;
	}

	.aes-page .aes-fits__item {
		flex-direction: column;
		justify-content: flex-start;
		gap: 8px;
		min-height: 170px;
		padding: 38px 12px 14px;
		text-align: center;
	}

	.aes-page .aes-fits__item::after {
		top: 17px;
		right: 14px;
		transform: rotate(45deg);
	}

	.aes-page .aes-fits__pic {
		flex: 0 0 auto;
		width: 64px;
		height: 64px;
	}

}

/* =====================================================================
   33. Modernising your pool plant room page
   Rebuilt October 2026 from the shared parts in section 19 (its row has
   the class "aes-page"). The opening and three fact rows, with the first
   before and after photos beside them (drag to compare, 31.1); then the
   benefits and the points to consider side by side; then the second
   before and after photos beside servicing, areas covered, health and
   safety and a call row.
   ===================================================================== */

/* The right-hand column of the last pair is a stack of sections. The split (19.8) moves a
   heading at the top of a stack in the right-hand column down to line up with a larger page
   heading; here the left-hand column starts with a section heading of the same size, so that
   move is taken off, as for a level pair (24.5). */
.aes-page .aes-plantroom__right > .aes-block:first-child > h2:first-child {
	margin-top: 0;
}

/* =====================================================================
   34. Brand pages
   The block at the top of a brand's product list (its row has the classes
   "aes-page aes-brand"), built from the shared parts in section 19 so the
   same block suits every brand: only its name, wording, number and logo
   change. On desktop the heading, a short line and the trade enquiries
   row take most of the width, and the logo is at the right, beyond a thin
   grey line. On phones and tablets the logo sits small above the heading, so the
   products start as high up the screen as they can.
   ===================================================================== */

/* With the title bar hidden (below), the block keeps the usual space under the header that
   every page has (19.1), and has a section gap below it, before the products */
.aes-page.aes-brand {
	padding-bottom: 0;
	margin-bottom: var(--aes-gap);
}

/* The block lines up with the product grid under it. The older rules move the brand
   description in from the left (12px on desktop, 5px on tablets, and 5px out to the left on
   phones); those are undone, and the block's own row and column add no space at the sides of
   their own, so its edges are the edges of the products. */
.tax-yith_product_brand .term-description:has(.aes-brand) {
	left: 0;
	margin-left: 0;
	margin-right: 0;
}

/* The theme pulls a row inside a container 15px out at each side (margin -15px, a rule of its
   own that outranks a plain one), which put the block's text 15px left of the products. Its
   side margins are set to 0 here, firmly. */
.term-description .row.aes-page.aes-brand {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.aes-page.aes-brand > .col {
	padding-left: 0;
	padding-right: 0;
}

/* Desktop: the product grid finishes 12px short of the right-hand edge of the brand
   description (measured in the browser, October 2026: the description 73px to 1295px wide,
   the products 73px to 1283px), so the block stops 12px short too */
@media (min-width: 992px) {

	.term-description .row.aes-page.aes-brand {
		margin-right: 12px !important;
	}

}

/* The older brand page rules (in the media queries of sections 13 and 14) set the heading's
   size, weight and spacing, shrink the paragraphs and float every picture to the right. The
   heading here is the same as on every other page (1.6rem, weight 500, as set for all h1s in
   section 1), at every screen size, and the other shared page styles are used. */
.aes-page.aes-brand h1 {
	margin: 0 !important;
	font-size: 1.6rem;
	font-weight: 500;
}

.aes-page.aes-brand p {
	color: #141414;
	font-size: 1rem;
}

.aes-page.aes-brand img {
	float: none !important;
	margin: 0 !important;
}

/* Desktop: the text takes most of the width and the logo sits at the right, centred up and
   down beside it, with a thin grey line between the two that ties the logo to the text. The
   trade enquiries row is only as wide as its words need, not half the page. */
.aes-page .aes-brand__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The logo is kept small, no bigger than the AES logo in the site header: 140px wide on
   desktop and 110px on phones and tablets. These widths are for a logo file cropped tight to
   its edges, with no border of its own. */
.aes-page .aes-brand__logo :is(.img, .img-inner) {
	width: 100% !important;
	max-width: 140px;
	margin: 0;
}

.aes-page .aes-brand__logo img {
	display: block;
	width: 100%;
	max-width: 140px;
	height: auto;
}

@media (min-width: 850px) {

	.aes-page.aes-brand .aes-actions {
		display: flex;
	}

	.aes-page.aes-brand .aes-action {
		padding-right: 56px;
	}

	.aes-page .aes-brand__top {
		container-type: inline-size;
		grid-template-columns: minmax(0, 1fr) 240px;
		column-gap: 40px;
	}

	/* Long lines are hard to read, so the text runs no further than three fifths of the way
	   across the block (60cqw: 60% of the block's width), leaving white space before the line
	   and the logo */
	.aes-page .aes-brand__top > .aes-block > p {
		max-width: 60cqw;
	}

	.aes-page .aes-brand__logo {
		padding-left: 40px;
		border-left: 1px solid #e6e6e6;
	}

}

/* Phones and tablets: the logo comes first, small, at the left, a medium gap
   above the heading */
@media (max-width: 849px) {

	.aes-page .aes-brand__top {
		row-gap: var(--aes-gap-m);
	}

	.aes-page .aes-brand__logo {
		order: -1;
		justify-content: flex-start;
	}

	.aes-page .aes-brand__logo :is(.img, .img-inner),
	.aes-page .aes-brand__logo img {
		max-width: 110px;
	}

}

/* The theme's title bar above the block holds only the breadcrumb (already hidden on brand
   pages) and "Showing all 35 results". The count can't be moved down beside the inc/ex VAT
   switch with the stylesheet alone, so on brand pages the whole bar is hidden, and the block
   is the first thing under the header. */
.tax-yith_product_brand .shop-page-title {
	display: none;
}

/* =====================================================================
   35. Pumping station quotations
   Rebuilt October 2026 from the shared parts in section 19 (its row has
   the class "aes-page"). The opening and the contact rows are on the
   left and the drawing of where to measure on the right, as a level pair
   (19.5); the quotation form (Ninja Forms form 21) is a section of its
   own below them, in the grey box of the contact form (section 20), with
   its short fields in two columns from 700px wide.
   ===================================================================== */

/* The drawing fills its column, and is the picture that opens full size when selected */
.aes-page .aes-quote__drawing img {
	display: block;
	width: 100%;
	height: auto;
}

/* "Request a quotation" jumps down to the form, which is below on every screen size, so the
   row is shown on desktop too (the contact page hides its own, because there the form is
   alongside) */
.aes-page .aes-quote .aes-actions__jump {
	display: block;
}

/* The grey box holds the form. On phones it runs to both edges of the screen, as on the contact
   page; from 550px it is the width of the page's text. The space inside is a medium gap. */
.aes-page .aes-quote__panel {
	margin-left: -15px;
	margin-right: -15px;
	padding: var(--aes-gap-m) 15px;
	background: var(--aes-grey);
}

/* Ninja Forms puts a hidden notice in front of the form, which the block rule in 19.2 treated as
   the first thing, pushing the form down a medium gap (see the contact page, section 20) */
.aes-page .aes-quote__panel > .nf-form-cont,
.aes-page .aes-quote__panel > :has(.nf-form-cont) {
	margin-top: 0;
}

@media (min-width: 550px) {

	.aes-page .aes-quote__panel {
		margin-left: 0;
		margin-right: 0;
		padding-left: var(--aes-gap-m);
		padding-right: var(--aes-gap-m);
	}

}

/* The four contact rows sit under the text and the drawing, two by two from 550px wide, a
   medium gap under them. On a phone they stack, and come straight after the opening text, before
   the drawing, so the phone number is near the top. */
.aes-page .aes-quote__intro {
	display: flex;
	flex-direction: column;
}

.aes-page .aes-quote__intro > .aes-actions {
	margin-top: var(--aes-gap-m);
}

@media (max-width: 699px) {

	.aes-page .aes-quote__top {
		display: contents;
	}

	.aes-page .aes-quote__top > :first-child {
		order: 1;
	}

	.aes-page .aes-quote__intro > .aes-actions {
		order: 2;
	}

	.aes-page .aes-quote__top > :nth-child(2) {
		order: 3;
		margin-top: var(--aes-gap);
	}

}

@media (min-width: 550px) and (max-width: 849px) {

	.aes-page .aes-quote__intro > .aes-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/* Tablets from 700px: the buttons share the text and drawing's column gap, so the right-hand
   buttons start in line with the drawing above them */
@media (min-width: 700px) and (max-width: 849px) {

	.aes-page .aes-quote__intro > .aes-actions {
		column-gap: var(--aes-gap-col);
	}

}

/* Desktop (850px and up): the four rows are one column, in the left half under the text, with the
   drawing in the right half beside both. The page is a grid of two columns and two rows: the
   text, then the rows, with the drawing spanning both. */
@media (min-width: 850px) {

	.aes-page .aes-quote__intro {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto 1fr;
		column-gap: var(--aes-gap-col);
	}

	.aes-page .aes-quote__top {
		display: contents;
	}

	.aes-page .aes-quote__top > :first-child {
		grid-column: 1;
		grid-row: 1;
	}

	.aes-page .aes-quote__top > :nth-child(2) {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.aes-page .aes-quote__intro > .aes-actions {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		grid-template-columns: minmax(0, 1fr);
	}

}

/* Tablets (700px to 849px): the pair is side by side as on desktop, with the right-hand heading
   moved down by the difference in size so the two headings sit on the same line (19.8) */
@media (min-width: 700px) and (max-width: 849px) {

	.aes-page .aes-quote__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--aes-gap-col);
	}

	.aes-page .aes-quote__top > :nth-child(2) > h2:first-child {
		font-size: 1.4rem;
		margin-top: calc(0.805 * (1.6rem - 1.4rem));
	}

}

/* From 700px the fields are in two columns, a column gap apart. Ninja Forms puts each field in a
   row of its own (".nf-row", inside "nf-rows-wrap"), so the rows are the items of the grid. The
   site name, the box for other information, the tick box and the send button run the full
   width. The dividers are not shown (19.4), so their empty rows are not either. */
@media (min-width: 700px) {

	.aes-page .aes-quote__panel nf-rows-wrap {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--aes-gap-col);
	}

	.aes-page .aes-quote__panel .nf-row {
		min-width: 0;
	}

	.aes-page .aes-quote__panel .nf-row:has(.hr-container, .hidden-container) {
		display: none;
	}

	.aes-page .aes-quote__panel .nf-row:first-child,
	.aes-page .aes-quote__panel .nf-row:has(.textarea-container, .checkbox-container, .submit-container, .html-container) {
		grid-column: 1 / -1;
	}

	/* When a label runs to two lines, the box under it is still level with its neighbour: the
	   label takes the spare height and the box sits at the bottom of the row. */
	.aes-page .aes-quote__panel .nf-row:not(:has(.checkbox-container, .submit-container, .html-container, .hr-container, .hidden-container)),
	.aes-page .aes-quote__panel .nf-row:not(:has(.checkbox-container, .submit-container, .html-container, .hr-container, .hidden-container)) :is(nf-cells, .nf-cell, nf-fields, nf-field, .nf-field-container, .nf-field, .field-wrap) {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	.aes-page .aes-quote__panel .nf-row:not(:has(.checkbox-container, .submit-container, .html-container, .hr-container, .hidden-container)) .field-wrap > .nf-field-label {
		flex: 1 1 auto;
	}

}

/* =====================================================================
   36. Servicing pages (pumping station servicing and the pages that go with it)
   Rebuilt October 2026, starting with /packaged-pumping-station-servicing/.
   The page is built from the shared parts in section 19 (blocks 19.2,
   action rows 19.3, accordions 19.7) with the plain lists from 24.4. The
   rules here are the parts the servicing pages share: the opening block
   with its photo, a short list of titles each with a line of text under
   it, the Direct Debit logo on the service plans block, and two
   accordions side by side.
   Once every servicing page is rebuilt they no longer use the older rules
   in section 14: .title_row, .service_bgd, .service_call and .left-border
   (and .ux_image img, which only squared off the corners of the images).
   Check no other page uses them before they are removed.
   ===================================================================== */

/* ---------- 36.1 The page and its photo ---------- */

/* The page is a stack (19.1), so its parts are a section gap apart. The theme puts an invisible
   "clearfix" before and after a list, which a grid counts as two extra items, so it is switched
   off on every list on these pages that is laid out as a grid. */
.aes-page .aes-svc ul::before,
.aes-page .aes-svc ul::after {
	content: none;
	display: none;
}

/* A list that is one of the page's own parts (the closing call row) has no space of its own
   above or below it: the page's gap is the only space round it. The theme gives every list 1.3em
   underneath. */
.aes-page .aes-svc > ul {
	margin: 0;
}

/* The photo is cropped to a shallow band (five wide to two high, as on the service plans page) so
   it does not push the rest of the page down the screen. On phones and tablets it runs to both
   edges of the screen: the column has 15px of padding either side, and the photo is pulled out
   over it. The picture fills the box and is cropped to fit, so a different photo can be put in
   without any other change. */
.aes-page .aes-svc__photo {
	position: relative;
	aspect-ratio: 5 / 2;
	margin: 0 -15px;
	overflow: hidden;
	background: var(--aes-grey);
}

.aes-page .aes-svc__photo img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- 36.2 A short list of titles with a line of text under each ---------- */

/* Each item is a title with one line of text under it. One column on phones, two on tablets and
   three on desktop (in 36.5). The title is medium weight, not bold. */
.aes-page .aes-svc__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aes-gap-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aes-page .aes-svc__list > li {
	margin: 0;
	padding: 0;
}

.aes-page .aes-svc__item-title {
	display: block;
	color: #141414;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.aes-page .aes-svc__item-text {
	display: block;
	margin-top: 4px;
	color: #3d3d3d;
	font-size: 15px;
	line-height: 1.4;
}

/* ---------- 36.3 The Direct Debit logo ---------- */

/* Wherever the words "Direct Debit" are on a page, the logo is with them. In the service plans
   block it is at the top right, opposite the heading and level with the top of it, and takes up
   no height of its own (as on the service plans page, 24.1). It comes last in the block in the
   code, so the spacing rules in 19.2 still treat the heading and the text under it as
   neighbours. The logo sits in a box of its own, because WordPress wraps a picture that stands
   alone in a paragraph, which would stop it being placed. The heading keeps clear of it. The
   logo is never taller than 44px, so it ends before the text under the heading starts (the
   heading is about 28px tall and the heading gap 30px), whatever shape the picture is. */
.aes-page .aes-svc__plans {
	position: relative;
}

.aes-page .aes-svc__plans > h2 {
	padding-right: 120px;
}

.aes-page .aes-svc__plans > .aes-svc__dd {
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	margin: 0;
}

.aes-page .aes-svc__dd img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 44px;
	margin: 0;
	object-fit: contain;
	object-position: right top;
}

/* ---------- 36.4 Two accordions side by side ---------- */

/* On phones and tablets the two accordions follow one another as if they were one: the second
   one has no line above it of its own, as the last item of the first one already has a line under
   it, and no gap is left between them (the site's accordion has 20px under it, section 4). On
   desktop (36.5) they sit side by side, a column gap apart. */
.aes-page .aes-svc__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.aes-page .aes-svc__cols > .accordion {
	margin: 0;
}

.aes-page .aes-svc__cols > .accordion + .accordion {
	border-top: 0;
}

/* The accordions look exactly as they do on the product pages (section 4): no line above the
   first question, the questions 5px in from the edge, and the product page space inside an open
   question. The shared page accordion (19.7) adds a top line and takes the 5px off; both are undone
   here, as on the pool heat pump pages (30). Without the top line the second accordion needs no
   line of its own on desktop either. */
.aes-page .aes-svc .accordion {
	border-top: 0;
}

.aes-page .aes-svc a.accordion-title.plain {
	padding-left: 5px;
}

.aes-page .aes-svc .accordion-inner {
	padding: 2rem 0.1rem;
}

/* WordPress adds paragraph breaks round the accordion shortcodes, which leave empty paragraphs
   between the questions. They are hidden. */
.aes-page .aes-svc :is(.accordion, .accordion-item) > p:empty,
.aes-page .aes-svc :is(.accordion, .accordion-item) > br {
	display: none;
}

/* The first question's words start a heading gap under the heading, like the text under any other
   heading: the heading gap less the 15px of padding above the question */
.aes-page .aes-svc__more > .aes-svc__cols {
	margin-top: calc(var(--aes-gap-head) - 15px);
}

/* The counties are set in two columns, so the list is short on a phone. A name is never split
   between the two columns. */
.aes-page .aes-list--cols {
	columns: 2;
	column-gap: var(--aes-gap-m);
}

.aes-page .aes-list--cols li {
	break-inside: avoid;
}

/* ---------- 36.5 Media queries ---------- */

/* Tablet (550px to 849px): the list of services in two columns */
@media (min-width: 550px) and (max-width: 849px) {

	.aes-page .aes-svc__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--aes-gap-s);
		row-gap: var(--aes-gap-s);
		grid-auto-rows: 1fr;
	}

	/* On a tablet each item is a light grey tile, so every tile on the page is the same height however
	   much text it has, and the two columns look even */
	.aes-page .aes-svc__list > li {
		padding: var(--aes-gap-s) 14px;
		background: var(--aes-grey);
	}

}

/* Larger tablet (700px to 849px): the opening block and the service plans block are on the left,
   one under the other, and the photo is on the right, as tall as the two together, as on desktop.
   Everything else runs the full width. A smaller tablet and a phone keep the photo as a band
   across the page. */
@media (min-width: 700px) and (max-width: 849px) {

	/* The text column is a little wider than the photo, so "Call to arrange a service or get a
	   quote" stays on one line rather than leaving "quote" on a line of its own */
	.aes-page .aes-svc {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		column-gap: var(--aes-gap-col);
	}

	.aes-page .aes-svc__lead {
		grid-column: 1;
		grid-row: 1;
	}

	.aes-page .aes-svc__plans {
		grid-column: 1;
		grid-row: 2;
	}

	.aes-page .aes-svc__photo {
		grid-column: 2;
		grid-row: 1 / span 2;
		aspect-ratio: auto;
		margin: 0;
	}

	.aes-page .aes-svc__what {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.aes-page .aes-svc__more {
		grid-column: 1 / -1;
		grid-row: 4;
	}

	.aes-page .aes-svc__end {
		grid-column: 1;
		grid-row: 5;
	}

	/* A page with no service plans block (the mechanical and electrical installations page): the photo
	   is level with the opening block only, so it is the same height as the text beside it and does
	   not run on past the call row into an empty row */
	.aes-page .aes-svc:not(:has(.aes-svc__plans)) .aes-svc__photo {
		grid-row: 1;
		align-self: stretch;
	}

	/* ...and the parts after it move up a row, so the empty row where the service plans block would
	   be does not add a second gap */
	.aes-page .aes-svc:not(:has(.aes-svc__plans)) .aes-svc__what {
		grid-row: 2;
	}

	.aes-page .aes-svc:not(:has(.aes-svc__plans)) .aes-svc__more {
		grid-row: 3;
	}

	.aes-page .aes-svc:not(:has(.aes-svc__plans)) .aes-svc__end {
		grid-row: 4;
	}

	/* A page with a long opening (two paragraphs, as on the county and postcode pages) and a service
	   plans block: the opening is on the left, and on the right the photo, in its own shape, with the
	   service plans block under it, a section gap apart. The two columns are then about the same
	   height, so there is no white space beside the call row or the plans. */
	.aes-page .aes-svc:has(.aes-svc__plans):has(.aes-svc__lead > p + p) {
		grid-template-rows: 1fr auto auto auto;
	}

	.aes-page .aes-svc:has(.aes-svc__plans):has(.aes-svc__lead > p + p) .aes-svc__lead {
		grid-column: 1;
		grid-row: 1 / span 2;
		display: flex;
		flex-direction: column;
	}

	/* The call row sits at the foot of the left column, level with the foot of the service plans button */
	.aes-page .aes-svc:has(.aes-svc__plans):has(.aes-svc__lead > p + p) .aes-svc__lead > .aes-actions {
		margin-top: auto;
	}

	/* The photo takes whatever height is left above the service plans block, never less than 4:3 */
	.aes-page .aes-svc:has(.aes-svc__plans):has(.aes-svc__lead > p + p) .aes-svc__photo {
		grid-column: 2;
		grid-row: 1;
		aspect-ratio: auto;
		min-height: 220px;
		align-self: stretch;
	}

	.aes-page .aes-svc:has(.aes-svc__plans):has(.aes-svc__lead > p + p) .aes-svc__plans {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
	}

}

/* Desktop (850px and up) */
@media (min-width: 850px) {

	/* Two columns. The opening block and the service plans block are on the left, one under the
	   other, and the photo is on the right, as tall as the two together. Everything else runs
	   the full width, in the order it comes in the code. */
	.aes-page .aes-svc {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--aes-gap-col);
	}

	.aes-page .aes-svc__lead {
		grid-column: 1;
		grid-row: 1;
	}

	.aes-page .aes-svc__plans {
		grid-column: 1;
		grid-row: 2;
	}

	.aes-page .aes-svc__photo {
		grid-column: 2;
		grid-row: 1 / span 2;
		aspect-ratio: auto;
		margin: 0;
	}

	.aes-page .aes-svc__what {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.aes-page .aes-svc__more {
		grid-column: 1 / -1;
		grid-row: 4;
	}

	/* The closing call row is the width of the one at the top, not the whole page */
	.aes-page .aes-svc__end {
		grid-column: 1;
		grid-row: 5;
	}

	.aes-page .aes-svc__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--aes-gap-col);
	}

	/* A list of four (the steps from first visit to handover) is four across on desktop, in order,
	   rather than three with one on its own. On a tablet it is two by two and on a phone one under
	   another, as every list here is. The page code's "--two" name is not used. */
	.aes-page .aes-svc__list:has(> li:nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.aes-page .aes-svc__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--aes-gap-col);
	}

	}