/***************************************
Launchpad Child Stylesheet
*****************************************/
/*
Author: Hicaliber
Author URL: hicaliber.com.au
Description: Launchpad Platform Child stylesheet — Brisbane Aluminium Pool Fences (brizpoolfences.com.au)
*/
/***************************************
Table of Contents:

PART A — SITE (Launchpad template output: header, footer and shared elements)
A1  Tokens                  --- the only site-specific block in this file
A2  Base: type, links, width
A3  Buttons
A4  Header                  --- top header, top bar, logo, main menu, dropdowns, mobile, colour variants
A5  Sticky header and admin bar
A6  Off canvas
A7  Page banner (hero)
A8  Gravity Forms
A9  Footer and bottom footer
A10 Focus and motion

PART B — PAGE COMPONENTS (lp-)
	Code-element page bodies: each section is lp-element lp-{type}-element; contents listed at the start of Part B

Colours come from Site Settings › Colors (--lp--base-preset--*). Values with no
setting are --lp--custom-preset--* tokens in A1. Indent with tabs.
************************************/


/*************************************
#A1 TOKENS - START
**************************************/
/*
	Site Settings › Colors for this site: Primary #01BAF2 · Secondary #E6F7FD · Dark #151515 ·
	Grey #F4F6F7 · Button #01BAF2/#151515 · Button text #151515/#FFFFFF · Body #3A4144 ·
	Heading #151515 · Link #00729E/#151515
	Typography = Custom Font: load the fonts in Advanced › Head Code (see README), then the
	two font-family lines below apply.
*/
:root {
	--lp--base-preset--heading--font-family: 'Barlow Semi Condensed', Arial, sans-serif;
	--lp--base-preset--body--font-family: 'Source Sans 3', Arial, sans-serif;

	--lp--custom-preset--accent-text: #00729E;          /* Deep Pool: eyebrows, icons, small blue text, active menu */
	--lp--custom-preset--wave: #6BD1F7;                 /* Shallow Blue: decoration only */
	--lp--custom-preset--slate: #5C6366;                /* secondary text */
	--lp--custom-preset--line: #DDE3E6;                 /* borders */
	--lp--custom-preset--field-line: #C3CDD1;           /* form field borders */
	--lp--custom-preset--on-dark-text: rgba(255, 255, 255, .76);
	--lp--custom-preset--on-dark-line: rgba(255, 255, 255, .14);
	--lp--custom-preset--shadow: 0 10px 30px rgba(var(--lp--base-preset--brand-color--dark--rgb), .10);
	--lp--custom-preset--radius: 6px;
	--lp--custom-preset--radius-sm: 4px;
	--lp--custom-preset--section-y: 88px;
	--lp--custom-preset--wrap: 1200px;                  /* outer width incl. 24px side padding */
	--lp--custom-preset--logo-width: 200px;
	--lp--custom-preset--todo-bg: #FFF3C4;              /* yellow placeholder highlight (remove before launch) */
}
@media (max-width: 1023px) { :root { --lp--custom-preset--section-y: 72px; --lp--custom-preset--logo-width: 190px; } }
@media (max-width: 640px)  { :root { --lp--custom-preset--section-y: 56px; --lp--custom-preset--logo-width: 170px; } }
/*************************************
!A1 TOKENS - END
**************************************/


/*************************************
#A2 BASE - START
**************************************/
body {
	font-family: var(--lp--base-preset--body--font-family);
	font-size: 17px;
	line-height: 1.6;
	color: var(--lp--base-preset--body--color);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--lp--base-preset--heading--font-family);
	color: var(--lp--base-preset--heading--color);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
@media (max-width: 640px) {
	body { font-size: 16px; }
}
h1 { font-size: clamp(34px, 4.5vw, 52px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 24px; font-weight: 700; }
h4 { font-size: 20px; font-weight: 700; }
h5, h6 { font-size: 17px; font-weight: 700; }
a { color: var(--lp--base-preset--link--color); transition: color .2s; }
a:hover, a:focus { color: var(--lp--base-preset--link--color--hover); }

/* Header, footer and banner line up with the page bodies (.lp-wrap: 1200px, 24px sides) */
.header .grid-container,
.hero .grid-container,
.footer .grid-container,
.bottom-footer .grid-container {
	max-width: var(--lp--custom-preset--wrap);
	padding-left: 9px;
	padding-right: 9px;
}
/*************************************
!A2 BASE - END
**************************************/


/*************************************
#A3 BUTTONS - START
**************************************/
.button,
.hic-button-wrap .button,
.gform_wrapper .gform_button,
.gform_wrapper .gform-button,
.gform_wrapper input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 13px 24px;
	border: 2px solid transparent;
	border-radius: var(--lp--custom-preset--radius-sm);
	background-color: var(--lp--base-preset--button--background-color);
	color: var(--lp--base-preset--button--color);
	font-family: var(--lp--base-preset--heading--font-family);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.button:hover, .button:focus,
.hic-button-wrap .button:hover, .hic-button-wrap .button:focus,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform-button:hover,
.gform_wrapper input[type="submit"]:hover {
	background-color: var(--lp--base-preset--button--background-color--hover);
	color: var(--lp--base-preset--button--color--hover);
}
.button.hollow {
	background-color: transparent;
	border-color: currentColor;
	color: var(--lp--base-preset--heading--color);
}
.button.hollow:hover, .button.hollow:focus {
	background-color: var(--lp--base-preset--brand-color--dark);
	border-color: var(--lp--base-preset--brand-color--dark);
	color: #fff;
}
/*************************************
!A3 BUTTONS - END
**************************************/


/*************************************
#A4 HEADER - START
**************************************/
/* Colour variants (Site Settings › Header › Background). Text on Primary uses the Heading colour, never white. */
.header {
	--lp--header--bg: #fff;
	--lp--header--text: var(--lp--base-preset--heading--color);
	--lp--header--hover: var(--lp--custom-preset--accent-text);
	--lp--header--line: var(--lp--custom-preset--line);
	--lp--header--strip-bg: var(--lp--base-preset--brand-color--dark);
	--lp--header--cta-bg: var(--lp--base-preset--button--background-color);
	--lp--header--cta-text: var(--lp--base-preset--button--color);
	background-color: var(--lp--header--bg);
}
.header-dark .header {
	--lp--header--bg: var(--lp--base-preset--brand-color--dark);
	--lp--header--text: #fff;
	--lp--header--hover: var(--lp--base-preset--brand-color--primary);
	--lp--header--line: var(--lp--custom-preset--on-dark-line);
}
.header-theme .header {
	--lp--header--bg: var(--lp--base-preset--brand-color--primary);
	--lp--header--text: var(--lp--base-preset--heading--color);
	--lp--header--hover: var(--lp--base-preset--heading--color);
	--lp--header--line: rgba(var(--lp--base-preset--heading--color--rgb), .15);
	--lp--header--cta-bg: var(--lp--base-preset--brand-color--dark);
	--lp--header--cta-text: #fff;
}
.header-secondary .header {
	--lp--header--bg: var(--lp--base-preset--brand-color--secondary);
}

/* Top header (utility strip) */
.header .top-header {
	display: flex;
	align-items: center;
	min-height: var(--lp--base-preset--header--top-header--min-height);
	padding: 0;
	background-color: var(--lp--header--strip-bg);
	color: var(--lp--custom-preset--on-dark-text);
	font-size: 15px;
	line-height: 1.3;
}
.header .top-header .grid-container { width: 100%; }
.header .top-header p { margin: 0; }
.header .top-header a { color: #fff; font-weight: 700; text-decoration: none; }
.header .top-header a:hover, .header .top-header a:focus { color: var(--lp--base-preset--brand-color--primary); }
.header .top-header .contact-info li:empty,
.header .top-header .contact-info li > div:empty { display: none; }
.header-dark .header .top-header { border-bottom: 1px solid var(--lp--custom-preset--on-dark-line); }

/* Top bar */
.header .top-bar {
	display: flex;
	align-items: center;
	min-height: var(--lp--base-preset--header--top-bar--min-height);
	padding: 0;
	border-bottom: 1px solid var(--lp--header--line);
	background-color: var(--lp--header--bg);
	transition: box-shadow .3s;
}
.header .top-bar .top-bar-body { width: 100%; }
.header .top-bar .topbar-inner { gap: 24px; }
.header .top-bar .top-bar-left,
.header .top-bar .top-bar-right { background-color: transparent; }

/* Logo */
.header .logo-wrap { margin: 0; line-height: 0; }
.header .logo-wrap a { display: inline-block; }
.header .logo-wrap .logo {
	display: block;
	width: var(--lp--custom-preset--logo-width);
	max-width: 100%;
	height: auto;
}
.header .logo-wrap .no-logo {
	font-family: var(--lp--base-preset--heading--font-family);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--lp--header--text);
}

/* Main menu (Default and Custom header layouts) */
.header .top-bar .menu-container > .menu,
.header .top-bar .top-bar-menu > .menu {
	align-items: center;
	gap: 4px;
	background-color: transparent;
}
.header .top-bar .menu-container > .menu > li > a,
.header .top-bar .top-bar-menu > .menu > li > a {
	position: relative;
	padding: 10px 12px;
	background-color: transparent;
	color: var(--lp--header--text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.header .top-bar .menu-container > .menu > li:not(.menu-button) > a::before,
.header .top-bar .top-bar-menu > .menu > li:not(.menu-button) > a::before {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 2px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--lp--base-preset--brand-color--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s;
}
.header-theme .header .top-bar .menu > li:not(.menu-button) > a::before { background-color: var(--lp--base-preset--heading--color); }
.header .top-bar .menu > li:not(.menu-button) > a:hover,
.header .top-bar .menu > li:not(.menu-button) > a:focus,
.header .top-bar .menu > li.current-menu-item:not(.menu-button) > a,
.header .top-bar .menu > li.current-menu-ancestor:not(.menu-button) > a,
.header .top-bar .menu > li.current-page-ancestor:not(.menu-button) > a,
.header .top-bar .menu > li.active:not(.menu-button) > a {
	background-color: transparent;
	color: var(--lp--header--hover);
}
.header .top-bar .menu > li:not(.menu-button) > a:hover::before,
.header .top-bar .menu > li:not(.menu-button) > a:focus::before,
.header .top-bar .menu > li.current-menu-item:not(.menu-button) > a::before,
.header .top-bar .menu > li.current-menu-ancestor:not(.menu-button) > a::before,
.header .top-bar .menu > li.current-page-ancestor:not(.menu-button) > a::before,
.header .top-bar .menu > li.active:not(.menu-button) > a::before {
	transform: scaleX(1);
}

/* Menu button: add the CSS class "menu-button" to a menu item (Appearance › Menus) */
.header .menu li.menu-button { margin-left: 12px; }
.header .menu li.menu-button > a,
.header .top-bar .menu-container > .menu > li.menu-button > a,
.header .top-bar .top-bar-menu > .menu > li.menu-button > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 11px 20px;
	border-radius: var(--lp--custom-preset--radius-sm);
	background-color: var(--lp--header--cta-bg);
	color: var(--lp--header--cta-text);
	font-weight: 700;
	white-space: nowrap;
	transition: background-color .2s, color .2s;
}
.header .top-bar .menu > li.menu-button > a:hover,
.header .top-bar .menu > li.menu-button > a:focus,
.header .top-bar .menu > li.menu-button.active > a,
.header .top-bar .menu > li.menu-button.current-menu-item > a {
	background-color: var(--lp--base-preset--button--background-color--hover);
	color: var(--lp--base-preset--button--color--hover);
}
.header-dark .header .top-bar .menu > li.menu-button > a:hover,
.header-dark .header .top-bar .menu > li.menu-button > a:focus {
	background-color: #fff;
	color: var(--lp--base-preset--heading--color);
}

/* Phone number in the main menu: add the CSS class "menu-phone-link" to a Custom Link (tel:) menu item */
.header .top-bar .menu > li.menu-phone-link { margin-left: 12px; }
.header .top-bar .menu-container > .menu > li.menu-phone-link > a,
.header .top-bar .top-bar-menu > .menu > li.menu-phone-link > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-left: 8px;
	padding-right: 8px;
	font-family: var(--lp--base-preset--heading--font-family);
	font-size: 19px;
	font-weight: 700;
	white-space: nowrap;
}
.header .top-bar .menu-container > .menu > li.menu-phone-link > a::before,
.header .top-bar .top-bar-menu > .menu > li.menu-phone-link > a::before {
	content: "";
	position: static;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 0;
	background-color: var(--lp--header--hover);
	transform: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.header .top-bar .menu > li.menu-phone-link > a:hover,
.header .top-bar .menu > li.menu-phone-link > a:focus {
	color: var(--lp--header--hover);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.off-canvas .menu li.menu-phone-link > a { font-weight: 700; }

/* 1024–1199px: tighten the menu so logo, links, phone and button fit on one line */
@media (min-width: 1024px) and (max-width: 1199px) {
	.header .top-bar .menu-container > .menu > li > a,
	.header .top-bar .top-bar-menu > .menu > li > a { padding-left: 8px; padding-right: 8px; font-size: 15px; }
	.header .top-bar .menu-container > .menu > li:not(.menu-button):not(.menu-phone-link) > a::before { left: 8px; right: 8px; }
	.header .top-bar .menu > li.menu-phone-link,
	.header .menu li.menu-button { margin-left: 4px; }
	.header .logo-wrap .logo { width: 190px; }
}

/* Dropdowns (Foundation adds .is-dropdown-submenu after JS) */
.header .dropdown.menu > li.is-dropdown-submenu-parent > a { padding-right: 28px; }
.header .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
	right: 10px;
	border-color: currentColor transparent transparent;
}
.header .menu .is-dropdown-submenu {
	min-width: 240px;
	padding: 8px;
	border: 1px solid var(--lp--custom-preset--line);
	border-radius: var(--lp--custom-preset--radius-sm);
	background-color: #fff;
	box-shadow: var(--lp--custom-preset--shadow);
}
.header .menu .is-dropdown-submenu li a {
	padding: 10px 12px;
	border-radius: 6px;
	background-color: transparent;
	color: var(--lp--base-preset--heading--color);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}
.header .menu .is-dropdown-submenu li a:hover,
.header .menu .is-dropdown-submenu li a:focus,
.header .menu .is-dropdown-submenu li.current-menu-item > a,
.header .menu .is-dropdown-submenu li.active > a {
	background-color: var(--lp--base-preset--brand-color--secondary);
	color: var(--lp--base-preset--heading--color);
}

/* Tablet and mobile: phone + burger (Default layout) */
.header .top-bar .top-bar-right.hide-for-large .menu.top {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: transparent;
}
.header .top-bar .elem-phone .phone a,
.header .top-bar .menu-icon.burger-menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--lp--header--line);
	border-radius: var(--lp--custom-preset--radius-sm);
	background-color: transparent;
	color: var(--lp--header--text);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}
