.elementor .e-72e2118-496a066 {
	flex: 1;
}



body {
	--ds-global-heading-font-weight-400: 800;
	--ds-global-overline-font-weight-400: 600;

	--ds-global-heading-letter-spacing-400: -0.02em;
	--ds-global-heading-letter-spacing-600: -0.04em;
	--ds-global-overline-letter-spacing-400: -0.02em;
	--ds-global-body-text-letter-spacing-400: -0.03em;
	--ds-global-button-text-letter-spacing-400: -0.02em;

	/* the grain as pure black pixels on a transparent background,
	   laid straight over the colour with no blend mode */
	--ds-global-grainy-texture-black-url: url(../imgs/grainy-texture-transparent.png);
	/* the same grain at higher opacity for the darker colours: black darkens a colour by a
	   share of its own value, so the regular grain barely shows on them.
	   1.7x for the mid-tone colours 2 and 5, 2.5x for colours 1, 3 and 4 */
	--ds-global-grainy-texture-black-medium-url: url(../imgs/grainy-texture-transparent-medium.png);
	--ds-global-grainy-texture-black-strong-url: url(../imgs/grainy-texture-transparent-strong.png);
	/* the tile is 96px of image, drawn over 96 CSS px. Phones scale it down a little,
	   see the query below */
	--ds-global-grainy-texture-size: auto;

	--ds-global-bg-gd-1: linear-gradient(
		240deg, 
		var(--color-1-bg-gd-s1) 0%,
		var(--color-1-bg-gd-s2) 50%,
		var(--color-1-bg-gd-s3) 80%,
		var(--color-1-bg-gd-s4) 100%
	);

	--ds-global-bg-gd-1-t2: linear-gradient(
		240deg, 
		var(--color-1-bg-gd-s1-t2) 0%,
		var(--color-1-bg-gd-s2-t2) 50%,
		var(--color-1-bg-gd-s3-t2) 80%,
		var(--color-1-bg-gd-s4-t2) 100%
	);

	--ds-global-bg-gd-2: linear-gradient(
		240deg, 
		var(--color-2-bg-gd-s1) 0%,
		var(--color-2-bg-gd-s2) 50%,
		var(--color-2-bg-gd-s3) 80%,
		var(--color-2-bg-gd-s4) 100%
	);

	--ds-global-bg-gd-3: linear-gradient(
		240deg,
		var(--color-3-bg-gd-s1) 0%,
		var(--color-3-bg-gd-s2) 50%,
		var(--color-3-bg-gd-s3) 80%,
		var(--color-3-bg-gd-s4) 100%
	);

	--ds-global-bg-gd-4: linear-gradient(
		240deg,
		var(--color-4-bg-gd-s1) 0%,
		var(--color-4-bg-gd-s2) 50%,
		var(--color-4-bg-gd-s3) 80%,
		var(--color-4-bg-gd-s4) 100%
	);

	--ds-global-bg-gd-4-t2: linear-gradient(
		240deg,
		var(--color-4-bg-gd-s1-t2) 0%,
		var(--color-4-bg-gd-s2-t2) 50%,
		var(--color-4-bg-gd-s3-t2) 80%,
		var(--color-4-bg-gd-s4-t2) 100%
	);

	--ds-global-bg-gd-5: linear-gradient(
		240deg,
		var(--color-5-bg-gd-s1) 0%,
		var(--color-5-bg-gd-s2) 50%,
		var(--color-5-bg-gd-s3) 80%,
		var(--color-5-bg-gd-s4) 100%
	);

	--ds-global-bg-gd-6: linear-gradient(
		240deg, 
		var(--color-6-bg-gd-s1) 0%,
		var(--color-6-bg-gd-s2) 50%,
		var(--color-6-bg-gd-s3) 80%,
		var(--color-6-bg-gd-s4) 100%
	);

	--ds-global-border-gd-1: linear-gradient(
		20deg, 
		var(--color-1-border-gd-s1) 0%,
		var(--color-1-border-gd-s2) 50%,
		var(--color-1-border-gd-s3) 80%,
		var(--color-1-border-gd-s4) 100%
	);

	--ds-global-border-gd-1-t2: linear-gradient(
		20deg, 
		var(--color-1-border-gd-s1-t2) 0%,
		var(--color-1-border-gd-s2-t2) 50%,
		var(--color-1-border-gd-s3-t2) 80%,
		var(--color-1-border-gd-s4-t2) 100%
	);

	--ds-global-border-gd-2: linear-gradient(
		20deg, 
		var(--color-2-border-gd-s1) 0%,
		var(--color-2-border-gd-s2) 50%,
		var(--color-2-border-gd-s3) 80%,
		var(--color-2-border-gd-s4) 100%
	);

	--ds-global-border-gd-3: linear-gradient(
		20deg,
		var(--color-3-border-gd-s1) 0%,
		var(--color-3-border-gd-s2) 50%,
		var(--color-3-border-gd-s3) 80%,
		var(--color-3-border-gd-s4) 100%
	);

	--ds-global-border-gd-4: linear-gradient(
		20deg,
		var(--color-4-border-gd-s1) 0%,
		var(--color-4-border-gd-s2) 50%,
		var(--color-4-border-gd-s3) 80%,
		var(--color-4-border-gd-s4) 100%
	);

	--ds-global-border-gd-4-t2: linear-gradient(
		20deg,
		var(--color-4-border-gd-s1-t2) 0%,
		var(--color-4-border-gd-s2-t2) 50%,
		var(--color-4-border-gd-s3-t2) 80%,
		var(--color-4-border-gd-s4-t2) 100%
	);

	--ds-global-border-gd-5: linear-gradient(
		20deg,
		var(--color-5-border-gd-s1) 0%,
		var(--color-5-border-gd-s2) 50%,
		var(--color-5-border-gd-s3) 80%,
		var(--color-5-border-gd-s4) 100%
	);

	--ds-global-border-gd-6: linear-gradient(
		20deg, 
		var(--color-6-border-gd-s1) 0%,
		var(--color-6-border-gd-s2) 50%,
		var(--color-6-border-gd-s3) 80%,
		var(--color-6-border-gd-s4) 100%
	);

	position: relative;

	background: var(--ds-global-grainy-texture-black-url) var(--color-6);
	background-size: var(--ds-global-grainy-texture-size);
}

