/*
 *------------------------------------------------------------------------
 * Copyright (c) 2025
 * Author: b.da | Vadym Bida
 *------------------------------------------------------------------------
 */

/*----------------------------------------------------------------
  Variables
----------------------------------------------------------------*/
:root {
/*Brand colors*/
--blue: #053cff;
--blue-rgb: 5,60,255;
--midnight-blue: #00053c;
--midnight-blue-rgb: 0,5,60;
--pure-white: #ffffff;
--deep-black: #020305;
--deep-black-rgb: 2,3,5;
/*Base*/
--base: var(--midnight-blue);
--base-rgb: var(--midnight-blue-rgb,0,5,60);
--base-08: #ebebf0;
--base-16: #d6d7e0;
--base-24: #c2c3d0;
--base-32: #adafc0;
--base-48: #8587a2;
--base-64: #5c5f82;
--base-80: #333763;
--base-100: var(--base);

/*Accent*/
--accent-dark: #0436e5;
--accent: #053cff;
--accent-light: #3763ff;
--accent-lighter: #5f82ff;
--accent-rgb: 5,60,255;

/*Positive & Negative*/
--negative: #FF053C;
--negative-rgb: 255, 5, 60;

--positive: #3cff05;
--positive-rgb: 60, 255, 5;

/*Text*/
--text-i: var(--deep-black, #020305);
--text-ii: rgba(var(--base-rgb),.64);
--text-inverse-i: var(--pure-white);
--text-inverse-ii: rgba(255,255,255,.64);


/*background*/
--bg: var(--base-08);
--bg--a: rgba(var(--base-rgb),.04);
--attention--a: var(--pure-white, #fff);
--attention--b: rgba(var(--base-rgb),.08);
--corporate: var(--base);

/*Headings*/
--heading-color: var(--base);
--heading-font: var(--ff--sans);
--heading-weight: var(--fw-bold);
--subHeading-weight: var(--fw-medium);
--h1-size: var(--fs-xxx-large);
--h1-line: 1.066666666666667; /*4rem/3.75rem*/
--h1-margin: 0rem;
--h2-size: var(--fs-larger);
--h2-margin: -.1rem 0 2.6rem;
--h2-color: var(--heading-color);
--h2-line: 2.25rem;
--h3-size: var(--fs-large);
--h3-margin: -.1625rem 0 2.1625rem;
--h3-color: var(--heading-color);
--h0-size: var(--fs-initial);
--h0-color: var(--heading-color);

/*Buttons*/
--btn-color: var(--text-i);
--btn-hover-color: var(--btn-color);
--btn-bg: var(--attention--a);

/*Links*/
--link-line: 1.5rem;
--link-color: var(--accent);
--link-hover-color: var(--accent);
--link-focus-bg: rgba(var(--accent-rgb),.16);
--link-hover-bg: rgba(var(--accent-rgb),.16);

--link-decoration-line: none;
--link-decoration-style: dotted;
--link-decoration-color: currentColor;
--link-hover-decoration-color: var(--link-decoration-color);
--link-decoration-thickness: 1px;
--decoration-line-global: underline;

/*Font family*/
--ff--sans: 'Mulish', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'Roboto','Helvetica Neue','Arial', 'sans-serif';

/*Font Weights*/
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-bold: 700;
/*Line Height */
--line--base: 2rem;

/*Focus outline*/
--outline-color: rgba(var(--accent-rgb),.8);
--outline-width: 2px;
--outline-offset: 2px;
--outline-style: solid;

/*Overlays*/
--hover-overlay: rgba(var(--base-rgb),.16);
--hover-overlay--subtle: rgba(var(--base-rgb),.08);
--hover-overlay--accent: rgba(var(--accent-rgb),.16);

--overlay: rgba(var(--base-rgb),.48);
--overlay--subtle: rgba(var(--base-rgb),.32);
/*Angle */
--skew-angle: -22.6199deg;
/*Header*/
--header-height: calc(8*var(--space));
/*Nav*/
--submenu-bg: var(--corporate);
/*Crumbs*/
--crumbs-height: calc(3*var(--space));
/*Text Section*/
--overview-bg: var(--bg);
/*Footer*/
--footer-bg: var(--attention--a);
/*Tiles*/
--tile-bg: var(--attention--a);
--tile-padding: var(--space);
/*Scroll bar*/
--scrollbar-color: var(--base-16) var(--attention--a);
--scrollbar-color--a: var(--base-16) transparent;
--scroll-width: 17px;
/*Grid*/
--gap-x: 0rem;
--gap-y: 0rem;
--cols: 25;
--grid-limit: 100%;
--col-width: calc((100vw - calc(var(--gap-x)*(var(--cols) - 1)) - var(--scroll-width))/var(--cols));
--grid-unit: calc(var(--col-width) + var(--gap-x));
--grid-offset-left: 0rem;
--grid-offset-right: 0rem;
--inner-col-start: 2;
--inner-col-end: 25;
--inner-col: var(--inner-col-start)/var(--inner-col-end);
--offset-cols-start: calc(var(--inner-col-start) - 1);
--offset-cols-end: calc(var(--cols) + 1 - var(--inner-col-end));
--inner-cols: calc( var(--cols) - var(--offset-cols-end) - var(--offset-cols-start) );
--stack-gap-spacious: var(--base-size-48);
--stack-gap-normal: calc(((100vw - var(--scroll-width))/var(--cols))*20/80);
--stack-gap-condensed: var(--base-size-16);

--fluid-left: calc(var(--grid-unit)*var(--offset-cols-start) + var(--grid-offset-left));
--fluid-right: calc(var(--grid-unit)*var(--offset-cols-end) + var(--grid-offset-right));
/*Space*/
--space: 1rem;
--space-xxxs: calc(.0625 * var(--space));
--space-xxs: calc(.125 * var(--space));
--space-xs: calc(.25 * var(--space));
--space-sm: calc(.5 * var(--space));
--space-md: calc(1.5 * var(--space));
--space-lg: calc(2 * var(--space));
--space-xl: calc(3 * var(--space));
--space-xxl: calc(5 * var(--space));
--space-xxxl: calc(8 * var(--space));
--space-xxxxl: calc(13 * var(--space));


/*borders*/
--divider--subtle: rgba(var(--base-rgb),.16);
--divider--strong: rgba(var(--base-rgb),.64);
--divider--accent: rgba(var(--accent-rgb),.64);
--border-width: 1px;
--border-style: solid;
--border-color: var(--divider--subtle);
--border--base: var(--border-width) var(--border-style) var(--divider--subtle);
--border--accent: var(--border-width) var(--border-style) var(--divider--accent);
--border--strong: var(--border-width) var(--border-style) var(--divider--strong);

--form-border: 2px solid transparent;
/*Shadows*/
--shadow: 0 .5rem 1rem rgba(var(--base-rgb),.04);
--shadow-i: 0 .5rem 1rem rgba(var(--base-rgb),.08);
--shadow-ii: 0 1rem 1.5rem rgba(var(--base-rgb),.16);


--shadow-xs: 0 1px 4px 0 rgba(var(--base-rgb),0.12);
--shadow-sm: 0 2px 8px rgba(var(--base-rgb), 0.12);

--shadow-md: 0 0.9px 1.5px rgba(var(--base-rgb), 0.03), 0 3.1px 5.5px rgba(var(--base-rgb), 0.08), 0 14px 25px rgba(var(--base-rgb), 0.12);
--shadow-lg: 0 1.2px 1.9px -1px rgba(var(--base-rgb), 0.014), 0 3.3px 5.3px -1px rgba(var(--base-rgb), 0.038), 0 8.5px 12.7px -1px rgba(var(--base-rgb), 0.085), 0 30px 42px -1px rgba(var(--base-rgb), 0.15);
--shadow-xl: 0 1.5px 2.1px -6px rgba(var(--base-rgb), 0.012), 0 3.6px 5.2px -6px rgba(var(--base-rgb), 0.035), 0 7.3px 10.6px -6px rgba(var(--base-rgb), 0.07), 0 16.2px 21.9px -6px rgba(var(--base-rgb), 0.117), 0 46px 60px -6px rgba(var(--base-rgb), 0.2);

/*Body*/
--body-color: var(--text-i);
--body-bg: var(--base-08);
--body-line: var(--line--base);
}

@media (min-width: 768px) {
	:root {
		--tile-padding: var(--space) var(--space-md);
	}
}

@media (min-width: 1200px) {
	:root {
		--cols: 24;
		--inner-col-start: 3;
		--inner-col-end: 23;
		--inner-col: var(--inner-col-start)/var(--inner-col-end);
		--tile-padding: var(--space-md) var(--space-lg);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
	--body-bg:  #000432;
	--bg:  #000432;
	--attention--a: #0a0f44;
	--attention--b: var(--base);
	--overview-bg: var(--body-bg);
	--text-i: var(--pure-white);
	--text-ii: var(--text-inverse-ii);
	--text-inverse-ii: rgba(255,255,255,.56);
	--heading-color: var(--text-i);
	--h2-color: var(--heading-color);
	--tile-title-color: var(--heading-color);
	--accent: #0f44ff;
	--accent-light: #194bff;
	--link-color: var(--accent);
	--footer-bg: var(--attention--a);
	--white-rgb: 255,255,255;
	--overlay: rgba(var(--deep-black-rgb),.48);
	/*Shadows*/
	--shadow: 0 .5rem 1rem rgba(var(--deep-black-rgb),.08);
	--shadow-i: 0 .5rem 1rem rgba(var(--deep-black-rgb),.16);
	--shadow-ii: 0 1rem 1.5rem rgba(var(--deep-black-rgb),.24);
	/*borders*/
	--divider--subtle: rgba(var(--white-rgb),.16);
	--divider--strong: rgba(var(--white-rgb),.64);
	--profile-photo-bg: rgba(var(--white-rgb),.04);
	}
}
:root[data-theme="dark"] {
	--body-bg:  #000432;
	--bg:  #000432;
	--attention--a: #0a0f44;
	--attention--b: var(--base);
	--overview-bg: var(--body-bg);
	--text-i: var(--pure-white);
	--text-ii: var(--text-inverse-ii);
	--text-inverse-ii: rgba(255,255,255,.56);
	--heading-color: var(--text-i);
	--h2-color: var(--heading-color);
	--tile-title-color: var(--heading-color);
	--accent: #0f44ff;
	--accent-light: #194bff;
	--link-color: var(--accent);
	--footer-bg: var(--attention--a);
	--white-rgb: 255,255,255;
	--overlay: rgba(var(--deep-black-rgb),.48);
	/*Shadows*/
	--shadow: 0 .5rem 1rem rgba(var(--deep-black-rgb),.08);
	--shadow-i: 0 .5rem 1rem rgba(var(--deep-black-rgb),.16);
	--shadow-ii: 0 1rem 1.5rem rgba(var(--deep-black-rgb),.24);
	/*borders*/
	--divider--subtle: rgba(var(--white-rgb),.16);
	--divider--strong: rgba(var(--white-rgb),.64);
	--profile-photo-bg: rgba(var(--white-rgb),.04);
}

/* Додаємо: Світла Тема (Обрана Користувачем) */
:root[data-theme="light"] {
	--body-bg: var(--base-08);
	--bg: var(--base-08);
	--attention--a: var(--pure-white, #fff);
	--attention--b: rgba(var(--base-rgb),.08);
	--overview-bg: var(--bg);
	/*Text*/
	--text-i: var(--deep-black, #020305);
	--text-ii: rgba(var(--base-rgb),.64);
	--text-inverse-i: var(--pure-white);
	--text-inverse-ii: rgba(255,255,255,.64);
	--heading-color: var(--base);
	--h2-color: var(--heading-color);
	--tile-title-color: var(--heading-color);
	--accent: #053cff;
	--accent-light: #3763ff;
	--link-color: var(--accent);
	--footer-bg: var(--attention--a);
	--overlay: rgba(var(--base-rgb),.48);
	/*Shadows*/
	--shadow: 0 .5rem 1rem rgba(var(--base-rgb),.04);
	--shadow-i: 0 .5rem 1rem rgba(var(--base-rgb),.08);
	--shadow-ii: 0 1rem 1.5rem rgba(var(--base-rgb),.16);
	/*borders*/
	--divider--subtle: rgba(var(--base-rgb),.16);
	--divider--strong: rgba(var(--base-rgb),.64);
	--profile-photo-bg: var(--attention--b);
}

@media screen and (max-width: 1199px) {
	:root {
		--grid-offset-left: 0rem;
		--grid-offset-right: 0rem;
		--scroll-width: 0px;
		--header-height: 5rem;
		--col-width: calc((100vw - calc(var(--gap-x)*(var(--cols) - 1)))/var(--cols));
		--grid-unit: calc(var(--col-width) + var(--gap-x));
	}
}


/*----------------------------------------------------------------
  General
----------------------------------------------------------------*/
*, ::after, ::before {
	box-sizing: border-box;
}

html {
	scrollbar-color: var(--scrollbar-color); overflow-x: hidden;
	font-size: 1rem; font-size: clamp(.875rem, .83333333333vw, 2rem); 	overflow-x: hidden;
}

/*----------------------------------------------------------------
	font-size: clamp(.875rem, .83333333333vw, 2rem);
----------------------------------------------------------------*/

html, body {
	padding: 0;
	margin: 0;
	scroll-behavior: smooth;
}

body::after {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--space-sm);
	height: 100vh;
	background: var(--accent);
	content: '';
	z-index: 10;
}

body {
	text-align: left;
	background: var(--body-bg);
	color: var(--text-i);
	font: var(--body-font);
	--body-font: normal var(--fw-normal) var(--fs-initial)/var(--body-line) var(--ff--sans);
}

@media (max-width: 1199px) {
	body::after {
		width: 100vw;
		height: var(--space-sm);
		bottom: auto;
		position: absolute;
	}
}
@media (min-width: 1200px) {
	html {
		overflow-x: unset;
	}
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, time {
	display: block;
}

/* Typography
----------------------------------------*/
:root {
/*Font size*/
	--fs-ratio: .125rem;

	--fs-xxxxx-large: calc(var(--fs-initial) + 55*var(--fs-ratio));
	--fs-xxxx-large: calc(var(--fs-initial) + 34*var(--fs-ratio));
	--fs-xxx-large: calc(var(--fs-initial) + 21*var(--fs-ratio));

	--fs-xx-large: calc(var(--fs-initial) + 13*var(--fs-ratio));
	--fs-x-large: calc(var(--fs-initial) + 8*var(--fs-ratio));
	--fs-larger: calc(var(--fs-initial) + 5*var(--fs-ratio));
	--fs-large: calc(var(--fs-initial) + 3*var(--fs-ratio));
	--fs-medium: calc(var(--fs-initial) + 2*var(--fs-ratio));

	--fs-initial: 1.125rem; 

	--fs-smaller: calc(var(--fs-initial) - 1*var(--fs-ratio));
	--fs-small:  calc(var(--fs-initial) - 2*var(--fs-ratio));
	--fs-x-small:  calc(var(--fs-initial) - 3*var(--fs-ratio));
	--fs-xx-small:  calc(var(--fs-initial) - 5*var(--fs-ratio));

	/*Small, sub, sup*/
	--small-txt-color: var(--text-ii);
	--small-txt-size: var(--fs-small);
	--small-txt-align: baseline;
	--small-txt-inset: 0;

	/*List style*/
	--list-margin: 0rem;
	--p-margin: 0rem;

	/* Page description*/
	--description-size: var(--fs-medium);
	--description-line: 1.454545454545455; /*2rem*/
	--description-margin: 0;
}

p, h4, h5, h6 {
	font-size: inherit;
	margin: var(--p-margin);
}

h4,.h4 {
	font-size: var(--h4-size, var(--fs-medium));
	color: var(--h4-color, var(--heading-color));
}

h5, h6 {
	font-size: var(--h0-size);
	color: var(--h0-color, var(--heading-color));
}

ul, ol, dl {
	margin: var(--list-margin);
	padding: 0;
	list-style: none;
}

ul > li, ol > li, dl dd, dl dt{
	margin: 0;
	display: block;
	position: relative;
}

h1, .h1 {
	font-family: var(--heading-font);
	font-weight: var(--heading-weight);
	font-style: normal;
	color: var(--heading-color);
	font-size: var(--h1-size);
	line-height: var(--h1-line);
	letter-spacing: -.01em;
	margin: var(--h1-margin);
}
article h1, aside h1,
nav h1, section h1 {
	font-size: 2em;
	font-size: var(--h1-size);
	line-height: var(--h1-line);
}
h2, h3, h4, h5 , h6 {
	font-family: var(--heading-font);
	font-weight: var(--subHeading-weight);
	font-style: normal;
}

h2, .h2 {
	font-size: var(--h2-size);
	margin: var(--h2-margin);
	color: var(--h2-color);
	line-height: var(--h2-line);
}

h3, .h3 {
	font-size: var(--h3-size);
	margin: var(--h3-margin);
	color: var(--h3-color);
}

/* 
----------------------------------------*/
.small, .counter[data-count]:not([data-count=""])::after {
	color: var(--small-txt-color);
	font-size: var(--small-txt-size);
	margin: 0;
	vertical-align: var(--small-txt-align);
	line-height: 0;
	position: relative;
	inset: var(--small-txt-inset);
	letter-spacing: .015625em;
}

.mark {
	color: var(--accent);
	font-size: inherit;
	background: rgba(var(--accent-rgb),.16);
	line-height: 0;
	padding: 0 var(--space-xs);
	border-radius: var(--space-xs);
}
/*
.mark:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	--mix-background: color-mix(in srgb, var(--accent) 10%, transparent);
	background: var(--mix-background, var(--accent));
	--bg-currentcolor: var(--mix-background, var(--chakra-colors-teal-500));
	border-start-start-radius: var(--space-xs);
	border-end-start-radius: var(--space-xs);
	pointer-events: none;
	bottom: calc(var(--space-xs) * -1);
	inset-inline-start: 0;
	border-inline-end-width: 2px;
	border-color: currentColor;
}
*/
table {
	margin: 0;
	padding: 0;
	border: 0;
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}

.table-auto {
	table-layout: auto;
}

.table-fixed {
	table-layout: fixed;
}
td, th {padding: calc(var(--space)*.75); border: var(--border--base);}
td {
	vertical-align: top;
}

th {
	font-weight: var(--fw-medium);
	background: var(--attention--b);
}

/* 
----------------------------------------*/

hr {
	clear: both;
	width: 100%;
	height: 0;
	margin: var(--space-lg) auto;
	border: 0;
	border-bottom: var(--border--base);
	box-sizing: content-box;
	overflow: visible;
}

/* Links
----------------------------------------*/
a {
	display: var(--link-display, inline-block);
	position: relative;
	-webkit-text-decoration: var(--link-decoration);
	        text-decoration: var(--link-decoration);
	font-style: normal;
	line-height: var(--link-line);
	color: var(--link-color);
	transition: color .16s ease;
}

a:focus {
	outline: var(--outline, var(--outline-width) var(--outline-style) var(--outline-color));
	outline-offset: var(--outline-offset);
}

a:before, button:before, .btn:before, .--hover\:overlay:before {
	content: '';
	display: block;
	position: absolute;
	inset: var(--overlay-inset, 0px);
	background: transparent;
	transition: background .16s ease;
}

.--hover\:overlay:hover:before, .--hover\:overlay:focus:before, .--hover\:overlay:active:before {
	background: var(--hover-overlay);
}

a:not(.btn):not(.tile.--hover\:overlay):focus:before {
	background: var(--link-focus-bg);
}

a:hover, a:focus, a:active {
	color: var(--link-hover-color);
	-webkit-text-decoration: var(--link-hover-decoration);
	        text-decoration: var(--link-hover-decoration);
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a {
	line-height: inherit;
	--link-color: var(--heading-color);;
}

a._fill {
	position: absolute !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	--outline-offset: calc(-1*var(--outline-width));
}

/* Buttons
----------------------------------------*/

/*Buttons*/
:root {
	--btn-shadow: none;
	--btn-hover-shadow: var(--btn-shadow);
	--btn-radius: 5rem;
	--btn-transform: translateY(2px);
	--btn-padding: var(--space) var(--space-lg);
	--btn-font-size: var(--fs-medium);
	--btn-line: 2rem;
	--btn-hover-overlay: transparent;
}

button, .btn, a.btn {
	width: var(--btn-width, auto);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: var(--btn-padding);
	border: 0;
	transition: color .16s ease, box-shadow .16s ease, background .16s ease;
	font-family: inherit;
	font-size: var(--btn-font-size);
	line-height: var(--btn-line);
	position: relative;
	background: var(--btn-bg);
	outline: var(--outline-width) solid transparent;
	outline-offset: var(--outline-offset);
	cursor: pointer;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	box-shadow: var(--btn-shadow);
	color: var(--btn-color);
	border-radius: var(--btn-radius);
	text-decoration: none;
	will-change: transform;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: button;
	overflow: hidden;
	--icon-fill: currentColor;
}

button *, .btn *, a.btn * { line-height: var(--btn-line); }

button:before, .btn:before {
	z-index: -1;
	border-radius: var(--btn-radius);
}

button:hover:before, button:focus:before, button:active:before, .btn:hover:before, .btn:focus:before, .btn:active:before {
	background: var(--btn-hover-overlay);
}

button:hover, button:active, button:focus, .btn:hover, .btn:active, .btn:focus {
	color: var(--btn-hover-color);
	box-shadow: var(--btn-hover-shadow);
}

button:focus, .btn:focus {
	outline-color: var(--outline-color);
}

button:active, .btn:active {
	transform: var(--btn-transform);
}

button.--icon\:left, .btn.--icon\:left {
	--btn-padding: var(--space) var(--space-lg) var(--space) var(--space);
	--icon-margin: 0 var(--space) 0 var(--space-sm);
}

button.--icon\:left .icon, .btn.--icon\:left .icon {
	order: -99;
}

button.--icon\:right, .btn.--icon\:right {
	--btn-padding: var(--space) var(--space) var(--space) var(--space-lg);
	--icon-margin: 0 var(--space-sm) 0 var(--space);
}

button.--icon\:only, .btn.--icon\:only {
	--btn-padding: var(--space);
}

button.--md, .btn.--md {
	--btn-font-size: var(--fs-smaller);
	--btn-padding: var(--space-sm) var(--space-lg);
	--btn-line: 2rem;
	--icon-size: 1.5rem;
	--icon-margin: 0;
	gap: calc(var(--space)*.75);
}

button.--md.--icon\:right, .btn.--md.--icon\:right {
	--btn-padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-lg);
}

button.--md.--icon\:left, .btn.--md.--icon\:left {
	--btn-padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-md);
}

button.--md.--icon\:only, .btn.--md.--icon\:only {
	--btn-padding: calc(var(--space)*.75);
}

button.--sm, .btn.--sm {
	--btn-padding: var(--space-sm) var(--space-md);
	--btn-line: 1.5rem;
	--btn-font-size: var(--fs-smaller);
	--icon-size: 1.25rem;
}

button.--sm.--icon\:only, .btn.--sm.--icon\:only, button.--xs.--icon\:only, .btn.--xs.--icon\:only {
	--btn-padding: var(--space-sm);
	min-width: calc(var(--btn-padding)*2 + var(--btn-line));
	--icon-margin: var(--space-xxs);
}

button.--sm.--icon\:right, .btn.--sm.--icon\:right {
	--btn-padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
	--icon-margin: var(--space-xxs) var(--space-xs) var(--space-xxs) var(--space-sm);
}

button.--sm.--icon\:left, .btn.--sm.--icon\:left {
	--btn-padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
	--icon-margin: var(--space-xxs) var(--space-sm) var(--space-xxs) var(--space-xs);
}

button.--xs, .btn.--xs {
	--btn-padding: var(--space-sm) var(--space);
	--btn-line: 1rem;
	--btn-font-size: var(--fs-small);
	--icon-size: 1rem;
	letter-spacing: .25px;
	font-weight: var(--fw-medium);
}

button.--xs.--icon\:right, .btn.--xs.--icon\:right {
	--btn-padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space);
	--icon-margin: 0 var(--space-xs) 0 var(--space-sm);
}

button.--xs.--icon\:left, .btn.--xs.--icon\:left {
	--btn-padding: var(--space-sm) var(--space) var(--space-sm) var(--space-sm);
	--icon-margin: 0 var(--space-sm) 0 var(--space-xs);
}


button:hover.--icon\:animation .icon, .btn:hover.--icon\:animation .icon {
	transform: translateX(2px);
}
button.--icon\:animation .icon, .btn.--icon\:animation .icon {
	transition: transform .16s;
}

button.--xxs, .btn.--xxs {
	--btn-padding: var(--space-xs) var(--space);
	--btn-line: 1rem;
	--btn-font-size: var(--fs-x-small);
	font-weight: var(--fw-medium);
	letter-spacing: .4px;
}

button.--i, .btn.--i {
	--btn-bg: var(--accent);
	--btn-color: var(--text-inverse-i);
	--btn-hover-color: var(--text-inverse-i);
	--btn-shadow: 0 .25rem 1rem rgba(var(--accent-rgb),.32);
	--btn-hover-overlay: var(--hover-overlay);
}

button.--i.--ghost, .btn.--i.--ghost {
	--btn-bg: transparent;
	--btn-color: var(--accent);
	--btn-shadow: none;
	--btn-hover-color: var(--accent);
	--btn-hover-overlay: rgba(var(--accent-rgb),.16);
}

button.--i.--subtle, .btn.--i.--subtle {
	--btn-shadow: none;
	--btn-bg: rgba(var(--accent-rgb),.16);
	--btn-color: var(--accent);
	--btn-hover-color: var(--btn-color);
	--btn-hover-overlay: rgba(var(--accent-rgb),.16);
}

button.--ii, .btn.--ii {
	--btn-bg: var(--attention--b);
	--btn-hover-overlay: var(--hover-overlay);
}

button.--ii.--ghost, .btn.--ii.--ghost, button.--ghost, .btn.--ghost {
	--btn-bg: transparent;
	--btn-hover-overlay: var(--hover-overlay);
}


button.--ghost.--active, .btn.--ghost.--active {
	--btn-bg: var(--attention--b);
}

button.--iii, .btn.--iii {
	--btn-bg: transparent;
	--btn-shadow: inset 0px 0px 0px var(--border-width) var(--divider--subtle);
	--btn-hover-shadow: inset 0px 0px 0px var(--border-width) var(--accent), var(--shadow-i);
}

button.--iii.--active, .btn.--iii.--active {
	--btn-shadow: inset 0px 0px 0px var(--border-width) var(--accent);
}

button.--deemphasized, a.btn.--deemphasized {
	--btn-bg: rgba(var(--accent-rgb),.16);
	--btn-color: var(--accent);
	--btn-hover-color: var(--accent);
	--btn-hover-overlay: rgba(var(--accent-rgb),.08);
}

/* Helper classes || grid
----------------------------------------*/
.grid {
	display: grid;
	grid-column-gap: var(--gap-x);
	grid-row-gap: var(--gap-y);
	max-width: none;
	min-width: 1px;
	width: 100%;
	margin-inline: auto;
	grid-template-columns: var(--template-cols, repeat(var(--cols),1fr));
	grid-template-rows: var(--template-rows, auto);
}
.subgrid {
	grid-template-columns: subgrid;
	display: grid;
	grid-column: var(--col, 1/-1);
	position: relative;
	grid-column-gap: var(--gap-x);
	grid-row-gap: var(--gap-y);
}

.subgrid > * , .grid > *, body.grid > *:is(main, ol, section, article, footer) > * {
	grid-column: var(--col, 1/-1);
	grid-row: var(--row, span 1);
}

.flex, .flex-col {
	display: flex;
	grid-column-gap: var(--gap-x);
	grid-row-gap: var(--gap-y);
	align-items: var(--items);
	flex-direction: var(--direction, row );
	flex-wrap: var(--wrap, wrap);
}
.flex-col {
	--direction: column;
	}
.flex *.--last, .flex-col *.--last { order: 99;}

.scroll {
	--wrap: nowrap;
	overflow: var(--scroll-overflow, auto hidden);
	min-width: 0px;
	padding: var(--scroll-padding, var(--space) var(--space-sm));
	margin-inline-start: calc(-1*(var(--gap-x)/2 + var(--space-sm))) !important;
}

.scroll.--overlay:before, .scroll.--overlay:after {
	bottom: 0;
	content: "";
	display: block;
	height: 100%;
	pointer-events: none;
	position: absolute;
	width: calc(var(--grid-unit)*2 - var(--gap-x));
	z-index: 1;
	left: 0;
	background: linear-gradient(var(--gradient-position), var(--body-bg), transparent);
	--gradient-position: to right;
}

.scroll.--overlay:after {
	left: auto;
	right: 0;
	--gradient-position: to left;
}

/* Notifications 
----------------------------------------*/
#noscript {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: var(--space-md) var(--fluid-right) var(--space-md) var(--fluid-left);
	z-index: 1010;
}

.notification.--i {
	background: var(--accent);
	color: var(--text-inverse-i);
}

/* Breadcrumbs 
----------------------------------------*/
#crumbs {
	z-index: 2;
	position: absolute;
	--col: var(--inner-col);
	left: 0;
	right: 0;
	top: calc(var(--header-height) + var(--space-xl));
	top: calc(var(--header-height) + var(--space));
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}

