:root {
    --primary-font: 'Roobert';
    --secondary-font: 'RoobertSemiMono';
}

html { height: 100%; scroll-behavior: smooth; }

body {
	width: 100%;
	height: 100%;
	background: var(--neutral-900);
	color: var(--neutral-25);
	font-size: 19px;
	font-family: var(--primary-font), sans-serif;
	font-weight: 400;
    font-variant-numeric: slashed-zero;
    font-feature-settings: "calt" off, "liga";
}

body.scroll-lock-mobile { overflow: hidden; }

* { margin: 0; padding: 0; outline: 0; }

a { color: var(--brand-100); text-decoration: none; }
a img { border: 0; }

input, textarea, select, button { font-family: var(--primary-font), sans-serif; }
input[type="number"] { appearance: textfield; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

strong { font-weight: 700; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

#email { position: absolute; z-index: -100; width: 1px; height: 1px; opacity: 0; }

::selection { background: var(--brand-200); color: var(--neutral-25); }

.wrap { display: flex; flex-direction: column; width: 100%; min-height: 100%; }
.content { display: flex; flex-direction: column; box-sizing: border-box; width: 78vw; max-width: 1748px; padding: 0 24px; }
.content.width-988 { width: 988px; max-width: 100%; }

header { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 30; width: 100%; padding: 40px 0; background: var(--neutral-900); }
header.transparent { position: absolute; top: 0; left: 0; z-index: 30; background: transparent; }
header .content { flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; }
header .logo { display: flex; position: relative; z-index: 30; margin-left: -18px; }
header .logo a { display: flex; }
header .logo img { height: 38.464px; }
header .menu { display: flex; }
header .menu nav { display: flex; }
header .menu nav ul { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 40px; list-style: none; }
header .menu nav ul li { display: flex; justify-content: center; align-items: center; }
header .menu nav ul li a:not(.button):not(.language) { transition: color 0.2s ease-in-out; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; position: relative; z-index: 30; color: var(--neutral-25); font-size: 17px; font-weight: 500; line-height: 17px; text-align: center; }
header .menu nav ul:has(.submenu:hover) li a:not(.button):not(.language),
header .menu nav ul:has(li a:not(.button):not(.language):hover) li a:not(.button):not(.language):not(:hover) { color: var(--neutral-500); }
header .menu nav ul li:has(.submenu:hover) a:not(.button):not(.language) { color: var(--neutral-25) !important; }
header .menu nav ul li .language { color: var(--neutral-300); font-size: 13px; line-height: 13px; font-family: var(--secondary-font), sans-serif; letter-spacing: 1.3px; text-transform: uppercase; }
header .menu nav ul li .language:before { content: "["; }
header .menu nav ul li .language:after { content: "]"; }
header .menu nav ul li .button,
header .menu nav ul li .language { position: relative; z-index: 30; }
header .menu nav ul li .language:not(.active) { display: none; }

header .menu nav ul li .submenu { transition: height 0.4s ease-out; display: flex; flex-direction: column; align-items: center; position: absolute; z-index: 20; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 0; background: var(--neutral-800); overflow: hidden; }
header .menu nav ul li a:hover + .submenu,
header .menu nav ul li .submenu:hover { height: 528px; }
header .menu nav ul li .submenu .inner { flex-grow: 1; display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; margin-top: 128px; padding: 40px 0; border-top: 1px solid var(--neutral-700); }
header .menu nav ul li .submenu .content { justify-content: flex-start; align-items: flex-start; gap: 270px; height: 100%; }
header .menu nav ul li .submenu ul { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; }
header .menu nav ul li .submenu ul li { justify-content: flex-start; padding: 0; }
header .menu nav ul li .submenu ul li a:not(.button):not(.language) { transition: color 0.2s ease-in-out; justify-content: flex-start; color: var(--neutral-25) !important; font-size: 30px; font-weight: 600; line-height: 48px; text-align: left; }
header .menu nav ul li .submenu ul:has(li a:hover) li a:not(.button):not(.language):not(:hover) { color: var(--neutral-500) !important; }

header .menu nav ul li .submenu ul li .submenu-image { transition: opacity 0.2s ease-in-out; opacity: 0; display: flex; position: absolute; top: 0; right: 0; max-width: 100%; height: 100%; pointer-events: none; }
header .menu nav ul li .submenu ul li:hover .submenu-image { opacity: 1; }
header .menu nav ul li .submenu ul li .submenu-image img { max-width: 100%; height: 100%; object-fit: contain; }

header .mobile-menu { display: none; position: relative; width: 26px; height: 26px; margin-right: 6px; background: transparent; border: 0; }
header .mobile-menu:before,
header .mobile-menu:after { transition: transform 0.2s ease-in-out, top 0.2s ease-in-out; content: ""; display: flex; position: absolute; left: 0; width: 100%; height: 2px; background: var(--neutral-25); }
header .mobile-menu:before { top: 7px; }
header .mobile-menu:after { top: 17px; }

header .menu.active + .mobile-menu:before { top: 50%; transform: rotate(-45deg); }
header .menu.active + .mobile-menu:after { top: 50%; transform: rotate(45deg); }

.page-container { flex-grow: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 20; width: 100%; background: var(--neutral-900); }

.hero { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; box-sizing: border-box; width: 100%; height: 40vw; min-height: 900px; padding-top: 128px; }
.hero .content { justify-content: center; align-items: center; gap: 40px; position: relative; z-index: 20; width: 1228px; max-width: 100%; height: 100%; }
.hero .content:has(h1.small) { gap: 0; }
.hero .content h1 { color: var(--neutral-25); font-size: 100px; line-height: 100px; letter-spacing: -2px; text-align: center; }
.hero .content h1.small { font-size: 84px; line-height: 84px; letter-spacing: -1.68px; }
.hero .content p { width: 700px; max-width: 100%; margin-bottom: 14px; color: var(--neutral-25); font-size: 19px; line-height: 28px; text-align: center; }
.hero .content .buttons { justify-content: center; }
.hero .content:has(h1.small) p { width: 960px; margin-top: 22px; }
.hero .content:has(h1.small) .buttons { margin-top: 40px; }
.hero .canvas { display: flex; position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; }
.hero .canvas:after { content: ""; position: absolute; z-index: 15; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, var(--neutral-900) 0%, rgba(0,0,0,0) 100%); }
.hero .gradient { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; }
.hero .pixels-bg { z-index: 20; }
.hero .pixels-bg .pixel { transition: none; animation: pixel 2s cubic-bezier(1, -1, 0, 2) infinite; animation-direction: alternate; animation-delay: calc(0.1s * (var(--pixel-index))); height: 10%; background: var(--neutral-900); }

.page-hero { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 120px 0 110px 0; }
.page-hero:has(.title-slider) { padding-bottom: 40px; }
.page-hero .tagline { margin-bottom: 8px; }
.page-hero .headline { margin-bottom: 10px; font-size: 40px; font-weight: 600; line-height: 40px; letter-spacing: -0.8px; }
.page-hero h1 { color: var(--neutral-25); font-size: 84px; line-height: 100px; letter-spacing: -1.68px; }
.page-hero h1 span { display: inline-block; margin-top: 10px; padding: 0 20px 10px 20px; background: var(--brand-100-t10); color: var(--brand-100); }
.page-hero h1:has(span) { line-height: 90px; }
.page-hero h1 img { margin-left: 20px; }
.page-hero p { width: 960px; max-width: 100%; margin-top: 12px; color: var(--neutral-25); font-size: 19px; line-height: 28px; }
.page-hero .buttons { margin-top: 54px; }
.page-hero .title-slider .item { color: var(--brand-100); }

.page-hero.center { padding-bottom: 160px; }
.page-hero.center .content { align-items: center; width: 1228px; max-width: 100%; }
.page-hero.center h1,
.page-hero.center p { text-align: center; }
.page-hero.center p { margin-top: 36px; }

.page-image { display: flex; position: relative; width: 100%; }
.page-image .gradient { position: absolute; z-index: -10; top: 0; left: 0; width: 100%; height: 100%; }
.page-image img { width: 100%; }

.page { flex-grow: 1; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 200px 0; }
.page + .page { padding-top: 0; }
.page-hero + .page { padding-top: 0; }

.title-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: last baseline; gap: 40px; width: 100%; padding-bottom: 50px; }
.title-container .tagline { margin-bottom: 12px; }
.title-container .column { display: flex; flex-direction: column; }
.title-container h1 { font-size: 60px; line-height: 72px; letter-spacing: -1.2px; }
.title-container h2 { font-size: 60px; line-height: 72px; letter-spacing: -1.2px; text-transform: uppercase; }
.title-container h3 { font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; }
.title-container h4 { font-size: 36px; line-height: 43.2px; letter-spacing: -0.72px; }
.title-container .buttons { margin-top: 46px; }