.header .top-bar .elem-phone .phone a:hover,
.header .top-bar .elem-phone .phone a:focus,
.header .top-bar .menu-icon.burger-menu:hover,
.header .top-bar .menu-icon.burger-menu:focus {
	border-color: var(--lp--header--text);
	color: var(--lp--header--text);
}
.header .top-bar .elem-phone .phone i { color: var(--lp--header--hover); }
.header .top-bar .menu-icon.burger-menu {
	position: relative;
	width: 44px;
	padding: 0;
	cursor: pointer;
	vertical-align: middle;
}
.header .top-bar .menu-icon.burger-menu::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	margin: -7px 0 0 -10px;
	border-radius: 1px;
	background: currentColor;
	box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
}
.header .top-bar .menu-icon.burger-menu:hover::after {
	background: currentColor;
	box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
}

/* Custom header layout (column builder) */
.header.custom-header-layout .top-bar .top-bar-body {
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
}
.header.custom-header-layout .top-bar:not(.one-column) .top-bar-body .top-bar-col { width: auto; }
.header.custom-header-layout .top-bar .top-bar-logo { margin-right: auto; }

@media (min-width: 1024px) {
	.header.custom-header-layout .top-bar .top-bar-hamburger-menu { display: none; }
}
@media (max-width: 1023px) {
	.header.custom-header-layout .top-bar .top-bar-col:not(.top-bar-hamburger-menu):not(.top-bar-logo) { display: none; }
}
@media (max-width: 640px) {
	/* The utility strip would wrap onto two lines on phones: hide it (the sticky offset in A5 allows for this) */
	.header .top-header { display: none; }
	.header .top-bar .elem-phone .phone a { width: 44px; padding: 0; }
	.header .top-bar .elem-phone .phone .number {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
/*************************************
!A4 HEADER - END
**************************************/


/*************************************
#A5 STICKY HEADER AND ADMIN BAR - START
**************************************/
/*
	Launchpad base CSS fixes the sticky header from page load (≥601px) and sets the admin bar
	offsets (32px ≥783px, 46px 601–782px). The header leaves the page flow, so reserve its height.
	≤640px the utility strip is hidden (A4), so only the top bar's height is reserved.
*/
.sticky-header:not(.header-transparent) .off-canvas-content {
	padding-top: var(--lp--base-preset--header--min-height);
}
@media (max-width: 640px) {
	.sticky-header.with-top-header:not(.header-transparent) .off-canvas-content {
		padding-top: calc(var(--lp--base-preset--header--min-height) - var(--lp--base-preset--header--top-header--min-height));
	}
}
.sticky-header .header { z-index: 50; }
.sticky-header.scrolled .header .top-bar { box-shadow: var(--lp--custom-preset--shadow); }

/* Anchor links (e.g. #quote) stop below the header */
html { scroll-padding-top: calc(var(--lp--base-preset--header--min-height) + 16px); }
.admin-bar { scroll-padding-top: calc(var(--lp--base-preset--header--min-height) + 48px); }
/*************************************
!A5 STICKY HEADER AND ADMIN BAR - END
**************************************/


/*************************************
#A6 OFF CANVAS - START
**************************************/
.off-canvas {
	background-color: var(--lp--base-preset--brand-color--dark);
	padding: 24px 0;
}
.off-canvas .menu { background-color: transparent; }
.off-canvas .menu li { border-bottom: 1px solid var(--lp--custom-preset--on-dark-line); }
.off-canvas .menu li a,
.off-canvas .is-accordion-submenu-parent i {
	color: #fff;
}
.off-canvas .menu > li > a {
	padding: 16px 48px 16px 24px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.off-canvas .menu .submenu a { padding: 12px 24px 12px 40px; font-size: 16px; color: var(--lp--custom-preset--on-dark-text); }
.off-canvas .menu li a:hover,
.off-canvas .menu li a:focus,
.off-canvas .menu li.current-menu-item:not(.menu-button) > a,
.off-canvas .menu li.active:not(.menu-button) > a {
	background-color: transparent;
	color: var(--lp--base-preset--brand-color--primary);
}
.off-canvas .is-accordion-submenu-parent i { padding: 14px 18px; font-size: 16px; }

/* Menu button in the off canvas */
.off-canvas .menu li.menu-button { border-bottom: none; padding: 24px 24px 0; }
.off-canvas .menu li.menu-button > a {
	display: flex;
	justify-content: center;
	min-height: 48px;
	padding: 13px 20px;
	border-radius: var(--lp--custom-preset--radius-sm);
	background-color: var(--lp--base-preset--button--background-color);
	color: var(--lp--base-preset--button--color);
	font-weight: 700;
}
.off-canvas .menu li.menu-button > a:hover,
.off-canvas .menu li.menu-button > a:focus {
	background-color: #fff;
	color: var(--lp--base-preset--heading--color);
}
/*************************************
!A6 OFF CANVAS - END
**************************************/


/*************************************
#A7 PAGE BANNER (HERO) - START
**************************************/
/* Launchpad banner on templates that show one (blog posts, archives, 404). Code-element pages hide it and use .lp-hero-element / .lp-page-hero-element. */
.hero.page-banner .inner-hero { position: relative; padding: 72px 0; }
.hero.page-banner.short-banner .inner-hero { padding: 48px 0; }
.hero.page-banner.tall-banner .inner-hero { padding: 120px 0; }
.hero .hero-banner-message h1,
.hero .hero-banner-message h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 700;
	line-height: 1.08;
}
.hero .hero-banner-message p { color: #fff; font-size: 20px; margin: 12px 0 0; }
@media (max-width: 640px) {
	.hero.page-banner .inner-hero { padding: 48px 0; }
}
/*************************************
!A7 PAGE BANNER (HERO) - END
**************************************/


/*************************************
#A8 GRAVITY FORMS - START
**************************************/
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
	color: var(--lp--base-preset--heading--color);
	font-size: 16px;
	font-weight: 700;
}
.gform_wrapper .gfield_required { color: var(--lp--custom-preset--accent-text); }
/* Hide the "* indicates required fields" note above the form (required fields keep their asterisk) */
.gform_wrapper .gform_required_legend { display: none; }
.gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]),
.gform_wrapper textarea,
.gform_wrapper select {
	min-height: 48px;
	padding: 12px 14px;
	border: 1.5px solid var(--lp--custom-preset--field-line);
	border-radius: var(--lp--custom-preset--radius-sm);
	background-color: #fff;
	box-shadow: none;
	color: var(--lp--base-preset--body--color);
	font-family: var(--lp--base-preset--body--font-family);
	font-size: 17px;
}
/* Paragraph Text set to Field Size: Small (e.g. "Tell us about your pool" in the quote form) – about four lines */
.gform_wrapper .gfield textarea.small,
.gform_wrapper.gravity-theme .gfield textarea.small {
	height: 112px;
	min-height: 112px;
	resize: vertical;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--lp--custom-preset--accent-text);
	outline: 3px solid rgba(var(--lp--base-preset--brand-color--primary--rgb), .45);
	outline-offset: 0;
}
/* Drop Down fields: one custom chevron (replaces the browser arrow and the small base-theme triangle) */
.gform_wrapper select,
.gform_wrapper.gravity-theme .gfield select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-origin: padding-box;   /* Foundation sets content-box, which squeezes the arrow into the text area */
	background-position: right 16px center;
	background-size: 18px 18px;
	cursor: pointer;
	text-overflow: ellipsis;
}
.gform_wrapper select::-ms-expand { display: none; }
.gform_wrapper select:hover { border-color: var(--lp--custom-preset--slate); }
.gform_wrapper select:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300729E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Placeholder option ("Select your suburb") in the lighter placeholder colour until a choice is made */
.gform_wrapper select:has(option.gf_placeholder:checked) { color: #8A9296; }
.gform_wrapper select option { color: var(--lp--base-preset--body--color); }
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer { margin-top: 8px; padding-top: 8px; }
.gform_wrapper .gform_validation_errors,
.gform_wrapper .gfield_error .gfield_validation_message,
.gform_wrapper .validation_message { border-radius: var(--lp--custom-preset--radius-sm); }
/*
	Radio Buttons fields shown as buttons, matching the homepage "Start your free quote" card
	(e.g. "What do you need?" in the Request Quote form). Applies to every Gravity Forms radio field;
	the class "lp-choice-buttons" on a field (Appearance tab) does the same for older markup.
*/
.gform_wrapper .gfield--type-radio .gfield_radio,
.gform_wrapper .lp-choice-buttons .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gform_wrapper .gfield--type-radio .gchoice,
.gform_wrapper .lp-choice-buttons .gchoice {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}
.gform_wrapper .gfield--type-radio .gchoice input[type="radio"],
.gform_wrapper .lp-choice-buttons .gchoice input[type="radio"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.gform_wrapper .gfield--type-radio .gchoice label,
.gform_wrapper .lp-choice-buttons .gchoice label {
	display: inline-flex;
	align-items: center;
	max-width: none;
	margin: 0;
	padding: 9px 14px;
	border: 1.5px solid var(--lp--custom-preset--field-line);
	border-radius: var(--lp--custom-preset--radius-sm);
	background-color: #fff;
	color: var(--lp--base-preset--heading--color);
	font-family: var(--lp--base-preset--body--font-family);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.gform_wrapper .gfield--type-radio .gchoice label::before,
.gform_wrapper .gfield--type-radio .gchoice label::after,
.gform_wrapper .lp-choice-buttons .gchoice label::before,
.gform_wrapper .lp-choice-buttons .gchoice label::after { display: none; }
.gform_wrapper .gfield--type-radio .gchoice label:hover,
.gform_wrapper .lp-choice-buttons .gchoice label:hover { border-color: var(--lp--base-preset--heading--color); }
.gform_wrapper .gfield--type-radio .gchoice input[type="radio"]:checked + label,
.gform_wrapper .lp-choice-buttons .gchoice input[type="radio"]:checked + label {
	border-color: var(--lp--base-preset--brand-color--dark);
	background-color: var(--lp--base-preset--brand-color--dark);
	color: #fff;
}
.gform_wrapper .gfield--type-radio .gchoice input[type="radio"]:focus-visible + label,
.gform_wrapper .lp-choice-buttons .gchoice input[type="radio"]:focus-visible + label {
	outline: 3px solid var(--lp--base-preset--brand-color--primary);
	outline-offset: 2px;
}
.gform_confirmation_message {
	padding: 20px 24px;
	border-radius: var(--lp--custom-preset--radius-sm);
	background-color: var(--lp--base-preset--brand-color--secondary);
	color: var(--lp--base-preset--heading--color);
	font-weight: 600;
}
/*************************************
!A8 GRAVITY FORMS - END
**************************************/


/*************************************
#A9 FOOTER - START
**************************************/
/* Colour variants (Site Settings › Footer › Background). The footer and bottom footer share them. */
.footer, .bottom-footer {
	--lp--footer--bg: var(--lp--base-preset--brand-color--dark);
	--lp--footer--text: var(--lp--custom-preset--on-dark-text);
	--lp--footer--title: #fff;
	--lp--footer--hover: #fff;
	--lp--footer--line: var(--lp--custom-preset--on-dark-line);
	background-color: var(--lp--footer--bg);
	color: var(--lp--footer--text);
}
.footer-default-color .footer, .footer-default-color .bottom-footer,
.footer-light .footer, .footer-light .bottom-footer {
	--lp--footer--bg: var(--lp--base-preset--brand-color--grey);
	--lp--footer--text: var(--lp--base-preset--body--color);
	--lp--footer--title: var(--lp--base-preset--heading--color);
	--lp--footer--hover: var(--lp--custom-preset--accent-text);
	--lp--footer--line: var(--lp--custom-preset--line);
}
.footer-light .footer, .footer-light .bottom-footer { --lp--footer--bg: #fff; }
.footer-theme .footer, .footer-theme .bottom-footer,
.footer-theme-secondary .footer, .footer-theme-secondary .bottom-footer {
	--lp--footer--bg: var(--lp--base-preset--brand-color--primary);
	--lp--footer--text: var(--lp--base-preset--heading--color);
	--lp--footer--title: var(--lp--base-preset--heading--color);
	--lp--footer--hover: var(--lp--base-preset--heading--color);
	--lp--footer--line: rgba(var(--lp--base-preset--heading--color--rgb), .15);
}
.footer-theme-secondary .footer, .footer-theme-secondary .bottom-footer { --lp--footer--bg: var(--lp--base-preset--brand-color--secondary); }
.footer-dark .footer, .footer-dark .bottom-footer { --lp--footer--bg: var(--lp--base-preset--brand-color--dark); }

/* Footer */
.footer {
	padding: 64px 0 40px;
	font-size: 16px;
	line-height: 1.6;
}
.footer .footer-body { row-gap: 32px; }
.footer p { margin: 0 0 12px; color: var(--lp--footer--text); }
.footer a { color: var(--lp--footer--text); text-decoration: none; }
.footer a:hover, .footer a:focus { color: var(--lp--footer--hover); text-decoration: underline; text-underline-offset: 3px; }
.footer .footer-col h4 {
	margin: 0 0 16px;
	color: var(--lp--footer--title);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}
.footer .footer-blurb > *:last-child { margin-bottom: 0; }

/* Logo */
.footer .logo-wrap { margin: 0 0 20px; line-height: 0; }
.footer .logo-wrap .logo { display: block; width: var(--lp--custom-preset--logo-width); max-width: 100%; height: auto; }

/* Menus */
.footer .footer-col .menu { gap: 2px; background-color: transparent; }
.footer .footer-col .menu a { padding: 5px 0; line-height: 1.4; background-color: transparent; }
.footer .footer-col .menu .active > a,
.footer .footer-col .menu .current-menu-item > a { color: var(--lp--footer--hover); background-color: transparent; }

/* Contact details ([contact_info] shortcode) */
.footer .contact-details > div { margin-bottom: 8px; }
.footer .contact-details div::before { display: none; }
.footer .contact-details .contact-phone a {
	color: var(--lp--footer--title);
	font-family: var(--lp--base-preset--heading--font-family);
	font-size: 20px;
	font-weight: 700;
}

/* Social media ([social_media] shortcode) */
.footer .social-media { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; list-style: none; }
.footer .social-media li { margin: 0; }
.footer .social-media a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--lp--footer--line);
	border-radius: 50%;
	color: var(--lp--footer--title);
	font-size: 16px;
	text-decoration: none;
}
.footer .social-media a:hover,
.footer .social-media a:focus {
	border-color: var(--lp--base-preset--button--background-color);
	background-color: var(--lp--base-preset--button--background-color);
	color: var(--lp--base-preset--button--color);
	text-decoration: none;
}

/* Footer Layout 3: the column holding the logo is wider */
@media (min-width: 1024px) {
	.footer.footer-layout-3 .footer-col:has(.logo-wrap) { flex-grow: 1.7; padding-right: 48px; }
}

/* Back to top */
.footer #back-to-top {
	border-radius: 50%;
	background-color: var(--lp--base-preset--button--background-color);
	color: var(--lp--base-preset--button--color);
}
.footer #back-to-top:hover {
	background-color: var(--lp--base-preset--button--background-color--hover);
	color: var(--lp--base-preset--button--color--hover);
}