#crumbs ol {
	height: var(--crumbs-height, 3rem);
	font-size: var(--fs-smaller);
	font-weight: var(--fw-medium);
	justify-content: flex-start;
	padding-block: calc(var(--space-sm) + var(--space-xxs)) calc(var(--space-sm) - var(--space-xxs));
	text-transform: lowercase;
	--link-color: var(--text-ii);
	--link-hover-color: var(--text-i);
	--divider-width: 1rem;
	--items: center;
}

#crumbs a {
	margin-right: calc(var(--divider-width) + var(--space));
}

#crumbs a:not(#crumbs li:last-child a):after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(-1*(var(--divider-width) + var(--space)/2));
	background: var(--text-ii);
	width: var(--divider-width);
	height: var(--border-width);
	margin: auto 0;
	transition: transform .16s;
}

#crumbs a:hover:after {
	transform: rotateZ(calc(-45deg + var(--skew-angle)));
}

/* Titles + subtitles
----------------------------------------*/
#hero {
	padding-block: calc(var(--header-height) + var(--crumbs-height) + var(--space-xl) - var(--space-sm)) var(--space-md);
	--small-txt-size: var(--fs-large);
	--h1-margin: .125rem 0 -.125rem;
	--gap-y: var(--space-md);
	--gap-y: var(--space-sm);
	--description-margin: var(--space-md) 0 0;
}

