/**
 * Header.
 *
 * Structure (desktop, measured from the artwork):
 *
 *   .nk-header
 *     .nk-header__utility   132px, background #F8F8F8, hairline underneath
 *     .nk-header__nav        71px, background #F8F8F8
 *     .nk-usp                72px, background #8879F6
 *
 * Elementor owns layout and spacing; this file covers the parts its controls
 * cannot express: the search field, the enquiry badge, mega-menu panel
 * geometry, the mobile menu's panel shape and the sticky shrink.
 */

/* ---------------------------------------------------------------- Shell */

/* The header owns the page's top layer: the mega panel, the mobile sheet
   and the sticky bar all sit inside it. Elementor's z-index control is
   inherited by every child container, so the value lives here instead. */
.nk-header {
	z-index: 100;
}

/* ---------------------------------------------------------------- Search */

.nk-search {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 420px;
}

.nk-search__icon {
	width: 19px;
	height: 24px;
	color: var(--nk-ink);
	transition: color var(--nk-duration) var(--nk-ease);
}

/* The magnifier sits in ink and turns brand purple when it is pointed at or
   focused, like every other control in the bar. */
.nk-search:hover .nk-search__icon,
.nk-search:focus-within .nk-search__icon,
.nk-mobile-search a:hover .nk-icon,
.nk-mobile-search a:focus-visible .nk-icon {
	color: var(--nk-purple);
}

/* The menu toggle's colours come from the widget's own controls for normal,
   hover and active. It has no control for focus, and Elementor's default for
   that state is white, which loses the icon against the white bar -- so the
   focused toggle is named here, matching the hover it sits next to. */
.nk-header .e-n-menu-toggle:focus,
.nk-header .e-n-menu-toggle:focus-visible {
	--n-menu-toggle-icon-color: var(--nk-purple);
}

.nk-header .e-n-menu-toggle:focus .e-n-menu-toggle-icon,
.nk-header .e-n-menu-toggle:focus-visible .e-n-menu-toggle-icon {
	color: var(--nk-purple) !important;
}

/* Site Settings styles every form field from a stylesheet that loads after
   this one and at the same weight, so the field is scoped through the kit
   class on <body> to win on order. Without it the placeholder keeps the kit's
   18px on mobile and runs past the end of the field. */
body[class*="elementor-kit-"] .nk-search input[type="search"],
body[class*="elementor-kit-"] .nk-search input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--nk-font-body);
	font-weight: var(--nk-weight-book);
	font-size: var(--nk-size-body);
	line-height: var(--nk-leading-body);
	color: var(--nk-ink);
	box-shadow: none;
}

.nk-search input::placeholder {
	color: var(--nk-placeholder);
	opacity: 1;
}

.nk-search input:focus {
	outline: none;
	box-shadow: none;
}

/* Keep the focus ring on the whole field rather than the bare input. */
.nk-search:focus-within {
	outline: 2px solid var(--nk-purple);
	outline-offset: 6px;
	border-radius: 2px;
}

/* Chrome's clear button clashes with the borderless field. */
.nk-search input[type="search"]::-webkit-search-decoration,
.nk-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* ------------------------------------------------------------ Utility links */

/* Let the search form fill its column rather than shrink to the input. The
   widget's own Width and Size controls write flex-grow onto the wrong custom
   property for a widget inside a container, so the form kept its content
   width; stated here instead, on the widget and its inner wrapper. */
.nk-search-wrap > .elementor-widget-html,
.nk-search-wrap > .elementor-widget-html > .elementor-widget-container {
	width: 100%;
	flex: 1 1 auto;
}

/* ------------------------------------------------------------ Enquiry basket

   The basket is Elementor's Menu Cart widget, so the count is WooCommerce's
   own and the link is the cart URL rather than a hand-typed one. Its colours,
   icon and offset are set on the widget. These three rules cover what its
   controls do not reach: the button's own padding, an inline SVG that carries
   only a viewBox and so has no intrinsic width, and the counter bubble, which
   the widget fixes at 16px on a 10px type size against the artwork's 24/14.
   Elementor writes its own rules three classes deep, so these are scoped
   through the document wrapper to outrank them rather than by file order.

   The bubble's offset is the widget's own control, which sets top and right
   from a single value. The artwork draws -8 and -10; -8 is used for both,
   which puts the bubble 2px in from where the artboard has it. */

[data-elementor-type] .nk-cart .elementor-menu-cart__toggle .elementor-button-icon svg {
	width: var(--toggle-icon-size);
	min-width: var(--toggle-icon-size);
}

[data-elementor-type] .nk-cart .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] {
	width: 24px;
	min-width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 24px;
}