#ds-header {
	background: var(--ds-global-grainy-texture-black-url) var(--color-6);
	background-size: var(--ds-global-grainy-texture-size);
}

.ds-sc-bg-1 {
	background: var(--ds-global-grainy-texture-black-strong-url) var(--color-1);
	background-size: var(--ds-global-grainy-texture-size);
}

.ds-sc-bg-2 {
	background: var(--ds-global-grainy-texture-black-medium-url) var(--color-2);
	background-size: var(--ds-global-grainy-texture-size);
}

.ds-sc-bg-3 {
	background: var(--ds-global-grainy-texture-black-strong-url) var(--color-3);
	background-size: var(--ds-global-grainy-texture-size);
}

.ds-sc-bg-4 {
	background: var(--ds-global-grainy-texture-black-strong-url) var(--color-4);
	background-size: var(--ds-global-grainy-texture-size);
}

.ds-sc-bg-5 {
	background: var(--ds-global-grainy-texture-black-medium-url) var(--color-5);
	background-size: var(--ds-global-grainy-texture-size);
}

.ds-sc-bg-6 {
	background: var(--ds-global-grainy-texture-black-url) var(--color-6);
	background-size: var(--ds-global-grainy-texture-size);
}

/* The border gradient shows through the transparent border around the fill. The grain is
   the same as in .ds-sc-bg-N, clipped to the fill so the border stays clean. */
