.elementor-kit-5{--e-global-color-primary:#16212E;--e-global-color-secondary:#8A909C;--e-global-color-text:#5A6270;--e-global-color-accent:#FFA60A;--e-global-color-surface:#F6F7F8;--e-global-color-border:#E5E8EB;--e-global-color-darksurf:#0F1E2C;--e-global-color-onaccent:#FFFFFF;--e-global-color-chip:#EEF0F3;--e-global-color-tag:#CDE3F4;--e-global-color-footerbg:#0E2E52;--e-global-color-footerbot:#041730;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:-0.2px;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.35em;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.5em;--e-global-typography-headingm-font-family:"Montserrat";--e-global-typography-headingm-font-size:24px;--e-global-typography-headingm-font-weight:700;--e-global-typography-headingm-line-height:1.25em;--e-global-typography-metadata-font-family:"Roboto";--e-global-typography-metadata-font-size:12px;--e-global-typography-metadata-font-weight:500;--e-global-typography-metadata-line-height:1.4em;--e-global-typography-metadata-letter-spacing:0.2px;background-color:#FFFFFF;color:var( --e-global-color-text );font-family:"Roboto", sans-serif;font-size:1rem;font-weight:400;line-height:1.7em;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Montserrat", sans-serif;font-size:0.9375rem;font-weight:600;line-height:1.4em;letter-spacing:0.2px;color:#FFFFFF;border-style:none;border-radius:3px 3px 3px 3px;padding:15px 26px 15px 26px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;border-radius:4px 4px 4px 4px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 p{margin-block-end:1.25rem;}.elementor-kit-5 a{color:var( --e-global-color-accent );font-family:"Roboto", sans-serif;font-weight:500;}.elementor-kit-5 a:hover{color:var( --e-global-color-primary );font-family:"Roboto", sans-serif;font-weight:500;}.elementor-kit-5 h1{color:var( --e-global-color-primary );font-family:"Montserrat", sans-serif;font-size:clamp(2.25rem, 1.6rem + 2.8vw, 3.375rem);font-weight:700;line-height:1.12em;}.elementor-kit-5 h2{color:var( --e-global-color-primary );font-family:"Montserrat", sans-serif;font-size:clamp(1.5rem, 1.28rem + 0.95vw, 2rem);font-weight:700;line-height:1.25em;}.elementor-kit-5 h3{color:var( --e-global-color-primary );font-family:"Montserrat", sans-serif;font-size:clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);font-weight:600;line-height:1.3em;}.elementor-kit-5 h4{color:var( --e-global-color-primary );font-family:"Montserrat", sans-serif;font-size:clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);font-weight:600;line-height:1.35em;}.elementor-kit-5 h5{color:var( --e-global-color-primary );font-family:"Montserrat", sans-serif;font-size:clamp(1rem, 0.97rem + 0.15vw, 1.125rem);font-weight:600;line-height:1.4em;}.elementor-kit-5 h6{color:var( --e-global-color-primary );font-family:"Montserrat", sans-serif;font-size:1rem;font-weight:600;line-height:1.4em;}.elementor-kit-5 img{border-radius:3px 3px 3px 3px;opacity:1;transition-duration:0.3s;}.elementor-kit-5 img:hover{border-radius:3px 3px 3px 3px;opacity:1;}.elementor-kit-5 label{color:var( --e-global-color-primary );font-family:"Roboto", sans-serif;font-size:0.9375rem;font-weight:500;}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-family:"Roboto", sans-serif;font-size:1rem;font-weight:400;color:var( --e-global-color-text );background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E0E0E0;border-radius:4px 4px 4px 4px;transition:200ms;padding:12px 14px 12px 14px;}.elementor-kit-5 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea:focus,.elementor-kit-5 .elementor-field-textual:focus{border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-accent );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:24px;--container-default-padding-bottom:0px;--container-default-padding-left:24px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;--container-default-padding-top:0px;--container-default-padding-right:20px;--container-default-padding-bottom:0px;--container-default-padding-left:20px;}}@media(max-width:767px){.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{padding:12px 22px 12px 22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:0px;--container-default-padding-right:16px;--container-default-padding-bottom:0px;--container-default-padding-left:16px;}}
/* Start custom CSS *//* footer:start */
/* Footer navigation: the reference marks every link with a small amber
   chevron. Elementor's menu widget has no control for a trailing icon, and
   its own pointer styles own the link's ::after and hide it on every item
   that is not the current page. The mark therefore sits on the list item,
   which nothing else styles - two classes deep, no !important, scoped to the
   two footer link columns. A glyph would depend on the loaded font subset, so
   it is drawn from two borders. */
.footer-navigation .elementor-nav-menu li,
.footer-services .elementor-nav-menu li {
	align-items: center;
	display: flex;
}

.footer-navigation .elementor-nav-menu li::after,
.footer-services .elementor-nav-menu li::after {
	border-right: 1.5px solid var( --e-global-color-accent );
	border-top: 1.5px solid var( --e-global-color-accent );
	content: "";
	display: inline-block;
	height: 5px;
	margin-left: 9px;
	transform: rotate(45deg);
	width: 5px;
}
/* footer:end */





/* single-project:start */
/* Elementor renders no widget at all when a dynamic tag has nothing to say,
   so a fact the project does not record is recognised by its missing value and
   taken out of the row entirely - no label with a blank line under it. */
.project-fact:not( :has( .project-fact-value ) ) {
	display: none;
}

/* However many facts remain, they share the row evenly. */
.project-facts .project-fact {
	flex: 1 1 0;
	min-width: 0;
}

/* The facts are separated by hairlines, as the reference draws them. */
.project-facts .project-fact + .project-fact {
	border-left: 1px solid var( --e-global-color-border );
	padding-left: 24px;
}

@media ( max-width: 767px ) {
	.project-facts .project-fact + .project-fact {
		border-left: 0;
		padding-left: 0;
	}
}

/* A project with no summary leaves no gap in the hero. */
.project-hero .project-hero-lead:not( :has( .elementor-widget-container * ) ) {
	display: none;
}

/* The gallery composition: a four-column grid whose first image takes two
   columns and two rows, exactly as the reference arranges it. */
.project-gallery-images .gallery {
	display: grid;
	gap: 14px;
	grid-auto-rows: 210px;
	grid-template-columns: repeat( 4, 1fr );
	margin: 0;
}

@media ( max-width: 1024px ) {
	.project-gallery-images .gallery {
		grid-auto-rows: 180px;
	}
}

.project-gallery-images .elementor-image-gallery .gallery .gallery-item {
	float: none;
	margin: 0;
	max-width: 100%;
	padding: 0;
	width: 100%;
}

.project-gallery-images .gallery .gallery-icon {
	height: 100%;
	margin: 0;
}

.project-gallery-images .gallery .gallery-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.project-gallery-images .gallery .gallery-item img,
.project-gallery-images .gallery .gallery-item a {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

.project-gallery-images .gallery .gallery-item img {
	border-radius: 4px;
	object-fit: cover;
}

@media ( max-width: 1024px ) {
	.project-gallery-images .gallery {
		grid-template-columns: repeat( 2, 1fr );
	}

	.project-gallery-images .gallery .gallery-item:first-child {
		grid-column: span 2;
		grid-row: span 1;
	}
}

@media ( max-width: 767px ) {
	.project-gallery-images .gallery {
		grid-template-columns: 1fr;
	}

	.project-gallery-images .gallery .gallery-item:first-child {
		grid-column: span 1;
	}
}

/* The related card keeps its photograph to one shape whatever the original is. */
.related-project-card .elementor-widget-theme-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

/* A project without a description hides the section that would introduce it. */
.project-introduction:not( :has( .elementor-widget-theme-post-content ) ) {
	display: none;
}
/* single-project:end */

/* products:start */
/* Loop cards: Elementor renders every loop item as a grid cell that stretches
   to the tallest card in its row, but the card inside keeps its own height, so
   one three-line category name leaves its neighbours short. A container has a
   minimum height control and no height control, so this is the only way to say
   it. One class deep, no !important, scoped to the catalogue grids. */
.products-grid .e-loop-item > .e-con {
	height: 100%;
}

/* Product category cards. The caption takes whatever height the tallest card in
   the row leaves over, so a one-line name and a three-line name still end on
   the same edge. */
.product-category-card__caption {
	flex: 1 1 auto;
}

/* The picture band keeps the proportion the reference draws it at, fifteen by
   seven, whether the grid is showing five columns or two. A container has no
   ratio control, so the ratio lives here and the photograph fills the band. */
.product-category-card__media {
	aspect-ratio: 15 / 7;
}

.product-category-card__image {
	position: absolute;
	inset: 0;
}

.product-category-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A category with no photograph keeps the band anyway, empty and in the Kit's
   surface tone. The reference puts a picture on every card and nothing else, so
   an empty band is the honest stand-in: the cards stay level, the row keeps its
   rhythm, and nothing is drawn that the data cannot support. */
.product-category-card__media:not(:has( img ))::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}

/* The arrow leans into the card on hover, the way the rest of the site's links
   behave. Border and arrow only; no movement under the pointer. */
.product-category-card .elementor-icon {
	transition: transform 0.2s ease;
}

.product-category-card:hover {
	border-color: var( --e-global-color-accent );
}

.product-category-card:hover .elementor-icon {
	transform: translateX( 3px );
}

/* The whole card is one link, so the ring belongs round the card. */
.product-category-card:focus-visible {
	outline: 2px solid var( --e-global-color-accent );
	outline-offset: 3px;
}

/* The hero headline runs over two lines, the second in the Kit's accent, as the
   reference sets it. The colour lives here rather than inside the heading's
   markup so an editor can restyle it without touching the text. */
.manufacturers-hero__title-accent {
	color: var( --e-global-color-accent );
}
/* products:end */

/* single-post:start */
/* The hero category, drawn as the reference-s outlined chip. */
.post-category-chip .elementor-heading-title {
	border: 1px solid var( --e-global-color-accent );
	border-radius: 3px;
	display: inline-block;
	padding: 5px 10px;
}

/* The article body: 15px on a 1.75 rhythm, headings tighter than the Kit-s
   page headings, and every element the editor can produce accounted for. */
.post-article .elementor-widget-theme-post-content {
	color: var( --e-global-color-text );
	font-size: 15px;
	line-height: 1.75;
}

.post-article .elementor-widget-theme-post-content p {
	margin: 0 0 1.25rem;
}

.post-article .elementor-widget-theme-post-content h2 {
	color: var( --e-global-color-primary );
	font-size: 24px;
	line-height: 1.3;
	margin: 2rem 0 0.75rem;
}

.post-article .elementor-widget-theme-post-content h3 {
	color: var( --e-global-color-primary );
	font-size: 19px;
	line-height: 1.35;
	margin: 1.6rem 0 0.6rem;
}

.post-article .elementor-widget-theme-post-content h4 {
	color: var( --e-global-color-primary );
	font-size: 17px;
	line-height: 1.4;
	margin: 1.4rem 0 0.5rem;
}

.post-article .elementor-widget-theme-post-content ul,
.post-article .elementor-widget-theme-post-content ol {
	margin: 0 0 1.25rem 1.1rem;
}

.post-article .elementor-widget-theme-post-content li {
	margin-bottom: 0.4rem;
}

.post-article .elementor-widget-theme-post-content blockquote {
	border-left: 2px solid var( --e-global-color-accent );
	color: var( --e-global-color-primary );
	font-size: 16px;
	font-style: normal;
	margin: 1.6rem 0;
	padding: 2px 0 2px 18px;
}

.post-article .elementor-widget-theme-post-content img {
	border-radius: 4px;
	height: auto;
	max-width: 100%;
}

.post-article .elementor-widget-theme-post-content figure {
	margin: 1.6rem 0;
}

.post-article .elementor-widget-theme-post-content figcaption,
.post-article .elementor-widget-theme-post-content .wp-caption-text {
	color: var( --e-global-color-secondary );
	font-size: 13px;
	line-height: 1.5;
	margin-top: 8px;
}

.post-article .elementor-widget-theme-post-content a {
	color: var( --e-global-color-accent );
	text-decoration: none;
}

.post-article .elementor-widget-theme-post-content a:hover {
	text-decoration: underline;
}

.post-article .elementor-widget-theme-post-content hr {
	border: 0;
	border-top: 1px solid var( --e-global-color-border );
	margin: 2rem 0;
}

/* Share controls: pale chips with a dark mark and a hairline edge. */
.post-share-buttons .elementor-share-btn {
	background-color: #FFFFFF;
	border: 1px solid var( --e-global-color-border );
	border-radius: 4px;
}

.post-share-buttons .elementor-share-btn:hover {
	border-color: var( --e-global-color-accent );
}

.post-share-buttons .elementor-share-btn__icon {
	color: var( --e-global-color-primary );
}

/* The sidebar follows the reader down the article on desktop. */
@media ( min-width: 1025px ) {
	.post-sidebar {
		position: sticky;
		top: 24px;
	}
}
/* single-post:end */

/* product-category-archive:start */
/* The filter lists, the result count and the sort control are rendered by
   WordPress, so their look lives here rather than in widget controls. English
   class names, one namespace, no generated ids. */
.archive-sidebar .elementor-widget:first-child {
	border-bottom: 1px solid var( --e-global-color-border );
}

.archive-sidebar .elementor-widget {
	padding: 14px 16px;
}

/* Filter groups: a phone gets them closed, a tablet and up gets them open,
   which is how the design draws them. The disclosure is native HTML, so it
   works from the keyboard and needs no script. */
.archive-filter-group__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 0;
	color: var( --e-global-color-primary );
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.archive-filter-group__body {
	padding-top: 6px;
}

.archive-filter-group__summary {
	list-style: none;
}

.archive-filter-group__summary::-webkit-details-marker {
	display: none;
}

/* A chevron that turns when the group opens. */
.archive-filter-group__summary::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var( --e-global-color-secondary );
	border-bottom: 1.5px solid var( --e-global-color-secondary );
	transform: rotate( 45deg ) translateY( -2px );
	transition: transform 0.2s ease;
}