#hero * {
	--col: var(--inner-col-start)/var(--col-end, var(--inner-col-end));
}

#hero h1 {
	position: relative;
	text-wrap: balance;
	gap: 0;
}

#hero h1 * {
	align-self: start;
}

#hero h1 em {
	text-transform: uppercase;
	color: rgba(var(--accent-rgb),.88);
	color: rgba(var(--accent-rgb),.48);
	position: absolute;
	top: 0;
	left: 0;
	transform: translate3d(0%, -50%, 0);
	padding-left: var(--space-xxs);
	line-height: 2rem;
	font-style: normal;
	font-size: var(--fs-initial);
}

#hero:has(.eyebrow) {
	padding-top: calc(var(--header-height) + var(--crumbs-height) + var(--space-xl));
}

#hero .eyebrow {
	text-transform: uppercase;
	color: var(--accent);
	margin-block: var(--space-xxxs) calc(-1*var(--space-xxxs));
	font-size: var(--fs-initial);
	display: block;
	line-height: 2rem;
	font-weight: var(--fw-medium);
}

#hero h1 .eyebrow {
	order: -99;
	margin-block: calc(-1*var(--space-xxxs)) calc(1*var(--space-xxxs));
}

#hero:has(.eyebrow) h1 span:first-of-type:not(.eyebrow), #hero:has(.eyebrow) h1 .eyebrow + span {
	margin-top: var(--gap-y);
}