/* The enquiry panel lists products without prices, so its "Subtotal:"
   line has nothing to show and is left out. */
[data-elementor-type] .nk-cart .elementor-menu-cart__subtotal {
	display: none;
}

/* Each line of the enquiry panel: the picture spanning both rows, the name
   over the quantity beside it, and the remove cross centred on the line at
   the far end rather than hung off the picture's foot. */
[data-elementor-type] .nk-cart .elementor-menu-cart__main .elementor-menu-cart__product {
	grid-template-columns: 64px minmax(0, 1fr) 22px;
	grid-template-rows: auto auto;
	column-gap: 16px;
	row-gap: 4px;
	align-items: center;
	padding: 16px 0;
}

[data-elementor-type] .nk-cart .elementor-menu-cart__main .elementor-menu-cart__product-image {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
}

[data-elementor-type] .nk-cart .elementor-menu-cart__main .elementor-menu-cart__product-image img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
}

[data-elementor-type] .nk-cart .elementor-menu-cart__main .elementor-menu-cart__product-name,
[data-elementor-type] .nk-cart .elementor-menu-cart__main .elementor-menu-cart__product-price {
	grid-column: 2;
	padding: 0;
}

[data-elementor-type] .nk-cart .elementor-menu-cart__main .elementor-menu-cart__product-name {
	grid-row: 1;
	align-self: end;
	line-height: 1.3;
}

[data-elementor-type] .nk-cart .elementor-menu-cart__main .elementor-menu-cart__product-price {
	grid-row: 2;
	align-self: start;
	color: var(--nk-muted);
	font-size: 14px;
}

[data-elementor-type] .nk-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove {
	position: relative; /* The cross is drawn by pseudo-elements set against it. */
	inset: auto;
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	margin: 0;
}

/* "Book a call" is a linked container holding an icon and a label, each of
   which carries its own colour from Site Settings, so neither picks up a
   hover colour from the link on its own. Both are named here, at a weight
   that clears the widgets' own rules. */
[data-elementor-type] .nk-utility .nk-utility__item:hover .elementor-heading-title,
[data-elementor-type] .nk-utility .nk-utility__item:focus-visible .elementor-heading-title,
[data-elementor-type] .nk-utility .nk-utility__item:hover .elementor-icon,
[data-elementor-type] .nk-utility .nk-utility__item:focus-visible .elementor-icon {
	color: var(--nk-purple);
}

.nk-utility__item .elementor-heading-title,
.nk-utility__item .elementor-icon {
	transition: color var(--nk-duration) var(--nk-ease);
}

/* ------------------------------------------------------------------- Nav */

/* Item spacing (67px, measured) is set on the widget so it stays editable in
   Elementor.

   The row is allowed to wrap rather than forced onto one line. With Futura PT
   the nine items measure 894px, which plus eight 67px gaps is 1430 and sits
   inside the 1680 container comfortably. The fallback stack runs ~30% wider
   and would push past the viewport if wrapping were disabled, giving the whole
   site a horizontal scrollbar. Wrapping is the safer failure: it resolves to a
   single line on its own once the licensed font is installed. */
@media (min-width: 1025px) {
.elementor-widget-n-menu.nk-nav .e-n-menu-heading {
	justify-content: center;
	flex-wrap: wrap;
	row-gap: 8px;

	/* The nine labels come to 809px of text, and the artwork sets 67px between
	   them -- which is exactly the 1680px measure and not a pixel more. Below
	   the measure the spacing has to come in with the window or the row breaks
	   to two lines, so it is derived from the window instead of fixed: the 920
	   is the text plus the page gutter plus a few pixels of slack, and the
	   eight is the number of gaps. It settles back to the drawn 67px at 1456px
	   and above, and bottoms out at 12px just before the mobile bar takes
	   over. */
	--n-menu-title-space-between: clamp(12px, (100vw - 920px) / 8, 67px);
}
}

/* A label never breaks; the row wraps between items instead. Side padding is
   nought on the widget itself (Menu Items > Padding), which is what keeps the
   nine inside the 1680 measure. */
.nk-nav .e-n-menu-title {
	white-space: nowrap;
}

/* Current page: medium weight, per the artwork. The colour is the widget's
   own Active state; nav.js adds its e-current class to the item whose link
   matches the address, since the widget only marks same-page anchors. */
.nk-nav .e-n-menu-title.e-current {
	font-weight: var(--nk-weight-medium);
}

/* Hover and open states get the underline shown on the artwork, and the
   drawer reuses the same pseudo-element for its hairline further down. The
   widget draws its own divider on it as a left border, and gives that border
   a 2px width and a black fallback colour even with the divider switched
   off, which shows as a dark tick at the start of the line. The divider
   switch is not per breakpoint, so turning it on would rule between the
   desktop items too; the border is taken off here instead, through the
   document wrapper and the layout attribute to outrank the widget. */
