/* Opt Hire global CSS: only effects Elementor can't express natively. See BUILD_PLAN.md section 8, step 3. */

/* Header stays pinned while scrolling, as on the reference site (uk-sticky). Elementor can't style its location wrapper. */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 999;
}
.admin-bar .elementor-location-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Header search box: live values (36px tall, padding 1px 10px 1px 40px, 4.5px radius, 16px text, icon at left).
   The Search widget's own padding/height controls don't reach the input in Elementor 4.3. */
.elementor-widget-search.oh-header-search .e-search-form {
	position: relative;
}
.elementor-widget-search.oh-header-search input.e-search-input[type="search"] {  /* beats the kit form-field rule */
	height: 36px;
	min-height: 36px;
	padding: 1px 10px 1px 40px;
	line-height: 34px;
	border-radius: 4.5px;
	font-size: 16px;
}
.elementor-widget-search.oh-header-search .e-search-label {
	position: absolute;
	inset-inline-start: 12px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 1;
	display: flex;
}
.elementor-widget-search.oh-header-search .e-search-label svg {
	width: 16px;
	height: 16px;
	fill: #40403e;
}

/* Main Menu: dropdowns taller than the screen scroll, as on the reference site (DJ mega menu overflow-y: auto).
   In every dropdown, deeper levels open underneath their parent (indented), as live's accordion menu (30 Oct). */
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > .sub-menu {
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li .sub-menu .sub-menu {
	position: static !important; /* overrides SmartMenus inline positioning */
	top: auto !important;
	left: auto !important;
	margin: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	box-shadow: none !important;
}
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li .sub-menu .sub-menu a {
	padding-left: 40px;
}
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li .sub-menu .sub-menu .sub-menu a {
	padding-left: 60px;
}

/* Main Menu: "Enquire Now" and phone appear only in the mobile menu, as green buttons (live: 51px tall, 15px side
   margins, 4.5px radius, Manrope 20/500 uppercase, 45px above, 5px between). Client asked to match live here (D5 exception). */
.elementor-location-header .elementor-nav-menu--main .oh-mobile-only {
	display: none !important;
}
.elementor-location-header .elementor-nav-menu--dropdown li.oh-menu-btn {
	padding: 0 15px;
	margin-top: 5px;
	border: 0;
}
.elementor-location-header .elementor-nav-menu--dropdown li.oh-menu-btn:not(.oh-menu-btn + .oh-menu-btn) {
	margin-top: 45px;
}
.elementor-location-header .elementor-nav-menu--dropdown li.oh-menu-btn:last-child {
	padding-bottom: 15px;
}
.elementor-location-header .elementor-nav-menu--dropdown li.oh-menu-btn > a {
	justify-content: center;
	height: 51px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 4.5px;
	background-color: #65a812 !important; /* beats the widget's per-element dropdown colours */
	color: #ffffff !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
}
/* The last visible desktop item sits before the hidden mobile-only items, so drop the end margin Elementor
   only removes from the true last child. */
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:has(+ li.oh-mobile-only) > a {
	margin-inline-end: 0 !important;
}

/* ---- Breadcrumbs ([oh_breadcrumbs], inc/breadcrumbs.php), as live on every page type: inline text, 16px Manrope,
   "·" separators that are inline blocks with 5px margins all round. So a row that starts with a separator is 37px
   tall and a row that continues a wrapped crumb is 27px (37 / 64 / 74px trails on live). Colour follows the container
   (white on the page hero). */
.oh-breadcrumbs ol {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	font-weight: 300;
	line-height: 27.2px;
	color: inherit;
}
.oh-breadcrumbs li {
	display: inline;
}
.oh-breadcrumbs li + li::before {
	content: "·";
	display: inline-block;
	margin: 5px 10px 5px 5px; /* live: 5px margins plus a word space after the dot */
}
.oh-breadcrumbs svg {
	vertical-align: -3px;
}
.oh-breadcrumbs a,
.oh-breadcrumbs a:hover {
	color: inherit;
	text-decoration: none;
}
.oh-breadcrumbs a:hover span {
	text-decoration: underline;
}

/* A dynamic image with nothing to show (e.g. a category with no banner yet) renders as an <img> with no src, or
   Elementor's placeholder graphic; neither has alt text. Hide them so the page shows the plain hero instead. */
.elementor img.e-image-base:not([src]),
.elementor img.e-image-base[src=""],
.elementor img[src$="/placeholder-v4.svg"] {
	display: none;
}

/* ---- Article body (Insights template, ACF information_text). The rich text's inner tags can't be styled from
   Elementor, so the live article sizes live here. Headings use the site heading font (D1), not live's Manrope. */
.oh-article {
	font-size: 20px;
	font-weight: 300;
	line-height: 28px;
}
.oh-article p {
	margin: 20px 0;
}
.oh-article h2 {
	margin: 40px 0 18px;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 44.8px;
	text-transform: uppercase;
	color: #000000;
}
.oh-article h3 {
	margin: 40px 0 9px;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: 26px;
	font-weight: 800;
	line-height: 28.6px;
	color: #000000;
}
.oh-article ul,
.oh-article ol {
	margin: 20px 0;
	padding-left: 30px;
}
.oh-article li {
	line-height: 38px;
}
.oh-article > .elementor-widget-container > :first-child,
.oh-article > :first-child {
	margin-top: 0;
}
.oh-article > .elementor-widget-container > :last-child,
.oh-article > :last-child {
	margin-bottom: 0;
}
/* Buttons inside rich text ("Request a quote now."): the kit's pill button (D5). */
.oh-article a.oh-button {
	display: inline-block;
	padding: 0 26px;
	border: 2px solid transparent;
	border-radius: 56px;
	background: #65a812;
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	line-height: 36px;
	text-transform: uppercase;
	text-decoration: none;
}
.oh-article a.oh-button:hover {
	background: #000000;
	color: #ffffff;
}
@media (max-width: 767px) {
	.oh-article {
		font-size: 16px;
		line-height: 22.4px;
	}
	.oh-article h2 {
		font-size: 28px;
		line-height: 39.2px;
	}
	.oh-article h3 {
		font-size: 22px;
		line-height: 24.2px;
	}
	.oh-article li {
		line-height: 30.4px;
	}
}

/* ---- Hero intro (category and sub-category templates): live paragraphs are 20px apart. */
.oh-hero-intro p {
	margin: 0 0 20px;
}
.oh-hero-intro p:last-child {
	margin-bottom: 0;
}
/* Links in a hero intro (5 Nov, FOD Track-Out Mats "contact us"): green, bold, underlined, as live. */
body .oh-hero-intro a {
	text-decoration: underline;
}

/* ---- Generator product pages (generator_template.py, inc/generators.php). */
/* Sections with no content on this page (body classes from inc/generators.php). */
.oh-empty-gen-intro #oh-gen-intro,
.oh-empty-specs #oh-gen-specs,
.oh-empty-powers #oh-gen-powers,
.oh-empty-body #oh-gen-body,
.oh-empty-why #oh-gen-why,
.oh-empty-hiring #oh-gen-hiring,
.oh-empty-areas #oh-gen-areas,
.oh-empty-cta #oh-gen-cta {
	display: none;
}
/* Field text: live sizes (18/300/30.6 grey; intro-style text 17/500/24). */
.oh-gen-text {
	font-size: 18px;
	font-weight: 300;
	line-height: 30.6px;
	color: #40403e;
}
.oh-gen-text--intro {   /* Home type scale (30 Oct): body 18/300/30.6, was live 17/500/24 */
	font-size: 18px;
	font-weight: 300;
	line-height: 30.6px;
	color: #40403e;
}
.oh-gen-text--white,
.oh-gen-text--white a {
	color: #ffffff;
}
.oh-gen-text p {
	margin: 0 0 20px;
}
.oh-gen-text p:last-child,
.oh-gen-list ul {
	margin-bottom: 0;
}
.oh-gen-list ul {
	margin-top: 0;
	padding-left: 30px;
}
.oh-gen-list:not(:last-child) {
	margin-bottom: 20px;
}
/* Spec table: live 16px 12px cells, 1px #eaeaea between rows. */
.oh-spec-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 18px;
	font-weight: 300;
	line-height: 30.6px;
	color: #40403e;
}
.oh-spec-table th,
.oh-spec-table td {
	padding: 16px 12px;
	border: 0;
	text-align: left;
	font-weight: 300;
	vertical-align: top;
	background: none;
}
.oh-spec-table th {
	width: 143px;
}
/* Hello Elementor stripes odd table rows; live has none. */
.oh-spec-table tbody > tr:nth-child(odd) > th,
.oh-spec-table tbody > tr:nth-child(odd) > td,
.oh-spec-table tbody > tr:hover > th,
.oh-spec-table tbody > tr:hover > td {
	background-color: transparent;
}
.oh-spec-table tr + tr th,
.oh-spec-table tr + tr td {
	border-top: 1px solid #eaeaea;
}
/* Live map: 550px tall, 5px green border, 10px corners. */
.oh-gen-map {
	display: block;
	width: 100%;
	height: 550px;
	border: 5px solid #65a913;
	border-radius: 10px;
}
/* Buttons from link fields ([oh_acf_link]): outline pill (live: green outline, square-ish; D5 pill). */
a.oh-button {
	display: inline-block;
	padding: 0 26px;
	border: 2px solid #65a812;
	border-radius: 56px;
	font-size: 18px;
	font-weight: 600;
	line-height: 36px;
	text-transform: uppercase;
	text-decoration: none;
}
a.oh-button--outline {
	background: transparent;
	color: #65a812;
}
a.oh-button--outline:hover {
	background: #65a812;
	color: #ffffff;
}
/* Closing call to action: first line is the bold uppercase lead (live 22/900/28, black). */
.oh-gen-cta-text {
	max-width: 660px;
	color: #ffffff;
}
.oh-gen-cta-text p:first-child {
	font-size: 22px;
	font-weight: 700;   /* Home type scale (30 Oct), was 900 */
	line-height: 28px;
	text-transform: uppercase;
	color: #000000;
}
.oh-gen-cta-text a {
	color: #ffffff;
}
/* FAQ: native <details>, so answers open without JavaScript; the marker is the summary's own. */
#oh-gen-faq summary {
	cursor: pointer;
}

