@charset "utf-8";

:root {
	--br: 0.8rem;
	--br_less: calc(var(--br) * 0.6);
	--br_more: calc(var(--br) * 1.4);
	
	--m: 80px;
	--n: 146px;
	--n: clamp(65px, calc(65px + (150 - 65) * ((100vw - 355px) / (1920 - 355))), 150px);
	
	--n_vpmax: 1700;
	--n_vpmin: 320;
	--n_max: 160;
	--n_min: 80;
	--n: clamp(var(--n_min) * 1px, calc(var(--n_min) * 1px + (var(--n_max) - var(--n_min)) * ((100vw - var(--n_vpmin) * 1px) / (var(--n_vpmax) - var(--n_vpmin)))), var(--n_max) * 1px);
	
	--hmain: 84px;
	--hmain_scroll: 56px;

	--hic_width: 18px;
	--hic_height: 7px;
	--hic_bar_heith: 2px;
	--hic_bar_nth2: none;
	--hic_bar_br: 0;

	--box_mini: 400px;
	--box_small: 520px;
	--box: 740px;
	--box_medium: 960px;
	--box_large: 1080px;
	--box_full: 1480px;
	
	--move_in: 0.45s cubic-bezier(.65, 0, .3, 1);
	--fade_in_up: 30%;
	--fade_in_up_f: 4rem;
	
	--loader_size: 2.0rem;
	--loader_border_width: 0.3rem;
	
	--focus_outline: none;
	--focus_boxshadow: inset 0 0 0 1px white;
}


:root {
	--d: #111e35; /* #111e35 | #0a1934 */
	--d: hsl(220deg 46% 13%);
	--d40: hsl(220deg 50% 9%);
	--d30: hsl(220deg 60% 7%);
	--d_header: hsl(220deg 28% 9% / 80%);
	--d_header: hsl(220deg 45% 7% / 80%);
	--d_hidemenu: hsl(220deg 55% 9% / 98%);
	--d_minor: hsl(220deg 30% 13%);
	--d_low: hsl(220deg 28% 9%);
	
	--prim10: hsl(210deg 100% 3%);
	--prim20: hsl(210deg 100% 12%);
	--prim30: hsl(210deg 100% 20%);
	--prim40: hsl(210deg 100% 27%);
	--prim: hsl(210deg 94% 32%);
	--prim60: hsl(210deg 71% 39%);
	--prim70: hsl(210deg 59% 46%);
	--prim80: hsl(210deg 53% 54%);
	--prim90: hsl(210deg 50% 61%);
	--prim_font: hsl(210deg 84% 71%);
	--prim_font: hsl(210deg 80% 80%);

	--font: white;
	--font_p: hsl(220deg 12% 72%);
	--soft: hsl(220deg 20% 50%);
	--silver: hsl(210deg 45% 80%);
	--b: hsl(220deg 20% 26%);
	--hic_bar_bg: white;
	--mask_background: hsl(220deg 12% 30% / 90%);
	--mask_closable_background: hsl(220deg 35% 7% / 90%);
	--loader_bg: var(--d);
	--loader_color_base: white;
	--loader_color_ind: transparent;
	
	--fail: #c52d4a;
	--success: #17937c;
}