[data-elementor-type] .nk-nav .e-n-menu[data-layout] .e-n-menu-title::after {
	border: 0;
}

.nk-nav .e-n-menu-title::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -6px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--nk-duration) var(--nk-ease);
}

.nk-nav .e-n-menu-title:hover::after,
.nk-nav .e-n-menu-title[aria-expanded="true"]::after {
	transform: scaleX(1);
}

/* Mega panel: full-bleed white sheet under the header.

   The widget positions the sheet against the nav and gives it the nav's own
   width, so it came out 1680px wide pinned to the left edge of the window
   rather than spanning it. Releasing the two positioned elements between the
   nav band and the sheet hands the sheet to the band, which is already full
   width and already relative -- then left and right of nought stretch it edge
   to edge with no 100vw guess and no scrollbar overhang. */
.nk-nav.elementor-widget-n-menu,
.nk-nav .e-n-menu {
	position: static;
}

/* The widget's own rule is four classes deep and reads the offset back out of
   two custom properties it sets at load, so both are answered: the properties
   are reset for the rule that uses them, and the declarations are restated at
   a weight that clears it. */
.nk-nav .e-n-menu-content {
	--stretch-left: 0px;
	--stretch-width: 100%;
}

[data-elementor-type] .nk-header__nav-band .nk-header__nav .nk-nav .e-n-menu-content {
	left: 0;
	right: 0;
	width: auto;
	max-width: none;
}

/* The panels fade in and out (Oct 2026 amends). Elementor swaps a panel
   between display:none and flex as the pointer moves; letting display
   transition discretely keeps the outgoing panel on screen while its
   opacity runs down, and @starting-style gives the incoming one an opacity
   to fade up from. Browsers without discrete transitions simply open and
   close the panels as before. */
@media (min-width: 1025px) {
	.nk-nav .e-n-menu-content > .e-con {
		transition:
			opacity 250ms var(--nk-ease, ease),
			display 250ms allow-discrete;
	}

	.nk-nav .e-n-menu-content > .e-con:not(.e-active) {
		opacity: 0;
	}

	.nk-nav .e-n-menu-content > .e-con.e-active {
		opacity: 1;
	}

	@starting-style {
		.nk-nav .e-n-menu-content > .e-con.e-active {
			opacity: 0;
		}
	}

	/* Elementor only drops the panel below the menu bar (top: 100%) while
	   it is open, so during the fade-out it jumped back up over the menu
	   line. Holding the position whether open or not keeps it in place. */
	.nk-nav .e-n-menu:not([data-layout="dropdown"]):not(.content-above) .e-n-menu-content {
		top: 100%;
	}
}

/* ---------------------------------------------------------------- Sticky */

/* Elementor Pro works out the pinned header's top offset (the admin bar's
   height) and its width once, when it pins, and keeps them through a
   resize: widening a window from phone width left the header 46px down
   (the phone admin bar) and 685px wide, so it wrapped taller and sat over
   the top of the page. The pinned header takes the admin bar's current
   height and the full width instead. Below 601px WordPress lets the admin
   bar scroll away, and Elementor's own handling is left alone there. */
@media (min-width: 601px) {
	.nk-header.elementor-sticky--active {
		top: var(--wp-admin--admin-bar--height, 0px) !important;
		width: 100% !important;
	}
}

/* Elementor Pro adds .elementor-sticky--effects once the header pins. */
.nk-header.elementor-sticky--effects {
	box-shadow: 0 2px 12px rgba(18, 31, 41, 0.08);
}

.nk-header.elementor-sticky--effects .nk-header__utility {
	min-height: 88px;
	transition: min-height var(--nk-duration) var(--nk-ease);
}

/* The promo bar is not worth the pinned height. */
.nk-header.elementor-sticky--effects .nk-usp {
	display: none;
}

/* ========================================================== Search panel

   The mobile bar's magnifier is a link to the search results page, so the
   search works with no JavaScript at all. With it, the same form the desktop
   header carries drops out of the bar instead. It is collapsed by height
   rather than display:none so it can animate, and hidden from assistive
   technology and from tabbing while it is shut. */

.nk-search-panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--nk-duration) var(--nk-ease);
}

.nk-search-panel > .e-con-inner,
.nk-search-panel .elementor-widget-html {
	width: 100%;
}

.nk-search-panel .nk-search {
	visibility: hidden;
	margin-block: 0;
	transition: visibility 0s linear var(--nk-duration);
}