.archive-filter-group[open] > .archive-filter-group__summary::after {
	transform: rotate( -135deg ) translateY( -2px );
}

.archive-filter-group + .archive-filter-group {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var( --e-global-color-border );
}

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

.archive-filter-list__item a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	color: var( --e-global-color-text );
	font-size: 13px;
	line-height: 1.45;
	text-decoration: none;
}

.archive-filter-list__item a:hover,
.archive-filter-list__item a:focus {
	color: var( --e-global-color-primary );
}

.archive-filter-list__item.is-current a {
	color: var( --e-global-color-primary );
	font-weight: 600;
}

.archive-filter-list__count {
	color: var( --e-global-color-text );
	font-size: 12px;
}

.archive-filter-note,
.archive-filter-clear {
	margin: 8px 0 0;
	font-size: 12px;
	color: var( --e-global-color-text );
}

.archive-filter-clear a {
	color: var( --e-global-color-accent );
	font-weight: 600;
	text-decoration: none;
}

/* The toolbar: a count on the left, a real form on the right. */
.archive-result-count {
	margin: 0;
	color: var( --e-global-color-text );
	font-size: 13px;
}

.archive-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.archive-sort__label {
	color: var( --e-global-color-text );
	font-size: 13px;
}

.archive-sort__select {
	padding: 7px 10px;
	border: 1px solid var( --e-global-color-border );
	border-radius: 3px;
	background-color: #fff;
	color: var( --e-global-color-primary );
	font-family: Roboto, sans-serif;
	font-size: 13px;
}