html {
	scrollbar-color: hsl(220deg 16% 47%) var(--d_header);
	scroll-behavior: smooth;
}
body {
	color: var(--font);
	font-family: 'Euclid Circular B', sans-serif;
	font-weight: 400;
	letter-spacing: 0;
	background-color: var(--d);
}
::selection {
	color: var(--prim);
	background-color: white;
}
header, header:before, .logo {
	transition: 0.25s;
}
header, .container {
	max-width: 2000px;
}
header {
	height: var(--hmain);
}
.headspace:before {
	content: "";
	position: relative;
	float: left;
	width: 100%;
	height: var(--hmain);
	z-index: 1;
}
body.start .headspace:before {
	position: absolute;
}
header {
	position: fixed;
    top: 0;
    width: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 599;
	-webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
@keyframes move {
    0%   { opacity: 0; }
	60%  { opacity: 0; }
    100% { opacity: 1; }
}
/*
headspace:before, .sub_header {
	animation: move 1s;
}
*/
header:before {
	content: "";
    position: absolute;
    inset: 0;
    background-color: var(--d_header);
}
.sub_header nav:after {
	content: "";
    position: absolute;
	width: 100%;
	height: 1px;
    left: 0;
    bottom: 0;
    background-color: rgb(255 255 255 / 10%);
}
body.nav_open header:before,
body.nav_open header:after,
body.nav_open header > .logo {
	opacity: 0;
}
.headerscroll header {
	height: var(--hmain_scroll);
}
m, .m {
	font-weight: 500 !important;
}
b, .bold {
	font-weight: 600 !important;
}
strong, .strong {
	font-weight: 700 !important;
}
img.full {
	width: 100%;
}
.sheet img {
	display: inline-block;
}
.sheet span {
    font-size: 1em !important;
}
.br {
	border-radius: var(--br);
}
h1 {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 8.6rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3em;
	margin: 0 0 0.75em 0;
}
h2 {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 5.4rem;
	font-size: min(6.1rem, calc(var(--n) * 0.49));
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3em;
	margin: 0 0 0.8em 0;
}
h2.small {
	font-size: max(3.4rem, min(4.5rem, calc(var(--n) * 0.4)));
	font-weight: 500;
}
h3 {
	font-size: 2.4rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.1em;
	margin: 0 0 1em 0;
}
h4 {
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2em;
	margin: 0 0 1.4em 0;
}
h5 {
	font-size: 1.7rem;
    font-weight: 500;
	letter-spacing: 0;
	line-height: 1.6em;
    margin: 0 0 1em 0;
}
p, ul, ol {
	color: var(--font_p);
    font-size: 1.7rem;
    margin: 0 0 1em 0;
    font-weight: 300;
    line-height: 2em;
    padding-left: 0;
}
p:last-child, ul:last-child, ol:last-child {
	margin-bottom: 0;
}
p + h2, ul + h2, ol + h2 {
	margin-top: 1.25em;
}
p + h3, ul + h3, ol + h3 {
	margin-top: 1.5em;
}
ul {
	list-style-type: none;
}
ol {
	list-style-position: inside;
}
hgroup > p {
	font-size: 1.8rem;
	font-size: min(1.7rem, calc(var(--n) * 0.158));
    font-weight: 300;
	letter-spacing: 0.25rem;
    color: var(--silver);  
}
hgroup > p + h1,
hgroup > p + h2 {
	margin-top: 0;
}
hgroup > p:first-child {
	margin-bottom: 0.75em;
}
.sheet ul li {
	padding-left: 1.6em;
}
.sheet ul li:before {
    content: "•";
    display: inline-block;
    position: absolute;
    margin-left: -1.6em;
    color: var(--prim90);
}
.top {
	height: 68vh;
	min-height: 400px;
}
.logo, .logo_svg  {
	display: block;
	position: relative;
	float: left;
	width: auto;
}
.logo {
	height: 20px;
}
.logo:before {
    content: "";
    position: absolute;
    inset: -1.5rem;
}
.logo_svg {
	height: 100%;
	fill: white;
}
nav ul {
	z-index: 1;
}
header nav {
	position: relative;
	height: 100%;
}
header nav ul {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    height: 100%;
	display: flex;
	gap: 3.0rem;
}
.nav_sub_container:hover ul.sub, ul.sub:hover {
	display: block;
}
header nav ul.sub {
	position: absolute;
    height: auto;
    z-index: -1;
    padding: 25px 0 40px 0;
	display: none;
}
header nav ul.sub:before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100vw;
    height: 200%;
    width: 150vw;
    background-color: white;
	box-shadow: 0 0 60px rgb(0 0 0 / 5%);
	pointer-events: none;
}
header nav ul.sub:after {
	content: "";
	position: absolute;
	left: -20px;
	right: -20px;
	top: -3px;
	bottom: 0;
	z-index: -1;
}
header nav ul.sub li {
	display: block;
	width: max-content;
    margin: 0;
	padding: 0.7em 0;
}
.hidemenu header nav ul.sub li {
	width: auto;
}
header nav ul.sub a {
    font-size: 1.4rem;
    font-weight: 400;
	line-height: 1.6em;
}
header nav li {
	position: relative;
	display: inline-block;
}
header nav li:first-child {
	margin-left: 0px;
}
header nav li:last-child {
	margin-right: 0px;
}
header nav a, header nav a:visited, header nav a:active {
	position: relative;
	display: inline-block;
	height: 100%;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0;
	line-height: 34px;
	color: var(--font);
	display: flex;
	display: inline-flex;
    gap: 7px;
    flex-direction: row;
    align-items: center;
}
header nav a:hover, header nav ul.main > li:hover > a {
	color: var(--prim_font);
	text-decoration: none;
}
header nav a > .icon {
    width: 2rem;
	min-width: 2rem;
	color: var(--font_p);
}
header nav a.active > .icon {
    color: var(--prim_font);
}
.sub_header {
	position: -webkit-sticky;
	position: sticky;
	width: 100%;
	height: 40px;
	background-color: var(--d);
	background-color: hsl(220deg 46% 15% / 85%);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	top: var(--hmain_scroll);
	z-index: 3;
	box-shadow: 0 0 25px rgb(0 0 0 / 35%);
}
.sub_header nav {
	height: 100%;
	width: 100%;
	display: flex;
    justify-content: center;
}
.sub_header nav::-webkit-scrollbar {
    display: none;
}
.sub_header nav ul {
	height: 100%;
	max-width: 100%;
	font-size: 1.2rem;
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 2rem;
	overflow-x: scroll;
	scrollbar-width: none;
}
.sub_header nav ul::-webkit-scrollbar {
    display: none;
}
.sub_header nav li {
	position: relative;
	height: 100%;
}
.sub_header nav a {
	height: 100%;
	display: flex;	
	display: inline-flex;
	align-items: center;
    line-height: 1.25em;
    text-align: center;
	white-space: nowrap;
}
.sub_header nav a.active, .sub_header nav a.clicked {
	color: white;
}
.sub_header:before, .sub_header:after {
    content: "";
    position: absolute;
	top: 0;
	width: var(--m);
	height: 100%;
    z-index: 1;
}
.sub_header:before {
	left: 0;
	background: linear-gradient(90deg, var(--d), transparent);
}
.sub_header:after {
	right: 0;
    background: linear-gradient(90deg, transparent, var(--d));
}
.sub_header nav a:hover,
footer > .legal > a:hover {
	text-decoration: none;
}
nav a:after {
	content: "";
    position: absolute;
    width: 100%;
    background-color: var(--prim70);
    left: 0;
    transition: 0.35s;
	transform: scaleX(0);
}
nav a.active:after, nav a.clicked:after {
	transform: scaleX(1);
}
header nav a:after {
    top: 0;
    height: 3px;
}
.sub_header nav a:after, .sub_header nav a:before {
    bottom: 0;
    height: 1px;
}
nav:has(.clicked) a:not(.clicked):after {
	transform: scaleX(0);
}
nav:has(.clicked) a.active {
	color: inherit;
}
.hidemenu header nav {
	position: absolute;
	padding: var(--n) var(--m);
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	background-color: var(--d_hidemenu);
	opacity: 0;
	z-index: -1;
	pointer-events: none;
	transition: opacity 0.55s;
}
@supports (-webkit-touch-callout: none) {
.hidemenu header nav {
	padding-bottom: calc(var(--n) + 50px);
}
}
.hidemenu nav.triggered {
	opacity: 1;
	pointer-events: auto;
}
.hidemenu header nav ul.main {
	height: auto;
	flex-direction: column;
	align-items: center;
}
.hidemenu header nav li {
	padding: 1.3rem 0;
	margin: 0;
	display: block;
    opacity: 0;
    transform: translateY(50px);
	transition: 0.5s;
    transition-delay: 0s;
}
.hidemenu nav.triggered ul li {
	opacity: 1;
    transform: translateY(0);
	transition-delay: calc(var(--order) * 100ms);
}
.hidemenu header nav a {
	font-size: 2.0rem;
	line-height: 2em;
	flex-direction: column;
	text-align: center;
}
.hidemenu header nav a > .icon {
    width: 2.4rem;
    min-width: 2.4rem;
}
.hidemenu header nav a:after {
	display: none;
}
.hidemenu header nav ul.sub {
    position: relative;
    z-index: 0;
    padding: 0;
    display: block;
}
.hidemenu header nav ul.sub:before, .hidemenu header nav ul.sub:after {
	display: none;
}
.hidemenu header nav ul.sub a {
	font-size: 1.4rem;
	line-height: 1.2em;
}
.center_mum {
	display: flex !important;
    align-items: center;
    justify-content: center;
}
.preload {
	background-color: var(--d30);
}
.preload > .logo_svg {
	width: 13rem;
	fill: hsl(220deg 20% 25%);
}
.preload > .logo_svg > g:first-child,
.header_video_container > .overlay.misc > figure > .logo_svg > g:first-child {
	transform: translateX(28%);
}
.preload > .logo_svg > g:last-child,
.header_video_container > .overlay.misc > figure > .logo_svg > g:last-child {
	opacity: 0;
}
/*
animation: pg1 0.3s forwards;
animation: pg2 0.6s forwards;
@keyframes pg1 {
    to { transform: none; }
}
@keyframes pg2 {
    to { opacity: 1; }
}
*/