body.nk-search-open .nk-search-panel {
	max-height: 100px;
	border-bottom: 1px solid var(--nk-hairline);
}

/* The 18px above and below the field belongs to the open state, so it is a
   margin on the field rather than padding on the container, which would
   still hold the band open by 36px while the panel is shut. */
body.nk-search-open .nk-search-panel .nk-search {
	visibility: visible;
	margin-block: 18px;
	transition-delay: 0s;
}

/* The magnifier turns to the brand colour while its panel is open, the way
   an open nav item does. At rest it is ink like the desktop bar's icons;
   the kit colours every link purple, so the link is named through the
   header to keep it ink, and it turns purple when pointed at or focused. */
.nk-header a.nk-mobile-search {
	color: var(--nk-ink);
}

.nk-header a.nk-mobile-search:hover,
.nk-header a.nk-mobile-search:focus-visible,
body.nk-search-open .nk-header a.nk-mobile-search {
	color: var(--nk-purple);
}

/* ============================================================== Mobile bar

   Below the mobile breakpoint the utility band is hidden and the nav band
   becomes the bar: the Mega Menu toggle, the logo and the search link in one
   row. The row's height, padding and alignment are set on the container in
   Elementor. The search link is the one hand-written element left in it,
   because it has to work as a plain link to the results page with no script
   and become a panel toggle with it. */

.nk-mobile-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nk-ink);
	cursor: pointer;
}

.nk-mobile-search svg,
.nk-mobile-search img {
	width: 18px;
	height: 18px;
}

/* ========================================================== Mobile menu

   Below 1025px the Mega Menu widget renders its own toggle and a dropdown
   panel (its breakpoint is set to Tablet: nine items at 20px do not fit on
   one row until about 1100px), so desktop, tablet and mobile share the same
   nine items and the same per-item icons. The widget's controls set the icons, row height,
   type and toggle; what follows is the panel's shape and the few states the
   widget has no control for: a 298px sheet from the left edge, the page held
   still behind it, the logo and close side by side at its head, the inset
   rule under each item, the bar beside the current page and the tinted card
   around an open section. The widget marks the open state with aria-expanded
   on its toggle and switches the panel from display:none, so both are read
   from there.

   The widget positions the panel with a selector four classes deep, so the
   panel rule is written through the document wrapper to outrank it. */