/* Bottom footer */
.bottom-footer {
	padding: 0;
	font-size: 14px;
}
.bottom-footer .grid-x > .cell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	position: relative;
	padding-top: 20px;
	padding-bottom: 28px;
}
.bottom-footer .grid-x > .cell::before {
	content: "";
	position: absolute;
	top: 0;
	left: 15px;
	right: 15px;
	border-top: 1px solid var(--lp--footer--line);
}
.bottom-footer .copyright p { margin: 0; color: var(--lp--footer--text); }
.bottom-footer a { color: var(--lp--footer--text); text-decoration: none; }
.bottom-footer a:hover, .bottom-footer a:focus { color: var(--lp--footer--hover); text-decoration: underline; text-underline-offset: 3px; }
.bottom-footer .colophon-link .menu { gap: 4px 20px; background-color: transparent; }
.bottom-footer .colophon-link .menu a { padding: 0; line-height: 1.5; background-color: transparent; }

@media (max-width: 1023px) {
	.footer { padding: 56px 0 32px; }
}
@media (max-width: 640px) {
	.footer { padding: 48px 0 24px; text-align: left; }
	.footer .logo-wrap { margin-left: 0; margin-right: 0; }
	.footer.footer-layout-3 .social-media { justify-content: flex-start; }
	.bottom-footer.with-colophon-link .copyright { text-align: left; }
	.bottom-footer .colophon-link .menu { justify-content: flex-start; }
}
/*************************************
!A9 FOOTER - END
**************************************/


/*************************************
#A10 FOCUS AND MOTION - START
**************************************/
/* Launchpad base CSS removes outlines (* { outline: none }): restore a visible focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--lp--base-preset--brand-color--primary);
	outline-offset: 2px;
}
.header-theme .header a:focus-visible,
.header-theme .header button:focus-visible,
.footer-theme .footer a:focus-visible,
.footer-theme .bottom-footer a:focus-visible {
	outline-color: var(--lp--base-preset--heading--color);
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}
/*************************************
!A10 FOCUS AND MOTION - END
**************************************/


/*************************************
#PART B PAGE COMPONENTS (lp-) - START
**************************************/
/* =============================================================================
	PART B — PAGE COMPONENTS (lp-)
	Prefix: lp- (Launchpad). Generic and transferable between Launchpad sites:
	every colour comes from Site Settings presets (--lp--base-preset--*) or the
	Tokens in A1. Only A1 holds site-specific values.

	Contents
	1. Tokens: see A1
	2. Page wrapper and layout helpers
	3. Type: eyebrows, headings, lede, prose
	4. Buttons and links
	5. Hero (home) and page hero (inner pages) — styles: lp-hero--secondary | lp-hero--primary | lp-hero--photo | lp-hero--dark
	6. Cards, ticks and lists
	7. Compare (two options side by side)
	8. Testimonials
	9. Service areas (chips)
	10. Gallery grid
	11. Credentials and contact details
	12. Form element (quote form)
	13. Legal pages
	14. Section themes and responsive
	15. Gallery landing page
	16. Launchpad Gallery posts (body.single-gallery)
	17. Homepage components: split, quick quote, trust strip, service list, steps, numbered list, project tiles, checklist, service area cards
	18. Launchpad Testimonials element (cards for the [testimonial_element] shortcode)
	19. Blog posts (single post article: type, ticks, figures, tables)
	20. Post listing cards ([post_element])
	21. Launchpad page elements (section spacing, headers, themes, Content Boxes in every layout, banner without image)

	Page bodies live in Launchpad Code elements as a series of sections. Every section has
	lp-element plus a type class: lp-element lp-{type}-element (e.g. lp-element lp-gallery-element).
	Selectors target the lp- classes only, so no wrapper is needed.
	Readability rule: text on the Primary colour uses the Heading colour, never white,
	unless the site's Primary is dark enough (check contrast per site).
============================================================================= */

/* 1. TOKENS: defined in A1 */

