:root {
  /* === TYPOGRAPHY === */
  --font-family-primary: DMSans, SpaceGrotesk, sans-serif;
  --font-family-secondary: SpaceGrotesk, DMSans, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.2;
  --line-height-tight: 1.08;
  /* Font weight scale */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* Font size scale */
  --font-size-xs: 0.75rem // 12px;
  --font-size-sm: 0.875rem // 14px;
  --font-size-md: 1rem // 16px;
  --font-size-lg: 1.125rem // 18px;
  --font-size-xl: 1.25rem // 20px;
  --font-size-2xl: 1.5rem // 24px;
  --font-size-3xl: 1.875rem // 30px;
  --font-size-4xl: 2.25rem // 36px;
  --font-size-5xl: 2.5rem // 40px;
  --font-size-6xl: 3rem // 48px;
  /* Responsive font sizing */
  --font-scale-unit: 16;
  --font-scale-container-ideal: 1440;
  --font-scale-container-min: 992px;
  --font-scale-container-max: 1920px;
  --font-scale-container: clamp(var(--font-scale-container-min), 100vw, var(--font-scale-container-max));
  --font-size-responsive: calc(var(--font-scale-container) / (var(--font-scale-container-ideal) / var(--font-scale-unit)));
  /* === COLORS === */
  /* Base colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
  /* Gray scale */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  /* Background colors */
  --color-bg-primary: #fefefe;
  --color-bg-secondary: #f8f8f9;
  --color-bg-tertiary: var(--color-gray-100);
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  /* Text colors */
  --color-text-primary: #141414;
  --color-text-secondary: #3c3c3d;
  --color-text-tertiary: var(--color-gray-500);
  --color-text-inverse: var(--color-white);
  --color-text-placeholder: #666666;
  /* Accent colors */
  --color-accent-primary: #ff0005;
  --color-accent-secondary: #0066ff;
  --color-accent-success: #10b981;
  --color-accent-warning: #f59e0b;
  --color-accent-error: #ef4444;
  /* Border colors */
  --color-border-light: #e6e6e7;
  --color-border-medium: var(--color-gray-300);
  --color-border-dark: var(--color-gray-600);
  --color-border-focus: var(--color-accent-primary);
  /* === LAYOUT === */
  --container-width-max: 1660px;
  --container-width-content: 1200px;
  --container-padding-base: 4rem;
  /* Spacing system (8px base) */
  --space-0: 0;
  --space-1: 0.25rem // 4px;
  --space-2: 0.5rem // 8px;
  --space-3: 0.75rem // 12px;
  --space-4: 1rem // 16px;
  --space-5: 1.25rem // 20px;
  --space-6: 1.5rem // 24px;
  --space-8: 2rem // 32px;
  --space-10: 2.5rem // 40px;
  --space-12: 3rem // 48px;
  --space-16: 4rem // 64px;
  --space-20: 5rem // 80px;
  --space-24: 6rem // 96px;
  /* Legacy spacing (for backward compatibility) */
  --space-xs: var(--space-2);
  --space-sm: var(--space-4);
  --space-md: var(--space-8);
  --space-lg: var(--space-16);
  --space-xl: var(--space-24);
  /* Gap system */
  --gap-base: var(--space-8);
  --gap-small: var(--space-4);
  --gap-large: var(--space-12);
  --section-padding: calc(var(--space-8) + (var(--gap-base) * 2));
  /* Border radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  /* === ANIMATIONS === */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-primary: cubic-bezier(0.65, 0.05, 0, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast: 150ms;
  --duration-medium: 300ms;
  --duration-slow: 735ms;
  --duration-slower: 1000ms;
  --transition-default: all var(--duration-medium) var(--ease-out);
  --transition-primary: var(--duration-slow) var(--ease-primary);
  --transition-colors: color var(--duration-medium) var(--ease-out), background-color var(--duration-medium) var(--ease-out), border-color var(--duration-medium) var(--ease-out);
  /* === Z-INDEX SCALE === */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  /* === BREAKPOINTS === */
  --breakpoint-xs: 475px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  /* Legacy breakpoints */
  --breakpoint-mobile-portrait: 479px;
  --breakpoint-mobile-landscape: 767px;
  --breakpoint-tablet: 991px;
  --breakpoint-desktop-small: 1280px;
  /* === GRAIN EFFECT === */
  --grain-opacity: 0.50;
  --grain-z-index: 45;
  --grain-size: 300px;
}

@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/DMSans-Light.woff2") format("woff2");
}
@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/DMSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/DMSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "SpaceGrotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "SpaceGrotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2");
}
@media screen and (max-width: 1280px) {
  :root {
    --container-padding-base: var(--space-8);
  }
}
@media screen and (max-width: 991px) {
  :root {
    --font-scale-container-ideal: 834;
    --font-scale-container-min: 768px;
    --font-scale-container-max: 991px;
    --container-padding-base: var(--space-6);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --font-scale-container-ideal: 390;
    --font-scale-container-min: 480px;
    --font-scale-container-max: 767px;
    --container-padding-base: var(--space-4);
    --section-padding: calc(var(--space-4) + var(--gap-base));
  }
}
@media screen and (max-width: 479px) {
  :root {
    --font-scale-container-ideal: 390;
    --font-scale-container-min: 320px;
    --font-scale-container-max: 479px;
    --container-padding-base: var(--space-4);
  }
}
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