@media (max-width: 1024px) {
	[data-elementor-type] .nk-nav .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper {
		position: fixed;
		inset: 0 auto 0 0;
		width: 298px;
		max-width: calc(100% - 48px);
		height: 100dvh;
		/* Level with the bar: signed-in editors have the admin bar above it. */
		padding-top: var(--wp-admin--admin-bar--height, 0px);
		flex-direction: column;
		overflow-y: auto;
		background: var(--nk-white);
		box-shadow: 1px 0 0 var(--nk-line), 0 0 24px rgba(18, 31, 41, 0.12);
	}

	/* The drawer arrives from the edge rather than appearing. The widget
	   swaps the sheet between display:none and flex, and no transition can
	   follow that on its own, so the sheet is parked off the left here and
	   nav.js brings it back a frame after the widget has shown it. Both the
	   parking and the return sit behind classes the script adds, so with no
	   script the panel still opens where it always did. */
	[data-elementor-type] .nk-nav--anim .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper {
		transform: translateX(-100%);
		transition: transform 0.28s ease, max-height 0.3s;
	}

	[data-elementor-type] .nk-nav--anim.nk-nav--in .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper {
		transform: none;
	}


	/* Hold the page still behind the open panel. */
	body:has(.nk-nav .e-n-menu-toggle[aria-expanded="true"]) {
		overflow: hidden;
	}

	/* The section chevron sits at the far right of the row, as drawn. The
	   widget offers start, centre and end for the row, not space-between. */
	.nk-nav .e-n-menu-wrapper .e-n-menu-item > .e-n-menu-title {
		justify-content: space-between;
	}

	/* Hairline under each item, inset to the item's own padding. */
	.nk-nav .e-n-menu-wrapper .e-n-menu-item {
		position: relative;
	}

	.nk-nav .e-n-menu-wrapper .e-n-menu-item > .e-n-menu-title::after {
		content: "";
		position: absolute;
		inset: auto 24px 0;
		height: 1px;
		background: var(--nk-line);
		transform: none;
	}

	/* The widget keeps two copies of each item icon and collapses the one it is
	   not showing to no height -- the icon inside it then spills out of the row
	   as a small mark against the hairline. Each slot clips its own copy, which
	   leaves the shown one untouched at its exact size. */
	.nk-nav .e-n-menu-wrapper .e-n-menu-title .e-n-menu-icon > span {
		overflow: hidden;
	}

	/* Contact us closes the list, so it needs no rule beneath it. */
	.nk-nav .e-n-menu-wrapper .e-n-menu-item:last-child > .e-n-menu-title::after {
		content: none;
	}

	/* About Us opens like the other sections (Nov 2026 amends): the drawer
	   shows the six group companies as plain text links rather than the
	   desktop's logo cards. Both live in the item's panel; the cards stand
	   down here and the link list is shown only here (see Group links). */
	[data-elementor-type] .nk-nav .e-n-menu-wrapper .nk-mega--group {
		display: none;
	}

	/* Current page: an 8px brand bar on the panel's edge, the full row tall,
	   and the name in demi -- the artboard sets the selected row apart by
	   weight as well as colour. The bar stands down once that same row is
	   the open one -- the tinted card already marks the open section, and
	   the two grounds together read as a mistake -- while the weight stays,
	   since it is the only thing left saying which page you are on. */
	.nk-nav .e-n-menu-wrapper .e-n-menu-item:not(:has(> .e-n-menu-content.e-active)) > .e-n-menu-title.e-current::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 8px;
		background: var(--nk-purple);
	}

	/* The selected row's name is demi on the artboard. The widget prints the
	   link's weight with !important of its own, so this is the one place in
	   the file that has to answer in kind. */
	.nk-nav .e-n-menu-wrapper .e-n-menu-title.e-current .e-n-menu-title-container,
	.nk-nav .e-n-menu-wrapper .e-n-menu-title.e-current .e-n-menu-title-text {
		font-weight: var(--nk-weight-demi) !important;
	}

	/* An open section sits on a tinted card, 8px in from the panel's edges,
	   with its own rule between the title and its links. The widget marks the
	   open panel with e-active on its content. */
	.nk-nav .e-n-menu-wrapper .e-n-menu-item:has(> .e-n-menu-content.e-active) {
		margin-inline: 8px;
		margin-block: 8px;
		border-radius: var(--nk-radius-card);
		background: var(--nk-tint);
	}

	.nk-nav .e-n-menu-wrapper .e-n-menu-item:has(> .e-n-menu-content.e-active)::after {
		content: "";
		position: absolute;
		inset: auto 16px -8px;
		height: 1px;
		background: var(--nk-line);
	}

	.nk-nav .e-n-menu-wrapper .e-n-menu-item:has(> .e-n-menu-content.e-active) > .e-n-menu-title {
		padding-inline: 16px;
		/* The row carries the panel's white ground of its own, which painted a
		   white strip across the top of the tinted card. The card is the item,
		   so the row lets it show through. */
		background: transparent;
	}

	.nk-nav .e-n-menu-wrapper .e-n-menu-item:has(> .e-n-menu-content.e-active) > .e-n-menu-title::after {
		inset-inline: 16px;
	}

	/* Opening a section changes its ground, not its name: the widget's own
	   active state turns the row's icon purple, and the artboard keeps it in
	   ink like the label beside it. The current page keeps its purple. */
	.nk-nav .e-n-menu-wrapper .e-n-menu-item:has(> .e-n-menu-content.e-active) > .e-n-menu-title:not(.e-current) .e-n-menu-icon,
	.nk-nav .e-n-menu-wrapper .e-n-menu-item:has(> .e-n-menu-content.e-active) > .e-n-menu-title:not(.e-current) .e-n-menu-icon i,
	.nk-nav .e-n-menu-wrapper .e-n-menu-item:has(> .e-n-menu-content.e-active) > .e-n-menu-title:not(.e-current) .e-n-menu-icon svg {
		color: var(--nk-ink);
		fill: currentColor;
	}

	/* The section's content is the same container the desktop panel uses,
	   laid out by its own mobile controls as a list of rows. Two things the
	   controls cannot express: the widget's script gives each open panel the
	   rest of the viewport and scrolls it inside, where the artwork scrolls
	   the sheet as one; and the panel's white ground gives way to the card. */
	[data-elementor-type] .nk-nav .e-n-menu-wrapper .e-n-menu-content,
	[data-elementor-type] .nk-nav .e-n-menu-wrapper .e-n-menu-content > .e-con {
		height: auto !important;
		overflow-y: visible !important;
		background: transparent;
	}

	/* Rows: a bare 18px icon (the disc's ground is a desktop-only treatment
	   with no responsive control), the name at body size in ink rather than
	   the desktop's purple medium, and a chevron at the row's end. */
	[data-elementor-type] .nk-nav .e-n-menu-wrapper .nk-mega__disc {
		background: none;
	}

	/* Between 768 and 1024 base.css gives every boxed inner the 40px page
	   gutter. The drawer's panels are boxed containers too, but they are 298px
	   wide and carry their own inset, so the gutter comes off them here. */
	[data-elementor-type] .nk-nav .e-n-menu-wrapper .e-con-boxed > .e-con-inner {
		padding-inline: 0;
	}

	/* The panel is the 390px artboard at every width it appears, so its type
	   is the mobile scale in pixels rather than the tokens, which are still
	   the desktop scale between 768 and 1024. */
	[data-elementor-type] .nk-nav .e-n-menu-wrapper .nk-mega__col .elementor-heading-title,
	[data-elementor-type] .nk-nav .e-n-menu-wrapper .nk-mega__tech-copy .elementor-heading-title {
		font-size: 16px;
		font-weight: var(--nk-weight-medium);
		line-height: 1.25;
		color: var(--nk-ink);
	}

	[data-elementor-type] .nk-nav .e-n-menu-wrapper .nk-mega__tech-copy .elementor-widget-text-editor {
		font-size: 12px;
		line-height: 1.25;
		color: var(--nk-muted);
	}

	/* Contact block: hidden on every breakpoint where it was built, shown once
	   nav.js has placed it after the items. The panel is a column, so the
	   block fills what is left below a short list, as drawn. */
	[data-elementor-type] .nk-nav .e-n-menu-wrapper > .nk-menu-contact {
		display: flex;
		flex: 1 0 auto;
		margin-top: 0;
	}

	.nk-nav .e-n-menu-wrapper .nk-mega__tech::after,
	.nk-nav .e-n-menu-wrapper .nk-mega__toggle::before {
		content: "";
		flex: 0 0 auto;
		width: 10px;
		height: 16px;
		margin-inline-start: auto;
		background: var(--nk-purple);
		-webkit-mask: var(--nk-chevron-right) center / contain no-repeat;
		mask: var(--nk-chevron-right) center / contain no-repeat;
		transition: transform var(--nk-duration) var(--nk-ease);
	}

	/* A category's links (the desktop column's list) fold under its row and
	   open from the chevron, which nav.js turns into a button. The name stays
	   a link to the category page, as it is on desktop. */
	.nk-nav .e-n-menu-wrapper .nk-mega__toggle {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 0 0 auto;
		width: 44px;
		height: 32px;
		margin-inline-start: auto;
		margin-inline-end: -12px;
		padding: 0 12px 0 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.nk-nav .e-n-menu-wrapper .nk-mega__toggle[aria-expanded="true"]::before {
		transform: rotate(90deg);
	}

	[data-elementor-type] .nk-nav .e-n-menu-wrapper .nk-mega__col > .nk-mega__list {
		display: none;
		flex: 0 0 100%;
		width: 100%;
		padding: 0 0 8px 40px;
	}

	.nk-nav .e-n-menu-wrapper .nk-mega__col.is-open > .nk-mega__list {
		display: block;
	}

	[data-elementor-type] .nk-nav .e-n-menu-wrapper .nk-mega__list .elementor-icon-list-item {
		padding-block: 4px;
	}

	[data-elementor-type] .nk-nav .e-n-menu-wrapper .nk-mega__list .elementor-icon-list-text {
		font-size: 14px;
		line-height: 1.25;
		color: var(--nk-ink);
	}
}