#message {
	color: var(--font);
	font-size: 1.3rem;
	font-weight: 400;
	padding: 15px var(--m);
	border-radius: var(--br);
    transform: translate(-50%, -2.5rem);
}
.fail {
	background-color: var(--fail);
}
.success {
	background-color: var(--success);
}

.sumsy_mode_mum {
	position: fixed;
	left: -15px;
	top: 50%;
	margin-top: -22px;
	width: 28px;
	height: 44px;
	background-color: #404751;
	border-radius: 0 5px 5px 0;
	transition: 0.05s linear;
	box-shadow: 0 1px 2px rgb(0 0 0 / 80%);
	z-index: 1;
}
.sumsy_mode_mum:hover {
	background-color: #282E36;
	left: -10px;
}
.sumsy_mode_mum svg {
	fill: #FFFFFF;
	width: 28px;
	height: 44px;
}
.sumsy_mode_mum circle {
	opacity: 0.20;
}
.sumsy_iframe {
	position: fixed;
	top: 0;
	right: -100%;
	margin: 0;
	padding: 0;
	border: 0;
	height: 100%;
	z-index: 999;
	transition: 0.5s ease-in-out;
	box-shadow: 0 0 20px rgb(0 0 0 / 30%);
}
.sumsy_blur {
    opacity: 0.4;
	-webkit-filter: blur(2px) grayscale(100%);
	filter: blur(2px) grayscale(100%);
}
.sumsy_blur .container {
	pointer-events: none;
}
.mask.popup_container {
	transition: opacity 0.2s ease;
    padding-top: calc(var(--n) / 2);
    padding-bottom: calc(var(--n) / 2);
}
.popup {
    max-width: 600px;
	max-height: 100%;
    padding: calc(var(--n) / 2) var(--m);
    background-color: var(--d_minor);
	border-radius: var(--br);
    box-shadow: 0 5px 0 hsl(220deg 35% 5% / 20%);
	animation: fade_in_up_f var(--move_in) forwards;
}
.close:hover:before, .close:hover:after {
	background-color: var(--prim);
}