::-webkit-input-placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

::-moz-placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

:-ms-input-placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

::-ms-input-placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

::-moz-selection {
  background-color: var(--color-accent-primary);
  color: var(--color-white);
}

::selection {
  background-color: var(--color-accent-primary);
  color: var(--color-white);
}

input, textarea, select {
  outline: none;
  -webkit-transition: var(--transition-colors);
  transition: var(--transition-colors);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-border-focus);
  -webkit-box-shadow: 0 0 0 3px rgba(255, 0, 5, 0.1);
          box-shadow: 0 0 0 3px rgba(255, 0, 5, 0.1);
}
input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
  border-color: var(--color-accent-error);
  -webkit-box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
          box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
input:required:valid, textarea:required:valid, select:required:valid {
  border-color: var(--color-accent-success);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  min-width: 320px;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  background-color: var(--color-bg-primary);
}

.container {
  max-width: var(--container-width-max);
  padding-left: var(--container-padding-base);
  padding-right: var(--container-padding-base);
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.container-content {
  max-width: var(--container-width-content);
  padding-left: var(--container-padding-base);
  padding-right: var(--container-padding-base);
  margin: 0 auto;
  width: 100%;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: auto;
}

body ::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
} /* Chrome, Safari, Opera */
body {
  -ms-overflow-style: none;
} /* IE & Edge */
html {
  scrollbar-width: none;
} /* Firefox */
html,
body {
  -webkit-font-smoothing: antialiased;
}