.title-container:not(:has(.column:nth-child(2))) { justify-content: center; }
.title-container:not(:has(.column:nth-child(2))) .column { align-items: center; }
.title-container:not(:has(.column:nth-child(2))) .tagline,
.title-container:not(:has(.column:nth-child(2))) h2,
.title-container:not(:has(.column:nth-child(2))) h3 { text-align: center; }

.text-container { display: flex; flex-direction: column; width: 100%; }
.table-container + .text-container { margin-top: 10px; }
.text-container h2 { margin-bottom: 20px; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; }
.text-container p + h2 { margin-top: 20px; }
.text-container h2 .number { color: var(--brand-100); font-family: var(--secondary-font), sans-serif; }
.text-container p { margin-bottom: 20px; line-height: 28px; }
.text-container p:last-child { margin-bottom: 0; }
.text-container .button { margin-top: 34px; }
.text-container .link-button { margin-top: 16px; }

.text-container.disclaimer { color: var(--neutral-400); font-size: 16px; }
.text-container.disclaimer p { line-height: 22px; }

.image-container { display: flex; flex-direction: column; width: 100%; }
.image-container img,
.image-container video { width: 100%; }

.images-container { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; }
.images-container .image-container:not(.width-full) { flex-basis: 700px; flex-grow: 1; width: auto; }

.panel-container { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 140px; width: 100%; }
.panel-container + .panel-container { margin-top: 50px; }
.panel-container .panel { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; width: 0; }
.panel-container aside { flex-shrink: 0; display: flex; flex-direction: column; width: 580px; }
.panel-container aside.width-half { width: 50%; }
.panel-container aside h2 { font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; }
.panel-container .panel-image { width: 100%; }

.panel-container.boxed { gap: 0; }
.panel-container.boxed .panel { padding: 60px 90px; background: var(--neutral-800-t50); }
.panel-container.boxed aside img { flex-grow: 1; height: 100%; object-fit: cover; }

.columns-container { display: flex; flex-wrap: nowrap; gap: 20px; width: 100%; }
.columns-container .panel { flex-grow: 1; display: flex; flex-direction: column; width: 0; }
.columns-container aside { flex-shrink: 0; display: flex; flex-direction: column; width: 460px; }
.columns-container aside .tagline:last-child { margin-bottom: 0; }

.projects-overview { display: flex; flex-direction: row; flex-wrap: wrap; width: calc(78vw + 60px); max-width: 1808px; }
.projects-overview .item { display: flex; flex-direction: column; box-sizing: border-box; width: 50%; padding: 0 30px 60px 30px; }
.projects-overview .box { display: flex; flex-direction: column; position: relative; width: 100%; }
.projects-overview .box a.whole { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; }
.projects-overview .box .image { display: flex; width: 100%; aspect-ratio: 1/1; }
.projects-overview .box .image img { width: 100%; height: 100%; object-fit: cover; }
.projects-overview .box .details { display: flex; flex-direction: column; gap: 24px; width: 100%; padding-top: 22px; }
.projects-overview .box .details .headline { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 20px; width: 100%; }
.projects-overview .box .details .headline h4 { font-size: 40px; font-weight: 600; line-height: 40px; letter-spacing: -0.8px; }
.projects-overview .box .details .headline .number { color: var(--neutral-300); font-size: 15px; line-height: 15px; letter-spacing: 1.5px; }