/* ---- Case study pages (case_study_template.py, inc/case-studies.php). */
.oh-empty-case-intro #oh-case-intro,
.oh-empty-case-challenge #oh-case-challenge,
.oh-empty-case-solution #oh-case-solution,
.oh-empty-case-results #oh-case-results,
.oh-empty-case-body #oh-case-body {
	display: none;
}
.oh-empty-case-challenge.oh-empty-case-solution.oh-empty-case-results #oh-case-steps {
	display: none;
}
/* Field text: live 20/300/28, paragraphs 20px apart. */
.oh-case-text {
	font-size: 20px;
	font-weight: 300;
	line-height: 28px;
	color: #40403e;
}
.oh-case-text p {
	margin: 0 0 20px;
}
.oh-case-text p:last-child {
	margin-bottom: 0;
}
/* Previous / Next: live 20/700/34, Next on the right. */
.oh-case-nav {
	display: flex;
	justify-content: space-between;
	font-size: 20px;
	font-weight: 700;
	line-height: 34px;
}
.oh-case-nav a {
	color: #40403e;
	text-decoration: none;
}
.oh-case-nav a:hover {
	color: #65a812;
}
.oh-case-nav__next {
	margin-left: auto;
}
.oh-case-nav__prev::before {
	content: "‹ ";
}
.oh-case-nav__next::after {
	content: " ›";
}
@media (max-width: 767px) {
	.oh-case-text {
		font-size: 16px;
		line-height: 22.4px;
	}
}
/* Case study sets in the post's own content (Instagrid's two "Advantage" sets, case_study_instagrid.py, 9 Nov), measured
   from live: black 32/700 heading, then rows of a 241px icon beside a green 26/800 heading and 20/300/28 text. */
body .oh-case-advantage {
	margin: 0 0 70px;
	font-family: Manrope, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 44.8px;
	text-transform: uppercase;
	color: #000;
}
body .oh-case-rows {
	display: flex;
	flex-direction: column;
	gap: 71px;
	margin: 0 0 141px;
	padding: 0 0 0 30px;
	list-style: none;
}
body .oh-case-rows:last-child {
	margin-bottom: 0;
}
body .oh-case-row {
	display: grid;
	grid-template-columns: 241px 1fr;
	gap: 15px;
	align-items: start;
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 300;
	line-height: 28px;
	color: #40403e;
}
body .oh-case-row::marker {
	content: none;
}
body .oh-case-row img {
	display: block;
	width: 241px;
	height: auto;
}
body .oh-case-row h3 {
	margin: 0 0 20px;
	font-family: "Integral CF", Montserrat, sans-serif;
	font-size: 26px;
	font-weight: 800;
	line-height: 28.6px;
	text-transform: uppercase;
	color: #65a812;
}
body .oh-case-row p {
	margin: 0 0 20px;
}
body .oh-case-row p:last-child {
	margin-bottom: 0;
}
@media (max-width: 1024px) {
	body .oh-case-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	body .oh-case-rows {
		padding-left: 0;
	}
}
@media (max-width: 767px) {
	body .oh-case-advantage {
		margin-bottom: 40px;
		font-size: 28px;
		line-height: 39.2px;
	}
	body .oh-case-rows {
		gap: 40px;
		margin-bottom: 79px;
	}
	body .oh-case-row {
		font-size: 16px;
		line-height: 22.4px;
	}
	body .oh-case-row h3 {
		font-size: 22px;
		line-height: 24.2px;
	}
}