/* 2. WRAPPER + LAYOUT ------------------------------------------------------ */
.lp-element img { max-width: 100%; height: auto; display: block; }
.lp-wrap { max-width: var(--lp--custom-preset--wrap); margin: 0 auto; padding: 0 24px; }
.lp-wrap.lp-narrow { max-width: 820px; }
.lp-element { padding: var(--lp--custom-preset--section-y) 0; }
.lp-element.lp-tight-top { padding-top: 40px; }
.lp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.lp-grid2.lp-top { align-items: start; }
.lp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lp-stack > * + * { margin-top: 16px; }
.lp-head { max-width: 680px; margin-bottom: 40px; }
.lp-head.lp-center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* 3. TYPE ------------------------------------------------------------------ */
.lp-h1, .lp-h2, .lp-h3 {
	font-family: var(--lp--base-preset--heading--font-family);
	color: var(--lp--base-preset--heading--color);
	letter-spacing: -0.015em;
	margin: 0;
}
.lp-h1 { font-size: clamp(40px, 5.4vw, 64px); line-height: 1; font-weight: 700; }
.lp-h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.05; font-weight: 700; }
.lp-h3 { font-size: 24px; line-height: 1.2; font-weight: 700; }
.lp-eyebrow {
	display: inline-block; margin-bottom: 10px;
	font-family: var(--lp--base-preset--heading--font-family);
	font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--lp--custom-preset--accent-text);
}
.lp-lede { font-size: 20px; line-height: 1.55; margin: 16px 0 0; }
.lp-muted { color: var(--lp--custom-preset--slate); }
.lp-prose > * + * { margin-top: 16px; }
.lp-prose h2 { margin: 48px 0 0; font-size: clamp(28px, 3vw, 36px); font-weight: 700; line-height: 1.1; }
.lp-prose h2:first-child { margin-top: 0; }
.lp-prose p, .lp-prose ul { margin-bottom: 0; }
mark.lp-todo { background: var(--lp--custom-preset--todo-bg); color: #5A4300; padding: 0 4px; border-radius: 4px; }

/* 4. BUTTONS + LINKS ------------------------------------------------------- */
.lp-btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 13px 24px;
	border-radius: var(--lp--custom-preset--radius-sm); border: 2px solid transparent;
	font-family: var(--lp--base-preset--heading--font-family);
	font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none; cursor: pointer;
	background: var(--lp--base-preset--button--background-color);
	color: var(--lp--base-preset--button--color);
	transition: background-color .2s, color .2s, border-color .2s;
}
.lp-btn:hover, .lp-btn:focus-visible {
	background: var(--lp--base-preset--button--background-color--hover);
	color: var(--lp--base-preset--button--color--hover);
}
.lp-btn.lp-dark { background: var(--lp--base-preset--brand-color--dark); color: #fff; }
.lp-btn.lp-dark:hover { background: var(--lp--custom-preset--accent-text); color: #fff; }
.lp-btn.lp-outline { background: transparent; border-color: currentColor; color: var(--lp--base-preset--heading--color); }
.lp-btn.lp-outline:hover { background: var(--lp--base-preset--brand-color--dark); border-color: var(--lp--base-preset--brand-color--dark); color: #fff; }
.lp-on-dark a:not(.lp-btn):not(.lp-callme):not(.lp-crumb a):not(.lp-chips a) { color: var(--lp--base-preset--brand-color--primary); }
.lp-on-dark a:not(.lp-btn):not(.lp-callme):not(.lp-chips a):hover { color: #fff; }
.lp-on-dark .lp-btn.lp-outline { color: #fff; border-color: rgba(255,255,255,.55); }
.lp-on-dark .lp-btn.lp-outline:hover { background: #fff; color: var(--lp--base-preset--heading--color); border-color: #fff; }
.lp-textlink { font-weight: 700; text-decoration: none; color: var(--lp--custom-preset--accent-text); }
.lp-textlink::after { content: "\00a0\2192"; }
.lp-btn:focus-visible { outline: 3px solid var(--lp--base-preset--brand-color--primary); outline-offset: 2px; }
.lp-ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* 5. HERO + PAGE HERO ------------------------------------------------------ */
.lp-hero-element, .lp-page-hero-element { position: relative; overflow: hidden; }
.lp-hero-element { padding: 72px 0 112px; }
.lp-hero-element > .lp-wrap { position: relative; z-index: 1; }   /* keeps the quick-quote card above the waves */
.lp-hero-element .lp-h1 { font-size: clamp(44px, 6vw, 72px); line-height: .98; }
.lp-page-hero-element { padding: 64px 0 88px; }
.lp-hero-copy { max-width: 760px; }              /* text block inside the full site width */
.lp-grid2 > .lp-hero-copy { max-width: none; }
.lp-badge {
	display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
	font-size: 14px; font-weight: 600; letter-spacing: .02em;
	color: var(--lp--hero--accent);
}
.lp-badge .lp-ico { width: 16px; height: 16px; color: var(--lp--hero--accent); }
.lp-hero-ticks { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 32px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 600; color: var(--lp--hero--text); }
.lp-hero-ticks li { display: flex; align-items: center; gap: 8px; }
.lp-hero-ticks .lp-ico { width: 18px; height: 18px; color: var(--lp--hero--accent); }
.lp-hero-img { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 20px 50px rgba(var(--lp--base-preset--brand-color--dark--rgb), .14); }
.lp-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.lp-hero-element .lp-h1, .lp-page-hero-element .lp-h1 { color: var(--lp--hero--heading); }
.lp-hero-element .lp-lede, .lp-page-hero-element .lp-lede { color: var(--lp--hero--text); }
.lp-hero-element .lp-eyebrow, .lp-page-hero-element .lp-eyebrow { color: var(--lp--hero--accent); }
.lp-page-hero-element .lp-crumb { font-size: 14px; margin-bottom: 14px; color: var(--lp--hero--muted); }
.lp-page-hero-element .lp-crumb a { color: var(--lp--hero--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; }
.lp-page-hero-element .lp-crumb a:hover { color: var(--lp--hero--heading); text-decoration-color: currentColor; }
/* Water lines from the logo, once per page, along the bottom of the hero */
.lp-waves { position: absolute; left: 0; right: 0; bottom: 18px; height: 40px; pointer-events: none; }
.lp-waves svg { width: 100%; height: 100%; display: block; }
.lp-waves path:first-child { stroke: var(--lp--hero--wave-1); }
.lp-waves path:last-child { stroke: var(--lp--hero--wave-2); }

/* Hero styles — one class on the section: hero--secondary | hero--primary | hero--photo | hero--dark */
.lp-hero--secondary {   /* Light: Foam background, Charcoal type */
	--lp--hero--heading: var(--lp--base-preset--heading--color); --lp--hero--text: var(--lp--base-preset--body--color); --lp--hero--muted: var(--lp--custom-preset--slate);
	--lp--hero--accent: var(--lp--custom-preset--accent-text); --lp--hero--line: rgba(var(--lp--base-preset--brand-color--primary--rgb), .3); --lp--hero--chip: #fff;
	--lp--hero--wave-1: var(--lp--base-preset--brand-color--primary); --lp--hero--wave-2: var(--lp--custom-preset--wave);
	background: var(--lp--base-preset--brand-color--secondary);
}
.lp-hero--primary {   /* Bright: Pool Blue background, Charcoal type (8:1) */
	--lp--hero--heading: var(--lp--base-preset--heading--color); --lp--hero--text: var(--lp--base-preset--heading--color); --lp--hero--muted: var(--lp--base-preset--heading--color);
	--lp--hero--accent: var(--lp--base-preset--heading--color); --lp--hero--line: rgba(var(--lp--base-preset--brand-color--dark--rgb), .18); --lp--hero--chip: rgba(255,255,255,.35);
	--lp--hero--wave-1: #FFFFFF; --lp--hero--wave-2: var(--lp--custom-preset--wave);
	background: var(--lp--base-preset--brand-color--primary);
}
.lp-hero--primary .lp-waves path:last-child { stroke: rgba(255,255,255,.55); }
.lp-hero--primary .lp-btn { background: var(--lp--base-preset--brand-color--dark); color: #fff; }
.lp-hero--primary .lp-btn:hover { background: #fff; color: var(--lp--base-preset--heading--color); }
.lp-hero--primary .lp-btn.lp-outline { background: transparent; color: var(--lp--base-preset--heading--color); border-color: var(--lp--base-preset--heading--color); }
.lp-hero--primary .lp-btn.lp-outline:hover { background: var(--lp--base-preset--brand-color--dark); color: #fff; }
.lp-hero--photo {  /* Photo: the hero image behind a soft white fade */
	--lp--hero--heading: var(--lp--base-preset--heading--color); --lp--hero--text: var(--lp--base-preset--body--color); --lp--hero--muted: var(--lp--custom-preset--slate);
	--lp--hero--accent: var(--lp--custom-preset--accent-text); --lp--hero--line: var(--lp--custom-preset--line); --lp--hero--chip: #fff;
	--lp--hero--wave-1: var(--lp--base-preset--brand-color--primary); --lp--hero--wave-2: var(--lp--custom-preset--wave);
	background: #fff var(--hero-img) right center / cover no-repeat;
}
.lp-hero--photo::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.96) 38%, rgba(255,255,255,.55) 62%, rgba(255,255,255,0) 82%);
}
.lp-hero--photo > .lp-wrap { position: relative; }
.lp-hero--photo.lp-hero-element { padding: 104px 0 128px; }
.lp-hero--photo.lp-page-hero-element { padding: 88px 0 112px; }
.lp-hero--dark {   /* Original: Charcoal background */
	--lp--hero--heading: #fff; --lp--hero--text: #D3DADD; --lp--hero--muted: #B5BCBF;
	--lp--hero--accent: var(--lp--base-preset--brand-color--primary); --lp--hero--line: rgba(255,255,255,.2); --lp--hero--chip: rgba(255,255,255,.06);
	--lp--hero--wave-1: var(--lp--base-preset--brand-color--primary); --lp--hero--wave-2: var(--lp--custom-preset--wave);
	background: var(--lp--base-preset--brand-color--dark);
}
@media (max-width: 640px) {
	.lp-hero--photo::before { background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 70%, rgba(255,255,255,.7) 100%); }
	.lp-hero--photo.lp-hero-element, .lp-hero--photo.lp-page-hero-element { padding: 56px 0 88px; }
}

/* 6. CARDS, TICKS, LISTS --------------------------------------------------- */
.lp-card {
	display: flex; flex-direction: column; gap: 12px; padding: 30px;
	background: #fff; border: 1px solid var(--lp--custom-preset--line); border-radius: var(--lp--custom-preset--radius);
	text-decoration: none; color: inherit; transition: border-color .2s, transform .2s;
}
a.lp-card:hover { border-color: var(--lp--base-preset--brand-color--primary); transform: translateY(-2px); color: inherit; }
.lp-card p { margin: 0; color: var(--lp--custom-preset--slate); }
.lp-card .lp-textlink { margin-top: auto; padding-top: 6px; }
.lp-tile {
	width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
	background: var(--lp--base-preset--brand-color--secondary); color: var(--lp--custom-preset--accent-text);
}
.lp-tile .lp-ico { width: 26px; height: 26px; }
.lp-ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.lp-ticks.lp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.lp-ticks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--lp--base-preset--heading--color); }
.lp-ticks li .lp-ico { margin-top: 3px; color: var(--lp--custom-preset--accent-text); }
.lp-ticks li span b { font-weight: 700; }
.lp-ticks.lp-plain li { font-weight: 400; color: inherit; }
.lp-figure { border-radius: var(--lp--custom-preset--radius); overflow: hidden; }
.lp-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lp-figure.lp-tall img { aspect-ratio: 3 / 4; }
.lp-swatches { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding: 0; list-style: none; font-size: 14px; color: var(--lp--custom-preset--slate); }
.lp-swatches li { display: flex; align-items: center; gap: 8px; }
.lp-swatches i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--lp--custom-preset--field-line); }

/* 7. COMPARE --------------------------------------------------------------- */
.lp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lp-compare .lp-opt { background: #fff; border: 1px solid var(--lp--custom-preset--line); border-radius: var(--lp--custom-preset--radius); overflow: hidden; display: flex; flex-direction: column; }
.lp-compare .lp-opt img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lp-compare .lp-body { padding: 32px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.lp-opt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.lp-opt-head .lp-h3 { font-size: 30px; }
.lp-opt-head span { font-size: 14px; color: var(--lp--custom-preset--slate); }
.lp-compare .lp-ticks { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.lp-compare .lp-ticks li { align-items: center; }
.lp-compare .lp-ticks li .lp-ico { margin-top: 0; }
.lp-compare .lp-textlink { margin-top: auto; }

/* 8. TESTIMONIALS ---------------------------------------------------------- */
.lp-quotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lp-quotes.lp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-quote { margin: 0; padding: 28px; background: var(--lp--base-preset--brand-color--secondary); border-radius: var(--lp--custom-preset--radius); display: flex; flex-direction: column; gap: 16px; }
.lp-quote .lp-mark { width: 30px; height: 30px; color: var(--lp--base-preset--brand-color--primary); }
.lp-foam .lp-quote { background: #fff; }
.lp-quote blockquote { margin: 0; padding: 0; border: 0; font-size: 18px; line-height: 1.5; font-style: normal; color: var(--lp--base-preset--body--color); }
.lp-quote figcaption { margin-top: auto; font-weight: 700; color: var(--lp--base-preset--heading--color); }

/* 9. SERVICE AREAS --------------------------------------------------------- */
.lp-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.lp-chips a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px;
	background: #fff; border: 1px solid var(--lp--custom-preset--line);
	color: var(--lp--base-preset--heading--color); font-weight: 600; text-decoration: none;
}
.lp-chips a:hover { border-color: var(--lp--base-preset--brand-color--primary); background: var(--lp--base-preset--brand-color--secondary); }
.lp-chips a[aria-current="page"] { background: var(--lp--base-preset--brand-color--dark); color: #fff; border-color: transparent; }

/* 10. GALLERY -------------------------------------------------------------- */
.lp-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lp-gallery a { display: block; border-radius: 10px; overflow: hidden; position: relative; }
.lp-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .3s; }
.lp-gallery a:hover img { transform: scale(1.04); }

/* 11. CREDENTIALS + CONTACT ------------------------------------------------ */
.lp-creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-cred { padding: 22px; border-radius: 12px; background: var(--lp--base-preset--brand-color--secondary); }
.lp-cred b { display: block; font-family: var(--lp--base-preset--heading--font-family); font-size: 18px; color: var(--lp--base-preset--heading--color); }
.lp-cred span { font-size: 15px; color: var(--lp--custom-preset--slate); }
.lp-details { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; }
.lp-details li { display: flex; gap: 14px; align-items: flex-start; }
.lp-details .lp-tile { width: 48px; height: 48px; flex: 0 0 auto; }
.lp-details small { display: block; font-size: 14px; color: var(--lp--custom-preset--slate); }
.lp-details b, .lp-details a { font-weight: 700; color: var(--lp--base-preset--heading--color); text-decoration: none; font-size: 18px; }

/* 12. FORM ELEMENT ----------------------------------------------------------- */
.lp-form-element { background: var(--lp--base-preset--brand-color--dark); color: var(--lp--custom-preset--on-dark-text); }
.lp-form-element .lp-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 72px; align-items: start; }
.lp-form-element .lp-h2 { color: #fff; font-size: clamp(36px, 4.4vw, 54px); line-height: 1.02; }
.lp-form-element .lp-lede { max-width: 460px; margin: 20px 0 36px; font-size: 18px; line-height: 1.6; color: var(--lp--custom-preset--on-dark-text); }
.lp-form-element .lp-callme { display: inline-flex; align-items: center; gap: 16px; color: #fff; text-decoration: none; }
.lp-form-element .lp-callme .lp-tile { width: 52px; height: 52px; border-radius: 50%; background: var(--lp--base-preset--brand-color--primary); color: var(--lp--base-preset--heading--color); }
.lp-form-element .lp-callme .lp-tile .lp-ico { width: 22px; height: 22px; }
.lp-form-element .lp-callme small { display: block; font-size: 14px; color: var(--lp--custom-preset--on-dark-text); }
.lp-form-element .lp-callme b { display: block; font-family: var(--lp--base-preset--heading--font-family); font-size: 30px; line-height: 1.1; }
.lp-form-element .lp-callme:hover b { color: var(--lp--base-preset--brand-color--primary); }
.lp-areas { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--lp--custom-preset--on-dark-line); }
.lp-areas .lp-eyebrow { margin-bottom: 16px; color: var(--lp--base-preset--brand-color--primary); }
.lp-form-element .lp-chips { gap: 8px; }
.lp-form-element .lp-chips a {
	min-height: 34px; padding: 6px 12px; font-size: 14px;
	background: transparent; border-color: var(--lp--custom-preset--on-dark-line); color: var(--lp--custom-preset--on-dark-text);
}
.lp-form-element .lp-chips a:hover { background: transparent; border-color: var(--lp--base-preset--brand-color--primary); color: #fff; }
.lp-form-element .lp-form-slot { background: #fff; color: var(--lp--base-preset--body--color); border-radius: var(--lp--custom-preset--radius); padding: 36px; }
.lp-form-element .lp-form-note { font-size: 14px; color: var(--lp--custom-preset--slate); margin: 16px 0 0; }
.lp-form-slot .gform_wrapper .gform_footer .gform_button,
.lp-form-slot .gform_wrapper .gform_footer input[type="submit"] { width: 100%; min-height: 54px; }
/* Gravity Forms inside the slot */
.lp-form-slot .gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.lp-form-slot .gform_wrapper textarea,
.lp-form-slot .gform_wrapper select { border: 1px solid var(--lp--custom-preset--field-line); border-radius: var(--lp--custom-preset--radius-sm); min-height: 46px; padding: 10px 12px; }
.lp-form-slot .gform_wrapper input:focus, .lp-form-slot .gform_wrapper textarea:focus { outline: 3px solid var(--lp--base-preset--brand-color--primary); outline-offset: 1px; }

/* 13. LEGAL ---------------------------------------------------------------- */
.lp-legal { font-size: 17px; }
.lp-legal .lp-updated { font-style: italic; color: var(--lp--custom-preset--slate); }
.lp-legal h2 { font-size: 24px; }

/* 14. SECTION THEMES + RESPONSIVE ------------------------------------------ */
.lp-element.lp-foam { background: var(--lp--base-preset--brand-color--secondary); }
.lp-element.lp-mist { background: var(--lp--base-preset--brand-color--grey); }
.lp-element.lp-dark { background: var(--lp--base-preset--brand-color--dark); color: var(--lp--custom-preset--on-dark-text); }
.lp-element.lp-flush-top { padding-top: 0; }
.lp-element.lp-flush-bottom { padding-bottom: 0; }
.lp-element.lp-white { background: #fff; border-top: 1px solid var(--lp--custom-preset--line); border-bottom: 1px solid var(--lp--custom-preset--line); }

@media (max-width: 1023px) {
	.lp-grid2, .lp-form-element .lp-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.lp-grid4, .lp-quotes, .lp-creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lp-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.lp-grid3, .lp-grid4, .lp-quotes, .lp-quotes.lp-two, .lp-creds, .lp-compare, .lp-ticks.lp-cols { grid-template-columns: minmax(0, 1fr); }
	.lp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lp-form-element .lp-form-slot { padding: 24px 20px; }
	.lp-hero-element { padding: 48px 0 88px; }
	.lp-lede { font-size: 18px; }
}

/* 15. GALLERY LANDING (/gallery/) ------------------------------------------ */
.lp-gal-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.lp-gal-cards:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }   /* three galleries: one row */
.lp-gal-cards:has(> :nth-child(3)) .lp-gal-card .lp-body { padding: 22px 24px 26px; }
.lp-gal-card {
	display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
	background: #fff; border: 1px solid var(--lp--custom-preset--line); border-radius: var(--lp--custom-preset--radius);
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lp-gal-card:hover { color: inherit; border-color: var(--lp--base-preset--brand-color--primary); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(var(--lp--base-preset--brand-color--dark--rgb), .10); }
.lp-gal-cover { position: relative; overflow: hidden; }
.lp-gal-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s; }
.lp-gal-card:hover .lp-gal-cover img { transform: scale(1.04); }
.lp-gal-count {
	position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px;
	background: var(--lp--base-preset--brand-color--dark); color: #fff; font-size: 14px; font-weight: 700;
}
.lp-gal-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px 6px 0; }
.lp-gal-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.lp-gal-card .lp-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lp-gal-card .lp-body p { margin: 0; color: var(--lp--custom-preset--slate); }
.lp-gal-card .lp-btn { align-self: flex-start; margin-top: auto; }   /* buttons line up across cards */
.lp-gal-card .lp-body p { margin-bottom: 10px; }
.lp-gal-card:hover .lp-btn { background: var(--lp--base-preset--button--background-color--hover); color: var(--lp--base-preset--button--color--hover); }
@media (max-width: 860px) { .lp-gal-cards:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
@media (max-width: 640px) { .lp-gal-cards { grid-template-columns: minmax(0, 1fr); } }

/* 16. GALLERY POSTS (body.single-gallery: /gallery/glass-pool-fence-gallery/, /gallery/aluminium-pool-fence-gallery/) ----
	CSS only (the Gallery template's HTML can't be edited). Markup:
	#hero.page-banner (banner with the post title; no image) ·
	section.gallery-element.image-below-content > … .hic-box > .hic-media-container (.hic-gallery > .hic-gallery-images.image-grid > .cell.image-item > a[data-fancybox] > .hic-image bg)
	                                              + .hic-content (gallery description, shown above the photos) ·
	section.information-element (optional Content element below: H2, list, paragraphs).
	Photo grid: 12-column CSS grid, row height locked to a 4:3 tile with container units, first photo shown large,
	and the last row stretched to fill the width whatever the photo count. */

/* 16a. Banner: Foam, eyebrow, same size and rhythm as the lp page heroes */
.single-gallery .hero.page-banner .inner-hero { padding: 64px 0 56px; }
.single-gallery .hero.page-banner .hero-banner-message::before {
	content: "Our work"; display: block; margin-bottom: 10px;
	font-family: var(--lp--base-preset--heading--font-family);
	font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--lp--custom-preset--accent-text);
}
.single-gallery .hero.page-banner .hero-banner-message h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; max-width: 20ch; }
/* If a banner image is ever set, keep the eyebrow readable on the dark overlay */
.single-gallery .hero.page-banner:not(:has(.hero-background[style*="url()"])) .hero-banner-message::before { color: var(--lp--base-preset--brand-color--primary); }

/* 16b. Gallery section: description first, then photos */
.single-gallery .gallery-element { padding: 48px 0 var(--lp--custom-preset--section-y); }
.single-gallery .gallery-element > .inner-section > .grid-container > .section-body > .hic-item { width: 100%; }
.single-gallery .gallery-element .hic-box { display: flex; flex-direction: column; }
.single-gallery .gallery-element .hic-box > .hic-content { order: -1; margin: 0 0 32px; padding: 0; }
.single-gallery .gallery-element .hic-blurb { max-width: 760px; }
.single-gallery .gallery-element .hic-blurb p { margin: 0; font-size: 20px; line-height: 1.55; color: var(--lp--base-preset--body--color); }
.single-gallery .gallery-element .hic-blurb p + p { margin-top: 12px; }

/* 16c. Photo grid */
.single-gallery .gallery-element .hic-gallery { --g: 14px; container-type: inline-size; }
.single-gallery .gallery-element .hic-gallery-images.image-grid {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g);
	grid-auto-rows: calc((100cqw - 3 * var(--g)) / 4 * .75);     /* one 4:3 tile in a 4-across grid */
	grid-auto-flow: row dense; margin: 0; padding: 0;
}
.single-gallery .gallery-element .image-grid > .cell.image-item {
	grid-column: span 3; width: auto; max-width: none; flex: none; margin: 0; padding: 0; min-width: 0;
}
.single-gallery .gallery-element .image-grid > .cell.image-item:first-child { grid-column: span 6; grid-row: span 2; }
/* Fill the last row (desktop, 4 across + a 2x2 first photo): n = number of photos */
@media (min-width: 1024px) {
	.single-gallery .image-grid > .image-item:first-child:nth-last-child(4n + 2) ~ .image-item:last-child { grid-column: span 12; }          /* 1 left over */
	.single-gallery .image-grid > .image-item:first-child:nth-last-child(4n + 3) ~ .image-item:nth-last-child(-n + 2) { grid-column: span 6; } /* 2 left over */
	.single-gallery .image-grid > .image-item:first-child:nth-last-child(4n + 4) ~ .image-item:nth-last-child(-n + 3) { grid-column: span 4; } /* 3 left over */
}

.single-gallery .gallery-element .image-item .hic-media-container {
	position: relative; height: 100%; border-radius: var(--lp--custom-preset--radius); overflow: hidden;
	background: var(--lp--base-preset--brand-color--grey);
}
.single-gallery .gallery-element .image-item a { display: block; height: 100%; position: relative; }
.single-gallery .gallery-element .image-item .hic-image {
	height: 100%; min-height: 0; padding: 0; aspect-ratio: auto;
	background-size: cover; background-position: center;
	transition: transform .5s ease;
}
/* Hover/focus: gentle zoom, dark wash and a Pool Blue zoom button (replaces the v4 zoom-in icon) */
.single-gallery .gallery-element .image-item a::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: rgba(var(--lp--base-preset--brand-color--dark--rgb), 0); transition: background-color .3s;
}
.single-gallery .gallery-element .image-item a::after {
	content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
	border-radius: 50%; background: var(--lp--base-preset--brand-color--primary)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 26px no-repeat;
	opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s;
}
.single-gallery .with-lightbox .image-grid .hic-item .hic-image::after { display: none; }
.single-gallery .gallery-element .image-item a:hover .hic-image,
.single-gallery .gallery-element .image-item a:focus-visible .hic-image { transform: scale(1.05); }
.single-gallery .gallery-element .image-item a:hover::before,
.single-gallery .gallery-element .image-item a:focus-visible::before { background: rgba(var(--lp--base-preset--brand-color--dark--rgb), .35); }
.single-gallery .gallery-element .image-item a:hover::after,
.single-gallery .gallery-element .image-item a:focus-visible::after { opacity: 1; transform: scale(1); }
.single-gallery .gallery-element .image-item a:focus-visible { outline: 3px solid var(--lp--base-preset--brand-color--primary); outline-offset: 3px; }

/* 16d. Content element below the photos: the copy in a white card, ticked list */
.single-gallery .information-element { padding: 0 0 var(--lp--custom-preset--section-y); background: transparent; }   /* the gallery section above already provides the top spacing */
.single-gallery .information-element .hic-box {
	max-width: 880px; margin: 0 auto; padding: 48px 56px;
	background: #fff; border: 1px solid var(--lp--custom-preset--line); border-radius: var(--lp--custom-preset--radius);
	box-shadow: var(--lp--custom-preset--shadow);
}
.single-gallery .information-element .hic-content, .single-gallery .information-element .hic-blurb { padding: 0; margin: 0; }
.single-gallery .information-element h2 { margin: 0 0 12px; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; }
.single-gallery .information-element h2::before {
	content: "Why choose it"; display: block; margin-bottom: 10px;
	font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
	color: var(--lp--custom-preset--accent-text);
}
.single-gallery.gallery-pool-gate-and-latch-repairs-gallery .information-element h2::before { content: "How we can help"; }   /* per-gallery eyebrow */
.single-gallery .information-element .hic-blurb p { font-size: 18px; line-height: 1.6; margin: 0 0 16px; }
.single-gallery .information-element .hic-blurb ul { list-style: none; margin: 8px 0 24px; padding: 0; }
.single-gallery .information-element .hic-blurb li {
	position: relative; margin: 0; padding: 14px 0 14px 40px;
	border-top: 1px solid var(--lp--custom-preset--line); font-size: 17px; line-height: 1.45;
}
.single-gallery .information-element .hic-blurb li:last-child { border-bottom: 1px solid var(--lp--custom-preset--line); }
.single-gallery .information-element .hic-blurb li::before {
	content: ""; position: absolute; left: 0; top: 14px; width: 26px; height: 26px; border-radius: 50%;
	background: var(--lp--base-preset--brand-color--secondary)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300729E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.single-gallery .information-element .hic-blurb li strong { color: var(--lp--base-preset--heading--color); }
/* Closing call to action: the last line is a blockquote (Quote block in the editor) */
.single-gallery .information-element .hic-blurb blockquote {
	margin: 24px 0 0; padding: 18px 20px; border: 0; border-left: 4px solid var(--lp--base-preset--brand-color--primary);
	border-radius: var(--lp--custom-preset--radius-sm);
	background: var(--lp--base-preset--brand-color--secondary);
	font-style: normal; quotes: none;
}
.single-gallery .information-element .hic-blurb blockquote::before,
.single-gallery .information-element .hic-blurb blockquote::after { content: none; }
.single-gallery .information-element .hic-blurb blockquote p {
	margin: 0; font-size: 18px; font-style: normal; font-weight: 600; line-height: 1.5;
	color: var(--lp--base-preset--heading--color);
}
.single-gallery .information-element .hic-blurb blockquote p + p { margin-top: 8px; }
.single-gallery .information-element .hic-blurb blockquote cite { display: none; }
.single-gallery .information-element + * { margin-top: 0; }

@media (max-width: 1023px) {
	/* 3 across, first photo 2x2 */
	.single-gallery .gallery-element .hic-gallery { --g: 12px; }
	.single-gallery .gallery-element .hic-gallery-images.image-grid { grid-auto-rows: calc((100cqw - 2 * var(--g)) / 3 * .75); }
	.single-gallery .gallery-element .image-grid > .cell.image-item { grid-column: span 4; }
	.single-gallery .gallery-element .image-grid > .cell.image-item:first-child { grid-column: span 8; }
	.single-gallery .information-element .hic-box { padding: 40px; }
}
@media (max-width: 640px) {
	/* 2 across, first photo full width */
	.single-gallery .hero.page-banner .inner-hero { padding: 40px 0 36px; }
	.single-gallery .gallery-element { padding-top: 32px; }
	.single-gallery .gallery-element .hic-box > .hic-content { margin-bottom: 24px; }
	.single-gallery .gallery-element .hic-blurb p { font-size: 18px; }
	.single-gallery .gallery-element .hic-gallery { --g: 8px; }
	.single-gallery .gallery-element .hic-gallery-images.image-grid { grid-auto-rows: calc((100cqw - var(--g)) / 2 * .75); }
	.single-gallery .gallery-element .image-grid > .cell.image-item { grid-column: span 6; }
	.single-gallery .gallery-element .image-grid > .cell.image-item:first-child { grid-column: span 12; }
	.single-gallery .image-grid > .image-item:first-child:nth-last-child(2n + 2) ~ .image-item:last-child { grid-column: span 12; }            /* 1 left over */
	.single-gallery .gallery-element .image-item .hic-media-container { border-radius: var(--lp--custom-preset--radius-sm); }
	.single-gallery .gallery-element .image-item a::after { width: 44px; height: 44px; margin: -22px 0 0 -22px; background-size: 20px; }
	.single-gallery .information-element .hic-box { padding: 28px 22px; }
	.single-gallery .information-element .hic-blurb li { font-size: 16px; }
}
@media (min-width: 641px) and (max-width: 1023px) {
	/* Fill the last row (tablet, 3 across + a 2x2 first photo) */
	.single-gallery .image-grid > .image-item:first-child:nth-last-child(3n + 1) ~ .image-item:last-child { grid-column: span 12; }           /* 1 left over */
	.single-gallery .image-grid > .image-item:first-child:nth-last-child(3n + 2) ~ .image-item:nth-last-child(-n + 2) { grid-column: span 6; } /* 2 left over */
}
@media (prefers-reduced-motion: reduce) {
	.single-gallery .gallery-element .image-item .hic-image, .single-gallery .gallery-element .image-item a::after { transition: none; }
}
/* 17. HOMEPAGE COMPONENTS (reusable on any page) -------------------------- */
/* Two-column split: copy left, list or panel right */
.lp-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 80px; align-items: start; }
.lp-split.lp-center-y { align-items: center; }
.lp-sticky { position: sticky; top: calc(var(--lp--base-preset--header--min-height) + 32px); }
.admin-bar .lp-sticky { top: calc(var(--lp--base-preset--header--min-height) + 64px); }
.lp-intro { max-width: 520px; margin: 20px 0 28px; font-size: 18px; line-height: 1.6; }
.lp-dark .lp-h2, .lp-dark .lp-h3 { color: #fff; }
.lp-dark .lp-eyebrow { color: var(--lp--base-preset--brand-color--primary); }
.lp-dark .lp-btn:hover, .lp-dark .lp-btn:focus-visible { background: #fff; color: var(--lp--base-preset--heading--color); }
.lp-dark .lp-btn.lp-outline { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.lp-dark .lp-btn.lp-outline:hover, .lp-dark .lp-btn.lp-outline:focus-visible { background: #fff; border-color: #fff; color: var(--lp--base-preset--heading--color); }
.lp-intro + .lp-actions { margin-top: 0; }
.lp-actions.lp-end { justify-content: flex-end; margin-top: 0; }
.lp-h3 + .lp-numbered { margin-top: 20px; }
.lp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Heading rows */
.lp-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-bottom: 40px; }
.lp-head-row .lp-head { margin-bottom: 0; }
.lp-head-row > .lp-h3 { font-size: 32px; }
.lp-head-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 80px; align-items: end; margin-bottom: 48px; }
.lp-head-split .lp-intro { margin: 0; max-width: none; }

/* Hero media + quick quote card */
.lp-hero-media { position: relative; }
.lp-hero-media > img {
	width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--lp--custom-preset--radius);
	box-shadow: 0 30px 60px -30px rgba(var(--lp--base-preset--brand-color--dark--rgb), .45);
}
.lp-quick-quote {
	position: relative; width: min(92%, 380px); margin: -110px 0 0 auto; padding: 24px;
	background: #fff; border-radius: var(--lp--custom-preset--radius);
	box-shadow: 0 20px 50px -20px rgba(var(--lp--base-preset--brand-color--dark--rgb), .35);
}
.lp-quick-quote-title { margin: 0 0 4px; font-family: var(--lp--base-preset--heading--font-family); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--lp--base-preset--heading--color); }
.lp-choices { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.lp-choices legend { width: 100%; margin: 0 0 12px; padding: 0; font-size: 15px; color: var(--lp--custom-preset--slate); }
.lp-choices input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.lp-choices label {
	margin: 0; padding: 9px 14px; cursor: pointer;
	border: 1.5px solid var(--lp--custom-preset--field-line); border-radius: var(--lp--custom-preset--radius-sm);
	background: #fff; color: var(--lp--base-preset--heading--color); font-size: 14px; font-weight: 600; line-height: 1.2;
}
.lp-choices input:checked + label { background: var(--lp--base-preset--brand-color--dark); border-color: var(--lp--base-preset--brand-color--dark); color: #fff; }
.lp-choices input:focus-visible + label { outline: 3px solid var(--lp--base-preset--brand-color--primary); outline-offset: 2px; }
.lp-btn.lp-block { width: 100%; justify-content: center; }

/* Trust strip */
.lp-trust-element { padding: 28px 0; border-bottom: 1px solid var(--lp--custom-preset--line); }
.lp-trust { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 32px; margin: 0; padding: 0; list-style: none; }
.lp-trust li { display: flex; flex-direction: column; gap: 2px; }
.lp-trust b { font-family: var(--lp--base-preset--heading--font-family); font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--lp--base-preset--heading--color); }
.lp-trust span { font-size: 14px; color: var(--lp--custom-preset--slate); }

/* Numbered service list */
.lp-service-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lp--custom-preset--line); }
.lp-service-list li { margin: 0; border-bottom: 1px solid var(--lp--custom-preset--line); }
.lp-service-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 28px 4px; color: var(--lp--base-preset--heading--color); text-decoration: none; }
.lp-service-list .lp-num { padding-top: 4px; font-family: var(--lp--base-preset--heading--font-family); font-size: 18px; font-weight: 600; color: var(--lp--custom-preset--accent-text); }
.lp-service-list .lp-name { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; transition: color .2s; }
.lp-service-list .lp-desc { margin: 6px 0 0; font-size: 17px; line-height: 1.55; color: var(--lp--custom-preset--slate); }
.lp-service-list .lp-arrow { padding-top: 4px; font-size: 22px; color: var(--lp--custom-preset--accent-text); transition: transform .2s; }
.lp-service-list a:hover .lp-name, .lp-service-list a:focus-visible .lp-name { color: var(--lp--custom-preset--accent-text); }
.lp-service-list a:hover .lp-arrow { transform: translateX(4px); }

/* Steps (how it works) */
.lp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.lp-step { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 28px 26px 30px; background: #fff; border-radius: var(--lp--custom-preset--radius); }
.lp-step-num {
	display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
	background: var(--lp--base-preset--brand-color--primary); color: var(--lp--base-preset--heading--color);   /* Heading colour on Primary, never white */
	font-family: var(--lp--base-preset--heading--font-family); font-size: 18px; font-weight: 700;
}
.lp-step .lp-h3 { margin-top: 6px; font-size: 23px; }
.lp-step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--lp--custom-preset--slate); }