/*
#hero h1 em {
	background-image: linear-gradient(90deg,var(--accent),#ee5396);
	-webkit-background-clip: text;
	color: transparent;
}
*/
#hero p, .description {
	margin: var(--description-margin);
	font-size: var(--description-size);
	line-height: var(--description-line);
}

.chapter #hero h1 {
	text-transform: lowercase;
}

@media (max-width: 768px) {
	#hero {
		--h1-size: var(--fs-xx-large);
		--h1-line: 3rem;
		--small-txt-size: var(--fs-smaller);
	}
}
@media (min-width: 1200px) {
	#hero {
		padding-bottom: calc(var(--space-xl) - var(--space-sm));
	}
}
/* Text 	border-bottom: var(--border--strong);
----------------------------------------*/
strong, em {
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
}

.underline {
	background-color: rgba(var(--accent-rgb),.12);
	text-decoration: none !important;
}

.txtUn {
	-webkit-text-decoration: underline var(--border--strong);
	        text-decoration: underline var(--border--strong);
}

.italic, .txtI{
	font-style: italic !important;
}
.bold, .ffM {
	font-weight: var(--fw-bold);
}

/* Counter
----------------------------------------*/
.counter {
	position: relative;
}

.counter[data-count]:not([data-count=""])::after {
	content: attr(data-count);
	--small-txt-align: top;
	--small-txt-color: currentColor;
	--small-txt-inset: calc(var(--small-txt-size)/4) 0;
}

/* Profile
----------------------------------------*/
:root {
	--in-game-size: calc(var(--grid-unit)*3);
	--in-game-indent: var(--space-sm);
}
@media (min-width: 768px) {
	:root {
		--in-game-size: calc(var(--grid-unit)*3 - var(--in-game-indent));
		--in-game-indent: var(--space);
	}
}
@media (min-width: 1200px) {
	:root {
		--in-game-size: calc(var(--grid-unit)*1);
		--profile-info-padding: var(--space-lg) var(--space-sm);
	}
}

.profile {
	position: relative;
	--direction: var(--profile-direction, column);
	--gap-y: var(--profile-gap-y, 0rem);
}

.profile .photo {
	/*opacity: .9; */
	background: var(--profile-photo-bg, var(--attention--b));
	width: 100%;
}

.profile .info {
	padding: var(--profile-info-padding, var(--space-md) var(--space-sm));
	line-height: var(--profile-info-line, 2rem);
	row-gap: var(--profile-info-gap-y, var(--space-xs));
}

.profile .name {
	z-index: 2;
	position: relative;
	font-size: var(--profile-name-size, var(--h3-size));
	margin: var(--profile-name-margin, 0rem);
}

.profile {
	--link-hover-decoration: underline;
}

.profile:has(a._fill):hover {
	--link-decoration: underline var(--divider--accent);
	--link-hover-decoration: underline;
}

.profile .job {
	color: var(--text-ii);
	line-height: var(--profile-job-line, 1.75rem);
}

.profile .in-game {
	top: var(--in-game-indent);
	right: var(--in-game-indent);
}

.in-game {
	fill: var(--accent);
	position: absolute;
	z-index: 2;
	max-width: var(--in-game-size);
	pointer-events: none;
}
.in-game > text + text { font-size: 14px; }
.in-game > text { font-size: 24px; }