/* ---- Home (page_home.py) ---- */
/* Hero video fills the hero behind the slogans (html widget: atomic elements have no video background). Muted and
   decorative; the black hero background shows if it can't play. */
#oh-home-hero .oh-hero-video {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
#oh-home-hero .oh-hero-video .elementor-widget-container,
#oh-home-hero .oh-hero-video video {
	width: 100%;
	height: 100%;
}
#oh-home-hero .oh-hero-video video {
	display: block;
	object-fit: cover;
}
#oh-home-hero .oh-hero-video::after {   /* live: 35% black over the video */
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}
/* Lighting Towers is the tall middle image across two rows (live). */
@media (min-width: 1025px) {
	#oh-home-lighting {
		grid-row: span 2;
	}
}
#oh-home-categories a:hover {
	color: #65a812;
}
/* Testimonial cards: live shadow. */
[id^="oh-home-quote-"] {
	box-shadow: 0 2px 15px #6f6f6f29;
}
/* Featured products: live scrolls the three cards sideways on mobile. */
@media (max-width: 767px) {
	#oh-home-products {
		grid-template-columns: repeat(3, 327px);
		overflow-x: auto;
	}
}

/* ---- Equipment for Hire (page_equipment.py) ---- */
/* Category and listing cells (Equipment for Hire, Solutions, Insights): live's light grey rules on the right and bottom, inset 3% from each end. */
#oh-equipment-grid > *,
[id^="oh-cards-"] > *,
.oh-cards-loop .e-loop-item,
.oh-body-cards > * {
	position: relative;
	border-right: 1px solid transparent;
	border-image: linear-gradient(to bottom, #fff 3%, #dedede 3%, #dedede 97%, #fff 97%) 1;
}
#oh-equipment-grid > *::after,
[id^="oh-cards-"] > *::after,
.oh-cards-loop .e-loop-item::after,
.oh-body-cards > *::after {
	content: "";
	position: absolute;
	left: 3%;
	right: 3%;
	bottom: 0;
	height: 1px;
	background: #dedede;
}
@media (max-width: 767px) {
	#oh-equipment-grid > *,
	[id^="oh-cards-"] > *,
	.oh-cards-loop .e-loop-item,
	.oh-body-cards > * {
		border-right: 0;
	}
}

/* ---- Generators Main (generators_main_template.py) ---- */
.oh-green {
	color: #65a812;
}
.oh-genmain-headline p {   /* Home intro paragraph 24/300/40.8 (30 Oct), was 25/700/42.5 */
	font-size: 24px;
	font-weight: 300;
	line-height: 40.8px;
	color: #40403e;
	margin: 0 0 30px;
}
.oh-genmain-panel-text,
.oh-genmain-panel-text p,
.oh-genmain-panel-text li {
	font-size: 18px;
	font-weight: 300;
	line-height: 30.6px;
	color: #000;
}
.oh-genmain-panel-text p {
	margin: 0 0 20px;
}
/* Size links: three columns of four (live), one column on mobile. */
.oh-genmain-sizes {
	columns: 3;
	column-gap: 40px;
	margin: 0;
	padding-left: 30px;
}
.oh-genmain-sizes li {   /* Home category links 20/600/34 (30 Oct), was 17/500/24 */
	font-size: 20px;
	font-weight: 600;
	line-height: 34px;
	margin-bottom: 20px;
	break-inside: avoid;
}
.oh-genmain-sizes a {
	color: #000;
	text-decoration: none;
}
.oh-genmain-sizes a:hover {
	color: #65a812;
}
[id^="oh-range-"] {
	scroll-margin-top: 140px;
}
@media (max-width: 767px) {
	.oh-genmain-sizes {
		columns: 1;
	}
	.oh-genmain-sizes li {
		font-size: 18px;
		line-height: 30.6px;
	}
	.oh-genmain-headline p {
		font-size: 18px;
		line-height: 30.6px;
	}
}
.oh-genmain-panel-links,
.oh-genmain-panel-text {
	width: 100%;
}
.oh-genmain-panel-text ul {
	margin: 0 0 20px;
}

/* ---- Testimonials (page_testimonials.py) ---- */
.oh-video {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
}

/* ---- Terms of Trade and Hire (page_terms.py): embedded PDF, live flipbook height ---- */
.oh-pdf {
	display: block;
	width: 100%;
	height: 900px;
	border: 1px solid #dedede;
}
@media (max-width: 767px) {
	.oh-pdf {
		height: 520px;
	}
}
#oh-terms-note a {
	color: inherit;
}

/* ---- About Us (page_about.py) ---- */
.oh-about-text,
.oh-about-text p,
.oh-about-text li {
	font-size: 20px;
	font-weight: 300;
	line-height: 28px;
	color: #40403e;
}
.oh-about-text p {
	margin: 0 0 20px;
}
.oh-about-text strong {
	font-weight: 700;
}
/* Lists: live green square bullets. */
.oh-about-list ul {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.oh-about-list li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 20px;
}
.oh-about-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 8px;
	height: 8px;
	background: #65a812;
}
.oh-about-list--two ul {
	columns: 2;
	column-gap: 40px;
}
.oh-about-list--two li {
	break-inside: avoid;
}
.oh-about-values strong {
	color: #65a812;
	text-decoration: underline;
}
@media (max-width: 767px) {
	.oh-about-text,
	.oh-about-text p,
	.oh-about-text li {
		font-size: 16px;
		line-height: 22.4px;
	}
	.oh-about-list--two ul {
		columns: 1;
	}
}

/* ---- Contact Us (page_contact.py) ---- */
.oh-contact-hours p {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 28px;
	color: #40403e;
}
.oh-contact-map {
	display: block;
	width: 100%;
	height: 350px;
	border: 0;
	margin: 20px 0 30px;
}
@media (max-width: 767px) {
	.oh-contact-hours p {
		font-size: 16px;
		line-height: 22.4px;
	}
}

/* ---- Accordions (atomic e-accordion) ----
   Elementor 4.3 prints no CSS for styles set on accordion items, so the item rules live here.
   Generator FAQ (generator pages and Generators Main): live 20px rows with a light rule under each. */
#oh-gen-faq details {
	padding: 20px 0;
	border-bottom: 1px solid #00000026;
}
/* Contact Us locations: live 1px #40403e rules above the first and under each site. */
#oh-contact-info .e-accordion-base {
	max-width: 650px;
	margin: 40px 0 0 10px;
	border-top: 1px solid #40403e;
}
#oh-contact-info details {
	padding: 20px 0 20px 20px;
	border-bottom: 1px solid #40403e;
}
#oh-contact-info summary {
	cursor: pointer;
}
@media (max-width: 767px) {
	#oh-contact-info .e-accordion-base {
		margin: 30px 0 0;
	}
	#oh-contact-info details {
		padding: 20px 0;
	}
}