/* The kit styles every <button> with the accent colour at a specificity of
   one class and one element, so the toolbar has to be named as well. */
.archive-toolbar .archive-sort__submit {
	padding: 7px 14px;
	border: 1px solid var( --e-global-color-border );
	border-radius: 3px;
	background-color: var( --e-global-color-surface );
	color: var( --e-global-color-primary );
	font-family: Roboto, sans-serif;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.archive-toolbar .archive-sort__submit:hover,
.archive-toolbar .archive-sort__submit:focus {
	border-color: var( --e-global-color-accent );
	background-color: #fff;
}

/* Cards: the grid stretches every cell to the tallest card in its row, so the
   card inside has to fill it, and the link sits at the foot of the body. */
.product-grid .e-loop-item > .e-con {
	height: 100%;
}

.product-card__body {
	flex: 1 1 auto;
}

/* Catalogue summaries differ in length; three lines keeps the rows even and
   the rest of the text is on the catalogue entry page. */
.product-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card__link {
	margin-top: auto;
}

.product-card .elementor-icon,
.product-card__link {
	transition: transform 0.2s ease;
}

.product-card:hover {
	border-color: var( --e-global-color-accent );
}

.product-card:hover .product-card__link {
	transform: translateX( 3px );
}

/* Keyboard focus: the theme paints no ring on these, and a card is a link. */
.product-card:focus-visible,
.archive-filter-list__item a:focus-visible,
.archive-breadcrumbs__item a:focus-visible,
.archive-filter-clear a:focus-visible,
.archive-filter-group__summary:focus-visible,
.archive-toolbar .archive-sort__submit:focus-visible,
.archive-sort__select:focus-visible {
	outline: 2px solid var( --e-global-color-primary );
	outline-offset: 2px;
}

/* The breadcrumb trail. */
.archive-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.archive-breadcrumbs__item {
	color: var( --e-global-color-text );
	font-size: 12.5px;
}

.archive-breadcrumbs__item + .archive-breadcrumbs__item::before {
	content: "/";
	margin-right: 6px;
	color: var( --e-global-color-border );
}

.archive-breadcrumbs__item a {
	color: var( --e-global-color-text );
	text-decoration: none;
}

.archive-breadcrumbs__item a:hover,
.archive-breadcrumbs__item a:focus {
	color: var( --e-global-color-primary );
}

.archive-breadcrumbs__item.is-current {
	color: var( --e-global-color-primary );
}
/* product-category-archive:end */





/* service-lighting-solutions:start */
/* A background that comes from a dynamic tag gets no size, position or repeat
   from Elementor - those controls are tied to a picture chosen in the layout -
   so a hero would otherwise tile at the pictures own size. The values match the
   controls the hero still carries, and every service hero uses this class. */
.service-hero {
	background-size: cover;
	background-position: 50% 45%;
	background-repeat: no-repeat;
}

@media (max-width: 1024px) {
	.service-hero {
		background-position: 50% 30%;
	}
}

@media (max-width: 767px) {
	.service-hero {
		background-position: 60% 40%;
	}
}

/* The second line of the hero headline, in the accent, as the design sets it.
   The colour lives here so an editor can restyle it without touching markup. */
.service-hero__title-accent {
	color: var( --e-global-color-accent );
}

/* The hairline the design draws between the four points under the hero. It is
   decoration, so it is painted outside the flow and it goes away as soon as the
   points stop sitting in one row. */
.service-highlights .service-highlight + .service-highlight::before {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: -16px;
	width: 1px;
	background-color: var( --e-global-color-border );
}

@media (max-width: 1024px) {
	.service-highlights .service-highlight + .service-highlight::before {
		display: none;
	}
}

/* The scope cards: the icon badge sits over the photograph, the way the design
   draws it, and every card in the row ends on the same edge. */
.service-scope__grid > .e-con {
	height: auto;
}

.service-scope-card__icon {
	margin-top: -22px;
	position: relative;
	z-index: 1;
}

.service-scope-card__icon .elementor-icon {
	background-color: #fff;
	border-color: var( --e-global-color-border );
}

.service-scope-card:hover {
	border-color: var( --e-global-color-accent );
}

/* Elementor writes no width for a widget set to a custom width in this flex
   row, so the arrow measures zero and its icon leans into the step beside it. */
.service-process__steps > .service-process__arrow {
	flex: 0 0 18px;
	width: 18px;
	text-align: center;
}

/* The numbered step markers. */
.service-process-step__number .elementor-heading-title {
	display: block;
	width: 46px;
	padding: 10px 0;
	border-radius: 999px;
	background-color: var( --e-global-color-primary );
}

/* The application list in the closing band, with the rule the design shows. */
.consultation-cta__area .elementor-heading-title {
	padding: 8px 0 8px 22px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.14 );
	position: relative;
}