.profile:hover .in-game > .rotate {
	animation: text-rotation 5s infinite linear;
}

/*----------------------------------------------------------------
  Forms
----------------------------------------------------------------*/
:root {
	--checkbox-size: 1.125rem;
}

form .footer {
	font-size: var(--fs-smaller);
	order: 99;
	line-height: 1.5rem;
	padding-top: var(--space-lg);
}

form .footer hr {
	margin: var(--space) auto;
}

form .form-input-wrapper {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

form .form-field {
	position: relative;
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--fs-smaller);
	line-height: 1.5rem;
}

form .form-field:has(label) {
	margin-bottom: var(--space);
}

form .form-label label {
	color: var(--label-color, var(--heading-color));
	text-align: left;
	display: block;
	margin-bottom: var(--space-xs);
}
form label .required {
	color: var(--accent);
}

input, textarea, select {
	position: relative;
	display: block;
	padding: calc(var(--space)*.75 - var(--form-border-width)) var(--space);
	margin-top: 0;
	width: 100%;
	height: auto;
	border: var(--form-border);
	border-radius: .5rem;
	background: var(--attention--b);
	color: inherit;
	font: normal var(--fw-normal) inherit/inherit var(--content-font);
	-webkit-appearance:none;
	   -moz-appearance:none;
	        appearance:none;
	--form-border-width: 2px;
}
form select {
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
	background-position: right var(--space-sm) center;
	background-repeat:no-repeat;
	background-size: var(--icon-size);
	--icon-size: 1.5rem;
	color: var(--select-color, var(--heading-color));
}
textarea {
	overflow: auto;
	resize: vertical;
}

input[type=checkbox], input[type=radio] {
	border-radius: .25rem;
	position: relative;
	padding: 0;
	margin: 0;
	height: var(--checkbox-size);
	width: var(--checkbox-size);
	cursor: pointer;
	display: inline-block !important;
	background-position: center;
	background-repeat: no-repeat;
}

input[type=checkbox] {
	border: var(--border--base);
}

input[type=checkbox] + label, input[type=radio] + label {
	display: inline-block;
	line-height: var(--checkbox-line);
}

input[type=checkbox]:not(:checked):not(:focus)+label:hover::before, input[type=radio]:not(:checked):not(:focus)+label:hover::before {
	box-shadow: 0 0 0 1px rgba(var(--base-rgb), 0.16);
}
input[type=radio] + label::before {
	border-radius: 50%;
}

input[type=checkbox]:checked , input[type=radio]:checked {
	background-color: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 0 0 .25rem rgba(var(--accent-rgb), 0.24);
	transition: transform .2s;
}

input[type=checkbox]:active, input[type=radio]:active {
	transform: scale(.8);
	transition: transform .2s;
}

input[type=checkbox]:checked:active, input[type=radio]:checked:active {
	transform: none;
	transition: none;
}

input[type=checkbox]:checked {
	--checkbox-marker-size: calc(var(--checkbox-size)*.64);
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMicgdmlld0JveD0nMCAwIDEyIDEyJz48cG9seWxpbmUgcG9pbnRzPScxIDYuNSA0IDkuNSAxMSAyLjUnIGZpbGw9J25vbmUnIHN0cm9rZT0nI0ZGRkZGRicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2Utd2lkdGg9JzInLz48L3N2Zz4=);
	background-size: var(--checkbox-marker-size);
}

input[type=checkbox]:checked:active,
input[type=radio]:checked:active,
input[type=checkbox]:focus,
input[type=radio]:focus {
	border-color: var(--accent);
	box-shadow:0 0 0 3px rgba(var(--accent-rgb), 0.24);
}

input::-moz-placeholder, textarea::-moz-placeholder {
	color: var(--text-ii);
	font-size: inherit;
}

input::placeholder, textarea::placeholder {
	color: var(--text-ii);
	font-size: inherit;
}

input:focus, input:active, textarea:focus, textarea:active, select:focus, select:active {
	border-color: var(--accent);
	box-shadow: 0 0 0 .25rem rgba(var(--accent-rgb), 0.24);
	outline: none;
}

input:invalid, textarea:invalid {
	outline: none;
}

.form button {
	margin-top: var(--space);
}

form .is-form-section:not(.footer) {
	border-top: var(--border--base);
	padding-top: var(--space);
	margin-top: var(--space);
}

form .is-form-section p, form .form-header p {
	font-size: var(--fs-smaller);
	line-height: 1.5rem;
	margin-block: 0 var(--space);
}

form .is-form-section h4 {
	margin-block: 0 calc(var(--space)*.75);
}

form .is-form-section:has(p) h4 {
	margin-block: 0 var(--space-xs);
}

@media screen and (min-width: 1200px) {
	form .form-label label {
		margin-bottom: var(--space-sm);
	}
	form .form-field, form .form-field:has(label) {
		margin-bottom: var(--space-md);
	}
	form .is-form-section:not(.footer) {
		padding-top: var(--space-md);
	}
	form .is-form-section p, form .form-header p {
		margin-block: var(--space-sm) var(--space);
	}

	form .is-form-section h4 + p, form .form-header h3 + p {
		margin-block: var(--space-sm) var(--space-md);
	}
}
/* Switcher
----------------------------------------*/
.btn.switch {
	--switch-marker-ratio: calc(var(--switch-marker-height)*1.125);
	position: relative;
	display: flex;
	align-self: center;
	--switch-marker-height: 1.75rem;
	--switch-marker-width: calc(var(--switch-marker-height)/3*4);
	--btn-padding: calc(var(--switch-marker-height)/6);
}

.switch input[type=checkbox] {
	position: absolute;
	margin: 0;
	left: 0;
	border-color: transparent;
	box-shadow: none;
	background: transparent;
	overflow: hidden;
	--checkbox-size: 1px;
}

.switch .decor {
	position: relative;
	width: calc(var(--switch-marker-width)*2);
	height: calc(var(--switch-marker-height));
	display: flex;
	align-items: center;
}

.switch .decor .icon {
	flex-basis: 50%;
}

.switch .decor .icon + .icon {
	--icon-fill: currentColor;
}

.switch .decor .marker{
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	border-radius: calc(var(--switch-marker-height)/2);
	background-color: var(--attention--a);
	height: calc(var(--switch-marker-height));
	width: calc(var(--switch-marker-width));
	transition: transform .32s;
}

.switch input[type=checkbox]:checked + .decor .marker {
	transform: translateX(100%);
}

.switch input[type=checkbox]:checked + .decor .icon + .icon {
	--icon-fill: var(--text-inverse-i);
}

/*----------------------------------------------------------------
 Common + helper classes
----------------------------------------------------------------*/

/* Menu / Page navigation
--------------------------------*/
#menu {
	height: 4rem;
	--list-margin: 0;
	--scroll-padding: 0;
}

.tabs a {
	display: inline-flex;
	white-space: nowrap;
	height: 100%;
	align-items: center;
	font-weight: var(--fw-medium);
	outline-offset: calc(-1*var(--outline-offset));
	font-size: var(--fs-small);
	line-height: 2rem;
	padding: var(--space) var(--space-md);
	text-transform: uppercase;
	letter-spacing: .25px;
	min-width: calc(var(--grid-unit)*2);
	--link-color: var(--text-ii);
	--link-hover-color: var(--text-i);
}

.tabs li.--active a {
	color: var(--text-i);
}

.tabs a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: .125rem;
	background: var(--accent);
	transform: scale3d(0, 1, 1);
	transition: transform .1s;
}

.tabs li.--active a::after {
	transform: scale3d(1, 1, 1);
	transition: transform .32s cubic-bezier(0.4, 0, 0.2, 1);
}


.tabs .order:before {
	counter-increment: li;
	content: counter(li, upper-roman)'.';
	margin-right: var(--space-xs);
}

/*----------------------------------------------------------------
  Imagies, SVG & icons 
----------------------------------------------------------------*/
:root {
	--icon-align: sub;
	--icon-margin: 0;
	--icon-fill: var(--accent);
	--icon-stroke: none;
	--icon-size: 1.75rem;
	--icon-transform: none;
}

@media screen and (min-width: 1200px) {
	:root {
		--icon-size: 2rem;
	}
}

figure, img, video {
	margin: 0;
}

img, video, picture {
	border: 0;
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}
img { -o-object-fit: cover; object-fit: cover; }

svg {
	fill: currentColor;
}

.icon {
	height: var(--icon-size);
	width: var(--icon-size);
	fill: var(--icon-fill);
	stroke: var(--icon-stroke);
	display: inline-flex;
	vertical-align: var(--icon-align);
	margin: var(--icon-margin);
	transform: var(--icon-transform);
	position: relative;
	overflow: hidden;
	display: inline-flex;
	place-content: center;
}

a .icon:has([href*="#arrow--right"]):not(.no\:transform), a .icon:has([href*="#chevron--right"]):not(.no\:transform) {
	transform-origin: center;
	transition: transform .16s cubic-bezier(.75, 0, .125, 1);
}