/* ---- Search results (system_templates.py): the no-results message, only when WordPress found nothing ---- */
.oh-search-empty {
	display: none;
}
body.search-no-results .oh-search-empty {
	display: block;
}
.oh-search-empty p {
	font-size: 18px;
	font-weight: 300;
	line-height: 30.6px;
	color: #000;
}

/* ---- Enquiry form (enquiry_form.py), live look ---- */
#oh-contact-card {
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	scroll-margin-top: 160px;   /* "contact us" links land on this form, below the sticky header (5 Nov) */
}
.oh-enquiry-form .elementor-field-group {
	margin-bottom: 10px;
}
.oh-enquiry-form .elementor-field-textual,
.oh-enquiry-form select {
	font-family: Manrope, sans-serif;
	font-size: 20px;
	font-weight: 300;
	color: #40403e;
	background: #fff;
	border: 0;
	border-bottom: 1px solid #65a812;
	border-radius: 0;
	padding: 8px 6px 15px;
}
.oh-enquiry-form textarea {
	min-height: 200px;
}
.oh-enquiry-form .elementor-field-type-checkbox label {
	font-size: 18px;
	color: #65a812;
}
.oh-enquiry-form .elementor-button {
	margin-top: 30px;
	font-size: 23px;
	font-weight: 500;
	text-transform: none;
	padding: 11px 24px;
	background: #65a812;
	color: #fff;
	border-radius: 56px;
}
.oh-enquiry-form .elementor-button:hover {
	background: #000;
}
@media (max-width: 767px) {
	.oh-enquiry-form .elementor-field-textual,
	.oh-enquiry-form select {
		font-size: 16px;
	}
	.oh-enquiry-form .elementor-field-type-checkbox label {
		font-size: 14px;
	}
	.oh-enquiry-form .elementor-button {
		font-size: 20px;
	}
}
/* The kit's button and label rules (.elementor-kit-6 …) outrank the plain selectors above. */
.elementor-kit-6 .oh-enquiry-form .elementor-button {
	text-transform: none;
	font-size: 23px;
	font-weight: 500;
}
.elementor-kit-6 .oh-enquiry-form .elementor-field-type-checkbox label {
	color: #65a812;
	font-size: 18px;
	font-weight: 300;
}
@media (max-width: 767px) {
	.elementor-kit-6 .oh-enquiry-form .elementor-button {
		font-size: 20px;
	}
	.elementor-kit-6 .oh-enquiry-form .elementor-field-type-checkbox label {
		font-size: 14px;
	}
}

/* ---- Integral CF headings on small screens (D1) ----
   Integral CF is much wider than Montserrat: a single long word ("SPECIFICATIONS", "REVOLUTIONISING") can be wider than
   a phone. Below 1025px headings hyphenate (en-AU) rather than overflow. */
@media (max-width: 1024px) {
	h1, h2, h3, h4 {
		hyphens: auto;
		-webkit-hyphens: auto;
		overflow-wrap: break-word;
	}
}
/* Home featured product titles: three narrow cards on tablet. */
@media (min-width: 768px) and (max-width: 1024px) {
	#oh-home-products h3 {
		font-size: 20px;
		line-height: 24px;
	}
}

/* Product heroes (product_template.py): the banner fills the hero on products live shows that way (oh_hero_fit = cover). */
body.oh-hero-cover .oh-hero-banner {
	object-fit: cover;
}
/* Category pages whose live banner shows the whole image (oh_hero_fit = contain, e.g. Site Accommodation's caravan). */
body.oh-hero-contain .oh-hero-banner {
	object-fit: contain;
}

/* ---- Equipment page bodies (body_build.py): live Manrope 20/28 300, green links, H2 32 / H3 26 ---- */
.oh-body-text,
.oh-body-text p,
.oh-body-text li {
	font-family: Manrope, sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 28px;
	color: #40403e;
}
.oh-body-text p {
	margin: 0 0 20px;
}
.oh-body-text > :last-child,
.oh-body-text p:last-child {
	margin-bottom: 0;
}
.oh-body-text a {
	color: #65a812;
	text-decoration: underline;
}
.oh-body-text h2 {
	font-size: 32px;
	line-height: 44.8px;
	margin: 30px 0 20px;
}
.oh-body-text h2:first-child {
	margin-top: 0;
}
.oh-body-text h3 {
	font-size: 26px;
	line-height: 30px;
	margin: 25px 0 10px;
}
.oh-body-text h4 {
	font-size: 20px;
	line-height: 28px;
	margin: 20px 0 10px;
}
.oh-body-text ul {
	margin: 0 0 20px;
	padding-left: 24px;
}
.oh-body-text li {
	margin-bottom: 8px;
}
.oh-body-text li::marker {
	color: #65a812;
}
.oh-body-text table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
}
.oh-body-text th,
.oh-body-text td {
	border-bottom: 1px solid #dedede;
	padding: 10px 12px;
	text-align: left;
	background: none;
}
.oh-body-text--on-green,
.oh-body-text--on-green p,
.oh-body-text--on-green li,
.oh-body-text--on-green h2,
.oh-body-text--on-green h3,
.oh-body-text--on-green h4 {
	color: #fff;
}
.oh-body-text--on-green a {
	color: #fff;
	font-weight: 700;
}
.oh-body-text--on-green li::marker {
	color: #fff;
}
.oh-body-embed {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}
@media (max-width: 767px) {
	.oh-body-text,
	.oh-body-text p,
	.oh-body-text li {
		font-size: 16px;
		line-height: 22.4px;
	}
	.oh-body-text h2 {
		font-size: 26px;
		line-height: 34px;
	}
	.oh-body-text h3 {
		font-size: 22px;
		line-height: 28px;
	}
}
/* Live green banners ("green-banner-section"): larger white text. */
.oh-body-text--banner,
.oh-body-text--banner p {
	font-size: 26px;
	line-height: 44.2px;
}
@media (max-width: 767px) {
	.oh-body-text--banner,
	.oh-body-text--banner p {
		font-size: 20px;
		line-height: 30px;
	}
}
/* Product tiles in equipment bodies (live): a light grey rule between the columns and under each row of tiles.
   oh-body-tiles--N = N columns on desktop; 2 on tablet, 1 on mobile. */