.consultation-cta__area .elementor-heading-title::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 1px;
	background-color: var( --e-global-color-accent );
}

/* Focus states the theme does not paint on these. */
.service-scope-link a:focus-visible,
.service-hero a:focus-visible {
	outline: 2px solid var( --e-global-color-accent );
	outline-offset: 2px;
}
/* service-lighting-solutions:end */

/* service-lighting-calculation:start */
/* The hero picture of this service is framed a little lower than the one on the
   lighting solutions page, which is where the shared .service-hero rule sets its
   focal point. Both are single class rules, and this block is written after that
   one, so this is the one that applies here. */
.calculation-hero {
	background-position: 50% 55%;
}

@media (max-width: 767px) {
	.calculation-hero {
		background-position: 55% 55%;
	}
}

/* The card of lighting levels overlaps the photograph above it, the way the
   design draws it, and sits flush with the column on a phone. */
.service-deliverables__card {
	margin-top: -36px;
	position: relative;
	z-index: 1;
	box-shadow: 0 10px 30px rgba( 15, 30, 44, 0.08 );
}

@media (max-width: 767px) {
	.service-deliverables__card {
		margin-top: -24px;
	}
}

/* The levels themselves: a real table, so the place and its level stay paired
   for a screen reader. */
.lighting-norms-table {
	width: 100%;
	border-collapse: collapse;
}