a[target*="_blank"] .icon:has([href*="#arrow--right"]):not(.no\:transform) {
	--icon-transform: rotate(-45deg);
}

a:hover[target*="_blank"] .icon:has([href*="#arrow--right"]):not(.no\:transform) {
	--icon-transform: rotate(-45deg) translate(calc(var(--icon-size)/4), 0px);
}

a:hover .icon:has([href*="#arrow--right"]):not(.no\:transform), a:hover .icon:has([href*="#chevron--right"]):not(.no\:transform) {
	--icon-transform: translate(calc(var(--icon-size)/4), 0px);
}


.icon.--stroke {
	fill: none !important;
	--icon-stroke: var(--icon-fill);
}

.icon.--plus::before, .icon.--plus::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background: var(--icon-fill);
	height: 62.5%;
	width: 6.25%;
}

.icon.--plus::after {
	will-change: transform;
	transition: .16s cubic-bezier(.75, 0, .125, 1);
	transform: rotate(90deg) scaleX(1);
}
/* Reader
----------------------------------------*/
.reader {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	clip-path: inset(50%);
	border: 0;
}

/*----------------------------------------------------------------
  Skip to content
----------------------------------------------------------------*/
.skip {
	position: absolute !important;
	top: auto;
	left: -200%;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -10;
	padding: 0;
	--btn-radius: 0;
}
.skip:not(:active):not(:focus) {
	--btn-padding: 0;
}

.skip:active, .skip:focus {
	top: 0;
	left: 0;
	width: -moz-fit-content;
	width: fit-content;
	height: auto;
	overflow: auto;
	z-index: 30;
}

/* ----------------------------------------------------------------
  Site header
---------------------------------------------------------------- */
#header {
	z-index: 20;
	font-weight: var(--fw-medium);
	position: absolute;
	inset: 0 0 auto;
	margin: 0 0 auto;
	align-items: center;
	height: var(--header-height);
	padding: var(--header-padding, var(--space) 0 var(--space-sm));
	text-transform: lowercase;
}

/* logo
--------------------------------*/
.logo:hover, .logo:focus { 
	--logo-icon-transform: skew(var(--skew-angle)) translatex(2.5rem);
}

.logo {
	justify-self: start;
	display: flex;
	margin-block: var(--logo-margin, 0rem);
	--logo-icon-transform: none;
	--logo-icon-transition: all .16s;
	--col: var(--inner-col-start)/ calc(var(--cols)/2 + 1);
}

.logo-icon-column {
	transform: var(--logo-icon-transform); transition: var(--logo-icon-transition);
}

.logo .mobile {
	display: var(--logo-mobile-display, flex);
	--logo-height: var(--fs-x-large);
}
#header .logo .base {
	display: var(--logo-base-display, none);
}
#header .logo:not(:has(.mobile)) .base {
	display: var(--logo-base-display, block);
}
.logo svg {
	width: auto;
	height: var(--logo-height, calc(var(--fs-x-large) + var(--fs-ratio)));
}

@media (min-width: 1200px) {
	#header {
		--header-padding: var(--space-sm) 0;
		--logo-margin: var(--space-xs) var(--space-sm);
	}
	#header .logo {
		--col: var(--inner-col-start)/9;
		--logo-mobile-display: none;
		--logo-base-display: flex;
	}
}

/* options block
--------------------------------*/
#options {
	justify-self: end;
	font-size: var(--fs-smaller);
	margin-block: var(--space-xxs) calc(var(--space) - var(--space-xxs));
	--link-color: var(--text-ii);
	--link-hover-color: var(--text-i);
	--col: span 4/ calc(var(--inner-col-end) - 1);
}

#options .phone {
	font-size: var(--fs-initial);
	letter-spacing: -.0125em;
	--link-hover-decoration: underline;
	bottom: var(--space-xxxs);
	--link-color: var(--text-i);
}

@media (max-width: 1199px) {
	#options {
		display: none;
	}
}

/* languages switcher
--------------------------------*/
#header .lang {
	text-align: center;
	--link-color: var(--text-ii);
	--link-hover-color: var(--text-i);
	justify-self: end;
	font-size: var(--fs-small);
	margin: 0;
	padding: var(--space-sm);
	border: var(--border--base);
	text-transform: uppercase;
	--col: calc(var(--cols)/2 + 1)/var(--inner-col-end);
}
#header .lang[lang^="ru"]:not(:hover) > span {
	filter: blur(2px);
}

@media (min-width: 1200px) {
	#header .lang {
		margin-top: calc(var(--space) + var(--space-xxs));
		margin-inline-start: var(--space-md);
		--col: span 1 / var(--inner-col-end);
	}
}

/* main navigation
--------------------------------*/
#header nav > ul {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	--link-color: var(--text-i);
	--small-txt-color: initial;
	--small-txt-size: var(--fs-xx-small);
	--small-txt-align: text-top;
	--outline-offset: calc(-1*var(--outline-width));
}

#header nav > ul > li {
	margin: 0 var(--space-sm);
	flex: 1;
	margin: 0;
	display: flex;
}

#header nav > ul > li > a {
	text-align: center;
	padding: calc(var(--space-sm) + var(--space-xxxs)) var(--space) calc(var(--space-sm) - var(--space-xxxs));
	line-height: 2rem;
	white-space: nowrap;
	width: 100%;
}
@media (min-width: 1200px) {
	#header nav {
		--col: span 8;
	}
}

#header nav li > a .small { margin-inline-end: -1em}

@media (max-width: 1199px) {
	:root {
		--nav-height: 4rem;
	}

	.nav-hidden #header nav {
		transform: translateY(100%);
	}

	#header nav {
		margin-bottom: 0;
		position: fixed;
		bottom: 0;
		z-index: 150;
		left: 0;
		right: 0;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		height: var(--nav-height);
		background: var(--attention--a);
		box-shadow: 0 -.5rem 1rem rgba(var(--base-rgb),.08);
		border-top-left-radius: 1.5rem;
		border-top-right-radius: 1.5rem;
		padding: 0;
		transition: transform 0.24s ease-in-out;
	}

	#header nav > ul {
		justify-content: flex-start;
	}

	#header nav > ul > li {
		flex-basis: 25%;
		margin: 0;
		display: flex;
	}

	#header nav > ul > li > a {
		padding: var(--space) var(--space-sm);
		overflow: hidden;
		border-left: var(--border--base);
	}

	#header nav > ul > li:first-child > a {
		border-top-left-radius: 1.5rem;
		padding-left: var(--fluid-left);
		border: none;
	}

	#header nav > ul > li:last-child > a {
		border-top-right-radius: 1.5rem;
		padding-right: var(--fluid-right);
	}

	#header nav .dropdown {display: none;}
}

#header nav [aria-current] {
	--link-color: var(--accent);
	--link-hover-color: var(--accent-light);
}

#header nav .dropdown {
	position: absolute;
	min-width: 15rem;
	padding: calc(var(--space-lg) - var(--space-xxs)) var(--space) calc(var(--space-lg) + var(--space-xxs));
	top: 100%;
	left: 0;
	z-index: -1;
	font-size: var(--fs-smaller);
	font-weight: var(--fw-normal);
	box-shadow: var(--shadow-ii);
	visibility: hidden;
	opacity: 0;
	transition: opacity .16s cubic-bezier(0.215, 0.61, 0.355, 1);
	background: var(--submenu-bg);
	--link-color: var(--text-inverse-i);
	--link-hover-color: var(--accent-lighter);
	--outline-color: var(--accent-lighter);
	--outline-offset: calc(-1*var(--outline-width));
}

#header nav .dropdown [aria-current] {
	--link-color: var(--accent-lighter);
	--link-hover-color: var(--accent-light);
}

#header nav .dropdown .dropdown {
	transform: translateX(calc(100% - var(--space-md)));
	top: calc(-1*(var(--space-lg) - var(--space-xxs)));
}

#header nav > ul > li:first-child > ul {
	min-width: 21rem;
}

#header nav > ul > li > ul > li a{
	padding: var(--space-sm) var(--space-md);
	width: 100%;
}

#header nav ul li:hover > ul, #header nav ul li:focus-within > ul, #header nav ul li ul:hover {
	visibility: visible;
	opacity: 1;
	z-index: 10;
}

#base-grid {
	--template-rows: repeat(var(--cols), calc(var(--grid-unit)*var(--s,1)));
}

#h-grid {
	--cols: 1;
	--template-rows: repeat(calc(400/1), 1rem);
}
#base-grid, #h-grid {
	position: fixed; pointer-events: none; z-index: -1;
}

/*----------------------------------------------------------------
 Main block
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 Content
---------------------------------------------------------------- */
#content:focus {
	outline: 0!important;
}
#content {
	overflow-x: hidden;
}
/*----------------------------------------------------------------
 Text
----------------------------------------------------------------*/
:root {
	--baseline: .25rem;
	--marker-size: 1.75rem;
}
.text:not(.description) {
	font: var(--text-font, var(--body-font));
}