.oh-body-tiles > * {
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}
@media (min-width: 1025px) {
	.oh-body-tiles--2 > :nth-child(2n),
	.oh-body-tiles--3 > :nth-child(3n),
	.oh-body-tiles--4 > :nth-child(4n) {
		border-right: 0;
	}
	.oh-body-tiles--2 > :nth-last-child(-n+2):nth-child(2n+1),
	.oh-body-tiles--2 > :nth-last-child(-n+2):nth-child(2n+1) ~ *,
	.oh-body-tiles--3 > :nth-last-child(-n+3):nth-child(3n+1),
	.oh-body-tiles--3 > :nth-last-child(-n+3):nth-child(3n+1) ~ *,
	.oh-body-tiles--4 > :nth-last-child(-n+4):nth-child(4n+1),
	.oh-body-tiles--4 > :nth-last-child(-n+4):nth-child(4n+1) ~ * {
		border-bottom: 0;   /* the last row */
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.oh-body-tiles > :nth-child(2n) {
		border-right: 0;
	}
	.oh-body-tiles > :nth-last-child(-n+2):nth-child(2n+1),
	.oh-body-tiles > :nth-last-child(-n+2):nth-child(2n+1) ~ * {
		border-bottom: 0;
	}
}
@media (max-width: 767px) {
	.oh-body-tiles > * {
		border-right: 0;
	}
	.oh-body-tiles > :last-child {
		border-bottom: 0;
	}
}
/* Equipment range images (oh-range-image, body_build.py, 30 Oct): one size on every category, as live Material Handling
   (Electric Forklift 620x350): a 350px-tall box, the photo contained and centred. Phones: natural height up to 320px. */
body .elementor .oh-range-image {
	width: 100%;
	height: 350px;
	object-fit: contain;
	margin: 0 auto;
}
@media (max-width: 767px) {
	body .elementor .oh-range-image {
		height: auto;
		max-height: 320px;
	}
}
/* The image beside a category's intro: live crops it to 418px tall (#page#5 .el-image, 11 equipment pages). */
@media (min-width: 961px) {
	body .elementor .oh-intro-image {
		width: 100%;
		height: 418px;
		object-fit: cover;
	}
}
/* Two-column lists (live per-page style, Material Handling "Why Hire..."): two columns, one below 700px. */
.oh-body-text--2col ul {
	column-count: 2;
	column-gap: 32px;
}
.oh-body-text--2col li {
	margin-bottom: 8px;
	break-inside: avoid;
}
@media (max-width: 700px) {
	.oh-body-text--2col ul {
		column-count: 1;
	}
}

/* ---- Capability Statement request (page_capability.py, capability_form.py), live look ---- */
#request-form {
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	scroll-margin-top: 120px;
}
.elementor-kit-6 .oh-capability-form .elementor-field-group {
	margin-bottom: 20px;
}
.elementor-kit-6 .oh-capability-form .elementor-field-textual {
	min-height: 52px;
}
.elementor-kit-6 .oh-capability-form .elementor-button {
	margin-top: 20px;
	border-radius: 4.5px;
	padding: 11px 24px;
}
@media (max-width: 767px) {
	.elementor-kit-6 .oh-capability-form .elementor-button {
		margin-top: 0;
		padding: 14px 0;
	}
}

/* ---- Link hover (decided 30 Oct): text links turn Opt Hire green on hover (kit link hover colour). On green sections
   (oh-surface-accent) green would vanish, so text links there turn white instead; buttons keep their own hover. ---- */
.elementor-kit-6 .oh-surface-accent a:not(.e-button-base):hover {
	color: #fff;
}

/* ---- Bold text (30 Oct): live draws every <strong>/<b> at Manrope 700. The theme reset uses "bolder", which is
   relative to the parent (300 -> 400, 700 -> 900), and the kit has no setting for it. ---- */
body strong,
body b {
	font-weight: 700;
}

/* ---- H1 (decided 30 Oct): every H1 matches the Home page's span text (Integral CF 38/800/41.8, the same on all
   screens). The kit's H1 setting covers legacy widgets; atomic headings carry their own saved size (".elementor .e-…"),
   so this rule outranks it to set them site-wide. Colour and spacing stay per element. The 404 page's large "404" is
   a display number, not a title, and keeps its size. ---- */
body.elementor-kit-6:not(.error404) h1,
body.elementor-kit-6:not(.error404) .elementor h1,
body.elementor-kit-6:not(.error404) .elementor h1.elementor-heading-title {
	font-size: 38px;
	font-weight: 800;
	line-height: 41.8px;
}

/* ---- Help banners on the equipment pages (body_build.help_banner, decided 30 Oct): the same look as Home's
   "Need help finding the right equipment?" banner: Manrope 26/300/28.6 black, links bold black (white on hover). ---- */
.oh-help-text,
.oh-help-text p {
	font-family: Manrope, sans-serif;
	font-size: 26px;
	font-weight: 300;
	line-height: 28.6px;
	color: #000;
	margin: 0;
}
.elementor-kit-6 .oh-help-text a {
	font-weight: 700;
	color: #000;
	text-decoration: none;
}
.elementor-kit-6 .oh-help-text a:hover {
	color: #fff;
}
/* Help banner text on the equipment pages is white (decided 30 Oct: "Got a question?" first, then "Need help finding the
   right equipment?" and the rest); the bold link turns black on hover. */
.oh-help-text,
.oh-help-text p,
.elementor-kit-6 .oh-help-text a {
	color: #fff;
}
.elementor-kit-6 .oh-help-text a:hover {
	color: #000;
}
/* Closing call to action on the equipment pages (body_build.is_cta, #oh-body-cta): green band, white text, and as live
   the white pill button sits at the right-hand edge, Manrope 23/500 with 68px sides (262px for "Contact Us"). */
#oh-body-cta :has(> a.e-button-base) {
	justify-content: flex-end;
}
body #oh-body-cta a.e-button-base {
	font-size: 23px;
	font-weight: 500;
	line-height: 33.35px;
	padding: 11px 68px;
}
@media (max-width: 1024px) {
	#oh-body-cta :has(> a.e-button-base) {
		justify-content: flex-start;
	}
}
@media (max-width: 767px) {
	body #oh-body-cta a.e-button-base {
		font-size: 19px;
		line-height: 27.55px;
		padding: 11px 0;
	}
}

/* Body text that opens with a heading starts flush, as live (the browser's default top margin pushed the heading 25px
   below the image beside it in the alternating rows, 30 Oct). */
.oh-body-text > :first-child {
	margin-top: 0;
}

/* ---- Main Menu: click-to-open subcategories (js/menu-toggle.js, 30 Oct; live's "+" accordion) ----
   Once the script runs, a category's subcategories stay closed until its "+" is clicked; the name still links to the
   page. Without JavaScript nothing is hidden. */
