@charset "UTF-8";
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-between-start {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.flex-between-end {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

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

.h-xl {
  height: var(--height-xl);
}

.h-lg {
  height: var(--height-lg);
}

.h-md {
  height: var(--height-md);
}

.h-md-min {
  min-height: var(--height-md);
}

.h-sm {
  height: var(--height-sm);
}

.h-screen {
  height: 100dvh;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

:root {
  --space-ul: clamp(100px, 86.6197183099px + 3.5211267606vw, 150px);
  --space-xl: clamp(50px, 36.6197183099px + 3.5211267606vw, 100px);
  --space-lg: clamp(40px, 29.2957746479px + 2.8169014085vw, 80px);
  --space-md: clamp(10px, 4.6478873239px + 1.4084507042vw, 30px);
  --space-sm: clamp(10px, 7.323943662px + 0.7042253521vw, 20px);
  --space-xs: clamp(5px, 3.661971831px + 0.3521126761vw, 10px);
  --space-us: clamp(100px, 105.3521126761px + -1.4084507042vw, 80px);
}

.m-ul {
  margin: var(--space-ul);
}

.mt-ul {
  margin-top: var(--space-ul);
}

.mr-ul {
  margin-right: var(--space-ul);
}

.mb-ul {
  margin-bottom: var(--space-ul);
}

.ml-ul {
  margin-left: var(--space-ul);
}

.p-ul {
  padding: var(--space-ul);
}

.pt-ul {
  padding-top: var(--space-ul);
}

.pr-ul {
  padding-right: var(--space-ul);
}

.pb-ul {
  padding-bottom: var(--space-ul);
}

.pl-ul {
  padding-left: var(--space-ul);
}

.gap-ul {
  gap: var(--space-ul);
}

.row-gap-ul {
  row-gap: var(--space-ul);
}

.col-gap-ul {
  column-gap: var(--space-ul);
}

.m-xl {
  margin: var(--space-xl);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mr-xl {
  margin-right: var(--space-xl);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.ml-xl {
  margin-left: var(--space-xl);
}

.p-xl {
  padding: var(--space-xl);
}

.pt-xl {
  padding-top: var(--space-xl);
}

.pr-xl {
  padding-right: var(--space-xl);
}

.pb-xl {
  padding-bottom: var(--space-xl);
}

.pl-xl {
  padding-left: var(--space-xl);
}

.gap-xl {
  gap: var(--space-xl);
}

.row-gap-xl {
  row-gap: var(--space-xl);
}

.col-gap-xl {
  column-gap: var(--space-xl);
}

.m-lg {
  margin: var(--space-lg);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mr-lg {
  margin-right: var(--space-lg);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.ml-lg {
  margin-left: var(--space-lg);
}

.p-lg {
  padding: var(--space-lg);
}

.pt-lg {
  padding-top: var(--space-lg);
}

.pr-lg {
  padding-right: var(--space-lg);
}

.pb-lg {
  padding-bottom: var(--space-lg);
}

.pl-lg {
  padding-left: var(--space-lg);
}

.gap-lg {
  gap: var(--space-lg);
}

.row-gap-lg {
  row-gap: var(--space-lg);
}

.col-gap-lg {
  column-gap: var(--space-lg);
}

.m-md {
  margin: var(--space-md);
}

.mt-md {
  margin-top: var(--space-md);
}

.mr-md {
  margin-right: var(--space-md);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.ml-md {
  margin-left: var(--space-md);
}

.p-md {
  padding: var(--space-md);
}

.pt-md {
  padding-top: var(--space-md);
}

.pr-md {
  padding-right: var(--space-md);
}

.pb-md {
  padding-bottom: var(--space-md);
}

.pl-md {
  padding-left: var(--space-md);
}

.gap-md {
  gap: var(--space-md);
}

.row-gap-md {
  row-gap: var(--space-md);
}

.col-gap-md {
  column-gap: var(--space-md);
}

.m-sm {
  margin: var(--space-sm);
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mr-sm {
  margin-right: var(--space-sm);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.ml-sm {
  margin-left: var(--space-sm);
}

.p-sm {
  padding: var(--space-sm);
}

.pt-sm {
  padding-top: var(--space-sm);
}

.pr-sm {
  padding-right: var(--space-sm);
}

.pb-sm {
  padding-bottom: var(--space-sm);
}

.pl-sm {
  padding-left: var(--space-sm);
}

.gap-sm {
  gap: var(--space-sm);
}

.row-gap-sm {
  row-gap: var(--space-sm);
}

.col-gap-sm {
  column-gap: var(--space-sm);
}

.m-xs {
  margin: var(--space-xs);
}

.mt-xs {
  margin-top: var(--space-xs);
}

.mr-xs {
  margin-right: var(--space-xs);
}

.mb-xs {
  margin-bottom: var(--space-xs);
}

.ml-xs {
  margin-left: var(--space-xs);
}

.p-xs {
  padding: var(--space-xs);
}

.pt-xs {
  padding-top: var(--space-xs);
}

.pr-xs {
  padding-right: var(--space-xs);
}

.pb-xs {
  padding-bottom: var(--space-xs);
}

.pl-xs {
  padding-left: var(--space-xs);
}

.gap-xs {
  gap: var(--space-xs);
}

.row-gap-xs {
  row-gap: var(--space-xs);
}

.col-gap-xs {
  column-gap: var(--space-xs);
}

.m-us {
  margin: var(--space-us);
}

.mt-us {
  margin-top: var(--space-us);
}

.mr-us {
  margin-right: var(--space-us);
}

.mb-us {
  margin-bottom: var(--space-us);
}

.ml-us {
  margin-left: var(--space-us);
}

.p-us {
  padding: var(--space-us);
}

.pt-us {
  padding-top: var(--space-us);
}

.pr-us {
  padding-right: var(--space-us);
}

.pb-us {
  padding-bottom: var(--space-us);
}

.pl-us {
  padding-left: var(--space-us);
}

.gap-us {
  gap: var(--space-us);
}

.row-gap-us {
  row-gap: var(--space-us);
}

.col-gap-us {
  column-gap: var(--space-us);
}

.grid-cols-1 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-1-auto {
  display: grid;
  grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-1 {
  grid-column: span 1;
}

.grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-2-auto {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-2 {
  grid-column: span 2;
}

.grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-3-auto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-3 {
  grid-column: span 3;
}

.grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-4-auto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-4 {
  grid-column: span 4;
}

.grid-cols-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-5-auto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-5 {
  grid-column: span 5;
}

.grid-cols-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-6-auto {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-6 {
  grid-column: span 6;
}

.grid-cols-7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-7-auto {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-7 {
  grid-column: span 7;
}

.grid-cols-8 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-8-auto {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-8 {
  grid-column: span 8;
}

.grid-cols-9 {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-9-auto {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-9 {
  grid-column: span 9;
}

.grid-cols-10 {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-10-auto {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-10 {
  grid-column: span 10;
}

.grid-cols-11 {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-11-auto {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-11 {
  grid-column: span 11;
}

.grid-cols-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-12-auto {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-12 {
  grid-column: span 12;
}

@media screen and (max-width: 2800px) {
  .\4 xl\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-1 {
    grid-column: span 1;
  }
  .\4 xl\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-2 {
    grid-column: span 2;
  }
  .\4 xl\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-3 {
    grid-column: span 3;
  }
  .\4 xl\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-4 {
    grid-column: span 4;
  }
  .\4 xl\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-5 {
    grid-column: span 5;
  }
  .\4 xl\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-6 {
    grid-column: span 6;
  }
  .\4 xl\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-7 {
    grid-column: span 7;
  }
  .\4 xl\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-8 {
    grid-column: span 8;
  }
  .\4 xl\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-9 {
    grid-column: span 9;
  }
  .\4 xl\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-10 {
    grid-column: span 10;
  }
  .\4 xl\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-11 {
    grid-column: span 11;
  }
  .\4 xl\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 2800px) {
  .\4 xl\:hidden {
    display: none !important;
  }
  .\4 xl\:block {
    display: block !important;
  }
  .\4 xl\:inline {
    display: inline !important;
  }
  .\4 xl\:flex {
    display: flex !important;
  }
  .\4 xl\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 2000px) {
  .\3 xl\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-1 {
    grid-column: span 1;
  }
  .\3 xl\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-2 {
    grid-column: span 2;
  }
  .\3 xl\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-3 {
    grid-column: span 3;
  }
  .\3 xl\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-4 {
    grid-column: span 4;
  }
  .\3 xl\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-5 {
    grid-column: span 5;
  }
  .\3 xl\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-6 {
    grid-column: span 6;
  }
  .\3 xl\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-7 {
    grid-column: span 7;
  }
  .\3 xl\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-8 {
    grid-column: span 8;
  }
  .\3 xl\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-9 {
    grid-column: span 9;
  }
  .\3 xl\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-10 {
    grid-column: span 10;
  }
  .\3 xl\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-11 {
    grid-column: span 11;
  }
  .\3 xl\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 2000px) {
  .\3 xl\:hidden {
    display: none !important;
  }
  .\3 xl\:block {
    display: block !important;
  }
  .\3 xl\:inline {
    display: inline !important;
  }
  .\3 xl\:flex {
    display: flex !important;
  }
  .\3 xl\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 1500px) {
  .\2 xl\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-1 {
    grid-column: span 1;
  }
  .\2 xl\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-2 {
    grid-column: span 2;
  }
  .\2 xl\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-3 {
    grid-column: span 3;
  }
  .\2 xl\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-4 {
    grid-column: span 4;
  }
  .\2 xl\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-5 {
    grid-column: span 5;
  }
  .\2 xl\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-6 {
    grid-column: span 6;
  }
  .\2 xl\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-7 {
    grid-column: span 7;
  }
  .\2 xl\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-8 {
    grid-column: span 8;
  }
  .\2 xl\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-9 {
    grid-column: span 9;
  }
  .\2 xl\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-10 {
    grid-column: span 10;
  }
  .\2 xl\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-11 {
    grid-column: span 11;
  }
  .\2 xl\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 1500px) {
  .\2 xl\:hidden {
    display: none !important;
  }
  .\2 xl\:block {
    display: block !important;
  }
  .\2 xl\:inline {
    display: inline !important;
  }
  .\2 xl\:flex {
    display: flex !important;
  }
  .\2 xl\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 1280px) {
  .xl\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-1 {
    grid-column: span 1;
  }
  .xl\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-2 {
    grid-column: span 2;
  }
  .xl\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-3 {
    grid-column: span 3;
  }
  .xl\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-4 {
    grid-column: span 4;
  }
  .xl\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-5 {
    grid-column: span 5;
  }
  .xl\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-6 {
    grid-column: span 6;
  }
  .xl\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-7 {
    grid-column: span 7;
  }
  .xl\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-8 {
    grid-column: span 8;
  }
  .xl\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-9 {
    grid-column: span 9;
  }
  .xl\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-10 {
    grid-column: span 10;
  }
  .xl\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-11 {
    grid-column: span 11;
  }
  .xl\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 1280px) {
  .xl\:hidden {
    display: none !important;
  }
  .xl\:block {
    display: block !important;
  }
  .xl\:inline {
    display: inline !important;
  }
  .xl\:flex {
    display: flex !important;
  }
  .xl\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 1024px) {
  .lg\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-1 {
    grid-column: span 1;
  }
  .lg\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-2 {
    grid-column: span 2;
  }
  .lg\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-3 {
    grid-column: span 3;
  }
  .lg\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-4 {
    grid-column: span 4;
  }
  .lg\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-5 {
    grid-column: span 5;
  }
  .lg\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-6 {
    grid-column: span 6;
  }
  .lg\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-7 {
    grid-column: span 7;
  }
  .lg\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-8 {
    grid-column: span 8;
  }
  .lg\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-9 {
    grid-column: span 9;
  }
  .lg\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-10 {
    grid-column: span 10;
  }
  .lg\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-11 {
    grid-column: span 11;
  }
  .lg\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 1024px) {
  .lg\:hidden {
    display: none !important;
  }
  .lg\:block {
    display: block !important;
  }
  .lg\:inline {
    display: inline !important;
  }
  .lg\:flex {
    display: flex !important;
  }
  .lg\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 750px) {
  .md\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-1 {
    grid-column: span 1;
  }
  .md\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-2 {
    grid-column: span 2;
  }
  .md\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-3 {
    grid-column: span 3;
  }
  .md\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-4 {
    grid-column: span 4;
  }
  .md\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-5 {
    grid-column: span 5;
  }
  .md\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-6 {
    grid-column: span 6;
  }
  .md\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-7 {
    grid-column: span 7;
  }
  .md\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-8 {
    grid-column: span 8;
  }
  .md\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-9 {
    grid-column: span 9;
  }
  .md\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-10 {
    grid-column: span 10;
  }
  .md\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-11 {
    grid-column: span 11;
  }
  .md\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 750px) {
  .md\:hidden {
    display: none !important;
  }
  .md\:block {
    display: block !important;
  }
  .md\:inline {
    display: inline !important;
  }
  .md\:flex {
    display: flex !important;
  }
  .md\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 640px) {
  .sm\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-1 {
    grid-column: span 1;
  }
  .sm\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-2 {
    grid-column: span 2;
  }
  .sm\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-3 {
    grid-column: span 3;
  }
  .sm\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-4 {
    grid-column: span 4;
  }
  .sm\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-5 {
    grid-column: span 5;
  }
  .sm\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-6 {
    grid-column: span 6;
  }
  .sm\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-7 {
    grid-column: span 7;
  }
  .sm\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-8 {
    grid-column: span 8;
  }
  .sm\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-9 {
    grid-column: span 9;
  }
  .sm\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-10 {
    grid-column: span 10;
  }
  .sm\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-11 {
    grid-column: span 11;
  }
  .sm\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 640px) {
  .sm\:hidden {
    display: none !important;
  }
  .sm\:block {
    display: block !important;
  }
  .sm\:inline {
    display: inline !important;
  }
  .sm\:flex {
    display: flex !important;
  }
  .sm\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 400px) {
  .xs\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-1 {
    grid-column: span 1;
  }
  .xs\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-2 {
    grid-column: span 2;
  }
  .xs\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-3 {
    grid-column: span 3;
  }
  .xs\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-4 {
    grid-column: span 4;
  }
  .xs\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-5 {
    grid-column: span 5;
  }
  .xs\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-6 {
    grid-column: span 6;
  }
  .xs\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-7 {
    grid-column: span 7;
  }
  .xs\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-8 {
    grid-column: span 8;
  }
  .xs\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-9 {
    grid-column: span 9;
  }
  .xs\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-10 {
    grid-column: span 10;
  }
  .xs\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-11 {
    grid-column: span 11;
  }
  .xs\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 400px) {
  .xs\:hidden {
    display: none !important;
  }
  .xs\:block {
    display: block !important;
  }
  .xs\:inline {
    display: inline !important;
  }
  .xs\:flex {
    display: flex !important;
  }
  .xs\:grid {
    display: grid !important;
  }
}
.flex {
  display: flex;
}

.justify-start {
  justify-content: start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.content-start {
  align-content: start;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: end;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-evenly {
  align-content: space-evenly;
}

.items-start {
  align-items: start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: end;
}

.items-baseline {
  align-items: baseline;
}

.items-between {
  align-items: space-between;
}

.items-around {
  align-items: space-around;
}

.items-evenly {
  align-items: space-evenly;
}

.text-center {
  text-align: center;
}

.text-right * {
  text-align: right;
}

.text-left * {
  text-align: left;
}

@font-face {
  font-family: "NB-International";
  src: url("../fonts/NB International Pro RegularWeb.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
:root {
  /* GENERAL */
  --main-width: 2000px;
  --main-font: "NB-International";
  --accessibility-font-size: 1;
  --font-size-us: calc(
    clamp(10px, 9.7323943662px + 0.0704225352vw, 11px) * var(--accessibility-font-size)
  );
  --font-size-xs: calc(
    clamp(16px, 14.9295774648px + 0.2816901408vw, 20px) * var(--accessibility-font-size)
  );
  --font-size-sm: calc(
    clamp(18px, 16.9295774648px + 0.2816901408vw, 22px) * var(--accessibility-font-size)
  );
  --font-size-md: calc(
    clamp(22px, 19.323943662px + 0.7042253521vw, 32px) * var(--accessibility-font-size)
  );
  --font-size-lg: calc(
    clamp(24px, 20.2535211268px + 0.985915493vw, 38px) * var(--accessibility-font-size)
  );
  --font-size-xl: calc(
    clamp(26px, 21.7183098592px + 1.1267605634vw, 42px) * var(--accessibility-font-size)
  );
  --font-size-ul: calc(
    clamp(30px, 24.6478873239px + 1.4084507042vw, 50px) * var(--accessibility-font-size)
  );
  --font-display-us: calc(
    clamp(9px, 7.5549295775px + 0.3802816901vw, 14.4px) * var(--accessibility-font-size)
  );
  --font-display-xl: calc(
    clamp(44px, 39.7183098592px + 1.1267605634vw, 60px) * var(--accessibility-font-size)
  );
  --font-display-ul: calc(
    clamp(60px, 49.2957746479px + 2.8169014085vw, 100px) * var(--accessibility-font-size)
  );
  /* SPACES */
  --height-xl: calc(clamp(491px, 361.2112676056px + 34.1549295775vw, 976px));
  --height-lg: calc(clamp(472px, 397.8732394366px + 19.5070422535vw, 749px));
  --height-md: calc(clamp(234px, 162.8169014085px + 18.7323943662vw, 500px));
  --height-sm: calc(clamp(234px, 206.9718309859px + 7.1126760563vw, 335px));
  --margin-top-main: clamp(1.5rem, 1.5rem + 2vw, 5rem);
  --height-service-item: calc(clamp(60px, 53.3098591549px + 1.7605633803vw, 85px));
  --width-button-icon: 26px;
  --width-download-graph: calc(clamp(80px, 69.2957746479px + 2.8169014085vw, 120px));
  --width-badge-graph: calc(clamp(120px, 85.2112676056px + 9.1549295775vw, 250px));
  --space-header-top: clamp(100px, 105.3521126761px + -1.4084507042vw, 80px);
  --space-gap: clamp(10px, 5.985915493px + 1.0563380282vw, 25px);
  /* COLORS */
  --color-black: #1f1f1f;
  --color-white: #fff;
  --color-primary: var(--color-black);
  --color-secondary: var(--color-white);
  --color-text: var(--color-black);
  --color-accent: var(--color-black);
  --color-text: #1f1f1f;
  --color-text-fixed: #fff;
  --color-bg: #fff;
  --color-bg-fixed: #1f1f1f;
  --color-black-0: rgba(31, 31, 31, 0);
  --color-white-0: rgba(255, 255, 255, 0);
  --color-primary-0: rgba(77, 83, 182, 0);
  --color-black-10: rgba(31, 31, 31, 0.1);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-primary-10: rgba(77, 83, 182, 0.1);
  --color-black-20: rgba(31, 31, 31, 0.2);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-primary-20: rgba(77, 83, 182, 0.2);
  --color-black-30: rgba(31, 31, 31, 0.3);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-primary-30: rgba(77, 83, 182, 0.3);
  --color-black-40: rgba(31, 31, 31, 0.4);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-primary-40: rgba(77, 83, 182, 0.4);
  --color-black-50: rgba(31, 31, 31, 0.5);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-primary-50: rgba(77, 83, 182, 0.5);
  --color-black-60: rgba(31, 31, 31, 0.6);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-primary-60: rgba(77, 83, 182, 0.6);
  --color-black-70: rgba(31, 31, 31, 0.7);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-primary-70: rgba(77, 83, 182, 0.7);
  --color-black-80: rgba(31, 31, 31, 0.8);
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-primary-80: rgba(77, 83, 182, 0.8);
  --color-black-90: rgba(31, 31, 31, 0.9);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-primary-90: rgba(77, 83, 182, 0.9);
  /* EASING */
  --easing1: cubic-bezier(0.85, 0, 0.15, 1);
  --speed-fast: 0.2s;
  --speed-mid: 0.5s;
  --nav-transition: height 0.2s cubic-bezier(0.85, 0, 0.15, 1);
  --nav-transition-duration: 0.2s;
  --collapsible-transition-duration: 0.3s;
  --dropdown-transition-duration: 0.3s;
  --cookie-banner-transition-duration: 0.3s;
  /* GAPS */
  --space-small-us: clamp(3px, 2.4647887324px + 0.1408450704vw, 5px);
  --gap-1: clamp(2px, 1.1971830986px + 0.2112676056vw, 5px);
  --gap-2: clamp(5px, 3.661971831px + 0.3521126761vw, 10px);
  --gap-3: clamp(10px, 5.985915493px + 1.0563380282vw, 25px);
  --gap-4: clamp(20px, 11.9718309859px + 2.1126760563vw, 50px);
  /* BORDER OUTLINES */
  --outline-sm: 1px solid var(--color-text);
  --outline-md: 2px solid var(--color-text);
  --outline-lg: 3px solid var(--color-text);
  /* BORDER RADIUS */
  --radius-1: 3px;
  --radius-2: 10px;
  --radius-round: 50%;
}
:root .accessibility-invert {
  --color-text: #fff;
  --color-bg: #1f1f1f;
}
:root .accessibility-biggerText {
  --font-size-xs: calc(clamp(24px, 20.1464788732px + 1.014084507vw, 38.4px) * 1.5);
  --font-size-sm: calc(clamp(24px, 20.1464788732px + 1.014084507vw, 38.4px) * 1.5);
  --font-size-md: calc(clamp(24px, 20.1464788732px + 1.014084507vw, 38.4px) * 1.5);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body,
main {
  /* Firefox */
  /* IE/old Edge */
  scrollbar-color: var(--color-primary) var(--color-background);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  /* Chrome/Safari */
}

body,
html {
  scroll-behavior: smooth;
}

html {
  background: var(--color-primary);
}

body {
  font-family: var(--main-font), sans-serif;
  font-size: var(--font-size-sm);
  fill: var(--color-text);
  color: var(--color-text);
  background: var(--color-background);
}

#swup {
  min-height: 100dvh;
}

.text-body-xs,
.text-body-sm,
.text-body-md,
.text-body-lg,
.text-body-xl,
.text-body-ul {
  font-family: var(--body-font), sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-heading-xs,
.text-heading-sm,
.text-heading-md,
.text-heading-lg,
.text-heading-xl,
.text-heading-ul {
  font-family: var(--heading-font), sans-serif;
  font-weight: 400;
}

.text-body-xs {
  font-size: var(--font-size-xs);
}

.text-body-sm {
  font-size: var(--font-size-sm);
}

.text-body-md {
  font-size: var(--font-size-md);
}

.text-body-lg {
  font-size: var(--font-size-lg);
}

.text-body-xl {
  font-size: var(--font-size-xl);
}

.text-body-ul {
  font-size: var(--font-size-ul);
}

h6,
.text-heading-xs {
  font-size: var(--font-display-xs);
}

h5,
.text-heading-sm {
  font-size: var(--font-display-sm);
}

h4,
.text-heading-md {
  font-size: var(--font-display-md);
}

h3,
.text-heading-lg {
  font-size: var(--font-display-lg);
}

h2,
.text-heading-xl {
  font-size: var(--font-size-xs);
}

h1,
.text-heading-ul {
  font-size: var(--font-size-xs);
}

p {
  margin: 1em 0;
}
p:first-of-type {
  margin-top: unset;
}
p:last-of-type {
  margin-bottom: unset;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
ul,
li,
a {
  color: var(--color-text);
}

a {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.1s ease;
}

/* all sides */
.b-sm {
  border: var(--outline-sm);
}

.b-md {
  border: var(--outline-md);
}

.b-lg {
  border: var(--outline-lg);
}

/* top */
.bt-sm {
  border-top: var(--outline-sm);
}

.bt-md {
  border-top: var(--outline-md);
}

.bt-lg {
  border-top: var(--outline-lg);
}

/* right */
.br-sm {
  border-right: var(--outline-sm);
}

.br-md {
  border-right: var(--outline-md);
}

.br-lg {
  border-right: var(--outline-lg);
}

/* bottom */
.bb-sm {
  border-bottom: var(--outline-sm);
}

.bb-md {
  border-bottom: var(--outline-md);
}

.bb-lg {
  border-bottom: var(--outline-lg);
}

/* left */
.bl-sm {
  border-left: var(--outline-sm);
}

.bl-md {
  border-left: var(--outline-md);
}

.bl-lg {
  border-left: var(--outline-lg);
}

.radius-1 {
  border-radius: var(--radius-1);
}

.radius-2 {
  border-radius: var(--radius-2);
}

.radius-round {
  border-radius: var(--radius-round);
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

svg {
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

img {
  font-size: 10px;
  width: 100%;
}

img,
video,
picture {
  border-radius: 4px;
}

img[src=""],
img:not([src]) {
  background: var(--color-primary);
  border: 1px solid var(--bg);
}

.logo {
  fill: inherit;
  width: 180px;
  height: auto;
}

.text-links a {
  text-decoration: underline;
}

.banner-title {
  --color-text: var(--color-primary);
  padding-top: 0.5em;
  padding-left: calc(var(--space-md) / 2);
  padding-right: calc(var(--space-md) * 1.2);
}
.banner-title--shrinked .text-fit > :not([aria-hidden]) > *:not(.text-fit) {
  margin-bottom: unset;
}

.text-fit {
  display: flex;
  container-type: inline-size;
  --captured-length: initial;
  --support-sentinel: var(--captured-length, 9999px);
}
.text-fit > [aria-hidden] {
  visibility: hidden;
}
.text-fit > :not([aria-hidden]) {
  flex-grow: 1;
  container-type: inline-size;
  --captured-length: 100cqi;
  --available-space: var(--captured-length);
}
.text-fit > :not([aria-hidden]) > * {
  --support-sentinel: inherit;
  --captured-length: 100cqi;
  --ratio: tan(
    atan2(
      var(--available-space),
      var(--available-space) - var(--captured-length)
    )
  );
  --font-size: clamp(
    1em,
    1em * var(--ratio),
    var(--max-font-size, infinity * 1px) - var(--support-sentinel)
  );
  inline-size: var(--available-space);
  line-height: 0.78;
  letter-spacing: -0.055em;
}
.text-fit > :not([aria-hidden]) > *:not(.text-fit) {
  display: block;
  font-size: var(--font-size);
  line-height: 0.78;
  letter-spacing: -0.055em;
  margin-bottom: 0.2em;
}
@container (inline-size > 0) {
  .text-fit > :not([aria-hidden]) > *:not(.text-fit) {
    white-space: nowrap;
  }
}
.text-fit > :not([aria-hidden]) > * {
  /* Necessary for variable fonts that use optical sizing */
}
.text-fit > :not([aria-hidden]) > *.text-fit {
  --captured-length2: var(--font-size);
  font-variation-settings: "opsz" tan(atan2(var(--captured-length2), 1px));
}

@property --captured-length {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}
@property --captured-length2 {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-in-top {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-in-bottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes fade-out-top {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes fade-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes fade-out-bottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
.delay-1 {
  transition-delay: 0.1s !important;
}

.delay-2 {
  transition-delay: 0.2s !important;
}

.delay-3 {
  transition-delay: 0.3s !important;
}

.delay-4 {
  transition-delay: 0.4s !important;
}

.delay-5 {
  transition-delay: 0.5s !important;
}

.delay-6 {
  transition-delay: 0.6s !important;
}

.delay-7 {
  transition-delay: 0.7s !important;
}

.delay-8 {
  transition-delay: 0.8s !important;
}

.delay-9 {
  transition-delay: 0.9s !important;
}

.delay-10 {
  transition-delay: 1s !important;
}

.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: var(--color-primary);
  opacity: 0;
  transform: translate3d(0, calc(-100% * var(--overlay-direction, 1)), 0);
  pointer-events: none;
  transition: background 180ms;
}

/* Slightly move main content */
html.is-changing .transition-overlay {
  transition: transform 400ms ease-in-out, background 180ms;
  opacity: 1;
}

html.is-animating .transition-overlay {
  transform: translate3d(0, 0, 0);
}

html.is-rendering .transition-overlay {
  transform: translate3d(0, calc(var(--overlay-direction, 1) * 100%), 0);
}

html.to-back {
  /* --overlay-direction: -1; */
}

.accessibility-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  display: none;
}

.accessibility-spotlight {
  display: none;
}

.accessibility-cursor {
  width: 100px;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-image: url("../img/accessibility-cursor.png");
  background-position: start center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  display: none;
}

.accessibility-highlightTitle h1,
.accessibility-highlightTitle h2,
.accessibility-highlightTitle h3,
.accessibility-highlightTitle h4,
.accessibility-highlightTitle h5,
.accessibility-highlightTitle h6 {
  border: var(--color-highlight) 2px solid;
}

.accessibility-highlightLinks a {
  border: var(--color-highlight) 2px solid;
}

.accessibility-moreLineSpace * {
  line-height: 2em !important;
}

.accessibility-moreLetterSpace * {
  letter-spacing: 0.1em;
}

.accessibility-darkerContrast p,
.accessibility-darkerContrast h1,
.accessibility-darkerContrast h2,
.accessibility-darkerContrast h3,
.accessibility-darkerContrast h4,
.accessibility-darkerContrast h5,
.accessibility-darkerContrast h6,
.accessibility-darkerContrast span,
.accessibility-darkerContrast a {
  background-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white) !important;
  fill: var(--color-white);
}
.accessibility-darkerContrast p svg,
.accessibility-darkerContrast h1 svg,
.accessibility-darkerContrast h2 svg,
.accessibility-darkerContrast h3 svg,
.accessibility-darkerContrast h4 svg,
.accessibility-darkerContrast h5 svg,
.accessibility-darkerContrast h6 svg,
.accessibility-darkerContrast span svg,
.accessibility-darkerContrast a svg {
  fill: var(--color-white);
  background: var(--color-black);
}

.accessibility-lighterContrast p,
.accessibility-lighterContrast h1,
.accessibility-lighterContrast h2,
.accessibility-lighterContrast h3,
.accessibility-lighterContrast h4,
.accessibility-lighterContrast h5,
.accessibility-lighterContrast h6,
.accessibility-lighterContrast span,
.accessibility-lighterContrast a {
  background-color: var(--color-white) !important;
  background: var(--color-white);
  color: var(--color-black) !important;
  fill: var(--color-black);
}
.accessibility-lighterContrast p svg,
.accessibility-lighterContrast h1 svg,
.accessibility-lighterContrast h2 svg,
.accessibility-lighterContrast h3 svg,
.accessibility-lighterContrast h4 svg,
.accessibility-lighterContrast h5 svg,
.accessibility-lighterContrast h6 svg,
.accessibility-lighterContrast span svg,
.accessibility-lighterContrast a svg {
  fill: var(--color-black);
  background: var(--color-white);
}
.accessibility-lighterContrast .accessibility-item__toggle.checked {
  border: var(--color-black) 3px solid;
}

.accessibility-highContrast .accessibility-overlay {
  display: block;
  backdrop-filter: contrast(200%);
}

.accessibility-highSaturation .accessibility-overlay {
  display: block;
  backdrop-filter: saturate(200%);
}

.accessibility-littleSaturation .accessibility-overlay {
  display: block;
  backdrop-filter: saturate(50%);
}

.accessibility-monochromatic .accessibility-overlay {
  display: block;
  backdrop-filter: grayscale(1);
}

.accessibility-monochromatic .accessibility-overlay {
  display: block;
  backdrop-filter: grayscale(1);
}

.accessibility-readingGuide .accessibility-spotlight {
  display: block;
  position: fixed;
  left: 0;
  top: 50px;
  width: 100vw;
  height: 7vh;
  /* Darken everything else with a massive spread shadow */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  pointer-events: none; /* don't block clicks */
  z-index: 9999;
}

.accessibility-noAnimations * {
  animation: none !important;
  transition: none !important;
}

.accessibility-bigCursor {
  cursor: none;
}
.accessibility-bigCursor * {
  cursor: none;
}
.accessibility-bigCursor .accessibility-cursor {
  display: block;
}

.accessibility-invert .icon-toggle .light {
  display: initial;
}
.accessibility-invert .icon-toggle .dark {
  display: none;
}

.nav {
  --color-text: var(--color-secondary);
  position: fixed;
  top: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  padding: 0.4em var(--space-md);
  z-index: 10;
  color: var(--color-secondary);
  background: var(--color-primary);
  font-size: var(--font-size-xs);
}
@media screen and (max-width: 1024px) {
  .nav {
    display: flex;
    justify-content: space-between;
  }
}
.nav__heading {
  white-space: nowrap;
}
.nav__link-list {
  justify-self: center;
  display: flex;
  gap: var(--space-sm);
}
@media screen and (max-width: 1024px) {
  .nav__link-list {
    display: none;
  }
}
.nav__subheading {
  justify-self: end;
  font-size: var(--font-size-us);
  letter-spacing: 50%;
}
@media screen and (max-width: 1024px) {
  .nav__subheading {
    display: none;
  }
}
.nav__button-menu {
  display: none;
}
@media screen and (max-width: 1024px) {
  .nav__button-menu {
    display: block;
  }
}
.nav__button-menu--open {
  display: block;
}
.nav__button-menu--close {
  display: none;
}
.nav.is-expanded .nav__button-menu--open {
  display: none;
}
.nav.is-expanded .nav__button-menu--close {
  display: block;
}

.nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0px;
  z-index: -1;
  overflow: hidden;
  transition: var(--nav-transition-duration);
}
.nav-menu__container {
  position: relative;
  width: 100%;
  height: 100dvh;
  padding: clamp(1rem, 1.2rem + 2vw, 5rem) var(--space-md);
  padding-bottom: 1em;
  background: var(--color-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  justify-content: space-between;
  overflow: auto;
  overscroll-behavior: contain;
}
.nav-menu__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.nav-menu__contact-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: start;
}
.nav-menu__link-list {
  font-size: var(--font-display-xl);
  margin-top: 1em;
}
.nav-menu__subheading {
  font-size: var(--font-display-us);
  letter-spacing: 50%;
  align-self: center;
}

.footer {
  --color-text: var(--color-secondary);
  align-self: end;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: var(--space-lg) 10px;
  padding: var(--space-md) var(--space-md);
  width: 100%;
  overflow: hidden;
  fill: var(--color-secondary);
  background: var(--color-primary);
}
.footer__container {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: repeat(2, auto);
  width: 100%;
  overflow: hidden;
}
.footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.footer__column--left, .footer__column--left ul {
  align-items: start;
}
.footer__column--middle, .footer__column--middle ul {
  align-items: center;
}
.footer__column--right, .footer__column--right ul {
  align-items: end;
}
.footer__title, .footer__subtitle {
  font-size: var(--font-display-us);
  letter-spacing: 50%;
}
.footer__links-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer__links-list--general {
  font-size: var(--font-size-xs);
  flex-direction: row;
  gap: 10px;
}
.footer__links-list--desktop {
  display: flex;
}
.footer__links-list--mobile {
  display: none;
}
@media screen and (max-width: 750px) {
  .footer__links-list--mobile {
    display: block;
  }
  .footer__links-list--desktop {
    display: none;
  }
}
.footer__link-element--desktop {
  display: flex;
}
.footer__link-element--mobile {
  display: none;
}
@media screen and (max-width: 750px) {
  .footer__link-element--mobile {
    display: block;
  }
  .footer__link-element--desktop {
    display: none;
  }
}
.footer__details-list {
  width: 100%;
  display: flex;
  gap: var(--space-lg);
}
@media screen and (max-width: 1024px) {
  .footer__details-list {
    flex-direction: column;
    gap: var(--space-md);
  }
}
@media screen and (max-width: 750px) {
  .footer__details-list {
    flex-direction: row;
    gap: var(--space-md);
    justify-content: space-between;
  }
}
@media screen and (max-width: 1024px) {
  .footer {
    grid-template-columns: auto;
    gap: var(--space-md);
  }
  .footer__column--left {
    order: -1;
    align-items: center;
  }
  .footer__column--middle {
    align-items: center;
  }
  .footer__column--right {
    align-items: center;
  }
  .footer__container {
    grid-column: span 1;
  }
  .footer__container .footer__column--left {
    align-items: start;
  }
  .footer__container .footer__column--middle {
    align-items: center;
  }
  .footer__container .footer__column--right {
    align-items: end;
  }
}
@media screen and (max-width: 750px) {
  .footer {
    gap: var(--space-lg);
  }
  .footer__column--left {
    order: -1;
    align-items: center;
  }
  .footer__column--middle {
    align-items: center;
  }
  .footer__column--right {
    align-items: center;
  }
  .footer__container {
    grid-template-columns: auto;
    gap: var(--space-lg);
  }
  .footer__container .footer__column--left {
    align-items: start;
  }
  .footer__container .footer__column--middle {
    order: -2;
    align-items: center;
  }
  .footer__container .footer__column--right, .footer__container .footer__column--right ul {
    align-items: start;
  }
}

input,
textarea,
select {
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  outline: none;
  transition: all 0.2s ease-in-out;
}

input {
  width: 100%;
  display: block;
  background-color: transparent;
  border: var(--outline-md);
  padding: var(--space-md) var(--space-md);
  margin-bottom: var(--space-md);
}
input[type=radio], input[type=checkbox] {
  width: 20px;
  height: 20px;
  border: var(--outline-md);
  border-radius: var(--radius-1); /* Apply a small border radius */
  background-color: transparent;
}
input[type=radio]:checked, input[type=checkbox]:checked {
  background-color: var(--color-bg); /* Optional: Highlight when checked */
  border-color: var(--color-text);
}
input:focus {
  border-color: var(--color-text);
}

textarea {
  width: 100%;
  display: block;
  background-color: transparent;
  border: var(--outline-md);
  padding: var(--space-md) var(--space-md);
  margin-bottom: var(--space-md);
}

:root {
  --color-primary: #c88c8c;
  --color-secondary: #e0b0b0;
  --color-tertiary: #b47676;
  --color-accent: #f0b060;
  --color-light: #f0f0f0;
  --color-dark: #a07878;
  --color-highlight: #f0e890;
  --color-neutral: #b8b8b8;
  --color-bg-dark: #1a1a1a;
  --color-bg-darker: #323232;
  --gradient-top: rgba(200, 90, 90, 0.8);
  --gradient-middle: rgba(220, 180, 100, 0.7);
  --gradient-bottom: rgba(120, 180, 120, 0.6);
}

.waveform-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0;
}

.landing-content {
  position: relative;
  z-index: 2;
  max-width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  max-width: 900px;
}

.app-container {
  display: flex;
  flex-direction: column;
}

.app-header {
  margin-bottom: 0.25rem;
  position: relative;
  padding-top: 0.25rem;
}

.landing-logo {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
  font-weight: 300;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.landing-logo:hover {
  opacity: 0.9;
}

.mute-btn {
  cursor: pointer;
  height: 42px !important;
  width: calc(var(--width-button-icon) + 12px) !important;
}
.mute-btn .icon--unmute,
.mute-btn .icon--mute {
  width: 23px;
}
.mute-btn .icon--unmute {
  display: none;
}
.mute-btn .icon--mute {
  display: block;
}

.speaker-icon {
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}

.mute-btn.muted .icon--unmute {
  display: block;
}
.mute-btn.muted .icon--mute {
  display: none;
}

.mute-btn.muted .speaker-icon::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 28px;
  background: currentColor;
  transform: rotate(45deg);
  top: 50%;
  left: 50%;
  margin-left: -1px;
  margin-top: -14px;
}

.mute-btn-app {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10;
}

.app-header .logo {
  position: absolute;
  top: -1rem;
  left: -1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.2s ease;
  padding: 1.5rem;
  margin: -1rem;
  z-index: 100;
}

.app-header .logo:hover {
  opacity: 0.9;
}

.mpc-title {
  font-size: 1.25rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.02em;
  margin: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

.app-container.show .mpc-title {
  opacity: 1;
  transform: translateY(0);
}

.title {
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: 0;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.95);
  font-family: "Helvetica Neue", "Arial", sans-serif;
}

.subtitle {
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  display: block;
  margin: 0.3rem 0 0.3rem 0;
  line-height: 1.4;
}

.listen-btn {
  margin-top: 2.5rem;
  padding: 1rem 3rem;
  background: transparent;
  border: 2px solid rgba(224, 176, 176, 0.8);
  border-radius: 50px;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: none;
  letter-spacing: 0.05em;
}

.listen-btn:hover {
  background: var(--color-tertiary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 165, 165, 0.3);
}

.listen-btn:active {
  transform: translateY(0);
}

.bg-block {
  flex: 1;
  background: #c48b8b;
  opacity: 0.85;
  will-change: height;
  box-sizing: border-box;
}

.waveform-block {
  flex: 1;
  background: #c48b8b;
  opacity: 0.85;
  will-change: height;
  box-sizing: border-box;
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: center;
  padding: 0 var(--space-md);
  overflow: hidden;
}

.pad-grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  width: 100%;
  height: 70dvh;
  min-height: 500px;
}
@media screen and (max-width: 750px) {
  .pad-grid {
    grid-template-rows: repeat(9, 1fr);
  }
  .pad-grid .pad-row {
    grid-row: span 2;
  }
  .pad-grid .pad-row:first-child {
    grid-row: span 3;
  }
}

.pad-row {
  display: grid;
  gap: 2px;
}
.pad-row--5 {
  grid-template-columns: repeat(5, 1fr);
}
.pad-row--4 {
  grid-template-columns: repeat(4, 1fr);
}
.pad-row--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 1024px) {
  .pad-row--5 {
    grid-template-columns: repeat(6, 1fr);
  }
  .pad-row--5 .pad {
    grid-column: span 2;
  }
  .pad-row--5 .pad:nth-child(1),
  .pad-row--5 .pad:nth-child(2) {
    grid-column: span 3;
  }
  .pad-row--4 {
    grid-template-columns: repeat(6, 1fr);
  }
  .pad-row--4 .pad {
    grid-column: span 2;
  }
  .pad-row--4 .pad:nth-child(1) {
    grid-column: span 6;
  }
  .pad-row--3 {
    grid-template-columns: repeat(6, 1fr);
  }
  .pad-row--3 .pad {
    grid-column: span 3;
  }
  .pad-row--3 .pad:nth-child(1) {
    grid-column: span 6;
  }
}
@media screen and (max-width: 750px) {
  .pad-row--5 {
    grid-template-columns: repeat(6, 1fr);
  }
  .pad-row--5 .pad,
  .pad-row--5 .pad:nth-child(2) {
    grid-column: span 2;
  }
  .pad-row--5 .pad:nth-child(1),
  .pad-row--5 .pad:nth-child(5) {
    grid-column: span 6;
  }
  .pad-row--4 {
    grid-template-columns: repeat(6, 1fr);
  }
  .pad-row--4 .pad,
  .pad-row--4 .pad:nth-child(1) {
    grid-column: span 2;
  }
  .pad-row--4 .pad:nth-child(4) {
    grid-column: span 6;
  }
  .pad-row--3 {
    grid-template-columns: repeat(6, 1fr);
  }
  .pad-row--3 .pad,
  .pad-row--3 .pad:nth-child(1) {
    grid-column: span 3;
  }
  .pad-row--3 .pad:nth-child(3) {
    grid-column: span 6;
  }
}

.pad {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pad.playing {
  border-color: rgba(224, 176, 176, 0.6);
  background: linear-gradient(135deg, rgba(224, 176, 176, 0.25) 0%, rgba(160, 120, 120, 0.15) 100%);
  box-shadow: 0 0 15px rgba(224, 176, 176, 0.25);
}

.pad-label {
  --color-text: var(--color-secondary);
  position: absolute;
  top: calc(var(--space-small-us) * 1.4);
  left: calc(var(--space-small-us) * 1.1);
  font-size: calc(var(--font-size-us) * 1.2);
  line-height: 1;
  padding: 2px 3px;
  background: var(--color-primary);
  border-radius: 4px;
  z-index: 2;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 750px) {
  .pad-label {
    font-size: calc(var(--font-size-us) * 0.9);
  }
}

.waveform-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0;
  border: 2px transparent solid;
  transition: border 0.1s ease-in-out;
}
.waveform-container:hover {
  border: 2px var(--color-primary) solid;
}

.controls-panel {
  position: sticky;
  bottom: var(--space-md);
  width: 100%;
  display: flex;
  gap: var(--space-md);
  justify-content: space-between;
  padding: 0 var(--space-md);
  z-index: 2;
}
@media screen and (max-width: 750px) {
  .controls-panel {
    flex-direction: column-reverse;
  }
}

.playback-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}
.playback-controls__container {
  display: flex;
  gap: 2px;
}
@media screen and (max-width: 750px) {
  .playback-controls {
    justify-content: space-between;
  }
}

.mixer-controls {
  display: flex;
  gap: 2px;
}
@media screen and (max-width: 750px) {
  .mixer-controls {
    justify-content: space-between;
  }
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.volume-control label {
  font-size: 0.9rem;
  color: var(--color-neutral);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.volume-control input[type=range] {
  width: 150px;
  height: 4px;
  background: var(--color-bg-dark);
  border-radius: 2px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.volume-control input[type=range]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--color-tertiary);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.volume-control input[type=range]::-webkit-slider-thumb:hover {
  background: var(--color-light);
  transform: scale(1.2);
}

.volume-control input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--color-tertiary);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.volume-control input[type=range]::-moz-range-thumb:hover {
  background: var(--color-light);
  transform: scale(1.2);
}

.mixer-strips {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  padding: 10px;
  gap: 10px 2px;
  overflow: visible;
  overscroll-behavior: contain;
  touch-action: none;
}
@media screen and (max-width: 750px) {
  .mixer-strips {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.mixer-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  justify-content: flex-start;
  overflow: visible;
}

.strip-label {
  font-size: var(--font-size-us);
  color: var(--color-secondary);
  text-align: center;
  order: 1;
}

.strip-value {
  font-size: var(--font-size-us);
  color: var(--color-secondary);
  text-align: center;
  min-width: 3ch;
  order: 3;
}

.strip-fader-container {
  position: relative;
  height: 100px;
  width: 6px;
  order: 2;
}

.strip-fader {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 1.5px;
  width: 100px;
  height: 6px;
  background: var(--color-secondary);
  outline: none;
  cursor: pointer;
  order: 2;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  padding: unset;
  margin-bottom: unset;
  border: unset;
}

.strip-fader::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  opacity: 0.7;
  border-radius: 1.5px;
  pointer-events: none;
}

.strip-fader::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: var(--color-primary);
  opacity: 0.6;
  border-radius: 1.5px;
}

.strip-peak {
  position: absolute;
  width: 90px;
  height: 3px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
  display: none;
}

.strip-peak-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--gradient-bottom) 0%, var(--gradient-bottom) 60%, var(--gradient-middle) 80%, var(--gradient-top) 95%, var(--gradient-top) 100%);
  opacity: 0.7;
  border-radius: 1.5px;
  transition: width 0.05s ease;
}

.strip-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 14px;
  background: var(--color-accent);
  border-radius: 6px;
  border: unset;
  cursor: pointer;
  transition: all 0.15s ease;
}
@media screen and (max-width: 750px) {
  .strip-fader::-webkit-slider-thumb {
    width: 40px;
    height: 22.4px;
  }
}

.strip-fader::-webkit-slider-thumb:hover {
  background: rgb(255, 255, 255);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.strip-fader::-moz-range-thumb {
  width: 25px;
  height: 14px;
  background: var(--color-background);
  border-radius: 6px;
  border: unset;
  cursor: pointer;
  transition: all 0.15s ease;
}
@media screen and (max-width: 750px) {
  .strip-fader::-moz-range-thumb {
    width: 40px;
    height: 22.4px;
  }
}

.strip-fader::-moz-range-thumb:hover {
  transform: scale(1.1);
}

.mixer-panel {
  position: absolute;
  top: 0;
  display: flex;
  background: var(--color-primary);
  border-radius: 9px;
  transform: translateY(calc(-100% - 5px));
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-direction: column;
  width: 60%;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  .mixer-panel {
    width: calc(100% - var(--space-md) * 2);
    transform: translateY(calc(-100% - 10px));
  }
}

.mixer-toggle-btn .button__icon svg {
  transform: rotate(180deg);
  transition: var(--dropdown-transition-duration);
}

.record-toggle-btn .controls-label {
  text-overflow: ellipsis;
}

.record-toggle-btn.recording {
  background: rgba(180, 60, 60, 0.9);
  border-color: rgba(255, 100, 100, 0.8);
}

.record-toggle-btn.active,
.mixer-panel.show ~ .record-toggle-btn {
  bottom: 140px;
}

.mixer-toggle-btn.active .button__icon svg {
  transform: rotate(0deg);
}

.mixer-chevron {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid rgba(200, 140, 140, 0.8);
  transition: transform 0.3s ease;
}

.mixer-toggle-btn.active .mixer-chevron {
  transform: rotate(180deg);
}

@media (max-width: 900px) {
  .mixer-toggle {
    font-size: 0.75rem;
    padding: 0.6rem 1.2rem;
  }
}
@media (max-width: 768px) {
  .title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}
@media (max-width: 480px) {
  .listen-btn {
    padding: 0.75rem 2rem;
    font-size: 1rem;
  }
  .mixer-toggle-btn,
  .reset-toggle-btn,
  .stop-toggle-btn,
  .record-toggle-btn {
    min-width: 50px;
    padding: 0 0.5rem;
    font-size: 0.6rem;
  }
  .reset-toggle-btn {
    left: calc(1rem + 60px);
  }
  .record-toggle-btn {
    right: calc(1rem + 65px);
  }
}
.home-overlay {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 100dvh;
  width: 100%;
  padding: var(--space-md);
  z-index: 20;
  scrollbar-gutter: auto;
  display: none;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  justify-content: end;
  align-items: end;
}
.home-overlay a {
  text-decoration: underline;
}
.home-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  opacity: 0;
  z-index: -1;
  transition: var(--home-overlay-transition-duration);
}
.home-overlay__main {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.home-overlay__container {
  max-height: 100%;
  overflow: hidden;
}
.home-overlay__container {
  grid-column: 5/span 8;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 2px;
  transform: translateY(200%);
  transition: var(--home-overlay-transition-duration);
}
.home-overlay__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-background);
  padding: var(--space-md);
  border-radius: 9px;
}
.home-overlay__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.home-overlay__options .button {
  justify-content: center;
}
.home-overlay__links {
  display: flex;
  gap: 5px;
  font-size: calc(var(--font-size-xs) * 0.9);
}
.home-overlay__intro {
  line-height: 1.1;
}
@media screen and (max-width: 1024px) {
  .home-overlay__container {
    grid-column: 3/span 10;
  }
}
@media screen and (max-width: 750px) {
  .home-overlay__main {
    padding: 15px var(--space-md);
  }
  .home-overlay__container {
    grid-column: 1/span 12;
  }
  .home-overlay__options {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.home-overlay.visible::before {
  content: "";
  opacity: 0.5;
}
.home-overlay.visible .home-overlay__container {
  transform: translateY(0%);
}

.privacy-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.privacy-item__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: start;
}
.privacy-item__head {
  border-top: 2px solid var(--color-primary);
  align-items: center;
  cursor: pointer;
  padding: 10px 0;
}
.privacy-item__head .button__icon svg {
  transition: var(--dropdown-transition-duration);
}
.privacy-item__body {
  transition: var(--dropdown-transition-duration);
}
.privacy-item__body::-webkit-scrollbar {
  display: none;
}
.privacy-item__select {
  align-items: center;
}
.privacy-item__text {
  padding: 10px 0 var(--space-md);
  padding-left: calc(1em + 10px);
  padding-right: var(--width-button-icon);
}
.privacy-item__table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0 var(--space-md);
  padding-left: calc(1.3em + 10px);
  padding-right: var(--width-button-icon);
  font-size: calc(var(--font-size-xs) * 0.9);
}
.privacy-item__table:last-child {
  padding-bottom: var(--space-lg);
}
.privacy-item__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.privacy-item__row span {
  grid-column: span 3;
}
.privacy-item__row span:nth-child(1) {
  grid-column: span 1;
}
@media screen and (max-width: 750px) {
  .privacy-item__table {
    gap: 15px;
  }
  .privacy-item__row {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 5px;
  }
  .privacy-item__row span {
    grid-column: span 1;
  }
  .privacy-item__table, .privacy-item__text {
    padding-left: unset;
    padding-right: unset;
  }
}

.privacy-item.expanded .privacy-item__head .button__icon svg {
  transform: rotate(180deg);
}

main {
  padding-top: var(--margin-top-main);
}

header {
  width: 100%;
}

section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-md) 0px var(--space-lg);
}

.section-footer {
  padding: 0 var(--space-md);
  font-size: var(--font-size-md);
  text-decoration: underline;
  text-decoration-color: var(--color-text);
}

.header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.header--border .header__container {
  border-top: 2px solid var(--color-primary);
}
.header__banner-title {
  z-index: 1;
}
.header__container, .header__banner-title,
.header .section {
  grid-column: span 12;
}
.header .section {
  padding-bottom: unset;
}
.header__container {
  display: grid;
  grid-template-columns: subgrid;
}
.header__media {
  grid-column: 4/span 6;
  padding: var(--space-md);
}
.header__media--offset-top {
  margin-top: -20%;
}
.header__media img,
.header__media picture,
.header__media video {
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media screen and (max-width: 1024px) {
  .header__image {
    grid-column: 3/span 8;
  }
  .header__image--offset-top {
    margin-top: -10%;
  }
}
@media screen and (max-width: 750px) {
  .header__image {
    grid-column: 1/span 12;
  }
  .header__image--offset-top {
    margin-top: unset;
  }
}

.section--border {
  border-top: 2px solid var(--color-primary);
}
.section--border-top {
  border-top: 2px solid var(--color-primary);
}

.section--services {
  padding-bottom: unset;
}
.section--quality-badge {
  background: var(--color-background);
  position: relative;
  z-index: 1;
}
.section--quality-badge .section__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  padding: 0 var(--space-md);
}
.section--quality-badge .section__body .section__badge {
  position: relative;
  grid-column: span 4;
}
.section--quality-badge .section__body .section__badge .badge-graph {
  position: absolute;
  width: var(--width-badge-graph);
  bottom: var(--space-md);
  left: 50%;
  transform-origin: 50% 50%;
  transform: translateX(-50%);
  animation: swingElastic 5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
.section--quality-badge .section__body .section__badge .badge-graph rect {
  fill: #ffd875;
}
.section--quality-badge .section__body .section__badge .badge-graph path {
  fill: var(--color-black);
}
.section--quality-badge .section__body .section__media {
  display: flex;
  grid-column: 5/span 8;
}
.section--quality-badge .section__body .section__media picture,
.section--quality-badge .section__body .section__media img,
.section--quality-badge .section__body .section__media video {
  aspect-ratio: 16/10;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media screen and (max-width: 1024px) {
  .section--quality-badge .section__body .section__badge {
    position: unset;
  }
  .section--quality-badge .section__body .section__badge .badge-graph {
    bottom: unset;
    top: 83%;
    left: 70%;
  }
  .section--quality-badge .section__body .section__badge,
  .section--quality-badge .section__body .section__media {
    grid-column: 1/span 12;
  }
}

.section--presentation {
  background: var(--color-background);
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
  padding: var(--space-ul) var(--space-md);
}
.section--presentation .section-head {
  padding: unset;
  grid-column: span 4;
}
.section--presentation .section__text {
  grid-column: 5/span 8;
  font-size: var(--font-size-md);
  line-height: 1.2;
  word-break: break-word;
  hyphens: auto;
}
@media screen and (max-width: 1024px) {
  .section--presentation {
    gap: 30px 2px;
  }
  .section--presentation .section-head,
  .section--presentation .section__text {
    grid-column: span 12;
  }
}

.section--featured-projects {
  background: var(--color-background);
}
.section--featured-projects .projects-table {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px 2px;
  padding: 0 var(--space-md);
}
.section--featured-projects .projects-table__cell {
  grid-column: span 3;
  position: relative;
  display: flex;
  height: 34vw;
}
.section--featured-projects .projects-table__cell img,
.section--featured-projects .projects-table__cell video,
.section--featured-projects .projects-table__cell picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section--featured-projects .projects-table__cell svg {
  width: 100%;
  height: auto;
  fill: var(--color-text);
}
.section--featured-projects .projects-table__cell:nth-child(1) {
  grid-column: span 3;
}
.section--featured-projects .projects-table__cell:nth-child(2) {
  grid-column: span 9;
}
.section--featured-projects .projects-table__cell:nth-child(2) img,
.section--featured-projects .projects-table__cell:nth-child(2) video,
.section--featured-projects .projects-table__cell:nth-child(2) picture {
  aspect-ratio: 4/2;
}
.section--featured-projects .projects-table__cell:nth-child(6n+3), .section--featured-projects .projects-table__cell:nth-child(6n+8) {
  grid-column: span 6;
}
@media screen and (max-width: 750px) {
  .section--featured-projects .projects-table__cell {
    height: auto;
    grid-column: span 6;
  }
  .section--featured-projects .projects-table__cell img,
  .section--featured-projects .projects-table__cell video,
  .section--featured-projects .projects-table__cell picture {
    aspect-ratio: 1/1;
  }
  .section--featured-projects .projects-table__cell:nth-child(1), .section--featured-projects .projects-table__cell:nth-child(2), .section--featured-projects .projects-table__cell:nth-child(5n+2) {
    grid-column: span 12;
  }
  .section--featured-projects .projects-table__cell:nth-child(1) img,
  .section--featured-projects .projects-table__cell:nth-child(1) video,
  .section--featured-projects .projects-table__cell:nth-child(1) picture, .section--featured-projects .projects-table__cell:nth-child(2) img,
  .section--featured-projects .projects-table__cell:nth-child(2) video,
  .section--featured-projects .projects-table__cell:nth-child(2) picture, .section--featured-projects .projects-table__cell:nth-child(5n+2) img,
  .section--featured-projects .projects-table__cell:nth-child(5n+2) video,
  .section--featured-projects .projects-table__cell:nth-child(5n+2) picture {
    aspect-ratio: 3/4;
  }
}
.section--featured-projects .project-card {
  position: relative;
  min-height: 31vw;
  overflow: hidden;
  border-radius: 4px;
}
.section--featured-projects .project-card__label {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-md);
  font-size: var(--font-size-xs);
  z-index: 1;
  --color-text: var(--color-background);
  mix-blend-mode: screen;
}
.section--featured-projects .project-card__link {
  z-index: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
.section--featured-projects .project-card__link img,
.section--featured-projects .project-card__link video {
  transition: transform 0.3s ease-in-out;
}
.section--featured-projects .project-card__link:hover img,
.section--featured-projects .project-card__link:hover video {
  transform: scale(1.04);
}

.section--audiotour {
  background: var(--color-background);
  color: var(--color-text);
  position: relative;
  height: 90vh;
  max-height: 900px;
  justify-content: space-between;
}
.section--audiotour .audiotour {
  text-align: center;
  z-index: 1;
}
.section--audiotour .audiotour__title {
  font-size: var(--font-display-ul);
  line-height: 0.85;
  letter-spacing: -3%;
}
.section--audiotour .audiotour__subtitle {
  font-size: var(--font-size-md);
}
.section--audiotour .audiotour-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.section--audiotour .bg-block {
  flex: 1;
  background: #c05f3e;
  opacity: 0.85;
  will-change: height;
  box-sizing: border-box;
}
.section--audiotour .section-head,
.section--audiotour .section-footer,
.section--audiotour .audiotour {
  z-index: 1;
}

.section--process {
  background: var(--color-background);
}
.section--process .process-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.section--process .process-card__head {
  display: flex;
  gap: 15px;
}
.section--process .process-card__step-title {
  font-size: var(--font-size-md);
  line-height: 1.2;
}
.section--process .process-card__step-number {
  font-size: calc(var(--font-display-ul) * 1.7);
  line-height: 0.9;
  height: 0.8em;
  overflow: visible;
}
.section--process .process-card__step-text {
  font-size: calc(var(--font-size-sm) * 0.9);
  word-break: break-word;
  hyphens: auto;
}
.section--process .process-card__media picture,
.section--process .process-card__media img,
.section--process .process-card__media video {
  aspect-ratio: 3/4;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.section--faq {
  background: var(--color-background);
}
.section--faq .section-footer {
  text-align: center;
}
.section--faq .faq-list-container,
.section--faq .download-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: 0 var(--space-md);
}
.section--faq .faq-list__title {
  display: grid;
  grid-template-columns: 3em 1fr var(--width-button-icon);
  gap: var(--space-lg);
  margin-bottom: var(--space-sm);
}
@media screen and (max-width: 1280px) {
  .section--faq .faq-list__title {
    grid-template-columns: 2em 1fr var(--width-button-icon);
  }
}
@media screen and (max-width: 750px) {
  .section--faq .faq-list__title {
    grid-template-columns: 1em 1fr var(--width-button-icon);
    gap: var(--space-md);
  }
}
.section--faq .faq-list__title-text {
  grid-column-start: 2;
}
.section--faq .faq-item {
  display: flex;
  flex-direction: column;
}
.section--faq .faq-item__head, .section--faq .faq-item__body {
  display: grid;
  grid-template-columns: 3em 1fr var(--width-button-icon);
  gap: var(--space-lg);
  align-items: start;
}
@media screen and (max-width: 1280px) {
  .section--faq .faq-item__head, .section--faq .faq-item__body {
    grid-template-columns: 2em 1fr var(--width-button-icon);
  }
}
@media screen and (max-width: 750px) {
  .section--faq .faq-item__head, .section--faq .faq-item__body {
    grid-template-columns: 1em 1fr var(--width-button-icon);
    gap: var(--space-md);
  }
}
.section--faq .faq-item__head {
  border-top: 2px solid var(--color-primary);
  transition: all 0.1s ease-in-out;
}
.section--faq .faq-item__head div,
.section--faq .faq-item__head p,
.section--faq .faq-item__head span {
  transition: all 0.1s ease-in-out;
}
.section--faq .faq-item__head {
  cursor: pointer;
  padding: 10px 0;
}
.section--faq .faq-item__head .button__icon svg {
  transition: var(--dropdown-transition-duration);
}
.section--faq .faq-item__head .button__icon {
  overflow: hidden;
}
.section--faq .faq-item__head svg {
  will-change: transform;
}
.section--faq .faq-item__head:hover .button__icon {
  background: var(--color-accent);
  overflow: hidden;
}
.section--faq .faq-item__head:hover .svg-container {
  animation: bounce-down 0.4s ease-in-out;
}
.section--faq .faq-item__head:hover .faq-item__question,
.section--faq .faq-item__head:hover .faq-item__index {
  filter: brightness(0.85) saturate(1.1);
}
@keyframes bounce-down {
  0% {
    transform: translate(0%, 0%);
  }
  32% {
    transform: translate(0%, 20%);
  }
  62% {
    transform: translate(0%, -25%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
.section--faq .faq-item__body {
  overflow: hidden;
  transition: var(--dropdown-transition-duration);
}
.section--faq .faq-item__index, .section--faq .faq-item__question, .section--faq .faq-item__answer {
  font-size: var(--font-size-lg);
}
.section--faq .faq-item__answer {
  font-size: var(--font-size-lg);
  grid-column-start: 2;
  padding: var(--space-md) 0 var(--space-lg);
}
.section--faq .faq-item.expanded .faq-item__head .button__icon svg,
.section--faq .faq-item.expanded .filter__expand-control.button__icon svg {
  transform: rotate(180deg);
}
.section--faq .download-container {
  width: 100%;
  max-width: 900px;
  align-self: center;
}
.section--faq .download-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--space-md);
  align-items: center;
  border-radius: 9px;
  padding: 10px;
  background: var(--color-white-50);
}
.section--faq .download-item__description {
  grid-column: 1/span 1;
  align-self: start;
  margin-top: 10px;
  margin-left: 10px;
}
.section--faq .download-item .button {
  grid-column: 1/span 1;
  justify-self: start;
  align-self: end;
  margin-left: 10px;
  margin-bottom: 10px;
}
.section--faq .download-item .download-graph-container {
  grid-column: 2/span 1;
  grid-row: 1/span 2;
  align-self: start;
  width: var(--width-download-graph);
  height: auto;
  position: relative;
  display: flex;
  background: #efefef;
  border-radius: 11px;
}
.section--faq .download-item .download-graph-container__fold {
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  border-width: 0;
  border-style: solid;
  background: #aaaaaa;
  display: block;
  border-radius: 11px 0 0 0;
  border-color: transparent #f2dbdb transparent #f2dbdb;
  -webkit-transition: border-width 0.2s ease-out;
  -moz-transition: border-width 0.2s ease-out;
  -ms-transition: border-width 0.2s ease-out;
  -o-transition: border-width 0.2s ease-out;
  transition: border-width 0.2s ease-out;
}
.section--faq .download-item .button:hover ~ .download-graph-container .download-graph-container__fold,
.section--faq .download-item .download-graph-container:hover .download-graph-container__fold {
  border-width: 30px 30px 0 0;
}
@media screen and (max-width: 750px) {
  .section--faq .download-item {
    align-items: start;
    grid-column-start: 2;
  }
}

.section--team {
  background: var(--color-background);
}
.section--team img,
.section--team picture {
  aspect-ratio: 3/4;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.section--team .team-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.section--team .team-card__list {
  display: flex;
  flex-direction: column;
}
.section--team .team-card__list li {
  font-size: calc(var(--font-size-sm) * 0.9);
  border-top: 2px solid var(--color-primary);
  padding: 10px 0;
}
.section--team .team-card__list li:first-child {
  border: unset;
  padding-top: unset;
}

.section--text-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-small-us);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
@media screen and (max-width: 750px) {
  .section--text-blocks {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.section--text-block {
  border-top: 2px solid var(--color-primary);
}
.section--text-block .text-block {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.section--project {
  --color-text: var(--color-primary);
  gap: 2px;
}
.section--project .section-head {
  padding-bottom: var(--space-md);
}
.section--project h1 {
  font-size: var(--font-size-ul);
}

.media {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.media__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.media__row--single {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media screen and (max-width: 750px) {
  .media__row {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.media__asset img,
.media__asset video,
.media__asset picture, .media__image img,
.media__image video,
.media__image picture, .media__video img,
.media__video video,
.media__video picture,
.media img img,
.media img video,
.media img picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
}
.media__asset--square img,
.media__asset--square video,
.media__asset--square picture, .media__image--square img,
.media__image--square video,
.media__image--square picture, .media__video--square img,
.media__video--square video,
.media__video--square picture,
.media img--square img,
.media img--square video,
.media img--square picture {
  aspect-ratio: 1/1;
}
.media__asset--landscape img,
.media__asset--landscape video,
.media__asset--landscape picture, .media__image--landscape img,
.media__image--landscape video,
.media__image--landscape picture, .media__video--landscape img,
.media__video--landscape video,
.media__video--landscape picture,
.media img--landscape img,
.media img--landscape video,
.media img--landscape picture {
  aspect-ratio: 3/2;
}

.related-projects {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.related-projects__list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}
@media screen and (max-width: 1024px) {
  .related-projects__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.splide__slide {
  display: flex;
  cursor: default;
  overflow: hidden;
}
.splide__slide-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  max-width: 80%;
}
.splide__slide-link {
  display: inline-flex;
  align-items: center;
  width: 100% !important;
  padding: 6px 14px;
  padding-top: 7px;
}
.splide__slide-link a {
  line-height: 1;
  color: var(--color-secondary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.splide__arrows {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 2px;
}
.splide__arrow {
  position: relative;
  top: unset;
  left: unset;
  right: unset;
  width: unset;
  height: unset;
  transform: unset;
  background: unset;
  opacity: unset;
  border-radius: unset;
}
.splide__arrow:hover:not(:disabled) {
  opacity: 1;
}
.splide__arrow:disabled {
  opacity: 0.5;
}

.swing-elastic {
  animation: swingElasticNoTranslate 3.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes swingElastic {
  /* center */
  0% {
    transform: translateX(-50%) rotate(0deg);
    animation-timing-function: cubic-bezier(0.6, 0.05, 0.2, 1); /* smooth accel */
  }
  /* swing right */
  20% {
    transform: translateX(-50%) rotate(33deg);
    animation-timing-function: cubic-bezier(0.34, 1.8, 0.64, 1); /* strong elastic */
  }
  /* settle */
  36% {
    transform: translateX(-50%) rotate(33deg);
  }
  /* back to center */
  50% {
    transform: translateX(-50%) rotate(0deg);
    animation-timing-function: cubic-bezier(0.6, 0.05, 0.2, 1);
  }
  /* swing left */
  70% {
    transform: translateX(-50%) rotate(-33deg);
    animation-timing-function: cubic-bezier(0.34, 1.8, 0.64, 1);
  }
  /* settle */
  86% {
    transform: translateX(-50%) rotate(-33deg);
  }
  /* return */
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
}
@keyframes swingElasticNoTranslate {
  /* center */
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.6, 0.05, 0.2, 1); /* smooth accel */
  }
  /* swing right */
  20% {
    transform: rotate(33deg);
    animation-timing-function: cubic-bezier(0.34, 1.8, 0.64, 1); /* strong elastic */
  }
  /* settle */
  36% {
    transform: rotate(33deg);
  }
  /* back to center */
  50% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.6, 0.05, 0.2, 1);
  }
  /* swing left */
  70% {
    transform: rotate(-33deg);
    animation-timing-function: cubic-bezier(0.34, 1.8, 0.64, 1);
  }
  /* settle */
  86% {
    transform: rotate(-33deg);
  }
  /* return */
  100% {
    transform: rotate(0deg);
  }
}
.loader {
  --color-text: var(--color-secondary);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: var(--color-primary);
  z-index: 9999;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  width: 100vw;
  height: 100dvh;
  position: fixed;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*
Source - https://stackoverflow.com/a
Posted by thetallweeks, modified by community. See post 'Timeline' for change history
Retrieved 2025-12-10, License - CC BY-SA 4.0
*/
.loading {
  font-size: var(--font-size-md);
}

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
  animation: ellipsis steps(4, end) 1200ms infinite;
  font-size: var(--font-body-md);
  content: "…";
  /* ascii code for the ellipsis character */
  width: 0px;
  position: absolute;
}

@keyframes ellipsis {
  to {
    width: 1em;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 1em;
  }
}
button {
  all: unset;
  display: inline-block;
  cursor: pointer;
}

.button,
.tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all ease-in-out 0.1s;
  color: var(--color-primary);
  background: var(--color-secondary);
}
.button span,
.tag span {
  color: var(--color-primary);
}
.button--icon,
.tag--icon {
  padding-left: 14px;
}
.button--no-icon span,
.tag--no-icon span {
  min-height: 30px;
  align-content: center;
}
.button__icon,
.tag__icon {
  position: relative;
  flex-shrink: 0;
  background: var(--color-primary);
  width: var(--width-button-icon);
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button__icon .svg-container,
.tag__icon .svg-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button__icon .svg-container svg,
.tag__icon .svg-container svg {
  width: 20px;
  height: auto;
  fill: var(--color-secondary);
}
.button__icon--inverted,
.tag__icon--inverted {
  background: var(--color-secondary);
}
.button__icon--inverted svg,
.tag__icon--inverted svg {
  fill: var(--color-primary);
}
.button--inverted,
.tag--inverted {
  color: var(--color-secondary);
  background: var(--color-primary);
  border: 2px solid transparent;
}
.button--inverted span,
.tag--inverted span {
  transition: all 0.1s ease-in-out;
  color: var(--color-secondary);
}
.button--inverted .button__icon,
.tag--inverted .button__icon {
  background: var(--color-secondary);
}
.button--inverted .button__icon svg,
.tag--inverted .button__icon svg {
  will-change: transform;
  fill: var(--color-primary);
}
.button--inactive,
.tag--inactive {
  opacity: 0.6;
}
.button[disabled=""],
.tag[disabled=""] {
  pointer-events: none;
  opacity: 0.6;
}
.button--icon,
.tag--icon {
  padding-right: 6px;
}
.button--icon-left,
.tag--icon-left {
  padding-left: 6px;
}
.switch {
  --color-text: var(--color-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  background: var(--color-secondary);
  border-radius: 9px;
  padding: 6px 6px;
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.switch__item {
  position: relative;
  min-width: var(--width-button-icon);
  height: 30px;
  border-radius: 6px;
  display: flex;
  padding: 0px 4px;
  padding-top: 1px;
  align-items: center;
  letter-spacing: -3%;
}
.switch__item a {
  position: relative;
  line-height: 1;
}
.switch__item.active {
  background: var(--color-accent);
}
.switch__item.active a {
  color: var(--color-secondary);
}
.switch__item:hover:not(.active) {
  background: var(--color-primary);
}
.switch__item:hover:not(.active) a {
  color: var(--color-secondary);
}

.select {
  display: flex;
  gap: 10px;
  cursor: pointer;
}
.select__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}
.select__icon .icon {
  stroke: var(--color-primary);
  stroke-width: 2px;
  width: 100%;
  height: auto;
}
.select__label {
  margin-top: 0.05em;
  text-overflow: ellipsis;
  overflow: hidden;
}

.select.active .select__icon .icon {
  fill: var(--color-primary);
}

.tag {
  gap: 2px;
  transition: all 0.2s ease-in-out;
}
.tag--inverted {
  color: var(--color-secondary);
  background: var(--color-primary);
}
.tag--inverted span {
  color: var(--color-secondary);
}
.tag--inverted .tag__icon {
  background: var(--color-primary);
}
.tag--inverted .tag__icon svg {
  fill: var(--color-secondary);
}
.tag__icon {
  background: var(--color-secondary);
}
.tag__icon svg {
  fill: var(--color-primary);
}
.tag .tag__icon {
  transition: all 0.2s ease-in-out;
}

.hover-spacing:hover {
  letter-spacing: 0.02rem;
}
.hover-spacing.button__icon:hover {
  background: var(--color-accent);
}

.hover-opacity {
  transition: 0.1s all ease-in-out;
}
.hover-opacity:hover {
  opacity: 0.7;
}

.hover-brightness {
  transition: 0.1s all ease-in-out;
}
.hover-brightness:hover {
  filter: brightness(0.8) saturate(1.1);
}

.hover-bounce-right {
  overflow: hidden;
}
.hover-bounce-right .button__icon,
.hover-bounce-right .button--icon {
  overflow: hidden;
}
.hover-bounce-right .svg-container {
  will-change: transform;
}
.hover-bounce-right:not(:disabled):hover .button__icon,
.hover-bounce-right:not(:disabled):hover .button--icon {
  overflow: hidden;
  background: var(--color-accent);
}
.hover-bounce-right:not(:disabled):hover .svg-container {
  animation: bounce-right 0.4s ease-in-out forwards;
}

.hover-bounce-left {
  overflow: hidden;
}
.hover-bounce-left .button__icon,
.hover-bounce-left .button--icon {
  overflow: hidden;
}
.hover-bounce-left .svg-container {
  will-change: transform;
}
.hover-bounce-left:not(:disabled):hover .button__icon,
.hover-bounce-left:not(:disabled):hover .button--icon {
  overflow: hidden;
  background: var(--color-accent);
}
.hover-bounce-left:not(:disabled):hover .svg-container {
  animation: bounce-right 0.4s ease-in-out forwards;
}

.hover-bounce-down {
  overflow: hidden;
}
.hover-bounce-down .button__icon,
.hover-bounce-down .button--icon {
  overflow: hidden;
}
.hover-bounce-down .svg-container {
  will-change: transform;
}
.hover-bounce-down:not(:disabled):hover .button__icon,
.hover-bounce-down:not(:disabled):hover .button--icon {
  overflow: hidden;
  background: var(--color-accent);
}
.hover-bounce-down:not(:disabled):hover .svg-container {
  animation: bounce-down 0.4s ease-in-out forwards;
}

.hover-bounce-svg {
  overflow: hidden;
}
.hover-bounce-svg svg {
  will-change: transform;
}
.hover-bounce-svg:hover {
  background: var(--color-accent);
}
.hover-bounce-svg:hover svg {
  animation: bounce-down 0.4s ease-in-out forwards;
}

@keyframes bounce-left {
  0% {
    transform: translate(0%, 0%);
  }
  32% {
    transform: translate(20%, 0%);
  }
  62% {
    transform: translate(-25%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes bounce-right {
  0% {
    transform: translate(0%, 0%);
  }
  32% {
    transform: translate(20%, 0%);
  }
  62% {
    transform: translate(-25%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes bounce-down {
  0% {
    transform: translate(0%, 0%);
  }
  32% {
    transform: translate(0%, 20%);
  }
  62% {
    transform: translate(0%, -25%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
.text-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.text-block__title {
  padding-bottom: var(--space-small-us);
  border-bottom: 2px solid var(--color-primary);
}
.text-block__text p {
  line-height: 1.1;
}
.text-block__text .text-small {
  font-size: var(--font-size-xs);
}
.text-block__text .text-big {
  font-size: var(--font-size-md);
}

.detail-blocks {
  display: flex;
  flex-direction: column;
  gap: unset;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.detail-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.detail-block__title, .detail-block__text {
  border-bottom: 2px solid var(--color-text);
  padding: 10px 0 6px;
}
.detail-block__text p {
  line-height: 1.1;
}
.detail-block__text .text-small {
  font-size: var(--font-size-xs);
}
.detail-block__text .text-big {
  font-size: var(--font-size-md);
}
.detail-block__text a:hover {
  letter-spacing: 0.02rem;
}
@media screen and (max-width: 750px) {
  .detail-block {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .detail-block__title {
    padding-bottom: unset;
    border-bottom: unset;
  }
  .detail-block__text {
    border-top: unset;
    padding-top: unset;
  }
}

.service-card {
  position: relative;
  border-top: 2px solid var(--color-primary);
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(0px, 50%, 800px);
  gap: 0 10px;
  transition: height 0.2s 0s;
  padding: 0 var(--space-md);
  cursor: pointer;
}
@media screen and (max-width: 750px) {
  .service-card {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 10px 10px;
  }
}
.service-card__letter-label {
  --color-text: var(--color-secondary);
  position: absolute;
  top: calc(var(--space-small-us) * 1.4);
  left: calc(var(--space-small-us) * -1.1);
  transform: translateX(-100%);
  font-size: var(--font-size-us);
  padding: 2px;
  background: var(--color-primary);
  border-radius: 4px;
}
.service-card__title {
  position: relative;
  font-size: var(--font-size-xl);
  padding-top: var(--space-small-us);
  height: var(--height-service-item);
  z-index: 2;
  margin-left: calc(var(--space-md) * 0.2);
}
@media screen and (max-width: 640px) {
  .service-card__title {
    margin-left: calc(var(--space-md) * 0.6);
  }
}
.service-card__title p {
  transition: all 0.2s ease-in-out;
}
.service-card__title:hover p {
  letter-spacing: 0.02rem;
}
.service-card__slider-wrapper {
  grid-column: 2/span 1;
  grid-row: 1/span 2;
  width: 100%;
  max-width: 800px;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  padding-top: var(--space-small-us);
}
@media screen and (max-width: 750px) {
  .service-card__slider-wrapper {
    grid-row: 2/span 3;
    padding-bottom: unset;
    grid-column: span 1;
    grid-template-rows: unset;
  }
}
.service-card__slider-wrapper img,
.service-card__slider-wrapper video,
.service-card__slider-wrapper picture {
  width: 100%;
  aspect-ratio: 30/23;
  object-fit: cover;
  object-position: center;
}
.service-card__thumbnails-placeholder, .service-card__thumbnails {
  display: flex;
  gap: var(--space-small-us);
  width: calc(100% - (var(--space-md)) * 2);
  height: var(--height-service-item);
  z-index: 1;
  padding: var(--space-small-us) 0;
}
.service-card__thumbnails-placeholder img,
.service-card__thumbnails-placeholder video,
.service-card__thumbnails-placeholder picture, .service-card__thumbnails img,
.service-card__thumbnails video,
.service-card__thumbnails picture {
  scroll-snap-align: start;
  height: 100%;
  width: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.service-card__thumbnails-placeholder .splide__slide, .service-card__thumbnails .splide__slide {
  border-radius: 4px;
}
.service-card__thumbnails-placeholder .splide__slide img,
.service-card__thumbnails-placeholder .splide__slide video, .service-card__thumbnails .splide__slide img,
.service-card__thumbnails .splide__slide video {
  transition: all 0.2s ease-in-out;
}
.service-card__thumbnails-placeholder .splide__slide:hover img,
.service-card__thumbnails-placeholder .splide__slide:hover video, .service-card__thumbnails .splide__slide:hover img,
.service-card__thumbnails .splide__slide:hover video {
  transform: scale(1.06);
}
.service-card__thumbnails {
  position: absolute;
  top: 0;
  right: var(--space-md);
  width: clamp(0px, 50% - var(--space-md), 800px);
  grid-row: 1/span 3;
  background: var(--color-secondary);
  z-index: 5;
  transition: all 0.1s 0.1s;
  overflow-x: auto; /* enable horizontal scrolling */
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
@media screen and (max-width: 750px) {
  .service-card__thumbnails {
    width: calc(var(--height-service-item) * 2 + 0px - var(--space-md));
    background: unset;
    grid-row: 1/span 4;
  }
}
.service-card__thumbnails-placeholder {
  display: none;
}
@media screen and (max-width: 750px) {
  .service-card__thumbnails-placeholder {
    display: block;
  }
}
.service-card__thumbnail {
  aspect-ratio: 1/1;
  cursor: pointer;
}
.service-card__description {
  align-self: end;
}
@media screen and (max-width: 750px) {
  .service-card__description {
    margin-top: unset;
    grid-row: unset;
  }
}
.service-card__link {
  height: var(--height-service-item);
  display: flex;
  align-items: center;
}
.service-card__link a {
  text-decoration: underline;
}
@media screen and (max-width: 750px) {
  .service-card__link {
    padding-bottom: 0.4em;
  }
}

.service-card.expanded {
  transition: height 0.2s;
}
.service-card.expanded .service-card__thumbnails {
  top: 100%;
  transform: translateY(-100%);
  transition: top 0s;
}
@media screen and (max-width: 750px) {
  .service-card.expanded .service-card__thumbnails {
    width: calc(100% - (var(--space-md)) * 2);
  }
}
.service-card.expanded .service-card__thumbnails-placeholder--header {
  height: 0;
  min-height: 0;
}
@media screen and (max-width: 750px) {
  .service-card.expanded .service-card__thumbnails-placeholder--header {
    min-height: 2em;
  }
}

.cta-item {
  position: relative;
  border-top: 2px solid var(--color-primary);
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: 10px var(--space-lg);
  padding: 0 var(--space-md);
}
@media screen and (max-width: 750px) {
  .cta-item {
    gap: 10px 10px;
  }
}
.cta-item__title {
  font-size: var(--font-size-xl);
  padding-top: var(--space-small-us);
  grid-column: span 8;
  height: var(--height-service-item);
  cursor: default;
  z-index: 2;
}
@media screen and (max-width: 750px) {
  .cta-item__title {
    grid-column: span 12;
  }
}
.cta-item__image {
  padding: var(--space-small-us) 0px;
  grid-column: 9/span 4;
  grid-row: span 2;
  display: flex;
  justify-content: end;
}
.cta-item__image img,
.cta-item__image video,
.cta-item__image picture {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  max-width: 800px;
  height: auto;
}
@media screen and (max-width: 1024px) {
  .cta-item__image img,
  .cta-item__image video,
  .cta-item__image picture {
    aspect-ratio: 1/1;
  }
}
@media screen and (max-width: 750px) {
  .cta-item__image {
    grid-column: 1/span 12;
  }
  .cta-item__image img,
  .cta-item__image video,
  .cta-item__image picture {
    aspect-ratio: 4/3;
    max-width: unset;
  }
}
.cta-item__description {
  font-size: var(--font-size-md);
  max-width: 900px;
  grid-column: span 8;
  align-self: flex-end;
}
@media screen and (max-width: 750px) {
  .cta-item__description {
    grid-column: span 12;
  }
}

.filter {
  --filter-gap: var(--space-md);
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 var(--space-md);
}
.filter__controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.filter__head {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 2px;
}
.filter__expand-control {
  display: flex;
  justify-self: start;
  width: 25%;
}
.filter__expand-control button {
  flex-grow: 1;
  background: var(--color-white-50);
}
@media screen and (max-width: 1280px) {
  .filter__expand-control {
    width: 33.333%;
  }
}
@media screen and (max-width: 750px) {
  .filter__expand-control {
    flex-basis: 50%;
    flex-grow: 1;
  }
}
@media screen and (max-width: 750px) {
  .filter__faq-button {
    flex-basis: 50%;
    flex-grow: 1;
  }
}
.filter__body {
  border-radius: 9px;
  overflow: hidden;
  transition: var(--dropdown-transition-duration);
}
.filter__select-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-sm) 14px var(--space-lg);
  background: var(--color-white-50);
}
@media screen and (max-width: 1280px) {
  .filter__select-list {
    gap: var(--space-lg);
  }
}
.filter__option {
  display: flex;
}
.filter__option .icon {
  transition: fill 0.3s ease-in-out;
  fill: transparent;
}
.filter__option:hover .icon {
  fill: var(--color-primary);
}
.filter__status, .filter__tags {
  display: flex;
  align-items: start;
  gap: 10px;
}
.filter__status {
  margin-bottom: var(--filter-gap);
}
@media screen and (max-width: 640px) {
  .filter__status {
    flex-direction: column;
  }
}
.filter__tags {
  flex-grow: 1;
  flex-wrap: wrap;
  gap: 2px 2px;
}
@media screen and (max-width: 400px) {
  .filter__tags .tag {
    font-size: var(--font-size-xs);
  }
}
.filter__load-more {
  display: none;
  background: var(--color-white-50);
}

.filter__results {
  display: flex;
  flex-direction: column;
  gap: var(--filter-gap);
  align-items: start;
}
.filter__list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}
@media screen and (max-width: 1024px) {
  .filter__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 750px) {
  .filter__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.filter .button__icon svg {
  transition: var(--dropdown-transition-duration);
}
@media screen and (max-width: 750px) {
  .filter .button__icon {
    margin-top: 0.1em;
  }
}

.filter.expanded .button__icon svg {
  transform: rotate(180deg);
}
.filter.expanded .filter__status {
  margin-top: 10px;
}

.filter__status.visible {
  margin-bottom: var(--filter-gap);
}

.select-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  max-width: 500px;
}
.select-table__head {
  width: 100%;
}
.select-table__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media screen and (max-width: 1024px) {
  .select-table__body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 750px) {
  .select-table__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 1024px) {
  .select-table {
    gap: var(--space-lg);
    max-width: unset;
  }
}
@media screen and (max-width: 400px) {
  .select-table {
    font-size: var(--font-size-xs);
  }
}

.filter-card,
.related-project-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-primary);
  overflow: hidden;
  opacity: 0;
  transform-origin: top center;
  transform: translateY(100px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.filter-card.visible,
.related-project-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.filter-card__label,
.related-project-card__label {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-sm);
  font-size: var(--font-size-xs);
  --color-text: var(--color-background);
  mix-blend-mode: screen;
  z-index: 1;
}
.filter-card__link,
.related-project-card__link {
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 0;
}
.filter-card__link img,
.filter-card__link video,
.related-project-card__link img,
.related-project-card__link video {
  transition: transform 0.3s ease-in-out;
}
.filter-card__link:hover img,
.filter-card__link:hover video,
.related-project-card__link:hover img,
.related-project-card__link:hover video {
  transform: scale(1.04);
}
.filter-card img,
.filter-card video,
.filter-card picture,
.related-project-card img,
.related-project-card video,
.related-project-card picture {
  aspect-ratio: 3/4;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 400px) {
  .filter-card__subtitle,
  .related-project-card__subtitle {
    display: none;
  }
}

.simple-slider {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.simple-slider .simple-slider__border {
  margin: 0 var(--space-md);
  border-top: 2px solid var(--color-primary);
}
.simple-slider .simple-slider__track {
  display: flex;
  flex: none;
  flex-flow: row nowrap;
  gap: 2px;
  overflow-x: auto; /* enable horizontal scrolling */
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--space-md);
  scroll-padding-right: var(--space-md);
  scroll-behavior: smooth;
}
.simple-slider .simple-slider__slide {
  width: 34%;
  min-width: 280px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.simple-slider .simple-slider__slide svg {
  width: 100%;
  height: auto;
  fill: var(--color-text);
}
.simple-slider .simple-slider__padding-spaceholder {
  width: unset;
  min-width: calc(var(--space-md) - 2px);
}
.simple-slider .simple-slider__controls {
  display: flex;
  justify-content: end;
  gap: 2px;
  padding: 0 var(--space-md);
}
.simple-slider .simple-slider__controls .simple-slider__arrow-prev .button__icon {
  transform: rotate(180deg);
}
.simple-slider ul,
.simple-slider li,
.simple-slider p,
.simple-slider video {
  cursor: default;
}
@media screen and (max-width: 750px) {
  .simple-slider {
    overflow: visible;
  }
}

.section-head {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0px var(--space-lg);
  padding: 0 var(--space-md);
}
.section-head__title {
  grid-column: span 12;
}
.section-head__subtitle {
  grid-column: span 8;
}
.section-head__subtitle span {
  display: inline-block;
  max-width: 900px;
  font-size: var(--font-size-ul);
  line-height: 1.05;
  letter-spacing: -1%;
}
.section-head__intro {
  grid-column: 9/span 4;
}
.section-head__intro p {
  line-height: 1.15;
}
.section-head--text-center {
  text-align: center;
}
.section-head--text-center .section-head__subtitle {
  grid-column: 3/span 8;
}
.section-head--small-text .section-head__title,
.section-head--small-text .section-head__subtitle span {
  font-size: var(--font-size-lg);
}
.section-head--featured-projects {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-left: 23%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1280px) {
  .section-head__subtitle {
    grid-column: span 7;
  }
  .section-head__intro {
    grid-column: span 5;
  }
}
@media screen and (max-width: 1024px) {
  .section-head {
    gap: 15px;
  }
  .section-head__subtitle {
    grid-column: span 12;
  }
  .section-head__intro {
    grid-column: span 12;
  }
  .section-head--text-center .section-head__subtitle {
    grid-column: 1/span 12;
  }
}

.bg-block {
  flex: 1;
  background: #C48B8B;
  opacity: 0.85;
  will-change: height;
  box-sizing: border-box;
}

.orientation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  display: none;
}
.orientation-overlay.visible {
  display: block;
}

/*# sourceMappingURL=main.css.map */