footer:before {
    content: "";
    position: absolute;
    inset: 0;
	top: -100%;
    background: linear-gradient(0deg, hsl(220 55% 5%), hsl(220 32% 20%));
	background: linear-gradient(0deg, var(--prim), var(--d));
	background: linear-gradient(0deg, var(--prim), hsl(220deg 46% 13% / 0%));
	z-index: -2;
}
.mountains:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
    opacity: 0.7;
	opacity: 1;
    background: linear-gradient(0deg, black, transparent);
}
.mountains {
	-webkit-user-select: none;
	user-select: none;
}
.mountains img {
	object-fit: cover;
	aspect-ratio: 1 / 0.255;
}
footer .legal {
	position: absolute;
	bottom: 0;
	color: var(--soft);
	color: hsl(220 12% 60%);
	font-size: 1.3rem;
	font-weight: 500;
    padding-bottom: 2rem;
	display: flex;
	gap: 2rem;
}
footer .legal > span {
	flex: 1;
}
.render_container,
.shot_container {
	position: absolute;
	display: flex;
	justify-content: center;
	transform: translateY(var(--ty));
	opacity: 0;
}
.render_container picture,
.shot_container picture {
    width: var(--sx);
	display: block;
}
.render_container picture > img,
.shot_container picture > img {
	width: 100%;
	transform: translate3d(0, 0, 0);
}
.render_container picture > img {
	filter: drop-shadow(0 40px 60px rgb(0 0 0 / 95%));
}
.device {
	overflow: hidden;
}
.device.shot {
	margin-top: var(--n);
}
.device:last-child {
	padding-bottom: var(--n);
}
.device_fig_container {
	display: flex;
    flex-direction: column;
    align-items: center;
	padding: calc(var(--n) / 1.5) 0;
}
.device_fig {
	--width: min(95%, 1743px);
	width: var(--width);
	margin-top: calc(var(--width) * var(--mt) / -100);
	margin-bottom: calc(var(--width)* var(--mb) / -100);
}
.device_fig.r_anm > .render_container,
.device_fig.r_anm > .shot_container {
	animation-name: fade_in;
	animation-fill-mode: both;
}
.device_fig.r_anm > .render_container {
	animation-duration: 1s;
	animation-delay: 2s;
}
.device_fig.r_anm > .shot_container {
	animation-duration: 2s;
	animation-delay: 1.5s;
}
.device_fig {
	-webkit-user-select: none;
	user-select: none;
}
.outline_container > img {
	position: absolute;
	opacity: 0;
}
.device_fig.r_anm > .outline_container > img {
	animation-name: ofade;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}