html.oh-menu-js .elementor-location-header .elementor-nav-menu--main .sub-menu > li.menu-item-has-children {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}
html.oh-menu-js .elementor-location-header .elementor-nav-menu--main .sub-menu > li.menu-item-has-children > .sub-menu {
	grid-column: 1 / -1;
	display: none !important;   /* SmartMenus opens nested lists on hover with an inline style */
}
html.oh-menu-js .elementor-location-header .elementor-nav-menu--main .sub-menu > li.oh-open > .sub-menu {
	display: block !important;
}
html.oh-menu-js .elementor-location-header .elementor-nav-menu--main .sub-menu .sub-arrow {
	display: none;
}
.elementor-location-header .oh-sub-toggle {
	width: 40px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #65a812;
	font: 400 24px/1 Manrope, sans-serif;
	cursor: pointer;
}
.elementor-location-header .oh-sub-toggle::before {
	content: "+";
}
.elementor-location-header li.oh-open > .oh-sub-toggle::before {
	content: "\2212";   /* minus */
}
.elementor-location-header .oh-sub-toggle:hover,
.elementor-location-header .oh-sub-toggle:focus {
	background: #f7f7f7;
	color: #000;
}
.elementor-location-header .oh-sub-toggle:focus-visible {
	outline: 2px solid #65a812;
	outline-offset: -2px;
}
/* Long names wrap inside the dropdown instead of running under its edge ("Container Generator and Fuel Cell"). */
html.oh-menu-js .elementor-location-header .elementor-nav-menu--main .sub-menu a {
	white-space: normal;
}
/* Phone/tablet burger menu: the same "+" (js/menu-toggle.js): the name opens its page, "+" opens the list. */
html.oh-menu-js .elementor-location-header nav.elementor-nav-menu--dropdown li.menu-item-has-children {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}
html.oh-menu-js .elementor-location-header nav.elementor-nav-menu--dropdown li.menu-item-has-children > .sub-menu {
	grid-column: 1 / -1;
	display: none !important;   /* SmartMenus expands lists with an inline style */
}
html.oh-menu-js .elementor-location-header nav.elementor-nav-menu--dropdown li.oh-open > .sub-menu {
	display: block !important;
}
html.oh-menu-js .elementor-location-header nav.elementor-nav-menu--dropdown .sub-arrow {
	display: none;
}
.elementor-location-header nav.elementor-nav-menu--dropdown .oh-sub-toggle {
	width: 56px;
	height: 56px;
	font-size: 30px;
}

/* ---- Phones (2 Nov) ---- */
@media (max-width: 767px) {
	/* H1 up to 32px on phones, scaled to the screen (8vw: 30px at 375) so the longest words ("INFRASTRUCTURE",
	   "REVOLUTIONISING") fit whole without hyphenation (desktop stays 38/800). */
	body.elementor-kit-6:not(.error404) h1,
	body.elementor-kit-6:not(.error404) .elementor h1,
	body.elementor-kit-6:not(.error404) .elementor h1.elementor-heading-title {
		font-size: min(32px, 8vw);
		line-height: 1.1;
	}
	/* Help banners ("Need help finding the right equipment?", the chat icon): icon, text and button centred. */
	body .oh-surface-accent .e-con:has(> img[src*="chat-icon"]) {
		align-items: center;
		text-align: center;
	}
	body .oh-surface-accent .e-con:has(> img[src*="chat-icon"]) .e-con {
		align-items: center;
	}
	body .oh-surface-accent .e-con:has(> img[src*="chat-icon"]) .oh-help-text,
	body .oh-surface-accent .e-con:has(> img[src*="chat-icon"]) .oh-help-text p {
		text-align: center;
	}
	/* Footer: logo, contact details, link columns, member logos and copyright centred. */
	body .elementor-location-footer,
	body .elementor-location-footer p,
	body .elementor-location-footer nav {
		text-align: center;
	}
	body .elementor-location-footer .e-con,
	body .elementor-location-footer nav {
		align-items: center;
		justify-content: center;
	}
	body .elementor-location-footer .e-con {
		justify-items: center;   /* the member logos sit in a one-column grid */
	}
	body .elementor-location-footer nav p {
		margin-inline-start: 0;
		padding-inline-start: 0;
	}
	/* Working with Us banner: no forced line break in the heading on phones. */
	body.page-id-2024 h2 br {
		display: none;
	}
}

/* ---- No hyphenation on phones (2 Nov) ----
   Words wrap whole; the earlier "hyphens: auto" (Integral CF headings below 1025px) is turned off at phone size. */
@media (max-width: 767px) {
	body,
	body h1, body h2, body h3, body h4, body h5, body h6,
	body p, body li, body span, body a {
		hyphens: manual;
		-webkit-hyphens: manual;
	}
}

/* ---- Phone/tablet burger menu scrolls (2 Nov) ----
   The open menu hangs under the sticky header; Elementor caps it at the full screen height, so its bottom (e.g.
   Trailers for Hire) sat below the screen and swipes scrolled the page behind it. Cap it at the space under the
   header, let it scroll on its own, and hold the page still while it is open. */