.projects-overview.list { flex-direction: column; width: 100%; max-width: 100%; }
.projects-overview.list .item { transition: opacity 0.2s ease-in-out; width: 100%; padding: 0; }
.projects-overview.list:has(.item:hover) .item:not(:hover) { opacity: 0.2; }
.projects-overview.list .box { padding: 30px 0; border-top: 1px solid var(--neutral-700); }
.projects-overview.list .box .image { display: none; }
.projects-overview.list .box .details { flex-direction: row; flex-wrap: nowrap; padding-top: 0; }
.projects-overview.list .box .details .headline { flex-grow: 1; justify-content: flex-start; width: auto; }
.projects-overview.list .box .details .headline h4 { order: 2; padding: 10px 0; font-size: 60px; font-weight: 600; line-height: 60px; letter-spacing: -1.2px; }
.projects-overview.list .box .details .headline .number { order: 1; flex-shrink: 0; display: flex; width: 100px; }
.projects-overview.list .box .details .tags { justify-content: flex-end; padding-bottom: 10px; }

.services-list { display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.services-list .item { flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: relative; box-sizing: border-box; width: 41.5%; max-width: 100%; min-height: 400px; padding: 40px; border: 1px solid var(--neutral-700); border-right: 0; border-bottom: 0; }
.services-list .item:nth-child(2n) { border-right: 1px solid var(--neutral-700); }
.services-list .item:nth-last-child(2),
.services-list .item:nth-last-child(1) { border-bottom: 1px solid var(--neutral-700); }
.services-list .item:nth-child(3n+1) { flex-grow: 1; }
.services-list .item a.whole { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; }
.services-list .item h4 { font-size: 40px; font-weight: 600; line-height: 48px; letter-spacing: -0.8px; }

.services-list.columns-3 .item { width: 33.33%; }
.services-list.columns-3 .item:nth-child(2n) { border-right: 0; }
.services-list.columns-3 .item:nth-child(3n) { border-right: 1px solid var(--neutral-700); }
.services-list.columns-3 .item:nth-last-child(3),
.services-list.columns-3 .item:nth-last-child(2),
.services-list.columns-3 .item:nth-last-child(1) { border-bottom: 1px solid var(--neutral-700); }

.logos-list { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; width: 100%; }
.logos-list .item { flex-grow: 1; flex-basis: 340px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; aspect-ratio: 1/1; padding: 40px; background: var(--neutral-800-t50); }
.logos-list .item img { width: 184px; max-width: 100%; height: 44px; max-height: 100%; object-fit: contain; }

.icons-list { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; width: 100%; }
.icons-list .item { flex-grow: 1; flex-basis: 340px; display: flex; flex-wrap: nowrap; gap: 20px; justify-content: center; align-items: center; box-sizing: border-box; min-height: 200px; padding: 40px; background: var(--neutral-800-t50); }
.icons-list .item .icon { font-size: 24px; }
.icons-list .item h5 { font-size: 24px; font-weight: 500; line-height: 28.8px; letter-spacing: -0.48px; }

.info-slides { display: flex; flex-direction: column; width: 100%; }
.info-slides .item { display: flex; flex-wrap: nowrap; gap: 20px; position: relative; width: 100%; padding: 24px 0; cursor: pointer; }
.info-slides .item:before,
.info-slides .item:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--neutral-700); }
.info-slides .item:after { transition: width 0.2s ease-in-out; width: 0; background: var(--neutral-300); }
.info-slides .item.active:after { animation: slide-progress 10s linear forwards; }
.info-slides .item .number { flex-shrink: 0; display: flex; width: 100px; padding-top: 6px; color: var(--neutral-300); font-size: 13px; line-height: 13px; letter-spacing: 1.3px; user-select: none; }
.info-slides .item .details { flex-grow: 1; display: flex; flex-direction: column; width: 0; }
.info-slides .item .details .headline { display: flex; flex-direction: column; width: 100%; user-select: none; }
.info-slides .item .details .headline h2 { font-size: 40px; font-weight: 600; line-height: 40px; letter-spacing: -0.8px; }
.info-slides .item .details .text-container { margin-top: 16px; cursor: auto; }
.info-slides .item:not(.active) .details .text-container { display: none; }

.stats-container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 50px 20px; }
.text-container + .stats-container { margin-top: 60px; }
.stats-container .item { flex-basis: 280px; flex-grow: 1; display: flex; flex-direction: column; gap: 30px; box-sizing: border-box; padding-left: 30px; border-left: 1px solid var(--neutral-700); }
.stats-container .item .value { color: var(--brand-100); font-size: 72px; line-height: 50px; }
.stats-container .item .headline { color: var(--neutral-300); font-size: 13px; line-height: 13px; letter-spacing: 1.3px; text-transform: uppercase; }

.stats-container.vertical { flex-direction: column; }
.stats-container.vertical .item { flex-basis: auto; flex-grow: 0; gap: 20px; }
.stats-container.vertical .item .value { font-size: 60px; line-height: 40px; }