@keyframes ofade {
	45%		{ opacity: 0; }
	66.67%	{ opacity: 0.5; }
	100%	{ opacity: 15%; }
}
.outline_container > svg.outline_anm {
	position: absolute;
	display: block;
	fill: none;
	stroke: white;
	stroke-miterlimit: 2;
	stroke-width: 2;
	transform: translateZ(0); 
}
.device_fig.r_anm > .outline_container > svg.outline_anm > path {
	will-change: stroke-dashoffset;
}
.device_fig.r_anm > .outline_container > svg.outline_anm > path.draw {
	animation: draw 2.3s cubic-bezier(.75,0,.15,1) forwards;
}
@keyframes draw {
	50%  { opacity: 1; }
	100% { opacity: 0; stroke-dashoffset: 0; }
}
.outline_container > svg.outline {
	z-index: 1;
	opacity: 0.1;
	transition: 1s;
}
.outline_container > svg.outline > a {
	cursor: zoom-in;
}
.outline_container > svg.outline path {
	fill: white;
}
.device_fig.r_anm > .outline_container > svg.outline {
	opacity: 0;
}
.device_desc {
	z-index: 1;
}
.device_desc hgroup > p {
	text-transform: uppercase;
}
.device_desc hgroup > p > span {
	text-transform: none;
}
.device_actions {
	display: flex;
    justify-content: center;
    gap: 2rem;
	z-index: 1;
}
.device_actions > button, .device_actions > a.button {
	width: 21rem;
}
button.ghost, a.button.ghost {
    border-color: var(--prim90);
}





.iconlist, .titlelist {
	font-size: 1.5rem;
}
.iconlist .title, .titlelist .title {
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--font);
}
.titlelist .title {
    margin-bottom: 1.2rem;
    line-height: 1.5em;
}
.iconlist li {
	position: relative;
    padding: 1.15em 0;
	display: grid;
    grid-template-columns: 3.5rem 1fr 1.8rem;
    grid-column-gap: 1.5rem;
    grid-auto-flow: column;
}
.iconlist li > span,
.iconlist li > address {
	line-height: 1.9rem;
    padding: 0.225rem 0;
	color: var(--font_p);
	grid-column-end: span 2;
}
.iconlist li:first-child {
	padding-top: 0;
}
.iconlist li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.iconlist div {
    grid-column-end: span 1;
    grid-row-end: span 2;
    display: flex;
    align-items: center;
}
.iconlist .icon {
	width: 2.4rem;
	height: 2.4rem;
	stroke-width: 1.3;
	color: var(--prim_font);
}
/*
.sec_gradient:after {
	content: "";
	position: relative;
	float: left;
	width: 100%;
	height: var(--n);
}
*/
.sec_gradient:before {
	content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 650px;
    background: linear-gradient(0deg, hsl(210deg 100% 27% / 60%), var(--d));
    z-index: -1;
}
.contact_two_col {
	display: flex;
	align-items: stretch;
    gap: var(--m);
}
.contact_infobox {
	flex: 1 0 30rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.soc_container {
	background-color: var(--prim40);
	border-radius: var(--br);
}
.soc_container a {
	display: flex;
	justify-content: center;
	padding: 1.7rem 0;
}
.soc_container img {
	opacity: 1;
	max-width: 10rem;
}
.soc_container > a:hover > img {
	opacity: 0.75;
}
.map_container {
	flex: auto;
	background-color: hsl(220deg 50% 9% / 30%);
	z-index: 1;
}
#map {
	height: 400px;
	z-index: 0;
}
.maps_info {
    color: var(--d);
	font-weight: 400;
	padding: 0 12px 2rem 0;
}
.gm-style .gm-style-iw-d {
	overflow: hidden !important;
}
.maps_info,
#cookie_banner h1,
#cookie_banner h2 {
	font-family: 'Euclid Circular B', sans-serif;
}
.consent_wall p {
	font-size: 1.4em;
	font-weight: 400;
	padding: 0 var(--m);
}