/* Numbered steps with large numbers (certificates) */
.lp-numbered { margin: 0; padding: 0; list-style: none; }
.lp-numbered li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; margin: 0; padding: 24px 0; border-top: 1px solid var(--lp--custom-preset--line); }
.lp-numbered .lp-num { font-family: var(--lp--base-preset--heading--font-family); font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--lp--custom-preset--accent-text); }
.lp-numbered .lp-h3 { margin-bottom: 4px; font-size: 22px; }
.lp-numbered p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--lp--custom-preset--slate); }
.lp-dark .lp-numbered li { border-color: var(--lp--custom-preset--on-dark-line); }
.lp-dark .lp-numbered .lp-num { color: var(--lp--base-preset--brand-color--primary); }
.lp-dark .lp-numbered p { color: var(--lp--custom-preset--on-dark-text); }

/* Project tiles */
.lp-projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 16px; margin: 0; padding: 0; list-style: none; }
.lp-projects li { margin: 0; }
.lp-project { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--lp--custom-preset--radius); background: var(--lp--custom-preset--line); }
.lp-project img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.lp-project:hover img { transform: scale(1.04); }
.lp-project span {
	position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 3px;
	background: #fff; color: var(--lp--base-preset--heading--color); font-size: 14px; font-weight: 600; line-height: 1.3;
}