.lighting-norms-table caption {
	caption-side: bottom;
	padding-top: 10px;
	/* The Kit Secondary measures 3.2:1 at this size, so the caption takes the
	   body colour instead. */
	color: var( --e-global-color-text );
	font-size: 11.5px;
	line-height: 1.5;
	text-align: left;
}

.lighting-norms-table th,
.lighting-norms-table td {
	padding: 7px 0;
	border-bottom: 1px solid var( --e-global-color-border );
	text-align: left;
	font-weight: 400;
	vertical-align: top;
}

.lighting-norms-table thead th {
	color: var( --e-global-color-secondary );
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lighting-norms-table td {
	width: 74px;
	text-align: right;
	font-weight: 600;
	color: var( --e-global-color-primary );
	white-space: nowrap;
}

.lighting-norms-table tbody tr:last-child th,
.lighting-norms-table tbody tr:last-child td {
	border-bottom: 0;
}

/* The questions card. The nested accordion exposes no control for the title
   type or for which side its chevron sits on, so both are set here. */
/* The questions card. This version of the accordion has no controls for its
   type, the side its chevron sits on, its padding or its frame, but it exposes
   a variable for each. The Kit CSS loads before the widget stylesheet, so a
   single class ties and loses: the extra .elementor is what makes these win. */
.elementor .service-faq__accordion {
	--n-accordion-title-icon-order: 2;
	--n-accordion-title-normal-color: var( --e-global-color-primary );
	--n-accordion-title-hover-color: var( --e-global-color-primary );
	--n-accordion-title-active-color: var( --e-global-color-primary );
	--n-accordion-icon-normal-color: var( --e-global-color-secondary );
	--n-accordion-icon-hover-color: var( --e-global-color-accent );
	--n-accordion-icon-size: 13px;
	--n-accordion-padding: 13px 0;
	--n-accordion-border-width: 0px;
}

/* The question fills the row, so the chevron sits at its end, and the size is
   set here rather than through the variable the widget normally carries it in:
   Elementor 4.1.5 writes that variable as "1,75rem" for an h3 title, which is
   not a valid length, so the browser falls back to 16px. Reported upstream
   behaviour, not something to fix in the plugin. */
.elementor .service-faq__accordion .e-n-accordion-item-title-header {
	flex-grow: 1;
}

.elementor .service-faq__accordion .e-n-accordion-item-title-text {
	font-family: "Montserrat", sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
}

.service-faq__accordion .e-con-inner {
	padding-right: 26px;
}

/* Dividers between the questions, and a focus ring, which the theme paints on
   nothing. */
.service-faq__accordion .e-n-accordion-item {
	border-bottom: 1px solid var( --e-global-color-border );
}

.service-faq__accordion .e-n-accordion-item:last-child {
	border-bottom: 0;
}

.service-faq__accordion summary:focus-visible,
.service-deliverables a:focus-visible,
.calculation-overview a:focus-visible {
	outline: 2px solid var( --e-global-color-accent );
	outline-offset: 2px;
}
/* service-lighting-calculation:end */

/* service-luminaire-design:start */
/* This hero picture is a wide strip of ceiling, so it is framed higher than the
   other service heroes, whose focal point the shared .service-hero rule sets.
   Both are single class rules and this block is written last, so this one wins. */
.luminaire-hero {
	background-position: 50% 42%;
}

@media (max-width: 767px) {
	.luminaire-hero {
		background-position: 60% 45%;
	}
}

/* The cards beside the copy and the pictures of the inspiration row lift a
   little under the pointer, the way the rest of the site behaves. */
.service-feature,
.design-inspiration__item .elementor-widget-image {
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.service-feature:hover {
	border-color: var( --e-global-color-accent );
}

.design-inspiration__item:hover .elementor-widget-image {
	transform: translateY( -3px );
}

/* Focus rings, which the theme paints on neither of these. */
.design-inspiration__link a:focus-visible,
.design-selection a:focus-visible,
.service-hero a:focus-visible {
	outline: 2px solid var( --e-global-color-accent );
	outline-offset: 2px;
}
/* service-luminaire-design:end */

/* service-facade-lighting:start */
/* This hero picture is framed on the lit ground floor rather than the sky, and
   the shared .service-hero rule cannot know that. Both are single class rules
   and this block is written last, so this one applies here. */
.facade-hero {
	background-position: 50% 62%;
}

@media (max-width: 767px) {
	.facade-hero {
		background-position: 60% 62%;
	}
}

/* The pictures of the realised projects lift a little under the pointer. */
.facade-projects__item .elementor-widget-image {
	transition: transform 0.2s ease;
}

.facade-projects__item:hover .elementor-widget-image {
	transform: translateY( -3px );
}

/* Focus rings, which the theme paints on neither of these. */
.facade-projects__link a:focus-visible,
.facade-lighting-overview a:focus-visible,
.service-hero a:focus-visible {
	outline: 2px solid var( --e-global-color-accent );
	outline-offset: 2px;
}
/* service-facade-lighting:end */

/* single-manufacturer:start */
/* The trail above the brand name. */
.manufacturer-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Roboto", sans-serif;
	font-size: 12.5px;
	color: var( --e-global-color-secondary );
}

.manufacturer-breadcrumbs__item + .manufacturer-breadcrumbs__item::before {
	/* The character itself rather than a CSS escape: WordPress unslashes post
	   meta, so a backslash never survives the trip into the Kit. */
	content: "›";
	padding-right: 8px;
	color: var( --e-global-color-secondary );
}

.manufacturer-breadcrumbs__item a {
	color: var( --e-global-color-primary );
	font-weight: 500;
	text-decoration: none;
}

.manufacturer-breadcrumbs__item a:hover,
.manufacturer-breadcrumbs__item a:focus-visible {
	color: var( --e-global-color-accent );
}

/* The Kit secondary would put this at 3.2:1 on the white veil, so the crumb
   for the page you are on uses the body ink instead. */
.manufacturer-breadcrumbs__item.is-current {
	color: var( --e-global-color-text );
}

/* Elementor writes one set of gradient stops for every width, and a veil cut
   for a 620px column leaves the copy on the photograph once the column is the
   whole page. The .elementor-kit-5 carries four classes because Elementor writes the
   overlay against three of its own and the Kit is loaded first. */
@media (max-width: 1024px) {
	.elementor .elementor-element.manufacturer-hero.e-con::before {
		background-image: linear-gradient( 90deg, #ffffff 58%, rgba( 255, 255, 255, 0 ) 92% );
	}
}

@media (max-width: 767px) {
	.elementor .elementor-element.manufacturer-hero.e-con::before {
		background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.97 ) 0%, rgba( 255, 255, 255, 0.92 ) 100% );
	}
}