/* The fold toggle exists only in the mobile panel. */
@media (min-width: 1025px) {
	.nk-mega__toggle {
		display: none;
	}
}

/* ============================================================== USP strip

   Three items across on one 36px row, centred, at a 12px label size on a
   phone (the artwork's 10px was raised in the Oct 2026 amends).

   Elementor writes its own --flex-direction and --min-height onto each
   container with two classes of specificity, and its stylesheet loads after
   this one, so every override below is scoped through the parent to win. */

/* Elementor's icon widget nests an inline-block .elementor-icon inside a
   block wrapper, and leaves the SVG inline inside that. Both sit on a text
   baseline, so each adds its descender gap below the glyph: the widget's
   box ends up 5px taller than the icon, and centring that box against the
   label lifts the glyph about 3px clear of the words it should sit level
   with. Blocking both drops the gap, which settles the icon onto the
   label's centre rather than nudging it down by an arbitrary amount. */
.nk-usp__item .elementor-widget-icon .elementor-icon,
.nk-usp__item .elementor-widget-icon svg {
	display: block;
}

@media (max-width: 1024px) {
	.nk-header .nk-usp {
		--min-height: 36px;
		min-height: 36px;
	}

	/* The three items sit together on the strip's centre line (Oct 2026
	   amends), rather than spread to its ends. The padding is trimmed to
	   12px so the row still fits a 360px phone at the 12px label size. */
	.nk-usp .nk-usp__inner {
		--flex-direction: row;
		--justify-content: center;
		--align-items: center;
		--gap: 0px;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-inline: 12px;
	}

	.nk-usp .nk-usp__inner > .e-con-inner {
		justify-content: center;
		gap: clamp(8px, 4vw, 20px);
	}

	.nk-usp .nk-usp__item {
		--width: auto;
		--flex-direction: row;
		--align-items: center;
		--gap: 8px;
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}

	/* The size comes from the USP Bar global typography (12px on a phone
	   since the Oct 2026 amends); the widget's own rule outranks this file. */
	.nk-usp__item .elementor-heading-title,
	.nk-usp__item p {
		line-height: 1.2;
		white-space: nowrap;
	}

	.nk-usp__item img,
	.nk-usp__item svg {
		width: 20px;
		height: 20px;
	}

	/* The search link is a fixed 44px hit area, not a flexible column. */
	.nk-header__nav > .e-con-inner > .elementor-widget-html,
	.nk-header__nav > .elementor-widget-html {
		flex: 0 0 auto;
		width: auto;
	}

	/* The bar also carries the enquiry panel's toggle beside the search
	   (a second Menu Cart widget, nk-cart--bar, shown below the desktop
	   breakpoints). With two icons on the right and one on the left the
	   row's spacing no longer centres the logo, so the logo is held on the
	   bar's centre line and the two icons sit together at the right. */
	.nk-header__nav {
		position: relative;
	}

	[data-elementor-type] .nk-header__nav .elementor-widget.nk-mobile-bar__logo {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		transform: translate(-50%, -50%);
	}

	.nk-header__nav > .e-con-inner > .elementor-widget-html,
	.nk-header__nav > .elementor-widget-html {
		margin-inline-start: auto;
	}

	/* The basket sits hard against the search's 44px hit area rather than
	   a whole row gap away, so the two read as a pair. */
	[data-elementor-type] .nk-header__nav .elementor-widget.nk-cart--bar {
		margin-inline-start: calc(-1 * var(--column-gap, 0px));
	}

	/* The widget's hover colour has no focus counterpart; a keyboard focus
	   turns the envelope purple too, like the search beside it. */
	[data-elementor-type] .nk-cart--bar .elementor-menu-cart__toggle_button:focus-visible .elementor-button-icon {
		color: var(--nk-purple);
		fill: var(--nk-purple);
	}

	[data-elementor-type] .nk-cart--bar .elementor-menu-cart__toggle_button:focus-visible .elementor-button-icon svg {
		fill: var(--nk-purple);
	}

	/* The count sits on the envelope's corner at the bar's scale, 16px
	   rather than the utility band's 24px, so it does not hide the icon. */
	[data-elementor-type] .nk-cart--bar .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] {
		width: 16px;
		min-width: 16px;
		height: 16px;
		font-size: 10px;
		line-height: 16px;
	}

}