@media (max-width: 1024px) {
	.elementor-location-header .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown {
		max-height: calc(100vh - 56px) !important;
		max-height: calc(100dvh - 56px) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.admin-bar .elementor-location-header .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown {
		max-height: calc(100dvh - 102px) !important;   /* + the 46px admin bar */
	}
	/* Only <html> (it locks the viewport). Locking <body> too made it a scroll box of its own, so the sticky header,
	   the open menu and its close button jumped to the top of the page when opened partway down (fixed 2 Nov). */
	html:has(.elementor-location-header .elementor-menu-toggle.elementor-active) {
		overflow: hidden;
	}
	/* Touch: swipes on the page below a short menu don't move it; the menu itself still scrolls. */
	html:has(.elementor-location-header .elementor-menu-toggle.elementor-active) body {
		touch-action: none;
	}
	/* Page content under the open menu ignores touches (embedded maps scroll themselves otherwise). */
	html:has(.elementor-location-header .elementor-menu-toggle.elementor-active) [data-elementor-type]:not([data-elementor-type="header"]) {
		pointer-events: none;
	}
	html:has(.elementor-location-header .elementor-menu-toggle.elementor-active) .elementor-location-header nav.elementor-nav-menu--dropdown,
	html:has(.elementor-location-header .elementor-menu-toggle.elementor-active) .elementor-location-header .elementor-menu-toggle {
		touch-action: pan-y;
	}
}

/* ---- Search page (/search, page_search.py): live's underlined search box and grey message ---- */
.oh-search-page-box .e-search-input,
.oh-search-page-box input[type="search"] {
	border: 0 !important;
	border-bottom: 1px solid #e5e5e5 !important;
	border-radius: 0 !important;
}
.oh-search-page-note p {
	margin: 0;
	font-size: 16px;
	line-height: 27.2px;
	color: #40403e;
}
.oh-search-page-note a {
	color: #40403e;
	text-decoration: underline;
}
.oh-search-page-box .e-search-input,
.oh-search-page-box input[type="search"] {
	padding-inline-start: 40px !important;   /* clear of the magnifier icon */
}
@media (max-width: 767px) {
	/* Home hero: the right-hand slogan ("Its time to change / The way you hire / Get site smart") is hidden on phones
	   (2 Nov); its Contact Us button stays. */
	#oh-home-hero .e-con:has(> a.e-button-base) > .e-con:has(> span) {
		display: none;
	}
}
@media (max-width: 767px) {
	/* Primary and secondary buttons fill the available width on phones, on every page (2 Nov: Generators Main's "Get A
	   Quote" / "Call", the "Generators range for hire" buttons, and the rest). Header and footer keep their own. */
	body [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) a.e-button-base:is(.oh-primary-btn, .oh-secondary-btn) {
		width: 100% !important;
		max-width: 100%;
		align-self: stretch;
		box-sizing: border-box;
	}
}
@media (max-width: 767px) {
	/* A row of buttons (e.g. "Generators range for hire": Diesel, Solar, Petrol…) loses its side padding on phones, so
	   the buttons span the page width like the others. */
	body [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .e-con:has(> a.e-button-base + a.e-button-base) {
		padding-inline: 0 !important;
	}
}

/* ---- Diesel generator pages: enquiry form on the green call to action (generator_template DIESEL_TITLE, 2 Nov) ----
   Live: white boxed fields with bold dark placeholders, white checkbox text, a black pill Submit button. */
body .oh-gen-cta-form .oh-enquiry-form .elementor-field-textual,
body .oh-gen-cta-form .oh-enquiry-form select {
	background: #fff;
	border: 0;
	border-radius: 0;
	padding: 10px 10px;
	font-weight: 600;
	color: #000;
}
body .oh-gen-cta-form .oh-enquiry-form ::placeholder {
	color: #000;
	opacity: 1;
	font-weight: 600;
}
body .oh-gen-cta-form .oh-enquiry-form .elementor-field-group {
	margin-bottom: 15px;
}
.elementor-kit-6 .oh-gen-cta-form .oh-enquiry-form .elementor-field-type-checkbox label {
	color: #fff;
}
.elementor-kit-6 .oh-gen-cta-form .oh-enquiry-form .elementor-button {
	background: #000;
	color: #fff;
	text-transform: uppercase;
	font-size: 18px;
	max-width: 214px;
	margin-inline: auto;
}
.elementor-kit-6 .oh-gen-cta-form .oh-enquiry-form .elementor-button:hover {
	background: #fff;
	color: #000;
}
@media (max-width: 767px) {
	.elementor-kit-6 .oh-gen-cta-form .oh-enquiry-form .elementor-button {
		max-width: none;
	}
}

/* Confined Space pages on phones (2 Nov): the banner fills the hero instead of showing as a thin strip. */
@media (max-width: 767px) {
	body.oh-cat-confined-space-equipment .oh-hero-banner {
		object-fit: cover;
	}
}
/* Generators range tabs (generators_main_template.range_tabs, 6 Nov): Elementor's tab button drops its outline on focus,
   so keyboard users get a visible ring (the 16px phone padding of the bar is now in the element's own style). */
body #oh-genmain-range [role="tab"]:focus-visible {
	outline: 3px solid #65a812;
	outline-offset: 3px;
}

/* ---- Atomic enquiry form (enquiry_atomic.py, Contact Us, 4 Nov): the same look as the template form ---- */
.oh-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
body .oh-atomic-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
body .oh-atomic-form :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
	width: 100%;
	font-family: Manrope, sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 34px;
	color: #40403e;
	background: #fff;
	border: 0;
	border-bottom: 1px solid #65a812;
	border-radius: 0;
	padding: 8px 6px 15px;
}
body .oh-atomic-form textarea {
	min-height: 200px;
}
body .oh-atomic-form .e-form-checkbox-row {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
body .oh-atomic-form .e-form-checkbox-row label {
	font-size: 18px;
	font-weight: 300;
	color: #65a812;
}
body .oh-atomic-form :is(button, input[type="submit"]) {
	margin-top: 30px;
	width: 100%;
	font-family: Manrope, sans-serif;
	font-size: 23px;
	font-weight: 500;
	padding: 11px 24px;
	background: #65a812;
	color: #fff;
	border: 0;
	border-radius: 56px;
	cursor: pointer;
}
body .oh-atomic-form :is(button, input[type="submit"]):hover {
	background: #000;
}
@media (max-width: 767px) {
	body .oh-atomic-form :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
		font-size: 16px;
	}
	body .oh-atomic-form .e-form-checkbox-row label {
		font-size: 14px;
	}
	body .oh-atomic-form :is(button, input[type="submit"]) {
		font-size: 20px;
	}
}
body .oh-atomic-form input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: checkbox;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 1px solid #65a812;
	flex: 0 0 auto;
	accent-color: #65a812;
}
body .oh-atomic-form :is(button, input[type="submit"]) {
	text-transform: none;
}

/* ---- Bullet points (4 Nov): square bullets (green, as live) with black text in every content list ---- */
body :is(.oh-body-text, .oh-gen-text, .oh-gen-list, .oh-article, .oh-about-text, .oh-genmain-panel-text) ul {
	list-style-type: square;
}
body :is(.oh-body-text, .oh-gen-text, .oh-gen-list, .oh-article, .oh-about-text, .oh-genmain-panel-text) :is(ul, ol) > li {
	color: #000;
}
body :is(.oh-body-text, .oh-gen-text, .oh-gen-list, .oh-article, .oh-about-text, .oh-genmain-panel-text) :is(ul, ol) > li::marker {
	color: #65a812;
}
/* On green or dark bands the list stays white. */
body :is(.oh-body-text--on-green, .oh-gen-text--white) :is(ul, ol) > li,
body :is(.oh-body-text--on-green, .oh-gen-text--white) :is(ul, ol) > li::marker {
	color: #fff;
}

@media (max-width: 767px) {
	/* Home hero on phones (4 Nov): the coloured "Support / Sustainability / Innovation" slogan is hidden too; the
	   "Sustainable Hiring Experts" line stays. */
	#oh-home-hero .e-con:has(> span + span + span) {
		display: none;
	}
}
/* A wide banner used as a range photo (Change Rooms and Showers) fills the box instead of a thin strip (4 Nov). */
body .elementor .oh-range-image.oh-range-image--fill {
	object-fit: cover;
}
@media (max-width: 767px) {
	body .elementor .oh-range-image.oh-range-image--fill {
		height: 240px;
		max-height: none;
	}
}
/* Bullets: the Generators Main size lists (oh-genmain-sizes) too. */
body .oh-genmain-sizes {
	list-style-type: square;
}
body .oh-genmain-sizes > li {
	color: #000;
}
body .oh-genmain-sizes > li::marker {
	color: #65a812;
}
/* Generators Main call to action: its lead is a separate line, so the rich text's first paragraph is body text
   (live: white, normal), not the bold uppercase lead the generator product pages use. */
#oh-genmain-cta .oh-gen-cta-text p:first-child {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-transform: none;
	color: #fff;
}
/* Link lists (4 Nov): a list made only of links ("Industries We Support", "Other … for Hire") on the equipment pages, as
   live: black text, no underline, 24/45.6 (20/38 on phones), green square bullets, green on hover. Class added by body_build.py. */