/* Checklist with dividers */
.lp-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.lp-checklist li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 18px 0; border-top: 1px solid var(--lp--custom-preset--line); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--lp--base-preset--heading--color); }
.lp-checklist .lp-ico { margin-top: 1px; color: var(--lp--custom-preset--accent-text); }

@media (max-width: 1023px) {
	.lp-split, .lp-head-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.lp-sticky { position: static; }
	.lp-actions.lp-end { justify-content: flex-start; }
	.lp-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lp-steps, .lp-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lp-projects { grid-auto-rows: 220px; }
}
@media (max-width: 640px) {
	.lp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lp-steps, .lp-checklist, .lp-compare .lp-ticks { grid-template-columns: minmax(0, 1fr); }
	.lp-projects { grid-auto-rows: 160px; gap: 10px; }
	.lp-project span { left: 8px; bottom: 8px; padding: 4px 8px; font-size: 13px; }
	.lp-service-list a { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 24px 0; }
	.lp-service-list .lp-name { font-size: 23px; }
	.lp-quick-quote { width: auto; margin: -64px 12px 0; }
	.lp-compare .lp-body { padding: 24px; }
}
/* Call-out panel (e.g. "Need us sooner?" on the thank-you page) */
.lp-callout { padding: 32px; border-radius: var(--lp--custom-preset--radius); background: var(--lp--base-preset--brand-color--secondary); }
.lp-callout .lp-h3 { margin-bottom: 10px; font-size: 28px; }
.lp-callout p { margin: 0 0 22px; }
.lp-split > div > .lp-h2 + .lp-numbered { margin-top: 24px; }