.info-container { flex-grow: 1; display: flex; flex-direction: column; gap: 46px; width: 100%; }
.info-container .item { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.info-container .item.bottom { flex-grow: 1; justify-content: flex-end; }
.info-container .item .headline { color: var(--neutral-300); font-size: 13px; line-height: 20.8px; font-family: var(--secondary-font), sans-serif; letter-spacing: 1.3px; text-transform: uppercase; font-variant-numeric: normal; }
.info-container .item .value { font-size: 19px; line-height: 32px; letter-spacing: -0.4px; }
.info-container .item a.value { transition: color 0.2s ease-in-out; color: var(--neutral-25); font-size: 24px; font-weight: 600; letter-spacing: -0.48px; }
.info-container .item a.value:hover { color: var(--brand-100); }
.info-container .item .link-button { margin-top: 22px; }

.info-boxes { display: flex; flex-wrap: wrap; gap: 60px; width: 100%; }
.info-boxes .item { flex-grow: 1; flex-basis: 420px; display: flex; flex-direction: column; }
.info-boxes .item .box-icon { display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; margin-bottom: 40px; background: var(--neutral-800-t50); font-size: 36px; }
.info-boxes .item .headline { display: flex; flex-direction: column; width: 100%; margin-bottom: 16px; }
.info-boxes .item .headline h2 { font-size: 30px; font-weight: 600; line-height: 36px; }
.info-boxes .item .text-container { text-align: justify; }

.form-container { display: flex; flex-wrap: wrap; align-items: stretch; gap: 26px 20px; width: 100%; }
.text-container + .form-container { margin-top: 70px; }
.form-container .form-item { flex-basis: 320px; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.form-container .form-item.width-full { flex-basis: auto; width: 100%; }
.form-container .form-item .item-heading { font-size: 17px; }
.form-container .form-item .item-heading.required:after { content: " *"; color: var(--brand-100); }

.box-container { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; padding: 40px; border: 1px solid var(--neutral-700); }
.box-container .headline { display: flex; flex-direction: column; width: 100%; margin-bottom: 30px; }
.box-container .headline h3 { font-size: 30px; font-weight: 700; line-height: 30px; letter-spacing: -0.6px; }

.map-container { display: flex; width: 100%; height: 600px; background: var(--neutral-800); }
.map-container .map { width: 100%; height: 100%; }

.accordion-container { display: flex; flex-direction: column; width: 100%; }
.accordion-container .item { display: flex; flex-wrap: nowrap; gap: 20px; width: 100%; padding: 25px 0; border-top: 1px solid var(--neutral-700); cursor: pointer; }
.accordion-container .item .number { flex-basis: 100px; flex-grow: 0; flex-shrink: 0; padding-top: 4px; color: var(--neutral-300); font-size: 15px; line-height: 15px; letter-spacing: 1.5px; user-select: none; }
.accordion-container .item .details { flex-grow: 1; display: flex; flex-direction: column; }
.accordion-container .item .details .headline { display: flex; flex-direction: column; user-select: none; }
.accordion-container .item .details .headline h4 { font-size: 30px; font-weight: 600; line-height: 30px; letter-spacing: -0.6px; }
.accordion-container .item .details .text-container { margin-top: 18px; cursor: auto; }
.accordion-container .item:not(.active) .details .text-container { display: none; }
.accordion-container .item .arrow { flex-basis: 100px; flex-grow: 0; flex-shrink: 0; transition: color 0.2s ease-in-out; display: flex; justify-content: flex-end; align-items: center; height: 30px; color: var(--neutral-300); }
.accordion-container .item .arrow svg { transition: transform 0.2s ease-in-out; }
.accordion-container .item:hover .arrow { color: var(--neutral-200); }
.accordion-container .item.active .arrow { color: var(--brand-100); }
.accordion-container .item.active .arrow svg { transform: rotate(180deg); }

.list { display: flex; flex-direction: column; }
.list ul { display: flex; flex-direction: column; gap: 26px; list-style: none; }
.list ul li,
.list ul li a { position: relative; font-size: 17px; font-weight: 500; line-height: 17px; }
.list ul li a:after { transition: transform 0.2s ease-in-out; content: ""; position: absolute; bottom: -2px; left: 0; transform: scaleX(0); transform-origin: right; width: 100%; height: 0; border-bottom: 1.5px solid var(--neutral-25); }
.list ul li a:hover:after { transform: scaleX(1); transform-origin: left; }

.tags { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.tag { display: flex; padding: 8px 12px; border: 1px solid var(--neutral-500); font-size: 13px; font-weight: 500; line-height: 13px; font-family: var(--secondary-font), sans-serif; letter-spacing: 0.78px; text-transform: uppercase; }
.tag.grey { background: var(--neutral-700); border-color: var(--neutral-700); color: var(--neutral-200); }

.tagline { margin-bottom: 15px; color: var(--neutral-300); font-size: 13px; line-height: 13px; font-family: var(--secondary-font), sans-serif; text-transform: uppercase; letter-spacing: 1.3px; }
.tagline:not(.simple):before { content: "["; }
.tagline:not(.simple):after { content: "]"; }
.tagline span { color: var(--brand-100); }

.cta { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; padding: 120px 0; background: var(--neutral-800); }
.cta .gradient { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; }
.cta .pixels-bg { z-index: 20; }
.cta .pixels-bg .pixel { transition: none; animation: pixel 2s cubic-bezier(1, -1, 0, 2) infinite; animation-direction: alternate; animation-delay: calc(0.1s * (var(--pixel-index))); background: var(--neutral-900); }
.cta .content { align-items: center; position: relative; z-index: 20; width: 1008px; max-width: 100%; }
.cta .tagline { margin-bottom: 6px; color: var(--neutral-25); text-align: center; }
.cta h3 { font-size: 84px; line-height: 100.8px; text-align: center; }
.cta h4 { font-size: 60px; line-height: 72px; letter-spacing: -1.2px; text-align: center; }
.cta .button { align-self: center; margin-top: 62px; }

.page-with-image { display: flex; flex-direction: column; align-items: center; width: 100%; background: var(--brand-100); }
.page-with-image .tagline { color: var(--neutral-25); }
.page-with-image .panel-container { align-items: stretch; gap: 0; }
.page-with-image .panel-container .panel { width: 50%; padding: 200px 0 200px 90px; }
.page-with-image .panel-container aside { position: relative; width: 50%; }
.page-with-image .panel-container .panel-image { position: absolute; z-index: 10; top: 0; right: 0; width: 50vw; height: 100%; object-fit: cover; }

.title-slider { display: flex; flex-wrap: nowrap; gap: 80px; width: 100%; overflow: hidden; }
.title-slider .track { display: flex; flex-wrap: nowrap; gap: 80px; animation: scroll 30s linear infinite; }
.title-slider .item { margin-top: -80px; color: var(--neutral-900); font-size: 360px; line-height: 426px; letter-spacing: -14.4px; white-space: nowrap; }
.title-slider a.item:hover { color: var(--neutral-25); -webkit-text-stroke: 1px var(--neutral-900); }

.pixels-bg { overflow: hidden; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; position: absolute; z-index: -10; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.pixels-bg .pixel { transition-delay: calc(0.01s * (var(--pixel-index))); display: flex; height: 25%; aspect-ratio: 1/1; background: var(--neutral-800-t50); opacity: 0; }
.pixels-bg .pixel:nth-child(even) { transition-delay: calc(0.02s * (var(--pixel-index))); }
.pixels-bg.minimal .pixel:nth-child(3n+1),
.pixels-bg.minimal .pixel:nth-child(3n+2),
.pixels-bg.minimal .pixel:nth-child(5n+1) { visibility: hidden !important; }
.services-list .item:hover .pixels-bg .pixel { opacity: 1; }

.table-container { display: flex; flex-direction: column; width: 100%; overflow: auto; }

.pricing-table { font-variant-numeric: normal; }
.pricing-table tr td { padding: 30px 20px; border-top: 1px solid var(--neutral-700); font-size: 24px; line-height: 24px; letter-spacing: -0.48px; vertical-align: top; }
.pricing-table tr td:first-child { padding-left: 0; }
.pricing-table tr td:last-child { padding-right: 0; }
.pricing-table tr td strong { font-weight: 600; }
.pricing-table tr td .input-controls-container { width: 220px; }
.pricing-table tr.subtotal td:first-child,
.pricing-table tr.total td:first-child { color: var(--neutral-300); font-size: 13px; font-family: var(--secondary-font), sans-serif; letter-spacing: 1.3px; text-transform: uppercase; }
.pricing-table tr.total td:last-child { font-size: 60px; line-height: 60px; letter-spacing: -1.2px; }
.pricing-table tr.subtotal td:last-child span,
.pricing-table tr.total td:last-child span { color: var(--neutral-300); }
.pricing-table tr.total td,
.pricing-table tr.total td:first-child { color: var(--brand-100); }

.info-table { font-variant-numeric: normal; }
.info-table tr td { padding: 30px 20px; border-top: 1px solid var(--neutral-700); font-size: 19px; line-height: 20px; vertical-align: top; }
.info-table tr td:first-child { padding-left: 0; }
.info-table tr td:last-child { padding-right: 0; }
.info-table tr:last-child td { padding-bottom: 0; }
.info-table tr td:first-child { color: var(--neutral-300); font-size: 13px; font-family: var(--secondary-font), sans-serif; line-height: 13px; letter-spacing: 1.3px; text-transform: uppercase; }
.info-table tr td[align="right"] .tags,
.info-table tr td[align="right"] .buttons { justify-content: flex-end; }

.table { font-variant-numeric: normal; }
.table tr td { padding: 18px 20px; border-top: 1px solid var(--neutral-700); vertical-align: top; }
.table tr:first-child td { padding-top: 0; border-top: 0; }
.table tr:last-child td { padding-bottom: 0; }
.table tr td:first-child { padding-left: 0; }
.table tr td:last-child { padding-right: 0; }
.table tr td strong { font-weight: 600; }

footer { display: flex; flex-direction: column; align-items: center; position: fixed; z-index: 10; bottom: 0; left: 0; width: 100%; background: var(--neutral-25); }
footer .columns { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 60px; width: 100%; padding: 120px 0 100px 0; }
footer .columns .column { display: flex; flex-direction: column; }
footer .tagline { margin-bottom: 25px; color: var(--neutral-400); }
footer .headline { display: flex; width: 100%; margin-bottom: 30px; }
footer .headline h5 { color: var(--neutral-900); font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; }
footer .list ul li,
footer .list ul li a { color: var(--neutral-900); }
footer .list ul li a:after { border-color: var(--neutral-900); }
footer .bottom { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 20px; width: 100%; padding: 40px 0 50px 0; }
footer .bottom ul { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; }
footer .bottom ul:nth-child(2) { justify-content: flex-end; }
footer .bottom ul li,
footer .bottom ul li a { position: relative; color: var(--neutral-400); font-size: 13px; line-height: 20px; font-family: var(--secondary-font), sans-serif; text-transform: uppercase; }
footer .bottom ul li a:after { transition: transform 0.2s ease-in-out; content: ""; position: absolute; bottom: -2px; left: 0; transform: scaleX(0); transform-origin: right; width: 100%; height: 0; border-bottom: 1.5px solid var(--neutral-400); }
footer .bottom ul li a:hover:after { transform: scaleX(1); transform-origin: left; }

.input-controls-container { display: flex; flex-wrap: nowrap; gap: 10px; max-width: 100%; }
.input-controls-container .input { text-align: center; }

.filter-container { margin-bottom: 60px; }

.response-code { display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 120px; }
.response-code svg { width: 100%; }

.selection-buttons { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.selection-buttons .item { display: flex; }
.selection-buttons .item input { display: none; }
.selection-buttons .item .btn { display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 6px 20px; min-height: 48px; border: 1px solid var(--neutral-700); font-size: 13px; font-weight: 500; letter-spacing: 0.78px; text-transform: uppercase; text-align: center; cursor: pointer; user-select: none; }
.selection-buttons .item .btn:hover { border-color: var(--neutral-500); }
.selection-buttons .item input:checked + .btn { background: var(--neutral-25); border-color: var(--neutral-25); color: var(--neutral-900); }
.selection-buttons .item input:checked + .btn:hover { background: var(--neutral-75); border-color: var(--neutral-75); }

.options { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.options .item { transition: border-color 0.2s ease-in-out; display: flex; flex-wrap: nowrap; align-items: baseline; box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 15px; border: 1px solid var(--neutral-700); }
.options .item:hover { border-color: var(--neutral-600); }
.options .item .flag { align-self: center; display: flex; margin-right: 15px; }
.options .item .flag img { width: 24px; height: 18px; background: var(--neutral-500); }
.options .item .value { margin-right: 5px; color: var(--neutral-25); font-size: 17px; }
.options .item .tagline { margin: 0; }

.buttons { display: flex; flex-wrap: wrap; gap: 20px; }
.buttons.center { justify-content: center; }
.box-container + .buttons { margin-top: 40px; }

.button { transition: background 0.2s ease-out; align-self: flex-start; flex-shrink: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; box-sizing: border-box; min-height: 48px; padding: 6px 20px; background: var(--neutral-25-t10); border: 0; color: var(--neutral-25); font-size: 17px; font-weight: 700; line-height: 18px; text-align: center; cursor: pointer; }
.button:has(.icon) { padding-left: 20px; padding-right: 6px; }
.button:has(.icon.before) { padding-left: 6px; padding-right: 20px; }
.button:hover { background: var(--neutral-25-t20); }
.button.icon { justify-content: center; width: 48px; padding-left: 6px; padding-right: 6px; }

.button .icon { flex-shrink: 0; display: flex; justify-content: center; align-items: center; position: relative; width: 36px; height: 36px; color: var(--neutral-25); font-size: 14px; }
.button .icon:after { transition: transform 0.2s ease-out; content: ""; position: absolute; z-index: 10; top: 0; left: 0; transform: scale(0.3); width: 36px; height: 36px; background: var(--brand-100); }
.button .icon svg { transition: opacity 0.2s ease-out; opacity: 0; position: relative; z-index: 20; }

.button:hover .icon:after { transform: scale(1); }
.button:hover .icon svg { opacity: 1; }

.button.light .icon { color: var(--neutral-900); }
.button.light .icon:after { background: var(--neutral-25); }

.button.light-orange .icon { color: var(--brand-100); }
.button.light-orange .icon:after { background: var(--neutral-25); }

.button.orange { background: var(--brand-100); }
.button.orange .icon { color: var(--brand-100); }
.button.orange .icon:after { background: var(--neutral-25); }

.button.grey-light { background: var(--neutral-50); color: var(--neutral-900); }
.button.grey-light:hover { background: var(--neutral-75); }
.button.grey-light .icon { color: var(--neutral-25); }
.button.grey-light .icon:after { background: var(--brand-100); }

.button.black { background: var(--neutral-900); }
.button.black .icon { color: var(--neutral-900); }
.button.black .icon:after { background: var(--neutral-25); }

.link-button { align-self: flex-start; flex-shrink: 0; display: flex; align-items: center; gap: 12px; color: var(--brand-100); font-size: 17px; font-weight: 700; line-height: 18px; }
.link-button .icon { display: flex; }

.link-button.grey { color: var(--neutral-400); }

.button .text,
.link-button .text { overflow: hidden; line-height: 18px; }
.button .char,
.link-button .char { position: relative; overflow: hidden; color: transparent; line-height: 18px; }
.button .char:before,
.button .char:after,
.link-button .char:before,
.link-button .char:after { transition: transform 0.2s ease-out; content: attr(data-char); display: inline; position: absolute; top: 0; left: 0; color: var(--neutral-25); line-height: 18px; }
.button.grey-light .char:before,
.button.grey-light .char:after { color: var(--neutral-900); }
.link-button .char:before,
.link-button .char:after { color: var(--brand-100); }
.link-button.grey .char:before,
.link-button.grey .char:after { color: var(--neutral-400); }
.button .char:before,
.link-button .char:before { transition-delay: calc(0.1s + 0.01s * (var(--char-index))); }
.button .char:after,
.link-button .char:after { transform: translateY(100%); transition-delay: calc(0.01s * (var(--char-index))); }
.button:hover .char:before,
.link-button:hover .char:before { transform: translateY(-100%); transition-delay: calc(0.01s * (var(--char-index))); }
.button:hover .char:after,
.link-button:hover .char:after { transform: translateY(0); transition-delay: calc(0.1s + 0.01s * (var(--char-index))); }

.select { box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px; background: var(--neutral-900);  border: 1px solid var(--neutral-700); color: var(--neutral-25); font-size: 17px; }

.input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px; background: var(--neutral-900); border: 1px solid var(--neutral-700); color: var(--neutral-25); font-size: 17px; }
.input:hover { border-bottom-color: var(--neutral-500); }
.input:focus { border-bottom-color: var(--brand-100); }
.input::placeholder { opacity: 1; color: var(--neutral-500); }

.textarea { box-sizing: border-box; width: 100%; height: 167px; padding: 10px 16px; background: var(--neutral-900); border: 1px solid var(--neutral-700); color: var(--neutral-25); font-size: 17px; line-height: 24px; resize: none; }
.textarea:hover { border-bottom-color: var(--neutral-500); }
.textarea:focus { border-bottom-color: var(--brand-100); }
.textarea::placeholder { opacity: 1; color: var(--neutral-500); }

.checkbox-container { display: flex; flex-wrap: nowrap; align-items: flex-start; margin: 4px 0; }
.checkbox-container input { display: none; }
.checkbox-container .checkbox { flex-shrink: 0; display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 24px; height: 24px; background: var(--neutral-900); border: 1px solid var(--neutral-700); cursor: pointer; }
.checkbox-container:has(input:not(:checked) + .checkbox + .checkbox-label:hover) .checkbox,
.checkbox-container .checkbox:hover { border-color: var(--neutral-500); }
.checkbox-container .checkbox span { display: flex; color: var(--neutral-900); font-size: 16px; }
.checkbox-container input:checked + .checkbox { background: var(--neutral-25); border-color: var(--neutral-25); }
.checkbox-container input:checked + .checkbox span { display: block; }
.checkbox-container .checkbox-label { padding-left: 20px; color: var(--neutral-300); font-size: 17px; cursor: pointer; user-select: none; }
.checkbox-container .checkbox-label a { color: var(--neutral-25); }

.cookie-modal { position: fixed; z-index: 1000; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; box-sizing: border-box; min-width: 500px; max-width: calc(100% - 40px); padding: 10px 10px 10px 0; background: var(--neutral-25); box-shadow: 0 4px 20px 0 var(--neutral-900-t25); }
.cookie-modal .headline { display: flex; padding-left: 20px; border-left: 4px solid var(--brand-100); color: var(--neutral-900); font-size: 24px; font-weight: 700; line-height: 38.4px; }
.cookie-modal .buttons { padding-left: 10px; }

.modal { display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; z-index: 900; top: 0; left: 0; width: 100%; height: 100%; }
.modal .box { display: flex; flex-direction: column; box-sizing: border-box; width: 480px; max-width: 100%; padding: 30px; background: var(--neutral-800); box-shadow: 0 4px 20px 0 var(--neutral-900-t25); }
.modal .box .title { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 20px; width: 100%; margin-bottom: 30px; }
.modal .box .title h2 { font-size: 24px; font-weight: 500; line-height: 28px; letter-spacing: -0.48px; }
.modal .box .close { transition: color 0.2s ease-in-out; display: flex; background: transparent; border: 0; color: var(--neutral-25); font-size: 24px; cursor: pointer; }
.modal .box .close:hover { color: var(--neutral-300); }

.notification { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 20px; position: fixed; z-index: 910; top: 32px; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: 360px; max-width: 100%; padding: 20px; background: var(--brand-100); box-shadow: 0 4px 20px 0 var(--neutral-900-t25); font-size: 18px; line-height: 24px; }
.notification .icon { display: flex; align-items: center; min-height: 24px; font-size: 24px; }

.noise { position: fixed; z-index: 3000; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; opacity: 0.4; }
.noise:after { animation: noise .2s infinite; content: ""; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; width: 200%; height: 200vh; background: url('https://cdn.labify.com/1:assets/noise.png') repeat center center; }

.gradient { width: 100%; height: 100%; --gradient-color-1: #1F1F1F; --gradient-color-2: #C63500; --gradient-color-3: #383838; --gradient-color-4: #050505; }
.gradient.grey { --gradient-color-2: #9E9E9E; }
.gradient.blue { --gradient-color-2: #0044FF; }

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes slide-progress {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes noise {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}

@keyframes pixel {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@media (max-height: 862px), (max-width: 1128px) {
    .page-container { margin-bottom: 0 !important; }
    footer { position: static; bottom: auto; left: auto; }
}

@media (max-width: 1680px) {
    .content { width: 100%; }
    header .logo { margin-left: 0; }
    
    .projects-overview { gap: 0 60px; }
    .projects-overview .item { width: calc(50% - 30px); padding-right: 0; padding-left: 0; }
}

@media (max-width: 1440px) {
    .logos-list .item { flex-basis: 462px; }
}

@media (max-width: 1366px) {
    .panel-container { gap: 40px 70px; }
    .panel-container.boxed .panel { padding: 40px 60px; }
    
    .page-with-image .panel-container .panel { padding: 60px 0 60px 45px; }
    
    .columns-container aside { width: 360px; }
}

@media (max-width: 1128px) {
    body { font-size: 16px; }
    
    header { padding: 30px 0; }
    header .logo { position: relative; z-index: 995; }
    header .menu { justify-content: flex-end; position: fixed; z-index: 990; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 98px 0 40px 0; background: var(--neutral-900); }
    header .menu:not(.active) { display: none; }
    header .menu nav { width: 100%; overflow: auto; }
    header .menu nav ul { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; width: 100%; }
    header .menu nav ul li { flex-direction: column; justify-content: flex-start; box-sizing: border-box; width: 100%; }
    header .menu nav ul li:has(.button) { padding: 20px 40px; }
    header .menu nav ul li:has(.language) { flex-direction: row; gap: 10px 20px; padding: 16px 40px; }
    header .menu nav ul li a:not(.button):not(.language) { padding: 16px 40px; }
    header .menu nav ul li a:not(.button):not(.language) { box-sizing: border-box; width: 100%; }
    header .menu nav ul li a:not(.button):not(.language) { justify-content: flex-start; color: var(--neutral-25) !important; font-size: 30px; font-weight: 400; line-height: 30px; text-align: left; }
    header .menu nav ul li .language:not(.active) { display: inline; }
    header .menu nav ul li .submenu { transition: none; align-items: flex-start; position: static; top: auto; left: auto; height: auto; padding: 16px 40px; background: transparent; }
    header .menu nav ul li a:hover + .submenu,
    header .menu nav ul li .submenu:hover { height: auto; }
    header .menu nav ul li .submenu .inner { align-items: flex-start; margin-top: 0; padding: 0; border-top: 0; }
    header .menu nav ul li .submenu .content { gap: 0; height: auto; padding: 0 20px; border-left: 1px solid var(--neutral-700); }
    header .menu nav ul li .submenu .tagline { display: none; }
    header .menu nav ul li .submenu ul { gap: 18px; }
    header .menu nav ul li .submenu ul li a:not(.button):not(.language) { padding: 0; font-size: 17px; font-weight: 500; line-height: 17px; }
    header .menu nav ul li .submenu ul li .submenu-image { display: none; }
    
    header .mobile-menu { display: flex; position: relative; z-index: 995; }
    
    .hero { height: auto; min-height: 90vh; padding-bottom: 40px; }
    .hero .content { gap: 20px; }
    .hero .content h1 { font-size: 50px; line-height: 50px; letter-spacing: -1px; }
    .hero .content h1.small { font-size: 42px; line-height: 42px; letter-spacing: -0.84px; }
    .hero .content p { font-size: 16px; line-height: 22.4px; }
    
    .page-hero { padding: 60px 0 55px 0; }
    .page-hero.center { padding-bottom: 80px; }
    .page-hero .headline { font-size: 19px; line-height: 20px; letter-spacing: -0.4px; }
    .page-hero h1 { font-size: 42px; line-height: 50px; letter-spacing: -0.84px; }
    .page-hero h1:has(span) { line-height: 40px; }
    .page-hero h1 img { height: 35px; }
    .page-hero p { font-size: 16px; line-height: 22.4px; }
    
    .page { padding: 100px 0; }
    
    .panel-container { flex-direction: column; }
    .panel-container .panel { width: 100%; }
    .panel-container.boxed .panel { padding: 30px; }
    .panel-container aside,
    .panel-container aside.width-half { width: 100%; }
    .panel-container aside h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.6px; }
    .panel-container:has(aside .info-container) .panel { order: 1; }
    .panel-container aside:has(.info-container) { order: 2; }
    .panel-container aside .info-container { margin-top: 40px; }
    
    .page-with-image .content { padding: 0; }
    .page-with-image .panel-container .panel { width: 100%; padding-left: 24px; padding-right: 24px; }
    .page-with-image .panel-container aside { width: 100%; }
    .page-with-image .panel-container .panel-image { position: static; top: auto; right: auto; width: 100%; height: auto; object-fit: contain; }
    
    .columns-container { flex-direction: column; }
    .columns-container:has(aside .tagline:last-child) { gap: 14px; }
    .columns-container .panel { width: 100%; }
    .columns-container aside { width: 100%; }
    
    .title-container { gap: 16px 20px; }
    .title-container h1,
    .title-container h2,
    .title-container h3 { font-size: 30px; line-height: 36px; letter-spacing: -0.6px; }
    .title-container h4 { font-size: 22px; line-height: 26px; letter-spacing: -0.40px; }
    
    .text-container h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.6px; }
    .text-container p { line-height: 22.4px; }
    .text-container .button { margin-top: 14px; }
    
    .projects-overview { gap: 0 30px; }
    .projects-overview .item { width: calc(50% - 15px); }
    .projects-overview .box .details .headline h4,
    .projects-overview.list .box .details .headline h4 { font-size: 36px; line-height: 36px; letter-spacing: -0.72px; }
    
    .services-list .item { gap: 20px; min-height: 200px; padding: 20px; }
    .services-list .item h4 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; }
    
    .icons-list .item { gap: 16px; min-height: 120px; padding: 30px; }
    .icons-list .item .icon { font-size: 20px; }
    .icons-list .item h5 { font-size: 19px; line-height: 22px; letter-spacing: -0.30px; }
    
    .stats-container { gap: 40px 20px; }
    .stats-container .item { flex-basis: 160px; gap: 20px; padding-left: 20px; }
    .stats-container .item .value,
    .stats-container.vertical .item .value { font-size: 36px; line-height: 26px; }
    .stats-container .item .headline { font-size: 11px; line-height: 11px; }
    
    .info-boxes .item .headline h2 { font-size: 24px; line-height: 30px; }
    
    .info-slides .item .number { width: 50px; padding-top: 3px; }
    .info-slides .item .details .headline h2 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; }
    
    .pricing-table tr td { font-size: 19px; line-height: 20px; letter-spacing: -0.4px; }
    .pricing-table tr.total td:last-child { font-size: 40px; line-height: 40px; letter-spacing: -0.8px; }
    
    .box-container { padding: 30px; }
    .box-container .headline h3 { font-size: 24px; line-height: 24px; letter-spacing: -0.4px; }
    
    .accordion-container .item { padding: 15px 0; }
    .accordion-container .item .number { flex-basis: 30px; }
    .accordion-container .item .details .headline h4 { font-size: 24px; line-height: 24px; letter-spacing: -0.4px; }
    .accordion-container .item .details .text-container { margin-top: 10px; }
    .accordion-container .item .arrow { flex-basis: 30px; height: 24px; }
    
    .map-container { height: 300px; }
    
    .cta { padding: 80px 0; }
    .cta h3 { font-size: 42px; line-height: 50.4px; }
    .cta h4 { font-size: 30px; line-height: 36px; letter-spacing: -0.6px; }
    .cta .button { margin-top: 30px; }
    
    footer .columns { padding: 60px 0 50px 0; }
    footer .headline h5 { font-size: 30px; line-height: 36px; letter-spacing: -0.6px; }
    
    .title-slider .item { margin-top: -40px; font-size: 180px; line-height: 212px; letter-spacing: -7.2px; }
    
    .button .char:before,
    .button .char:after,
    .link-button .char:before,
    .link-button .char:after { transition: none; transform: none !important; }
    .button .char:after,
    .link-button .char:after { display: none; }
    
    .selection-buttons .item .btn { padding: 6px 12px; min-height: 36px; font-size: 11px; }
}

@media (max-width: 1000px) {
    .services-list.columns-3 .item { width: 100%; }
    .services-list.columns-3 .item:nth-child(2n) { border-right: 1px solid var(--neutral-700); }
    .services-list.columns-3 .item:not(:last-child) { border-bottom: 0; }
}

@media (max-width: 800px) {
    .page-hero h1:has(span) { line-height: 50px; }
    .page-hero h1 span { display: inline; margin-top: 0; padding: 0; background: transparent; }
    .page-hero h1 br { display: none; }
    
    .services-list { flex-direction: column; }
    .services-list .item { width: 100%; border: 1px solid var(--neutral-700); border-bottom: 0; }
    .services-list .item:nth-last-child(2),
    .services-list .item:nth-last-child(1) { border-bottom: 0; }
    .services-list .item:last-child { border-bottom: 1px solid var(--neutral-700); }
    
    .projects-overview .item { width: 100%; }
    .projects-overview:last-child .item:last-child { padding-bottom: 0; }
    
    .projects-overview.list .item { opacity: 1 !important; padding-bottom: 60px; }
    .projects-overview.list:last-child .item:last-child { padding-bottom: 0; }
    .projects-overview.list .box { padding: 0; border-top: 0; }
    .projects-overview.list .box .image { display: flex; }
    .projects-overview.list .box .details { flex-direction: column; padding-top: 22px; }
    .projects-overview.list .box .details .headline { flex-grow: 0; justify-content: space-between; width: 100%; }
    .projects-overview.list .box .details .headline h4 { order: 1; padding: 0; }
    .projects-overview.list .box .details .headline .number { order: 2; width: auto; }
    .projects-overview.list .box .details .tags { justify-content: flex-start; padding-bottom: 0; }
    
    .pricing-table { display: flex; flex-direction: column; width: 100%; }
    .pricing-table tbody { display: flex; flex-direction: column; width: 100%; }
    .pricing-table tr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; box-sizing: border-box; width: 100%; padding: 30px 0; border-top: 1px solid var(--neutral-700); }
    .pricing-table tr.subtotal,
    .pricing-table tr.total { gap: 10px; }
    .pricing-table tr td { width: auto; padding: 0; border: 0; }
    .pricing-table tr:not(.subtotal):not(.total) td:first-child { width: 100%; }
    
    footer .columns { flex-wrap: wrap; gap: 40px; }
    footer .columns .column { flex-basis: 0; flex-grow: 1; }
    footer .columns .column:first-child,
    footer .columns .column:last-child { flex-basis: auto; width: 100%; }
    footer .columns .column:last-child .list ul { flex-direction: row; flex-wrap: wrap; }
    footer .bottom { flex-direction: column; }
    footer .bottom ul:nth-child(2) { justify-content: flex-start; }
    footer .bottom ul li:first-child { width: 100%; }
    
    .cookie-modal { left: 0; bottom: 0; transform: none; min-width: 100%; max-width: 100%; }
    .cookie-modal .headline { font-size: 19px; line-height: 30px; }
    .cookie-modal .buttons { gap: 10px; }
    .cookie-modal .button .icon { display: none; }
    .cookie-modal .button:has(.icon) { padding-right: 20px; }
    .cookie-modal .button:has(.icon.before) { padding-left: 20px; }
}