/* The brand facts. Elementor leaves a widget out when its dynamic tag is empty,
   so a brand without an address simply has one row fewer. */
.manufacturer-meta__value a {
	color: var( --e-global-color-text );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.manufacturer-meta__value a:hover {
	color: var( --e-global-color-accent );
}

/* The second half of a section heading, in the lighter weight the reference
   sets. The weight lives here rather than in the markup so an editor can
   restyle it without touching the words. */
.manufacturer-heading__soft {
	font-weight: 400;
}

/* The round plate behind each reason. The framed icon view paints its own
   border and padding from the widget stylesheet, which the Kit block is loaded
   before, so these rules carry the extra class they need to win. */
.elementor .manufacturer-advantage__icon .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	background-color: rgba( 255, 166, 10, 0.14 );
}

/* Every entry in the catalogue is filed under at least one real category, but
   an entry that is not would leave the section with a heading and nothing under
   it, so the section stands or falls with its cards. */
.manufacturer-categories-section:not( :has( .manufacturer-categories__card ) ) {
	display: none;
}

/* The category cards: as many as the brand is filed under, each one a quarter of
   the row, so a brand in two categories gets the same card as a brand in four. */
.manufacturer-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.manufacturer-categories__card {
	position: relative;
	flex: 0 1 calc( ( 100% - 48px ) / 4 );
	min-width: 236px;
	min-height: 134px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: 4px;
	background-color: var( --e-global-color-darksurf );
	text-decoration: none;
}