/* Service area cards (/service-areas/) */
.lp-area-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lp-area-cards li { margin: 0; }
.lp-area-card {
	position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 22px 56px 22px 24px;
	background: #fff; border: 1px solid var(--lp--custom-preset--line); border-radius: var(--lp--custom-preset--radius);
	color: var(--lp--base-preset--heading--color); text-decoration: none; transition: border-color .2s, transform .2s;
}
.lp-area-card .lp-name { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.15; }
.lp-area-card .lp-postcode { font-size: 14px; color: var(--lp--custom-preset--slate); }
.lp-area-card .lp-arrow { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--lp--custom-preset--accent-text); transition: right .2s; }
.lp-area-card:hover, .lp-area-card:focus-visible { border-color: var(--lp--base-preset--brand-color--primary); color: var(--lp--base-preset--heading--color); }
.lp-area-card:hover .lp-arrow { right: 18px; }
.lp-areas-note { margin: 28px 0 0; font-size: 17px; }
.lp-areas-all { margin: 20px 0 0; font-size: 15px; }
@media (max-width: 1023px) { .lp-area-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.lp-area-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.lp-area-card { padding: 16px 32px 16px 14px; }
	.lp-area-card .lp-name { font-size: 18px; }
	.lp-area-card .lp-arrow { right: 12px; font-size: 18px; }
}

/* 18. LAUNCHPAD TESTIMONIALS ELEMENT ([testimonial_element] shortcode or Testimonials page element) */
/* Inside an lp- section the Launchpad element drops its own section spacing and width */
.lp-element .page-element { padding: 0; margin: 0; background: transparent; }
.lp-element .page-element .grid-container { max-width: none; }
.lp-element .page-element .section-body { margin-left: -15px; margin-right: -15px; }   /* cancel the cell gutters so cards line up with the page edges */
.testimonial-element .section-body { row-gap: 20px; }
.testimonial-element .hic-item { display: flex; }
.testimonial-element .hic-box {
	display: flex; flex-direction: column; width: 100%; padding: 32px;
	background: var(--lp--base-preset--brand-color--secondary); border-radius: var(--lp--custom-preset--radius);
}
.lp-foam .testimonial-element .hic-box, .second-theme-section.testimonial-element .hic-box { background: #fff; }
.testimonial-element .hic-content { display: flex; flex-direction: column; flex: 1; gap: 6px; text-align: left; }
.testimonial-element .hic-rating { order: 1; display: flex; gap: 4px; margin-bottom: 14px; color: var(--lp--base-preset--brand-color--primary); font-size: 16px; }
.testimonial-element .hic-blurb { order: 2; margin-bottom: 18px; font-size: 18px; line-height: 1.55; color: var(--lp--base-preset--body--color); }
.testimonial-element .hic-blurb p { margin: 0; }
.testimonial-element .hic-client-name { order: 3; font-family: var(--lp--base-preset--heading--font-family); font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--lp--base-preset--heading--color); }
.testimonial-element .hic-client-location { order: 4; font-size: 15px; color: var(--lp--custom-preset--slate); }
.testimonial-element .hic-button-wrap { order: 5; margin-top: auto; padding-top: 18px; }
.testimonial-element .hic-button-wrap .button {
	gap: 0; min-height: 0; padding: 0; border: 0; background: transparent;
	color: var(--lp--custom-preset--accent-text); font-family: var(--lp--base-preset--body--font-family); font-size: 16px;
}
.testimonial-element .hic-button-wrap .button::after { content: "\00a0\2192"; }
.testimonial-element .hic-button-wrap .button:hover,
.testimonial-element .hic-button-wrap .button:focus { background: transparent; color: var(--lp--base-preset--heading--color); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
	.testimonial-element .hic-box { padding: 24px; }
	.testimonial-element .hic-blurb { font-size: 17px; }
}
/* 19. BLOG POSTS (single posts on the Custom HTML template: section#body.custom-html-content > .lp-custom-html)
	Wrapped posts: lp-element lp-article-element > .lp-wrap > article.lp-article.
	The second selector styles a post pasted without the lp- wrapper, so bare HTML still reads well. */
.single-post .custom-html-content { padding: 0; }
.lp-article,
.single-post .lp-custom-html:not(:has(.lp-element)) {
	max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.7; color: var(--lp--base-preset--body--color);
}
.single-post .lp-custom-html:not(:has(.lp-element)) { padding: var(--lp--custom-preset--section-y) 24px; }
.lp-article > *, .single-post .lp-custom-html:not(:has(.lp-element)) > * { margin-top: 0; margin-bottom: 0; }
.lp-article > * + *, .single-post .lp-custom-html:not(:has(.lp-element)) > * + * { margin-top: 20px; }
.lp-article h2, .single-post .lp-custom-html:not(:has(.lp-element)) h2 { margin-top: 56px; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; }
.lp-article h3, .single-post .lp-custom-html:not(:has(.lp-element)) h3 { margin-top: 36px; font-size: 23px; line-height: 1.2; }
.lp-article h2 + *, .lp-article h3 + *,
.single-post .lp-custom-html:not(:has(.lp-element)) h2 + *, .single-post .lp-custom-html:not(:has(.lp-element)) h3 + * { margin-top: 14px; }
.lp-article > p:first-child { font-size: 21px; line-height: 1.6; color: var(--lp--base-preset--heading--color); }
.lp-article strong { color: var(--lp--base-preset--heading--color); }
.lp-article a, .single-post .lp-custom-html:not(:has(.lp-element)) a { color: var(--lp--custom-preset--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lp-article a:hover, .single-post .lp-custom-html:not(:has(.lp-element)) a:hover { color: var(--lp--base-preset--heading--color); }
/* Lists: Deep Pool ticks */
.lp-article ul, .single-post .lp-custom-html:not(:has(.lp-element)) ul { margin-left: 0; padding: 0; list-style: none; }
.lp-article ul li, .single-post .lp-custom-html:not(:has(.lp-element)) ul li { position: relative; margin: 0; padding-left: 32px; }
.lp-article ul li + li, .single-post .lp-custom-html:not(:has(.lp-element)) ul li + li { margin-top: 10px; }
.lp-article ul li::before, .single-post .lp-custom-html:not(:has(.lp-element)) ul li::before {
	content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px;
	background-color: var(--lp--custom-preset--accent-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lp-article ol, .single-post .lp-custom-html:not(:has(.lp-element)) ol { margin-left: 1.4em; }
.lp-article ol li + li { margin-top: 10px; }
/* Figures */
.lp-article figure, .single-post .lp-custom-html:not(:has(.lp-element)) figure { margin: 40px 0; }
.lp-article figure img, .single-post .lp-custom-html:not(:has(.lp-element)) figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--lp--custom-preset--radius); }
.lp-article figcaption, .single-post .lp-custom-html:not(:has(.lp-element)) figcaption { margin-top: 10px; font-size: 15px; color: var(--lp--custom-preset--slate); }
/* Tables */
.lp-article table, .single-post .lp-custom-html:not(:has(.lp-element)) table {
	width: 100%; margin-top: 24px; border: 1px solid var(--lp--custom-preset--line); border-collapse: separate; border-spacing: 0;
	border-radius: var(--lp--custom-preset--radius); overflow: hidden; font-size: 16px; line-height: 1.5; background: #fff;
}
.lp-article thead, .lp-article tbody, .lp-article tr,
.single-post .lp-custom-html:not(:has(.lp-element)) thead, .single-post .lp-custom-html:not(:has(.lp-element)) tbody, .single-post .lp-custom-html:not(:has(.lp-element)) tr { background: transparent; border: 0; }
.lp-article th, .lp-article td, .single-post .lp-custom-html:not(:has(.lp-element)) th, .single-post .lp-custom-html:not(:has(.lp-element)) td {
	padding: 12px 16px; border: 0; border-top: 1px solid var(--lp--custom-preset--line); text-align: left; vertical-align: top;
}
.lp-article thead th, .single-post .lp-custom-html:not(:has(.lp-element)) thead th {
	border-top: 0; background: var(--lp--base-preset--brand-color--dark); color: #fff;
	font-family: var(--lp--base-preset--heading--font-family); font-size: 17px; font-weight: 700;
}
.lp-article tbody th, .single-post .lp-custom-html:not(:has(.lp-element)) tbody th { width: 24%; background: var(--lp--base-preset--brand-color--secondary); color: var(--lp--base-preset--heading--color); font-weight: 700; }
.lp-article tbody tr:nth-child(even) td, .single-post .lp-custom-html:not(:has(.lp-element)) tbody tr:nth-child(even) td { background: var(--lp--base-preset--brand-color--grey); }
@media (max-width: 640px) {
	.lp-article, .single-post .lp-custom-html:not(:has(.lp-element)) { font-size: 17px; }
	.lp-article > p:first-child { font-size: 19px; }
	.lp-article table, .single-post .lp-custom-html:not(:has(.lp-element)) table { display: block; overflow-x: auto; font-size: 15px; }
	.lp-article th, .lp-article td { min-width: 140px; padding: 10px 12px; }
	.lp-article figure { margin: 28px 0; }
}

/* 20. POST LISTING CARDS ([post_element] / Posts listing element)
	section.post-element.listing-element > … .section-body > .cell.hic-item.article
		> .hic-box > [.hic-media-container > .overlay + a > .hic-image] + .hic-content > .hic-title > a > h3 + .hic-blurb + .hic-button-wrap > a.button */
.post-element.listing-element .section-body { row-gap: 30px; }
.post-element.listing-element .hic-item { display: flex; }
.post-element.listing-element .hic-box {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--lp--custom-preset--line);
	border-radius: var(--lp--custom-preset--radius);
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.post-element.listing-element .hic-box:hover {
	border-color: var(--lp--base-preset--brand-color--primary);
	box-shadow: var(--lp--custom-preset--shadow);
	transform: translateY(-2px);
}
/* Featured image (only when the post has one) */
.post-element.listing-element .has-media .hic-media-container { position: relative; margin: 0; overflow: hidden; }
.post-element.listing-element .has-media .hic-image { background-size: cover; background-position: center; transition: transform .4s; }
.post-element.listing-element .has-media .hic-image::before { content: ""; display: block; padding-top: 62.5%; }
.post-element.listing-element .has-media .hic-box:hover .hic-image { transform: scale(1.04); }
.post-element.listing-element .hic-media-container .overlay { display: none; }
/* Card content */
.post-element.listing-element .hic-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	padding: 26px 28px 28px;
	text-align: left;
}
.post-element.listing-element .hic-title a { color: var(--lp--base-preset--heading--color); text-decoration: none; }
.post-element.listing-element .hic-title a:hover,
.post-element.listing-element .hic-title a:focus { color: var(--lp--custom-preset--accent-text); }
.post-element.listing-element .hic-title h3 { margin: 0; font-size: 23px; font-weight: 700; line-height: 1.2; color: inherit; }
.post-element.listing-element .hic-blurb { font-size: 16px; line-height: 1.6; color: var(--lp--custom-preset--slate); }
.post-element.listing-element .hic-blurb p { margin: 0; }
.post-element.listing-element .hic-button-wrap { margin-top: auto; padding-top: 10px; }
.post-element.listing-element .hic-button-wrap .button {
	gap: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lp--custom-preset--accent-text);
	font-family: var(--lp--base-preset--body--font-family);
	font-size: 16px;
}
.post-element.listing-element .hic-button-wrap .button::after { content: "\00a0\2192"; }
.post-element.listing-element .hic-button-wrap .button:hover,
.post-element.listing-element .hic-button-wrap .button:focus { background: transparent; color: var(--lp--base-preset--heading--color); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
	.post-element.listing-element .section-body { row-gap: 20px; }
	.post-element.listing-element .hic-content { padding: 22px; }
	.post-element.listing-element .hic-title h3 { font-size: 21px; }
}