#device_learn_more .popup {
	border-top: 1.4rem solid var(--prim60);
	border-bottom: 1.4rem solid var(--d_minor);
	max-width: var(--box_medium);
}
p.small,
ul.small,
ol.small,
#device_learn_more .popup p,
#device_learn_more .popup ul,
#device_learn_more .popup ol {
	font-size: 1.5rem;
}
p.smaller,
ul.smaller,
ol.smaller {
	font-size: 1.4rem;
}
.device_learn_more_header {
	display: flex;
    align-items: center;
    margin-bottom: calc(max(5rem, min(4.5rem, calc(var(--n)* 0.4))));
    justify-content: space-between;
	gap: 3rem;
}
.device_learn_more_header > h2 {
	margin-bottom: 0;
    flex: 1;
}
#device_learn_more .popup video {
	aspect-ratio: 16/9;
}
#device_learn_more .popup video + .sheet {
	margin-top: 4rem;
}
.emphasis > h2 {
	font-weight: 500;
    margin: 0;
    display: flex;
    justify-content: space-between;
    padding-right: 2.25em;
}
.emphasis > h2:after {
    content: "\"";
    font-size: 4em;
    position: absolute;
    right: 0;
    line-height: 0;
    padding-top: 0.38em;
    color: hsl(220deg 33% 19%);
	transform: translateY(-35%);
}
.bg_prim .emphasis > h2:after {
	color: var(--prim30);
}
.fgrad {
	background: linear-gradient(90deg, white, hsl(210 100% 50%));
    background-clip: text;
    color: rgb(255 255 255 / 70%);
}
video {
	background-color: var(--d40);
}
.header_video_container {
	margin-top: 0;
	height: 100vh;
	height: 100svh;
	max-height: 1080px;
}
#header_video {
	object-fit: cover;
    height: 100%;
	z-index: -1;
	filter: contrast(1.3) grayscale(0.8) brightness(0.55);
}
.header_video_wrap:before {
    content: "";
    position: absolute;
	inset: 0;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 5 5"><circle fill="white" cx="2.5" cy="2.5" r="0.5"/></svg>');
	opacity: 0.12;
}
.header_video_container > .overlay.cover {
	background-color: var(--d_minor);
	animation-duration: 1400ms;
}
.header_video_container > .overlay.misc > span {
    font-family: 'Barlow Condensed', sans-serif;
	font-size: calc(var(--n) * 0.4);
    font-weight: 500;
}
.header_video_container > .overlay.misc > figure > .logo_svg {
	width: 25rem;
}
.header_video_container > .overlay.misc,
.header_video_container > .overlay.misc > .scroll_indicator {
	display: flex;
	justify-content: center;
    align-items: center;
}
.header_video_container > .overlay.misc {
	transition: opacity 0.75s;
}
.headerscroll .header_video_container > .overlay.misc {
	opacity: 0;
}
.pic_container > .box {
	border-radius: var(--br);
	overflow: hidden;
}
ul.certificates {
	display: flex;
	justify-content: space-between;
}
ul.certificates img {
	width: 100%;
	max-width: 21rem;
}
.easy {
	animation-duration: 2.6s;
}
figure {
	margin: 0;
}
#about {
	background-color: var(--d30);
}
.cards {
	--width: 320px;
	--padding: 4rem 4.5rem;
}
#swiper_cards {
	--swiper-pagination-color: var(--prim90);
	--swiper-pagination-bullet-inactive-color: white;
}
#swiper_cards .swiper-slide {
	width: var(--width);
	height: auto;
}
.cards {
	display: flex;
	gap: 3rem;
}
.card {
	display: flex;
	flex-direction: column;
    align-items: center;
	gap: 3rem;
	padding: var(--padding);
	background-color: var(--d);
	border-radius: var(--br);
	width: 100%;
	height: 100%;
}
.card > figure {
	width: 9rem;
	height: 9rem;
	border-radius: 50%;
	background-color: var(--d_low);
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	margin: 1rem 0;
}
.card > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card > figure > svg {
	stroke-width: 1;
	color: var(--prim_font);
	width: 3.0rem;
}
.devices_teaser {
	z-index: 4;
}
.bg_prim {
	background-color: var(--prim);
}