/* The slide is decoration, so it is dropped where the reader has asked for
   less movement; the panel then appears as the widget opens it. */
@media (prefers-reduced-motion: reduce) and (max-width: 1024px) {
	[data-elementor-type] .nk-nav--anim .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper {
		transition: none;
	}
}

/* ------------------------------------------- Group panel column rules

   The rules between the group's companies were each card's own right
   border, which put them hard against one column and a whole gutter away
   from the next. A rule between two columns belongs in the middle of what
   separates them, so it is drawn as a pseudo-element half a gutter beyond
   the card instead.

   The columns and their gutters are both a share of the row so they scale
   together. With six companies (Lendlock Group joined in the Nov 2026
   amends) each card is 11.5% and each gutter 6.2%, set on the containers
   in Elementor. The row is made a query container so the rule can be
   offset by half a gutter in the same units the gutter is set in: a plain
   percentage there would resolve against the card, not the row. */
.nk-mega__group-row {
	container-type: inline-size;
}

.nk-mega__group-row > .nk-mega__gcard {
	position: relative;
}

.nk-mega__group-row > .nk-mega__gcard:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: -3.1cqw;
	width: 1px;
	background: var(--nk-line);
}

/* ------------------------------------------------------- Group links

   The drawer's About Us section: the six group companies as text links
   (Nov 2026 amends), one 44px row each, the name level with the section
   title above it and a chevron at the row's end like the Decoration rows.
   The list is a separate widget in the same panel as the desktop cards and
   only appears in the drawer. */
@media (min-width: 1025px) {
	[data-elementor-type] .nk-nav .nk-mega__brands {
		display: none;
	}
}