.ds-bg-gd-1 {
	background:
		var(--ds-global-grainy-texture-black-strong-url) padding-box,
		var(--ds-global-bg-gd-1) padding-box,
		var(--ds-global-border-gd-1) border-box;
	background-size: var(--ds-global-grainy-texture-size), auto, auto;
	border-color: transparent;

	/* background:
		var(--ds-global-grainy-texture-black-strong-url) padding-box,
		var(--ds-global-bg-gd-1-t2) padding-box,
		var(--ds-global-border-gd-1-t2) border-box;
	border-color: transparent; */
}

.ds-bg-gd-1-t2 {
	background:
		var(--ds-global-grainy-texture-black-strong-url) padding-box,
		var(--ds-global-bg-gd-1-t2) padding-box,
		var(--ds-global-border-gd-1-t2) border-box;
	background-size: var(--ds-global-grainy-texture-size), auto, auto;
	border-color: transparent;
}

.ds-bg-gd-2 {
	background:
		var(--ds-global-grainy-texture-black-medium-url) padding-box,
		var(--ds-global-bg-gd-2) padding-box,
		var(--ds-global-border-gd-2) border-box;
	background-size: var(--ds-global-grainy-texture-size), auto, auto;
	border-color: transparent;
}

.ds-bg-gd-3 {
	background:
		var(--ds-global-grainy-texture-black-strong-url) padding-box,
		var(--ds-global-bg-gd-3) padding-box,
		var(--ds-global-border-gd-3) border-box;
	background-size: var(--ds-global-grainy-texture-size), auto, auto;
	border-color: transparent;
}

.ds-bg-gd-4 {
	background:
		var(--ds-global-grainy-texture-black-strong-url) padding-box,
		var(--ds-global-bg-gd-4) padding-box,
		var(--ds-global-border-gd-4) border-box;
	background-size: var(--ds-global-grainy-texture-size), auto, auto;
	border-color: transparent;
}

.ds-bg-gd-4-t2 {
	background:
		var(--ds-global-grainy-texture-black-strong-url) padding-box,
		var(--ds-global-bg-gd-4-t2) padding-box,
		var(--ds-global-border-gd-4-t2) border-box;
	background-size: var(--ds-global-grainy-texture-size), auto, auto;
	border-color: transparent;
}

.ds-bg-gd-5 {
	background:
		var(--ds-global-grainy-texture-black-medium-url) padding-box,
		var(--ds-global-bg-gd-5) padding-box,
		var(--ds-global-border-gd-5) border-box;
	background-size: var(--ds-global-grainy-texture-size), auto, auto;
	border-color: transparent;
}

.ds-bg-gd-6 {
	background:
		var(--ds-global-grainy-texture-black-url) padding-box,
		var(--ds-global-bg-gd-6) padding-box,
		var(--ds-global-border-gd-6) border-box;
	background-size: var(--ds-global-grainy-texture-size), auto, auto;
	border-color: transparent;
}

/* Grain scale on phones. The full 96px tile reads too strong on a small screen, and the old
   1:1 device pixel sizes (48px at 2x, 32px at 3x) made it almost vanish, so phones sit in
   between, closer to the full size. */
@media ( max-width: 767px ) {
	body {
		--ds-global-grainy-texture-size: 72px;
	}
}

/* Only the border takes the gradient, the element's own background is left alone. The gradient
   is a ring drawn by ::after over the border box with the middle masked out, so it follows
   border-radius. The ring can't read the element's border width, so both take it from
   --ds-border-gd-width. */
.ds-border-gd-1 {
	--ds-border-gd: var(--ds-global-border-gd-1);
}

.ds-border-gd-1-t2 {
	--ds-border-gd: var(--ds-global-border-gd-1-t2);
}

.ds-border-gd-2 {
	--ds-border-gd: var(--ds-global-border-gd-2);
}

.ds-border-gd-3 {
	--ds-border-gd: var(--ds-global-border-gd-3);
}

.ds-border-gd-4 {
	--ds-border-gd: var(--ds-global-border-gd-4);
}

