/**
* Base layer.
*
* Site width is 1680px: the 1920 artboard less its 120px gutters. Section
* backgrounds stretch edge to edge, so every band is a full-width Elementor
* container whose direct child is a boxed 1680px container. The rules here
* are the safety net for that pattern and for anything Elementor renders
* outside a container (menus, forms, search).
*/
/* ------------------------------------------------------------------ Gutter
Below the measure every boxed container needs the page gutter, or the
header's search, logo and icons sit hard against the screen edge. Site
Settings carries the same values, but most of these containers were built
with an explicit padding of nought, which beats the kit default -- so the
rule is stated once here for every boxed inner instead of on each one.
The switch is 1760px, not a device breakpoint: that is the measure plus a
gutter either side, so the gutter appears at exactly the width where the
1680px box stops having room around it. Above it the box is 1680 and the
window provides the margin; below it the box is the window less the gutter. */
@media (min-width: 768px) and (max-width: 1759px) {
[data-elementor-type] .e-con-boxed > .e-con-inner {
padding-inline: var(--nk-gutter-tablet);
}
}
/* Below 768 the rule stops. Every boxed container in the build carries its
own 24px mobile padding from Elementor, so adding the gutter again here
inset the content twice and left the case study, careers and footer 48px
in from each edge instead of 24. */
/* ------------------------------------------------------- Anchor landings
The header is fixed, so an anchor jump -- a link to a decoration section,
a tab opened from the hash, a skip link -- lands the target underneath it
unless the page reserves the room first. WordPress sets this property to
the admin bar's height for signed-in users, so the bar is added back
rather than replaced. */
html {
scroll-padding-top: calc(var(--nk-header-h) + var(--wp-admin--admin-bar--height, 0px) + 24px);
}
/* --------------------------------------------------------------- Typography */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* A line break the artwork draws, but only at desktop: below 1025px the
heading finds its own breaks in the narrower column. A set to
display:none stops breaking the line, so no extra markup is needed. */
@media (max-width: 1024px) {
.nk-br-lg {
display: none;
}
}
/* Its opposite: a break the mobile artboard draws and the wider columns do
not want. */
@media (min-width: 768px) {
.nk-br-sm {
display: none;
}
}
/* Line breaking is left at the browser default on purpose. text-wrap: balance
and pretty both re-break lines to even them up or to avoid an orphan, which
is a nice default but moves the break away from where the artwork puts it --
the vision card heading, for one, balanced onto the wrong word. The artwork
is the reference here, so the greedy break stands. */
/* ------------------------------------------------------------ Accessibility */
/* Visible focus for keyboard users only, on the brand colour. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--nk-purple);
outline-offset: 3px;
border-radius: 2px;
}
.nk-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ------------------------------------------------------------------ Media */
img, svg, video {
max-width: 100%;
height: auto;
}
/* Inline SVG icons inherit text colour and align to the type baseline. */
.nk-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
color: currentColor;
}
.nk-icon svg {
display: block;
width: 100%;
height: 100%;
fill: currentColor;
}
/* ------------------------------------------------------------------- Links
A linked heading is a heading first. Elementor wraps the title's text in an
anchor, which then takes the kit's link weight and size instead of the
heading's -- so "Get in Touch" lost its demi weight the moment it became a
link. */
.elementor-widget-heading .elementor-heading-title a {
font: inherit;
color: inherit;
letter-spacing: inherit;
text-decoration: none;
}
/* --------------------------------------------------------- Vertical rhythm
Elementor's heading and text-editor widgets inherit the browser's default
block margins, which then fight the margins and gaps declared on the widget
itself. Spacing in this build is always set on the widget or on its parent
container's gap, so the inherited margins are cleared once, here. Space
between paragraphs inside a single text editor is deliberately kept. */
.elementor-widget-heading .elementor-heading-title {
margin-block: 0;
}
.elementor-widget-text-editor p {
margin-top: 0;
}
/* The text editor's Paragraph Spacing control writes its margin onto every
paragraph with the widget's own id in the selector, which outranked a
plain :last-child rule and left the spacing under the last paragraph too.
The extra classes put this rule ahead of it. */
.elementor .elementor-element.elementor-widget-text-editor p:last-child {
margin-bottom: 0;
}
/* Nested tabs: switching panels hides the old one before showing the new,
and Chrome's scroll anchoring, having anchored on something inside the
panel that just went, reset the page to the top on every tab click.
Anchoring is left on everywhere else. */
.elementor-widget-n-tabs .e-n-tabs {
overflow-anchor: none;
}
/* ---------------------------------------------------------- Cookie banner
CookieYes draws its buttons as plain