/* 21. LAUNCHPAD PAGE ELEMENTS (builder elements such as Content Boxes, so they match the lp- pages)
	Generic section spacing, section headers and themes for every builder element, plus Content Boxes
	in every Select Display layout. Code elements (our lp- pages) are excluded. */

/* Section spacing: consecutive sections on the same background share one gap */
.page-elements > .page-element:not(.code-element) { padding: var(--lp--custom-preset--section-y) 0; }
.page-elements > .default-section:not(.code-element) + .default-section:not(.code-element),
.page-elements > .light-section + .light-section,
.page-elements > .grey-section + .grey-section,
.page-elements > .dark-section + .dark-section,
.page-elements > .theme-section + .theme-section,
.page-elements > .second-theme-section + .second-theme-section { padding-top: 0; }

/* Section themes (colours only) */
.page-element.light-section { background-color: #fff; }
.page-element.grey-section { background-color: var(--lp--base-preset--brand-color--grey); }
.page-element.second-theme-section { background-color: var(--lp--base-preset--brand-color--secondary); }
.page-element.theme-section { background-color: var(--lp--base-preset--brand-color--primary); color: var(--lp--base-preset--heading--color); }
.page-element.dark-section { background-color: var(--lp--base-preset--brand-color--dark); color: var(--lp--custom-preset--on-dark-text); }
.page-element.dark-section .section-title,
.page-element.dark-section .hic-title h3 { color: #fff; }

/* Section header: eyebrow (span inside the title) + heading, left-aligned like the rest of the site */
.page-element .section-header { margin-bottom: 40px; }
.page-element.default-alignment .section-header { text-align: left; }
.page-element .section-title {
	margin: 0;
	font-size: clamp(34px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.05;
	color: var(--lp--base-preset--heading--color);
}
.page-element .section-title span {
	display: block;
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lp--custom-preset--accent-text);
}
.page-element.dark-section .section-title span { color: var(--lp--base-preset--brand-color--primary); }
.page-element.theme-section .section-title span { color: var(--lp--base-preset--heading--color); }
.page-element .section-header .sub-heading { max-width: 680px; margin: 16px 0 0; font-size: 18px; line-height: 1.6; }
.page-element.text-center .section-header .sub-heading { margin-left: auto; margin-right: auto; }
.page-element .section-header .sub-heading:empty { display: none; }
.page-element .section-footer { margin-top: 40px; }

/* Content Boxes: shared */
.content-box-element .section-body { row-gap: 30px; }
/* Equal-height cards (not the split layouts, whose image/text columns come from the Launchpad base CSS) */
.content-box-element:is(.image-above-content, .content-only, .icon-above-content, .icon-left-content, .image-overlay-content) .hic-item { display: flex; }
.content-box-element:is(.image-above-content, .content-only, .icon-above-content, .icon-left-content, .image-overlay-content) .hic-box { display: flex; flex-direction: column; width: 100%; }
.content-box-element .hic-title h3 { margin: 0; font-size: 23px; font-weight: 700; line-height: 1.2; color: var(--lp--base-preset--heading--color); }
.content-box-element .hic-blurb { font-size: 16px; line-height: 1.6; color: var(--lp--custom-preset--slate); }
.content-box-element .hic-blurb p { margin: 0 0 12px; }
.content-box-element .hic-blurb p:last-child { margin-bottom: 0; }
.content-box-element .hic-content { display: flex; flex-direction: column; gap: 10px; }
.content-box-element .hic-button-wrap { margin-top: auto; padding-top: 10px; }

/* Cards: image above, content only, icon above / left */
.content-box-element:is(.image-above-content, .content-only, .icon-above-content, .icon-left-content) .hic-box {
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--lp--custom-preset--line);
	border-radius: var(--lp--custom-preset--radius);
}
.content-box-element:is(.image-above-content, .content-only, .icon-above-content, .icon-left-content) .hic-content { flex: 1; padding: 28px 30px 30px; }
.content-box-element.image-above-content .has-media .hic-media-container { margin: 0; }
.content-box-element.image-above-content .has-media .hic-image { background-size: cover; background-position: center; }
.content-box-element.image-above-content .has-media .hic-image::before { content: ""; display: block; padding-top: 62.5%; }
.content-box-element .hic-media-container .overlay { pointer-events: none; }
.content-box-element:not(.image-overlay-content) .hic-media-container .overlay { display: none; }
/* Card links read as text links, like the rest of the site */
.content-box-element:is(.image-above-content, .content-only, .icon-above-content, .icon-left-content) .hic-button-wrap .button {
	gap: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lp--custom-preset--accent-text);
	font-family: var(--lp--base-preset--body--font-family);
	font-size: 16px;
}
.content-box-element:is(.image-above-content, .content-only, .icon-above-content, .icon-left-content) .hic-button-wrap .button::after { content: "\00a0\2192"; }
.content-box-element:is(.image-above-content, .content-only, .icon-above-content, .icon-left-content) .hic-button-wrap .button:hover,
.content-box-element:is(.image-above-content, .content-only, .icon-above-content, .icon-left-content) .hic-button-wrap .button:focus {
	background: transparent;
	color: var(--lp--base-preset--heading--color);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Cards on coloured sections */
.content-box-element:is(.grey-section, .second-theme-section) .hic-box { border-color: transparent; }
.content-box-element.dark-section:is(.image-above-content, .content-only, .icon-above-content, .icon-left-content) .hic-box { background: rgba(255, 255, 255, .06); border-color: var(--lp--custom-preset--on-dark-line); }
.content-box-element.dark-section .hic-blurb { color: var(--lp--custom-preset--on-dark-text); }
.content-box-element.dark-section .hic-button-wrap .button { color: var(--lp--base-preset--brand-color--primary); }

/* Icons */
.content-box-element .hic-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 8px;
	border-radius: var(--lp--custom-preset--radius);
	background: var(--lp--base-preset--brand-color--secondary);
	color: var(--lp--custom-preset--accent-text);
	font-size: 24px;
}
.content-box-element .hic-icon img { max-width: 28px; max-height: 28px; }
.content-box-element.icon-left-content .has-icon .hic-content {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	column-gap: 18px;
	row-gap: 10px;
	align-content: start;
}
.content-box-element.icon-left-content .has-icon .hic-icon { grid-row: 1 / span 4; margin-bottom: 0; }
.content-box-element.icon-left-content .has-icon .hic-content > :not(.hic-icon) { grid-column: 2; }

/* Image overlay: photo with a dark fade and white text; a solid Charcoal panel when there is no image */
.content-box-element.image-overlay-content .hic-box { position: relative; overflow: hidden; border-radius: var(--lp--custom-preset--radius); }
.content-box-element.image-overlay-content .has-media .overlay {
	background: linear-gradient(180deg, rgba(var(--lp--base-preset--brand-color--dark--rgb), 0) 35%, rgba(var(--lp--base-preset--brand-color--dark--rgb), .8) 100%);
	opacity: 1;
}
.content-box-element.image-overlay-content .hic-item:not(.has-media) .hic-box { min-height: 220px; background: var(--lp--base-preset--brand-color--dark); }
.content-box-element.image-overlay-content .hic-content { padding: 26px 28px; }
.content-box-element.image-overlay-content .hic-item:not(.has-media) .hic-content { flex: 1; justify-content: flex-end; }
.content-box-element.image-overlay-content .hic-title h3,
.content-box-element.image-overlay-content .hic-blurb { color: #fff; }
.content-box-element.image-overlay-content .hic-button-wrap .button:hover,
.content-box-element.image-overlay-content .hic-button-wrap .button:focus { background: #fff; color: var(--lp--base-preset--heading--color); }

/* Split layouts (image left / right, alternating): gap between image and text, rounded image */
.content-box-element:is(.image-left-content, .image-right-content) .section-body { row-gap: 56px; }
.content-box-element:is(.image-left-content, .image-right-content) .has-media .hic-box { column-gap: 48px; align-items: center; }
.content-box-element:is(.image-left-content, .image-right-content) .has-media .hic-media-container { overflow: hidden; border-radius: var(--lp--custom-preset--radius); }
.content-box-element:is(.image-left-content, .image-right-content) .hic-title h3 { font-size: clamp(26px, 3vw, 32px); }
.content-box-element:is(.image-left-content, .image-right-content) .hic-blurb { font-size: 17px; }

/* Page banner without an image (Launchpad templates): Foam with Charcoal text instead of a grey wash */
.hero.page-banner .hero-background[style*="url()"] { background-color: var(--lp--base-preset--brand-color--secondary); }
.hero.page-banner .hero-background[style*="url()"] .hero-bg-overlay { display: none; }
.hero.page-banner:has(.hero-background[style*="url()"]) .hero-banner-message :is(h1, h2, p) { color: var(--lp--base-preset--heading--color); }

@media (max-width: 1023px) {
	.content-box-element:is(.image-left-content, .image-right-content) .has-media .hic-box { column-gap: 32px; }
}
@media (max-width: 640px) {
	.content-box-element .section-body { row-gap: 20px; }
	.content-box-element:is(.image-left-content, .image-right-content) .section-body { row-gap: 40px; }
	.content-box-element:is(.image-left-content, .image-right-content) .has-media .hic-box { row-gap: 20px; }
	.content-box-element:is(.image-above-content, .content-only, .icon-above-content, .icon-left-content) .hic-content { padding: 22px; }
}

/*************************************
!PART B PAGE COMPONENTS (lp-) - END
**************************************/