@media (max-width: 1024px) {
	[data-elementor-type] .nk-nav .e-n-menu-wrapper .nk-mega__brands {
		padding: 0 16px 8px;
	}

	[data-elementor-type] .nk-nav .nk-mega__brands .elementor-icon-list-item {
		padding: 0;
	}

	[data-elementor-type] .nk-nav .nk-mega__brands .elementor-icon-list-item > a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 44px;
		padding-inline-start: 40px;
	}

	[data-elementor-type] .nk-nav .nk-mega__brands .elementor-icon-list-item > a::after {
		content: "";
		flex: 0 0 auto;
		width: 10px;
		height: 16px;
		margin-inline-start: auto;
		background: var(--nk-purple);
		-webkit-mask: var(--nk-chevron-right) center / contain no-repeat;
		mask: var(--nk-chevron-right) center / contain no-repeat;
	}

	[data-elementor-type] .nk-nav .nk-mega__brands .elementor-icon-list-text {
		padding: 0;
		font-size: 16px;
		font-weight: var(--nk-weight-medium);
		line-height: 1.25;
		color: var(--nk-ink);
		transition: color var(--nk-duration) var(--nk-ease);
	}

	[data-elementor-type] .nk-nav .nk-mega__brands a:is(:hover, :focus-visible) .elementor-icon-list-text {
		color: var(--nk-purple);
	}
}


/* ------------------------------------------------------- Drawer head

   The panel's head used to be the bar's own logo and close button, pinned
   into place the moment the panel opened -- which is exactly what made them
   jump: they arrived instantly and the panel a beat behind. The head is now
   a copy that lives inside the panel and travels with it, so nothing moves.
   nav.js builds it from the logo already in the bar, and its close button
   presses the widget's own toggle rather than repeating its logic. */
.nk-nav .nk-nav__head {
	/* The head belongs to the drawer, and the drawer only exists below the
	   desktop breakpoint -- above it the panel is a mega-menu and the bar's
	   own logo is the one on screen, so the copy stays out of the flow. The
	   rules below sit outside the query on purpose: the close button has to
	   out-specify Hello Elementor's global button styling at every width. */
	/* The head is the bar's own 64px row, so the logo (the bar's 90px) and
	   the close cross sit level with the logo and toggle behind them. The
	   cross is 13.2px, centred 23.5px + 6.6px in from the sheet's right edge
	   as the artboard draws it; its 44px hit area overhangs that. */
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 64px;
	padding: 0 8.1px 0 24px;
	background: var(--nk-white);
}

.nk-nav .nk-nav__head-logo img {
	display: block;
	width: 90px;
	height: auto;
}

.nk-nav .nk-nav__close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--nk-ink);
	cursor: pointer;
	transition: color var(--nk-duration) var(--nk-ease);
}

.nk-nav .nk-nav__close:hover,
.nk-nav .nk-nav__close:focus-visible {
	background: transparent;
	color: var(--nk-purple);
}

.nk-nav .nk-nav__close svg {
	width: 22px; /* A 13.2px cross, as drawn. */
	height: 22px;
}

@media (max-width: 1024px) {
	.nk-nav .nk-nav__head {
		display: flex;
	}
}

/* ------------------------------------------------------ Enquiry panel

   The Menu Cart panel's close cross is Elementor's own (two grey bars
   drawn with ::before and ::after, 25px across), which read as a different
   control from the menu drawer's and the Refine drawer's. It takes the
   same cross here: a 22px ink cross whose centre sits 30px in from the
   panel's edge and 32px down (under the admin bar when it shows), in a
   44px target, turning purple when pointed at or focused. The panel's
   contents start below the same 64px head row the menu drawer has. */
[data-elementor-type] .nk-cart .elementor-menu-cart__main {
	padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 64px);
}

[data-elementor-type] .nk-cart .elementor-menu-cart__close-button {
	position: absolute;
	inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 10px);
	inset-inline-end: 8px;
	width: 44px;
	height: 44px;
	margin: 0;
	background: var(--nk-ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
	cursor: pointer;
	transition: background-color var(--nk-duration) var(--nk-ease);
}

[data-elementor-type] .nk-cart .elementor-menu-cart__close-button::before,
[data-elementor-type] .nk-cart .elementor-menu-cart__close-button::after {
	content: none;
}

[data-elementor-type] .nk-cart .elementor-menu-cart__close-button:hover,
[data-elementor-type] .nk-cart .elementor-menu-cart__close-button:focus-visible {
	background: var(--nk-purple);
}

/* The category icons sit in the middle of their discs. The icon widget sets
   its icon in a line box, which hung the glyph 2.7px above the centre of
   the 64px disc (Nov 2026 amends). */
.nk-mega__disc .elementor-icon-wrapper,
.nk-mega__disc .elementor-icon {
	display: flex;
	line-height: 0;
}