#device-ddof:before {
    content: "";
    position: absolute;
    inset: 0;
    bottom: auto;
    height: 30%;
    background: linear-gradient(0deg, #000000, var(--d30));
}




@media (min-aspect-ratio: 1/1) and (hover: hover) and (pointer: fine) {
.header_video_container > .overlay.misc > .scroll_indicator {
	position: absolute;
	width: 2.1rem;
	height: 3rem;
	bottom: calc(0.3 * var(--n));
	border-radius: 10px;
	background-color: rgb(255 255 255 / 0.05);
}
.header_video_container > .overlay.misc > .scroll_indicator:after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: white;
	transform: translateY(-100%);
	animation: scroll_indicator 1s ease-out infinite alternate;
	pointer-events: none;
}
.header_video_container > .overlay.misc > .scroll_indicator:hover {
	background-color: rgb(255 255 255 / 0.15);
}
@keyframes scroll_indicator {
	100% { transform: translateY(100%); }
}
.header_video_wrap:after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 30%;
    background: linear-gradient(0, black, transparent);
}
}
@media (max-aspect-ratio: 1/1) {
.header_video_container {
	aspect-ratio: 1/1;
	height: auto;
	max-height: none;
}
body.start .headspace:before {
	position: relative;
}
}
@media screen and (hover: hover) and (pointer: fine) {
button.ghost:hover, a.button.ghost:hover {
    border-color: var(--button_ghost_bg_hover);
}
.sub_header nav a:hover,
footer > .legal > a:hover {
	color: white;
}
header .logo_svg > g {
	transition: 0.3s;
}
header .logo:hover > .logo_svg > g:first-child {
	transform: translateX(28%);
}
header .logo:hover > .logo_svg > g:last-child {
	opacity: 0;
}
}
@media screen and (hover: none) and (pointer: coarse) {
.nav_sub_container > a {
	pointer-events: none;
}
.hidemenu .nav_sub_container > a {
	pointer-events: auto;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) {

}

@media screen and (max-width: 1600px) {
.mountains img {
	height: 400px;
	aspect-ratio: auto;
}
}
@media screen and (max-width: 1360px) {
:root {
	--m: 74px;
}
.device_fig {
	--width: calc(100% + (1300px - 100vw) * 0.3);
}
}
@media screen and (max-width: 1260px) {
:root {
	--m: 67px;
}
}
@media screen and (max-width: 1200px) {
:root {
	--hmain: 78px;
}
.mountains img {
	height: 380px;
}
}
@media screen and (max-width: 1100px) {
:root {
	--m: 5.5vw;
}
.contact_two_col {
    gap: var(--m);
}
}
@media screen and (max-width: 999px) {
:root {
}
.dn999 {
	display: none;
}
.d999 {
    display: unset;
}
p, ul, ol {
    font-size: 1.6rem;
}
h3 {
    font-size: 2.3rem;
}
.mask.popup_container {
	padding-top: var(--n);
    padding-bottom: 0;
	justify-content: flex-end;
}
.popup {
	padding: calc(var(--n) / 1.5) var(--m);
    max-width: none;
	border-radius: var(--br) var(--br) 0 0;
}
.pic_container.pic_arhq {
	padding-left: 0;
	padding-right: 0;
	/*
	padding-bottom: 0;
	*/
}
.pic_container.pic_arhq > .box {
	border-radius: 0;
}
.contact_two_col {
	align-items: center;
	gap: calc(var(--n) / 1.5);
    flex-direction: column-reverse;
}
.contact_infobox {
    flex: auto;
	width: 100%;
    max-width: 30rem;
	gap: calc(var(--n) / 1.5);
}
}
@media screen and (max-width: 880px) {
body {
    -webkit-text-size-adjust: 100%;
}
.dn880 {
	display: none;
}
.d880 {
    display: unset;
}
.device_actions {
    gap: 1.5rem;
}
.device_actions > button, .device_actions > a.button {
	width: 19.5rem;
}
.mountains img {
	height: 350px;
}
ul.certificates {
	justify-content: center;
    flex-wrap: wrap;
}
ul.certificates.box {
	max-width: 54rem;
	gap: 1rem 0;
}
ul.certificates > li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 45%;
}
.emphasis > h2 {
    padding-left: 0.75em;
}
}
@media screen and (max-width: 740px) {
:root {
	--m: 37px;
}
.dn740 {
	display: none;
}
.d740 {
    display: unset;
}
#swiper_cards {
	--swiper-wrapper-left-offset: 0;
	--swiper-wrapper-right-offset: 0;
}
}
@media screen and (max-width: 696px) {
:root {
	--m: 35px;
}
.dn696, .sumsy_iframe, .sumsy_mode_mum {
	display: none;
}
.d696 {
    display: unset;
}
.mountains img {
	height: 320px;
}
.sub_header nav ul {
    justify-content: space-between;
    width: 100%;
}
.cards {
	--width: 300px;
	--padding: 3.5rem 4rem;
}
}
@media screen and (max-width: 620px) {
:root {
	--m: 31px;
}
html {
	font-size: 59.375%;
}
.stretch {
	max-width: none !important;
	width: auto !important;
	margin: auto calc(var(--m) * -1);
}
.dn620 {
	display: none;
}
.d620 {
    display: unset;
}
.emphasis > h2 {
    padding-left: 0.25em;
}
}
@media screen and (max-width: 506px) {
:root {
	--m: 25px;
}
.dn506 {
	display: none;
}
.d506 {
    display: unset;
}
.mountains img {
	height: 300px;
}
.emphasis > h2:after {
    font-size: 3em;
    transform: translateY(-110%);
}
.emphasis > h2 {
	padding-left: 0;
	padding-right: 0;
}
}
@media screen and (max-width: 475px) {
:root {
	--m: 23px;
}
html {
	font-size: 56.25%;
}
.dn475 {
	display: none;
}
.d475 {
    display: unset;
}
.device_actions > button, .device_actions > a.button {
	width: 100%;
}
#map {
    height: 413px;
}
.device_learn_more_header > h2,
.device_learn_more_header > button {
	text-align: center;
}
.device_learn_more_header {
	flex-direction: column;
}
ul.certificates.box {
	gap: 0;
}
.cards {
	--width: 280px;
	--padding: 3rem 3.5rem;
}
}
@media screen and (max-width: 413px) {
:root {
	--m: 20px;
}
.dn413 {
	display: none;
}
.d413 {
    display: unset;
}
.device_actions {
	flex-direction: column;
    align-items: center;
}
.device_actions > button, .device_actions > a.button {
	width: 80%;
}
.mountains img {
	height: 280px;
}
footer .legal > span {
    display: none;
}
footer .legal {
    justify-content: center;
    text-align: center;
	padding-bottom: 3.2rem;
	gap: 1rem 2rem;
}
#map {
    height: auto;
    aspect-ratio: 1 / 1;
}
}
@media screen and (max-width: 380px) {
:root {
	--m: 18px;
}
.dn380 {
	display: none;
}
.d380 {
    display: unset;
}
}
@media screen and (max-width: 355px) {
:root {
	--m: 17px;
}
.dn355 {
	display: none;
}
.d355 {
    display: unset;
}
ul.certificates > li {
	width: 50%;
}
.cards {
	--width: 260px;
}
}
@media screen and (min-width: 2000px) {
.container:before, .container:after {
    content: "";
    position: fixed;
    top: 0;
    width: 50px;
    height: 250px;
    background-color: var(--d);
    z-index: 600000;
}
.container::before {
    transform: translateX(-100%);
}
}