.text {
	--description-margin: calc(-1*(var(--space-xxxs) + var(--space-xxs))) 0 var(--space-lg);
	--link-decoration: var(--accent-light) underline solid 2px;
	--link-color: var(--text-i);
	--link-display: inline;
	--p-margin: 0 0 calc(var(--baseline)*8);
	--list-margin: var(--p-margin);
	--h2-size: var(--fs-larger);
	--h3-size: var(--fs-large);
	--h2-margin: 0 0 calc(var(--baseline)*8.5);
	--h3-margin: var(--h2-margin);
}

.text :where(.text > :last-child) {
	margin-bottom: 0;
}

.text * + h2, .text *:not(h2) + h3 {
	margin-top: calc(var(--baseline)*14.5);
}

.text :is(h1, h2, h3, h4, h5, h6) {
	position: relative;
}

.markdown strong {
	font-weight: var(--fw-bold);
}

.markdown em {
	font-style: italic;
}

.text blockquote {
	quotes: none;
	position: relative;
	margin: calc(var(--space-xl) - var(--space-xxxs)) 0 calc(var(--space-xl) + var(--space-xxxs)) calc(-2*var(--grid-unit));
	padding: calc(var(--space-lg) - var(--space-xxxs)*3 - var(--border-width)) 0rem calc(var(--space-lg) - var(--space-xxxs) - var(--border-width));
	font-size: var(--fs-large);
	line-height: 2.25rem;
	border-top: var(--border-width) solid var(--accent);
	border-bottom: var(--border-width) solid var(--accent);
}

@media (max-width: 1199px) {
	.text blockquote {
		margin-left: 0;
	}
}

blockquote, q {
	quotes: none;
}

blockquote::after, blockquote::before, q::after, q::before {
	content: "";
}

.text blockquote p {
	margin: 0;
}

.text blockquote cite {
	display: block;
	margin-top: var(--space);
	font-size: var(--fs-initial);
	font-style: normal;
}

.text:not(:has(figure img)) img, .text:has(figure img) figure, .text video, .text .grav-youtube {
	margin-top: calc(var(--space-xl) - var(--space-xxs)/2);
	margin-bottom: calc(var(--space-xl) + var(--space-xxs)/2);
}

.text figure:has(img), .text figure:has(video) {
	grid-gap: var(--space-md);
	display: grid;
	grid-template-columns: repeat(1,1fr);
}

:where( .text figure p) {
	margin: 0 !important;
}

.text:has(figure) figcaption {
	font-size: var(--fs-small);
	line-height: 1.25rem;
	color: var(--text-ii);
	--icon-size: 1.25rem;
	--icon-margin: 0 var(--space-sm) 0 0;
	--icon-align: baseline;
}

.text table {
	margin: var(--space-xxxs) 0 var(--space-md);
	font-size: var(--fs-small);
	line-height: 1.5rem;
	--body-line: 1.5rem;
}

/*----------------------------------------------------------------
 Content & Text List Style
----------------------------------------------------------------*/
#content {
	--list-margin: 0 0 var(--p-margin);
}

#content ol {
	counter-reset: li;
}

.text ol > li::before, .text ul > li::before, ul.--disc > li::before, ul.--circle > li::before, ol.--upper-roman li::before {
	position: absolute;
	display: inline-block;
	color: var(--accent);
	left: 0;
	top: 0;
}

.text ol > li::before {
	counter-increment: li;
	content: counter(li, lower-alpha )".";
	min-width: 1.5rem;
	font-weight: var(--fw-medium);
	font-size: inherit;
	text-align: center;
}

.text ol ol > li:not(ul>li)::before {
	content: counters(li,".",lower-alpha )".";
}

.text ol.--upper-roman li::before {
	counter-increment: li;
	content: counters(li,".",upper-roman)".";
	min-width: 1.5rem;
	font-weight: var(--fw-medium);
	font-size: var(--fs-medium);
}

.text ul li::before, ul.--disc li::before, ul.--circle li::before {
	content: '';
	top: calc(var(--body-line)/2 - var(--disc-size)/2);
	left: calc(var(--marker-size)/2 - var(--disc-size)/2);
	background-color: currentColor;
	border: var(--border-width) solid currentColor;
/*	border-radius: 50%; */
	width: var(--disc-size);
	min-width: auto;
	height: var(--disc-size);
	--disc-size: .375rem;
	--border-width: 1px;
}

.text ul ul li::before, .text ol ul li::before, ul.--circle li::before {
	background-color: transparent;
}

#content ol.--round > li::before {
	content: counters(li,'');
	min-width: var(--marker-size);
	height: var(--marker-size);
	border: .125rem solid rgba(var(--accent-rgb),.64);
	border-radius: 2rem;
	font-size: var(--fs-smaller);
	line-height: calc(var(--marker-size) - .25rem);
	margin-top: .125rem;
	text-align: center;
}

.text ol ol, .text ol ul, .text ul ul, .text ul ol {
	margin: calc(var(--baseline)*3) 0;
}

.text li {
	padding-left: calc(var(--marker-size) + var(--space));
}
.text li:not(li:last-of-type) {
	margin-bottom: calc(var(--baseline)*2);
}
/*----------------------------------------------------------------
 Tip
----------------------------------------------------------------*/
/* Tooltip
----------------------------------------*/
.tip {
	position: absolute;
	top: calc(-1*var(--space-xs));
	left: 50%;
	white-space: normal;
	margin: auto;
	opacity: 0;
	visibility: hidden;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	clip-path: inset(50%);
}

.text .--with\:tip {
	--btn-font-size: var(--fs-initial);
	--btn-bg: transparent;
	--btn-line: calc(1.75rem - var(--border-width));
	--btn-padding: 0 var(--space-xs);
	gap: var(--space-xs);
	display: inline-block;
	--icon-size: 1.25rem;
	--icon-margin: 0 ;
	--icon-fill: var(--text-i);
	--overlay-inset: calc(-1*var(--space-xxs));
	--btn-radius: var(--space-xs);
	--border-width: 1px;
	--border-color: var(--text-ii);
	--btn-line: inherit;
}
.text .--with\:tip:has(.tip-label) { --btn-padding: 0 var(--space-xxs) 0 var(--space-xs); }
.text .--with\:tip > * {
	display: inline-block;
}

.text .--with\:tip .tip-label {
	border-bottom: var(--border-width) dotted var(--border-color);
}

.text .tip-label + span > .icon {
	--icon-margin: 0 0 0 var(--space-xs);
}

.text .tip-label + span:has(.icon) {
	margin: calc(-1*(var(--icon-size)/4)) 0;
}

/*----------------------------------------------------------------
 Content Section -- Chapter
----------------------------------------------------------------*/
.section > header {
	--wrap: nowrap;
	justify-content: space-between;
	padding-block: var(--section-header-padding-block);
	--section-header-padding-block: var(--space-xs) calc(var(--space-lg) + var(--space-sm));
	--h2-margin: 0;
	--section-title-margin: 0;
}

.section-title {
	margin: var(--section-title-margin, var(--h2-margin));
	--h2-margin: var(--space-xs) 0 calc(var(--space-lg) + var(--space-sm)) 0;
}

/* Chapter text
--------------------------------*/
.chapter #text {
	order: 1;
	margin-top: var(--space-sm);
	--collapsible-max-height: calc(var(--space)*6);
}

.chapter #text.collapsible + button[aria-controls^="text"]{
	order: 2;
}

.chapter #text:not(.--is-collapsed) {
	margin-bottom: var(--space-xxxl);
}

/* Text hidden
--------------------------------*/
.collapsible.--is-collapsed:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	background: linear-gradient(to bottom,transparent, var(--overview-bg) 100%);
}
.collapsible:not(.--is-expanded).--is-collapsed::after {
	height: calc(var(--collapsible-max-height)/8);
	min-height: var(--space-xl);
}
.collapsible:not(.--is-expanded).--is-collapsed {
	position: relative;
	max-height: var(--collapsible-max-height);
	overflow: hidden;
/*	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;*/
}
/*
.collapsible:not(.grid):not(.flex):not(.flex-col):not(.--is-expanded).--is-collapsed {
	display: -webkit-box;
}
*/
.collapsible + button{
	display: flex;
	margin-block: var(--space-lg) var(--space-xxxl);
	margin-inline: auto;
	--btn-hover-shadow: var(--shadow-i);
}

/*----------------------------------------------------------------
  Cases
----------------------------------------------------------------*/
/* Tile
----------------------------------------*/
:root {
	--tile-title-color: var(--heading-color);
	--tile-title-size: var(--fs-large); 
	--tile-title-line: 1.333333333333333; /*2rem*/
	--tile-title-margin: calc(var(--space-sm) - var(--space-xxxs)) 0 0;
	--tile-font-size: var(--fs-smaller);
	--tile-line: 1.5rem;
	--tile-color: var(--text-ii);
	--tile-shadow: none;
	--tile-hover-shadow: none;
	--tile-min-height: auto;
	--tile-radius: 0;
}