body .oh-body-text ul.oh-link-list {
	padding-left: 30px;
}
body .oh-body-text ul.oh-link-list > li {
	font-size: 24px;
	line-height: 45.6px;
	margin-bottom: 0;
}
body .oh-body-text ul.oh-link-list > li > a {
	color: #000;
	text-decoration: none;
}
body .oh-body-text ul.oh-link-list > li > a:is(:hover, :focus-visible) {
	color: #65a812;
}
@media (max-width: 767px) {
	body .oh-body-text ul.oh-link-list > li {
		font-size: 20px;
		line-height: 38px;
	}
}
/* Contact Us form labels (4 Nov): visible, bold (global class oh-body-text-bold); space above each label groups it with
   its field. */
body .oh-atomic-form .oh-form-label {
	margin: 12px 0 -4px;
}
body .oh-atomic-form .oh-form-label:first-child {
	margin-top: 0;
}
/* Tables (5 Nov, requested): the first row is bold on every table on the site (specification tables, generator specs). */
body table > :first-child > tr:first-child > :is(th, td),
body table > :first-child > tr:first-child > :is(th, td) * {
	font-weight: 700;
}

/* ---- Enquire Now popup (popup_enquiry.py, #8230; 5 Nov "match a similar scale as live"): live's sizes ---- */
#elementor-popup-modal-8230 .dialog-message {
	max-height: calc(100vh - 60px);
}
body #oh-enquire-popup .oh-atomic-form {
	gap: 5px;
}
body #oh-enquire-popup .oh-form-label {   /* live shows placeholders only; the label stays for screen readers */
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
body #oh-enquire-popup .oh-atomic-form :is(input[type="text"], input[type="tel"], input[type="email"], select) {
	height: 52px;
	padding: 0 10px 15px;
}
body #oh-enquire-popup .oh-atomic-form textarea {
	height: 200px;
	min-height: 200px;
	padding: 7px 12px;
}
body #oh-enquire-popup .oh-atomic-form .e-form-checkbox-row {
	margin-top: 3px;
}
body #oh-enquire-popup .oh-atomic-form .e-form-checkbox-row label {
	font-size: 20px;
	line-height: 34px;
	color: #40403e;
}
body #oh-enquire-popup .oh-atomic-form :is(button, input[type="submit"]) {
	align-self: flex-start;
	width: 173px;
	height: 80px;
	margin-top: 4px;
	padding: 0 26px;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 4.5px;
}
@media (max-width: 767px) {
	#elementor-popup-modal-8230 .dialog-message {
		max-height: 80vh;
	}
	body #oh-enquire-popup .oh-atomic-form :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
		font-size: 16px;
		line-height: 27.2px;
	}
	body #oh-enquire-popup .oh-atomic-form .e-form-checkbox-row label {
		font-size: 16px;
		line-height: 27.2px;
	}
	body #oh-enquire-popup .oh-atomic-form :is(button, input[type="submit"]) {
		align-self: center;
		margin-left: auto;
		margin-right: auto;
		width: 256px;
		height: 60px;
	}
}

/* ---- Capability Statement atomic form (capability_form.py, 5 Nov): live look, placeholders only (labels kept for
   screen readers), 20px between fields, full-width Submit with 4.5px corners; the honeypot is off-screen ---- */
body .oh-capability-form {
	gap: 20px;
}
body .oh-capability-form .oh-form-label,
body .oh-form-honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
body .oh-form-honeypot {
	left: -9999px;
}
body .oh-capability-form :is(input[type="text"], input[type="tel"], input[type="email"]) {
	min-height: 52px;
}
body .oh-capability-form :is(button, input[type="submit"]) {
	margin-top: 20px;
	border-radius: 4.5px;
	padding: 11px 24px;
}
@media (max-width: 767px) {
	body .oh-capability-form :is(button, input[type="submit"]) {
		margin-top: 0;
		padding: 14px 0;
	}
}

/* ---- Generators "Get Power Sorted Today" atomic form (generators_main_template.py, 5 Nov): the same look as the Pro form
   it replaced, on the green band: white boxed fields 51px tall, 10px apart, black 18/600 text and placeholders, labels for
   screen readers only, white subscribe text, black 214x62 pill Submit centred (full width on phones) ---- */
body .oh-atomic-form.oh-gen-cta-form {
	gap: 10px;
	padding: 0;   /* the atomic form's own 20px inset; the Pro form ran edge to edge */
}
body .oh-atomic-form.oh-gen-cta-form .oh-form-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
body .oh-atomic-form.oh-gen-cta-form :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
	height: 51px;
	padding: 10px;
	background: #fff;
	border: 0;
	border-radius: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 31px;
	color: #000;
}
body .oh-atomic-form.oh-gen-cta-form ::placeholder {
	color: #000;
	opacity: 1;
	font-weight: 600;
}
body .oh-atomic-form.oh-gen-cta-form textarea {
	height: 204px;
	min-height: 204px;
}
body .oh-atomic-form.oh-gen-cta-form .e-form-checkbox-row label {
	color: #fff;
	font-size: 18px;
}
body .oh-atomic-form.oh-gen-cta-form :is(button, input[type="submit"]) {
	align-self: center;
	width: 214px;
	height: 62px;
	margin: 30px auto 0;
	padding: 11px 24px;
	background: #000;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	border-radius: 56px;
}
body .oh-atomic-form.oh-gen-cta-form :is(button, input[type="submit"]):hover {
	background: #fff;
	color: #000;
}
@media (max-width: 767px) {
	body .oh-atomic-form.oh-gen-cta-form :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
		font-size: 18px;
	}
	body .oh-atomic-form.oh-gen-cta-form :is(button, input[type="submit"]) {
		align-self: stretch;
		width: 100%;
	}
}

/* About Us lists (5 Nov, "fix the bullet points being duplicated" on mobile): they draw their own green square (::before),
   so the browser's square marker from the sitewide bullet rule (4 Nov) is switched off here; on phones it showed at the
   left edge as a second bullet. */
body .oh-about-list ul,
body .oh-about-list ul > li,
body ul.oh-about-list,
body ul.oh-about-list > li {
	list-style: none;
}

/* Generators "Areas We Serve" and "Projects We've Powered" (5 Nov, requested: "remove hover on areas we serve text and
   projects we've powered text"): their text stays white on hover. The green came from the oh-body-text-secondary global
   class's hover state and, on the project cards (links), the kit's link hover. Buttons keep their own hover. */
body :is(#oh-genmain-areas, #oh-gen-areas, #oh-gen-cases) :is(p, li):hover,
body #oh-gen-cases a:not(.e-button-base):hover :is(p, li) {
	color: #fff;   /* body text only; the green card titles keep their colour */
}
body :is(#oh-genmain-areas, #oh-gen-areas, #oh-gen-cases) .e-button-base :is(span, strong):hover {
	color: inherit;   /* button labels follow their button's hover colour */
}