.manufacturer-categories__media {
	position: absolute;
	inset: 0;
}

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

.manufacturer-categories__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 8, 19, 31, 0.15 ) 0%, rgba( 8, 19, 31, 0.86 ) 100% );
}

.manufacturer-categories__label {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	font-family: "Roboto", sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff;
}

.manufacturer-categories__arrow {
	color: var( --e-global-color-accent );
}

.manufacturer-categories__card:hover .manufacturer-categories__label,
.manufacturer-categories__card:focus-visible .manufacturer-categories__label {
	color: var( --e-global-color-accent );
}

@media (max-width: 1024px) {
	.manufacturer-categories__card {
		flex-basis: calc( ( 100% - 16px ) / 2 );
	}
}

@media (max-width: 767px) {
	.manufacturer-categories__card {
		flex-basis: 100%;
		min-width: 0;
	}
}

/* The related brand card. The logos are the brands own files, in every
   proportion there is, so the plate holds them to one baseline and the name row
   sits on the bottom edge whatever the logo does. */
.related-brand {
	height: 100%;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.related-brand:hover,
.related-brand:focus-visible {
	border-color: var( --e-global-color-accent );
	transform: translateY( -2px );
}

.related-brand__arrow {
	transition: transform 0.2s ease;
}

.related-brand:hover .related-brand__arrow {
	transform: translateX( 4px );
}

/* Focus rings, which the theme paints on none of these. */
.manufacturer-categories__card:focus-visible,
.related-brand:focus-visible,
.manufacturer-breadcrumbs__item a:focus-visible,
.manufacturer-meta__value a:focus-visible,
.manufacturer-related__link a:focus-visible,
.manufacturer-categories__link a:focus-visible {
	outline: 2px solid var( --e-global-color-accent );
	outline-offset: 2px;
}
/* single-manufacturer:end *//* End custom CSS */