.tile {
	position: relative;
	padding: var(--tile-padding);
	background: var(--tile-bg);
	color: var(--tile-color);
	font-size: var(--tile-font-size);
	line-height: var(--tile-line);
	box-shadow: var(--tile-shadow);
	min-height: var(--tile-min-height);
	border-radius: var(--tile-radius);
	flex: 0 0 100%;
	aspect-ratio: var(--tile-ratio, auto);
}
.tile:has(.inner-box) {
	padding: 0;
}

.tile:has(.inner-box) .inner-box {
	padding: var(--tile-padding);
	flex: 0 0 100%;
}

a.tile:before { border-radius: var(--tile-radius); }

.tile:hover::before, .tile:focus::before, .tile:active::before {
	background: var(--tile-hover-overlay);
}

.tile:hover, .tile:focus, .tile:active {
	box-shadow: var(--tile-hover-shadow);
	color: var(--tile-hover-color, var(--tile-color));
}

.tile.--i {
	--tile-bg: var(--accent-light);
	--tile-color: var(--text-inverse-ii);
	--tile-title-color: var(--text-inverse-i);
	--tile-color: var(--text-inverse-ii);
	--icon-fill: var(--text-inverse-i);
	--link-hover-color: var(--base);
	--link-color: var(--text-inverse-i);
}

.tile.--ii {
	--tile-bg: var(--attention--b);
	--hover-overlay: var(--hover-overlay);
}
.tile.--inverse {
	--tile-bg: var(--base-100);
	--tile-title-color: var(--text-inverse-i);
	--tile-color: var(--text-inverse-ii);
	--hover-overlay: var(--hover-overlay);
}

.tile.--inverse button.--ii, .tile.--inverse btn.--ii {
	--icon-fill: var(--text-inverse-i);
	--btn-bg: var(--base-80);
	--btn-hover-bg: var(--base-64);
}

.tile.--hover\:overlay:hover:before, .tile.--hover\:overlay:focus:before, .tile.--hover\:overlay:active:before {
	background: var(--hover-overlay);
}

.tile .eyebrow {
	margin: calc(var(--space-xs) + var(--space-xxs)) 0 calc(var(--space-xxs));
	align-self: start;
}

.tile .title {
	margin: var(--tile-title-margin);
	font-size: var(--tile-title-size);
	position: relative;
	line-height: var(--tile-title-line);
	color: var(--tile-title-color);
}

.tile .icon.--action {
	position: absolute;
	right: var(--space);
	transition: right .1s cubic-bezier(.75, 0, .125, 1);
	bottom: var(--space);
}

.tile:hover .icon.--action {
	right: calc(var(--space) - var(--space-xs));
}

.tile .title.--sm {
	--tile-title-size: var(--fs-medium);
	--tile-title-margin: 0;
}

.tile .title a {
	z-index: 5;
	--link-hover-decoration: underline;
}

.tile .summary {
	margin: calc(var(--space-md) - var(--space-xxxs)) 0 calc(var(--space-sm) + var(--space-xxs));
}

.tile .footer {
	font-weight: var(--fw-medium);
	display: flex;
	padding-top: var(--space);
	align-items: flex-end;
	margin-top: auto;
}

/* Aspect ratio / old way
----------------------------------------*/
:root {
	--ratio-percentage: 133.33333%;
}

.ratio {
	position: relative;
	overflow: hidden;
}

.ratio::before {
	content: "";
	float: left;
	inline-size: 1px;
	margin-inline-start: -1px;
	position: relative !important;
	height: 0;
	padding-bottom: var(--ratio-percentage);
}

.ratio.--3\/2::before {
	--ratio-percentage: 66.666667%;
}

.ratio.--video::before, .ratio.--16\/9::before {
	--ratio-percentage: 56.25%;
}

.ratio * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ratio img, .ratio video {
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: 50% 0%;
	   object-position: 50% 0%;
	transition: opacity 0.16s;
	color: var(--text-ii);
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Case list tiles
----------------------------------------*/
.tile .header {
	--template-cols: 1fr auto;
	--gap-x: var(--space-md);
	--col: 1/2;
}

.tile .header * {
	--col: 1/2;
}

.tile .header .client-logo {
	-o-object-fit: contain;
	   object-fit: contain;
	max-height: 100%;
	display: flex;
	max-width: 8rem;
	height: 3rem;
	align-self: center;
	--col: 2/3;
	--row: 1/4;
	justify-self: end;
}

@media (max-width: 767px) {
	@media(orientation: portrait) {
		.client-logo {
			max-width: 5rem;
			height: 2.5rem;
		}
	}
}

.client-name {
	margin: calc(var(--space) - var(--space-xxs) + var(--space-xxxs)) 0 calc(var(--space-xxs) - var(--space-xxxs));
	color: var(--tile-color-strong, var(--text-i));
}

.case-result {
	color: var(--accent);
	font-size: var(--fs-larger);
	padding-bottom: var(--space-xxs);
}

.case-result span {
	font-size: var(--fs-smaller);
	margin-left: var(--space-xs);
}

/*----------------------------------------------------------------
  Support widget / important
----------------------------------------------------------------*/
#support {
	position: fixed;
	min-width: var(--floating-btn-size);
	min-height: var(--floating-btn-size);
	z-index: 150;
	--floating-btn-size: 3.5rem;
	--icon-size: 1.75rem;
	right: var(--floating-btn-offset);
	bottom: calc(var(--nav-height) + var(--space));
	transition: transform 0.24s ease-in-out;
	--floating-btn-offset: calc(var(--grid-unit)*1);
}

@media (min-width: 1200px) {
	#support {
		top: unset;
		bottom: var(--floating-btn-offset);
		right: var(--floating-btn-offset);
		--floating-btn-offset: calc(var(--grid-unit)*1 - var(--floating-btn-size));
	}
}

/*----------------------------------------------------------------
  Components
----------------------------------------------------------------*/
details summary::-webkit-details-marker, details summary::marker {
	display: none;
	font-size: 0;
}

details.--accordion .btn {
	width: 100%;
	justify-content: start;
	white-space: normal;
	--icon-margin: 0 var(--space-md) 0 0;
	--btn-radius: 0;
	--btn-bg: transparent;
	--btn-padding: var(--space-md) var(--space) var(--space-md) 0;
	--icon-size: 2rem;
	--icon-fill: var(--accent);
	--outline-offset: 0;
}

 details.--accordion .icon.--plus, details.--accordion .icon.--plus:before{
	will-change: transform;
	transition: transform .16s cubic-bezier(.75, 0, .125, 1);
}

details.--accordion summary:hover .icon.--plus {
	transform: rotate(180deg);
}

details.--accordion[open] summary .icon.--plus:before {
	transform: rotate(90deg) scaleX(0);
}

details .title {
	margin: 0 !important;
	font-size: var(--btn-font-size);
	color: var(--btn-color);
	display: inline;
	flex: 1;
}

details .panel {
	position: relative;
	overflow: hidden;
	padding: var(--space-md) var(--fluid-right) var(--space-lg) calc( var(--icon-size) + var(--space-md));
}

details summary-teaser {
	flex: 1 1 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--fs-initial);
	padding: calc(var(--space-sm)) calc(var(--grid-unit)*1 - var(--gap-x)) var(--space-xxxs) calc( var(--icon-size) + var(--space-md));
	margin-bottom: calc(-1*var(--space-xxxs));
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

details[open] summary-teaser {
	display: none;
}

details.--with\:teaser summary {
	flex-wrap: wrap;
}

/* Link list
----------------------------------------*/
.link-list a:not(.tile) {
	padding: var(--space-sm) 0;
	width: 100%;
	font-size: var(--fs-medium);
	font-weight: var(--fw-normal);
	--link-color: var(--text-i);
	--outline-offset: calc(-1*var(--outline-width));
}
.link-list a:not(.tile) .title {
	font-weight: var(--link-list-weight, var(--fw-normal));
	font-size: var(--link-list-title-size, var(--fs-medium));
	margin-block: var(--link-list-title-margin, 0);
}

.link-list a .icon {
	position: absolute;
	right: var(--space);
	margin: auto;
	top: 0px;
	bottom: 0px;
}

:root {
	--headshot-size: var(--space-xl);
}

.meta-list .people {
	padding-top: calc(var(--headshot-size) + var(--space-sm));
	position: relative;
	gap: 0 var(--space-xs);
	display: flex;
}

.meta-list .people dd {
	position: unset; color: var(--text-i);
}

.meta-list .people .headshot {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: var(--headshot-size);
	height: var(--headshot-size);
	overflow: hidden;
	border-radius: 50%;
	margin: 0 0 var(--space-xs) 0;
	background: var(--tile-bg);
	border: var(--border--base);
	--ratio-percentage: var(--headshot-size);
}

.meta-list .people dd + dd > .headshot {
	margin-left: calc(var(--headshot-size)/4*3);
}