.ds-border-gd-4-t2 {
	--ds-border-gd: var(--ds-global-border-gd-4-t2);
}

.ds-border-gd-5 {
	--ds-border-gd: var(--ds-global-border-gd-5);
}

.ds-border-gd-6 {
	--ds-border-gd: var(--ds-global-border-gd-6);
}

/* no specificity, so an element that positions itself keeps its own position */
:where(
	.ds-border-gd-1,
	.ds-border-gd-1-t2,
	.ds-border-gd-2,
	.ds-border-gd-3,
	.ds-border-gd-4,
	.ds-border-gd-4-t2,
	.ds-border-gd-5,
	.ds-border-gd-6
) {
	position: relative;
}

/* the background stops at the border, so a translucent gradient isn't tinted by it */
.ds-border-gd-1,
.ds-border-gd-1-t2,
.ds-border-gd-2,
.ds-border-gd-3,
.ds-border-gd-4,
.ds-border-gd-4-t2,
.ds-border-gd-5,
.ds-border-gd-6 {
	border: var(--ds-border-gd-width, 1px) solid transparent !important;
	background-clip: padding-box;
}

.ds-border-gd-1::after,
.ds-border-gd-1-t2::after,
.ds-border-gd-2::after,
.ds-border-gd-3::after,
.ds-border-gd-4::after,
.ds-border-gd-4-t2::after,
.ds-border-gd-5::after,
.ds-border-gd-6::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--ds-border-gd-width, 1px));
	padding: var(--ds-border-gd-width, 1px);
	border-radius: inherit;
	background: var(--ds-border-gd);
	mask:
		linear-gradient(#000 0 0) content-box exclude,
		linear-gradient(#000 0 0);
	pointer-events: none;
}

/* Lowecase styling: BEGIN
--------------------------------------------- */

.ds-text-lowercase {
	text-transform: lowercase;
}

.elementor-widget-nav-menu .elementor-nav-menu {
	text-transform: lowercase;
}

.ds-text-esc-lowercase {
	text-transform: none !important;
}

/* Lowecase styling: END
--------------------------------------------- */



/* Elementor text: BEGIN
--------------------------------------------- */

.ds-elementor-text {
    font-family: var(--main-font) !important;
    color: var(--color-1) !important;
    font-size: var(--blog-body) !important;
    font-weight: 500 !important;
    line-height: var(--body-line-height-400) !important;
    letter-spacing: var(--ds-global-body-text-letter-spacing-400) !important;

    --ds-local-p-gap: var(--el-padding-600);
    --ds-local-before-list-gap: var(--el-padding-300);
}

.ds-elementor-text h1,
.ds-elementor-text h2,
.ds-elementor-text h3,
.ds-elementor-text h4,
.ds-elementor-text h5,
.ds-elementor-text h6 {
    padding-block-start: var(--el-padding-300);
    padding-block-end: var(--el-padding-500);
    line-height: var(--heading-line-height-400) !important;
	letter-spacing: var(--ds-global-heading-letter-spacing-400) !important;
}

.ds-elementor-text h1 {
    font-size: var(--blog-h1) !important;
}

.ds-elementor-text h2 {
    font-size: var(--blog-h2);
}

.ds-elementor-text h3 {
    font-size: var(--blog-h3) !important;
}

.ds-elementor-text p {
    padding-block-end: var(--ds-local-p-gap);
	letter-spacing: var(--ds-global-body-text-letter-spacing-400) !important;
}

.ds-elementor-text ol,
.ds-elementor-text ul {
    margin-inline-start: var(--el-spacing-500);
    
    padding-block-end: var(--ds-local-p-gap);
    
    display: flex;
    flex-direction: column;
    gap: var(--el-spacing-150);
}

/* a nested list belongs to the item it sits in rather than to the copy around it,
   so it gives up the room a top level list leaves under itself and takes the gap
   that already separates the items around it, above itself instead. Two nested
   lists in a row are kept apart by the second one's gap. */
.ds-elementor-text :is(ol, ul) :is(ol, ul) {
    /* the indent steps down: the first level has to clear the body copy, the ones
       under it only have to clear the markers they sit beside */
    margin-inline-start: var(--el-spacing-400);

    margin-block-start: var(--el-spacing-150);
    padding-block-end: 0;
}

.ds-elementor-text :is(ol, ul) :is(ol, ul) :is(ol, ul) {
    margin-inline-start: var(--el-spacing-300);
}

/* the marker is what says which level an item is on. A browser already varies the
   bullet by depth but numbers every ordered level the same way, so both are set
   here, counted off the nearest list of the same kind rather than absolute depth,
   and the deepest step repeats from there down. */
.ds-elementor-text ul {
    list-style-type: disc;
}

.ds-elementor-text ul ul {
    list-style-type: circle;
}

.ds-elementor-text ul ul ul {
    list-style-type: square;
}

.ds-elementor-text ol {
    list-style-type: decimal;
}

.ds-elementor-text ol ol {
    list-style-type: lower-alpha;
}

.ds-elementor-text ol ol ol {
    list-style-type: lower-roman;
}

/* the room under an element is what separates it from the next one, so whatever sits
   right before a list gives up most of it and stays close to the list it leads into */
.ds-elementor-text :is(p, h1, h2, h3, h4, h5, h6, ol, ul):has(+ :is(ol, ul)) {
    padding-block-end: var(--ds-local-before-list-gap);
}


/* the links written in the editor get the same look as the ones in a body text
   element: the copy's own color and the animated underline drawn by ::before
   instead of a text-decoration. The rules are restated here rather than reused
   from the elements plugin, whose stylesheet only loads on pages that render one
   of its elements. Inline-block with a 1em line height gives the line the same
   box to sit under, and keeps a link from breaking across two lines. */
.ds-elementor-text a {
    --ds-underline-thickness: max( 2px, 0.15em );
    --ds-underline-offset: calc(clamp(0.22em, 0.2591em - 0.081vw, 0.24em) + clamp(0.22em, 0.0965em + 0.257vw, 0.32em) - 0.22em); /* 0.24em / 0.22em / 0.32em */
    --ds-underline-duration: 0.7s;
    --ds-underline-easing: cubic-bezier( 0.65, 0, 0.35, 1 );

    position: relative;
    display: inline-block;

    color: inherit !important;
    font-weight: 700 !important;
    line-height: 1em;
    text-decoration: none !important;
}

.ds-elementor-text a::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: calc( var(--ds-underline-offset) * -1 );
    height: var(--ds-underline-thickness);
    background-color: currentColor;
    pointer-events: none;
}

/* on hover the line slides off to the right, then draws back in from the left.
   It ends the way it started, so leaving half way through only snaps back to
   the full line. */
.ds-elementor-text a:hover::before,
.ds-elementor-text a:focus-visible::before {
    animation: ds-elementor-text-underline-slide var(--ds-underline-duration) var(--ds-underline-easing);
}

/* the origin only flips while the line is scaled to nothing, so the jump from
   right to left is never seen. */
@keyframes ds-elementor-text-underline-slide {
    0% {
        transform: scaleX( 1 );
        transform-origin: right;
    }

    50% {
        transform: scaleX( 0 );
        transform-origin: right;
    }

    50.1% {
        transform: scaleX( 0 );
        transform-origin: left;
    }

    100% {
        transform: scaleX( 1 );
        transform-origin: left;
    }
}

/* the line stays put. */
@media ( prefers-reduced-motion: reduce ) {
    .ds-elementor-text a:hover::before,
    .ds-elementor-text a:focus-visible::before {
        animation: none;
    }
}

/* Elementor text: END
--------------------------------------------- */


.elementor-shortcode {
	display: flex;
    justify-content: center;
    align-items: center;
}

.elementor-widget-icon .elementor-icon-wrapper {
	display: flex;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}