svg {
  max-width: none;
  height: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h1 {
  font-size: clamp(2.5rem, 5vw, 5rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

p {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: clamp(1rem, 1vw, 1.5rem);
  font-weight: 300;
  color: var(--color-text-secondary);
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

main {
  padding: 8px;
}

body:has(.split) {
  overflow: hidden;
}

.split {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}
.split__panel {
  position: relative;
  width: 50%;
  border-radius: 4px;
  overflow: hidden;
  -webkit-transition: width var(--duration-slow) var(--ease-primary);
  transition: width var(--duration-slow) var(--ease-primary);
  container-type: inline-size;
  container-name: panel;
}
.split__panel.is-active {
  width: 60%;
}
.split__panel.is-shrunk {
  width: 40%;
}
.split__scroll {
  will-change: transform;
  display: -ms-grid;
  display: grid;
}
.split__item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.split__item.hero {
  aspect-ratio: 1/0.7;
  background: #000;
  padding: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
  z-index: 2;
}
.split__item.hero:before {
  content: "";
  background-image: url(../images/dist/fig-1.svg);
  background-position: bottom top;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.split__item.hero .logo-fig {
  height: clamp(3rem, 8cqw, 7rem);
  width: auto;
}
.split__item.hero .hero-content {
  width: 100%;
}
.split__item.hero .hero-content img {
  width: 100% !important;
  height: auto;
}
.split__item.hero .hero-content .hero-title {
  padding-bottom: 16px;
}
.split__item.hero .hero-content .hero-title p {
  color: #fff;
  font-size: clamp(0.65rem, 1.9cqw, 1.3rem);
}
.split__item.about {
  background: url(../images/dist/about-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 1/0.6;
  padding: 12px;
}
.split__item.about p {
  color: #fff;
  font-size: clamp(0.7rem, 2cqw, 1.4rem);
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 16px;
     -moz-column-gap: 16px;
          column-gap: 16px;
}
.split__item.about .section-header p {
  font-size: clamp(0.65rem, 1.7cqw, 1.2rem);
}
.split__item.about .about__wrapper {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.split__item.video {
  background: #000;
  padding: 12px;
  aspect-ratio: 1/0.5;
}
.split__item.video .split__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.split__item.video .split__video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), color-stop(50%, rgba(0, 0, 0, 0.5)), to(transparent));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
  pointer-events: none;
}
.split__item.video .split__video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  display: block;
}
.split__item.video .about__wrapper {
  position: relative;
  z-index: 2;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.split__item.video .about__wrapper p {
  color: #fff;
  font-size: clamp(0.7rem, 2cqw, 1.4rem);
}
.split__item.video .about__wrapper .section-header p {
  font-size: clamp(0.65rem, 1.7cqw, 1.2rem);
}
.split__item.promo img {
  border-radius: 4px;
}
.split__item.promo .promo__content {
  padding: 12px;
  background-color: #f2f2f2;
  border-left: 1px solid rgba(221, 221, 221, 0.6);
  border-right: 1px solid rgba(221, 221, 221, 0.6);
  border-bottom: 1px solid rgba(221, 221, 221, 0.6);
}
.split__item.promo .promo__content .promo-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.split__item.promo .promo__content .promo-header h3 {
  font-weight: 600;
  font-size: clamp(0.75rem, 2.5cqw, 1.8rem);
  line-height: 125%;
}
.split__item.promo .promo__content .promo-header p {
  font-size: clamp(0.65rem, 1.9cqw, 1.3rem);
}
.split__item.promo .promo__content .promo-header a {
  text-decoration: none;
  -webkit-transform: all 0.3s ease;
      -ms-transform: all 0.3s ease;
          transform: all 0.3s ease;
}
.split__item.promo .promo__content .promo-header a:hover {
  color: blue;
}
.split__item.promo .promo__content .adinfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.split__item.promo .promo__content .adinfo .line {
  height: 18px;
  width: 1px;
  background-color: #000;
}
.split__item.promo .promo__content .adinfo p, .split__item.promo .promo__content .adinfo a {
  font-size: clamp(0.65rem, 1.9cqw, 1.3rem);
  color: #000;
}
.split__item.promo .promo__content .promo-description {
  padding: 8px 0 0;
}
.split__item.promo .promo__content .promo-description p {
  font-size: clamp(0.7rem, 2cqw, 1.4rem);
}
.split__item.soundcloud .soundcloud-description {
  padding: 12px;
  margin-top: -6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  background-color: #f2f2f2;
  border-left: 1px solid rgba(221, 221, 221, 0.6);
  border-right: 1px solid rgba(221, 221, 221, 0.6);
  border-bottom: 1px solid rgba(221, 221, 221, 0.6);
}
.split__item.soundcloud .soundcloud-description h3 {
  font-weight: 600;
  font-size: clamp(0.75rem, 2.5cqw, 1.8rem);
  line-height: 125%;
}
.split__item.soundcloud .soundcloud-description p {
  font-size: clamp(0.65rem, 1.9cqw, 1.3rem);
}
.split__item.soundcloud .soundcloud-description ul {
  list-style-type: none;
}
.split__item.soundcloud .soundcloud-description ul a {
  font-size: clamp(0.65rem, 1.6cqw, 1rem);
  text-decoration: none;
  -webkit-transform: all 0.3s ease;
      -ms-transform: all 0.3s ease;
          transform: all 0.3s ease;
}
.split__item.soundcloud .soundcloud-description ul a:hover {
  color: blue;
}
.split__panel.is-active .split__bg img {
  -webkit-transform: scale(1.06);
      -ms-transform: scale(1.06);
          transform: scale(1.06);
}
.split__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.split__title {
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-bold);
  font-size: clamp(5rem, 9vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
  color: var(--color-text-inverse);
}
.split__desc {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  opacity: 0.75;
  max-width: 28ch;
}
@media screen and (max-width: 768px) {
  .split {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .split::after {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .split:has(.split__panel.is-active)::after {
    opacity: 0;
  }
  .split__panel {
    width: 100% !important;
    height: 50dvh;
    -webkit-transition: height var(--duration-slow) var(--ease-primary);
    transition: height var(--duration-slow) var(--ease-primary);
  }
  .split__panel.is-active {
    height: 62dvh;
  }
  .split__panel.is-shrunk {
    height: 38dvh;
  }
  .split__item {
    height: 50dvh;
  }
  .split__panel.is-active .split__content {
    -webkit-transform: scale(1.03);
        -ms-transform: scale(1.03);
            transform: scale(1.03);
  }
  .split__panel.is-shrunk .split__content {
    -webkit-transform: scale(0.92);
        -ms-transform: scale(0.92);
            transform: scale(0.92);
  }
  .split__content {
    bottom: 2rem;
    left: 2rem;
  }
  .split__title {
    font-size: clamp(3.5rem, 12vw, 6rem);
  }
}

.split__panel--left .split__scroll {
  gap: 0.5rem;
}

.split__panel--right .split__scroll {
  gap: 0.5rem;
}