/**************************************************************************************************
 * VARIABLES
 *************************************************************************************************/

:root {
  color-scheme: light dark;

  /* COLORS */

  /* Color Palette */
  --clr-qnx-coral: #ff443a;
  --clr-blush-red: #c45349;
  --clr-burnt-umber: #85352e;
  --clr-mahogany: #451713;
  --clr-white: #fff;
  --clr-dark: #181c1e;
  --clr-black: #000;
  --clr-gray-1: #c0c0bb;
  --clr-gray-2: #8f8f8b;
  --clr-gray-3: #5e5d5a;
  --clr-sand: #f4ebe1;
  --clr-sand-dark: #232729;
  --clr-light-sand: #fbf8f4;
  --clr-light-sand-dark: #2c3032;
  --clr-sand-accent: var(--clr-light-sand);
  --clr-energizer-purple: #8c62ff;
  --clr-glass: #fff6;
  --clr-glass-dark: #232729cc;
  --clr-button-disabled: #c0c0bb66;
  --clr-sand-shadow: #a19586;

  /* Transparent Colors */
  --clr-transparent-70-coral: color-mix(
    in srgb,
    var(--clr-qnx-coral) 70%,
    transparent
  );
  --clr-transparent-70-brown: color-mix(
    in srgb,
    var(--clr-burnt-umber) 70%,
    transparent
  );
  --clr-transparent-70-black: color-mix(
    in srgb,
    var(--clr-black) 70%,
    transparent
  );
  --clr-transparent-55-coral: color-mix(
    in srgb,
    var(--clr-qnx-coral) 55%,
    transparent
  );
  --clr-transparent-55-brown: color-mix(
    in srgb,
    var(--clr-burnt-umber) 55%,
    transparent
  );
  --clr-transparent-55-black: color-mix(
    in srgb,
    var(--clr-black) 55%,
    transparent
  );
  --clr-transparent-35-coral: color-mix(
    in srgb,
    var(--clr-qnx-coral) 35%,
    transparent
  );
  --clr-transparent-35-brown: color-mix(
    in srgb,
    var(--clr-burnt-umber) 35%,
    transparent
  );
  --clr-transparent-35-black: color-mix(
    in srgb,
    var(--clr-black) 35%,
    transparent
  );
  --clr-transparent-20-coral: color-mix(
    in srgb,
    var(--clr-qnx-coral) 20%,
    transparent
  );
  --clr-transparent-20-brown: color-mix(
    in srgb,
    var(--clr-burnt-umber) 20%,
    transparent
  );
  --clr-transparent-20-black: color-mix(
    in srgb,
    var(--clr-black) 20%,
    transparent
  );
  --clr-transparent-10-coral: color-mix(
    in srgb,
    var(--clr-qnx-coral) 10%,
    transparent
  );
  --clr-transparent-10-brown: color-mix(
    in srgb,
    var(--clr-burnt-umber) 10%,
    transparent
  );
  --clr-transparent-10-black: color-mix(
    in srgb,
    var(--clr-black) 10%,
    transparent
  );
  --clr-transparent-20-dark: color-mix(
    in srgb,
    var(--clr-dark) 20%,
    transparent
  );

  /* Colors (Light) */

  /* Primary */
  --clr-primary: var(--clr-qnx-coral);

  /* Secondary */
  --clr-secondary: var(--clr-blush-red);
  --clr-tertiary: var(--clr-burnt-umber);
  --clr-quaternary: var(--clr-mahogany);

  /* Base */
  --clr-b-light: var(--clr-white);
  --clr-b-overall-light: var(--clr-white);
  --clr-b-dark: var(--clr-dark);
  --clr-b-overall-dark: var(--clr-dark);
  --clr-b-black: var(--clr-black);
  --clr-b-text: var(--clr-black);

  /* Neutrals */
  --clr-n-gray-1: var(--clr-gray-1);
  --clr-n-gray-2: var(--clr-gray-2);
  --clr-n-gray-3: var(--clr-gray-3);

  /* Neutral Background */
  --clr-nb-sand: var(--clr-sand);
  --clr-nb-light-sand: var(--clr-light-sand);

  /* Glassmorphism */
  --clr-nb-glass-1: var(--clr-glass);
  --clr-nb-glass-2: var(--clr-glass);

  /* Specialist Highlighter */
  --clr-sh-energizer-purple: var(--clr-energizer-purple);

  /* VARIABLES */

  /* Fonts font-family */
  --font-family-onest: "Onest", sans-serif;
  --font-family-noto-jp: "Noto Sans JP", sans-serif;
  --font-family-noto-sc: "Noto Sans SC", sans-serif;

  /* Body/Label font-size */
  --body-font-size-l: 23px;
  --body-font-size-m: 19px;
  --body-font-size-s: 16px;
  --body-font-size-xs: 13px;
  --body-font-size-xxs: 11px;

  /* Body line-height */
  --body-line-height: 140%;
  --body-line-height-l: var(--body-line-height);
  --body-line-height-m: var(--body-line-height);
  --body-line-height-s: var(--body-line-height);
  --body-line-height-xs: var(--body-line-height);
  --body-line-height-xxs: var(--body-line-height);

  /* Label line-height */
  --label-line-height: 115%;
  --label-line-height-l: var(--label-line-height);
  --label-line-height-m: var(--label-line-height);
  --label-line-height-s: var(--label-line-height);
  --label-line-height-xs: var(--label-line-height);
  --label-line-height-xxs: var(--label-line-height);

  /* Heading font-size */
  --heading-font-size-xl: 44px;
  --heading-font-size-l: 38px;
  --heading-font-size-m: 32px;
  --heading-font-size-s: 28px;

  /* Heading line-height */
  --heading-line-height: 120%;
  --heading-line-height-xl: var(--heading-line-height);
  --heading-line-height-l: var(--heading-line-height);
  --heading-line-height-m: var(--heading-line-height);
  --heading-line-height-s: var(--heading-line-height);

  /* Number font-size */
  --number-font-size-xl: 100px;
  --number-font-size-l: 69px;
  --number-font-size-m: 56px;

  /* Number line-height */
  --number-line-height-xl: 100%;
  --number-line-height-l: 120%;
  --number-line-height-m: 120%;

  /* Quote font-size */
  --quote-font-size-xl: 32px;
  --quote-font-size-s: 24px;

  /* Quote line-height */
  --quote-line-height: 160%;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-xss: 12px;
  --space-s: 16px;
  --space-sm: 20px;
  --space-m: 24px;
  --space-ml: 28px;
  --space-l: 32px;
  --space-ll: 36px;
  --space-xl: 40px;
  --space-xll: 44px;
  --space-2xl: 48px;
  --space-2xll: 52px;
  --space-3xl: 56px;
  --space-3xll: 60px;
  --space-4xl: 64px;
  --space-4xll: 68px;
  --space-5xl: 72px;
  --space-5xll: 76px;
  --space-6xl: 80px;
  --space-6xll: 84px;
  --space-7xl: 88px;
  --space-7xll: 92px;
  --space-8xl: 96px;
  --space-8xll: 100px;
  --space-9xl: 104px;
  --space-9xll: 108px;
  --space-10xl: 112px;
  --space-10xll: 116px;
  --space-11xl: 120px;

  /* Grid */
  --content-max-width: 1736px;
  --full-width-content-max-width: 1920px;
  --content-grid-margin: var(--space-s);
  --content-grid-gutter: var(--space-m);

  /* Global */
  --body-font-family: var(--font-family-onest);
  --heading-font-family: var(--font-family-onest);
  --body-background-color: var(--clr-b-light);
  --body-color: var(--clr-b-text);
  --body-font-size: var(--body-font-size-s);

  /* Modal padding */
  --modal-padding: var(--space-m);
  --modal-close-right: 0;

  /* Image Higlighter */
  --image-highlighter-xl: 12px;
  --image-highlighter-l: 8px;
  --image-highlighter-m: 4px;
  --image-highlighter-s: 2px;

  /* Background Blur */
  --background-blur-m: 30px;
  --background-blur-s: 20px;

  /* Noto Sans font-family for Japanese and Chinese languages */
  &[lang="ja"] {
    --body-font-family: var(--font-family-noto-jp);
    --heading-font-family: var(--font-family-noto-jp);
    --body-line-height-m: 143%;
  }

  &[lang="zh"] {
    --body-font-family: var(--font-family-noto-sc);
    --heading-font-family: var(--font-family-noto-sc);
    --body-line-height-m: 143%;
  }

  /* Header */
  --header-height: 80px;
  --header-z-index: 4;

  /* Icons */
  --icon-size: var(--space-m);

  /* Sections */
  --section-padding-block: var(--space-3xll);

  /* Buttons */
  --button-color: var(--clr-primary);
  --button-hover-color: var(--clr-burnt-umber);
  --button-padding: var(--space-xss) var(--space-m);
  --button-arrow-padding: 10px;
  --button-text-size: var(--body-font-size-s);
  --button-icon-gap: 10px;

  /* Video */
  --plyr-color-main: var(--clr-dark);
  --plyr-video-background: var(--clr-b-light);
  --plyr-video-control-color: var(--clr-dark);
  --plyr-video-control-color-hover: var(--clr-primary);
  --plyr-range-track-background: var(--clr-gray-1);
  --plyr-range-fill-background: var(--clr-primary);
  --plyr-range-thumb-background: var(--clr-primary);
  --plyr-range-track-height: 3px;
  --plyr-range-thumb-width: var(--space-s);
  --plyr-range-thumb-height: var(--space-s);
  --plyr-video-control-background-hover: transparent;
  --plyr-control-radius: 0px;
  --plyr-control-spacing: var(--space-xss);
  --plyr-play-overlay-size: var(--space-3xll);
  --plyr-play-overlay-icon-size: var(--space-ml);
  --plyr-video-default-max-width: 1115px;
}

/* VARIABLES (DESKTOP) */
@media (width > 480px) {
  :root {
    /* Grid */
    --content-grid-margin: var(--space-7xll);
    --content-grid-gutter: var(--space-xl);
    --modal-padding: var(--space-6xl);
    --modal-close-right: var(--space-m);
    --button-padding: var(--space-s) var(--space-l);
    --button-text-size: 18px;
    --plyr-range-thumb-width: var(--space-sm);
    --plyr-range-thumb-height: var(--space-sm);
    --plyr-range-track-height: 4px;
    --plyr-control-spacing: var(--space-m);
    --plyr-play-overlay-size: var(--space-8xl);
    --plyr-play-overlay-icon-size: var(--space-4xl);
  }
}

@media (width > 1062px) {
  :root {
    /* Header */
    --header-height: 104px;

    /* Sections */
    --section-padding-block: var(--space-11xl);
  }
}

/* Colors (for browsers that support light-dark()) */
@supports (color: light-dark(black, white)) {
  :root {
    /* Primary */
    --clr-primary: light-dark(var(--clr-qnx-coral), var(--clr-qnx-coral));

    /* Secondary */
    --clr-secondary: light-dark(var(--clr-blush-red), var(--clr-mahogany));
    --clr-tertiary: light-dark(var(--clr-burnt-umber), var(--clr-burnt-umber));
    --clr-quaternary: light-dark(var(--clr-mahogany), var(--clr-blush-red));

    /* Base */
    --clr-b-light: light-dark(var(--clr-white), var(--clr-dark));
    --clr-b-overall-light: light-dark(var(--clr-white), var(--clr-white));
    --clr-b-dark: light-dark(var(--clr-dark), var(--clr-white));
    --clr-b-overall-dark: light-dark(var(--clr-dark), var(--clr-dark));
    --clr-b-black: light-dark(var(--clr-black), var(--clr-black));
    --clr-b-text: light-dark(var(--clr-black), var(--clr-white));
    --clr-b-text-reversed: light-dark(var(--clr-white), var(--clr-black));

    /* Neutrals */
    --clr-n-gray-1: light-dark(var(--clr-gray-1), var(--clr-gray-3));
    --clr-n-gray-2: light-dark(var(--clr-gray-2), var(--clr-gray-2));
    --clr-n-gray-3: light-dark(var(--clr-gray-3), var(--clr-gray-1));

    /* Neutral Background */
    --clr-nb-sand: light-dark(var(--clr-sand), var(--clr-sand-dark));
    --clr-nb-light-sand: light-dark(
      var(--clr-light-sand),
      var(--clr-light-sand-dark)
    );

    /* Neutral Background White Light Sand */
    --clr-nb-white-light-sand: light-dark(
      var(--clr-white),
      var(--clr-light-sand-dark)
    );

    /* Glassmorphism */
    --clr-nb-glass-1: light-dark(var(--clr-glass), var(--clr-glass));
    --clr-nb-glass-2: light-dark(var(--clr-glass), var(--clr-glass-dark));

    /* Specialist Highlighter */
    --clr-sh-energizer-purple: light-dark(
      var(--clr-energizer-purple),
      var(--clr-energizer-purple)
    );

    /* Buttons */
    --button-color: light-dark(var(--clr-black), var(--clr-white));
    --button-hover-color: light-dark(
      var(--clr-qnx-coral),
      var(--clr-qnx-coral)
    );
  }
}

/* Fallback Colors (for browsers that do not support light-dark(), see https://caniuse.com/?search=light-dark) */
@supports not (color: light-dark(black, white)) {
  :root.color-scheme-dark,
  :root[data-color-scheme="dark"] {
    /* Primary */
    --clr-primary: var(--clr-qnx-coral);

    /* Secondary */
    --clr-secondary: var(--clr-mahogany);
    --clr-tertiary: var(--clr-burnt-umber);
    --clr-quaternary: var(--clr-blush-red);

    /* Base */
    --clr-b-light: var(--clr-dark);
    --clr-b-overall-light: var(--clr-white);
    --clr-b-dark: var(--clr-white);
    --clr-b-overall-dark: var(--clr-dark);
    --clr-b-black: var(--clr-black);
    --clr-b-text: var(--clr-white);
    --clr-b-text-reversed: var(--clr-black);

    /* Neutrals */
    --clr-n-gray-1: var(--clr-gray-3);
    --clr-n-gray-2: var(--clr-gray-2);
    --clr-n-gray-3: var(--clr-gray-1);

    /* Neutral Background */
    --clr-nb-sand: var(--clr-sand-dark);
    --clr-nb-light-sand: var(--clr-light-sand-dark);

    /* Neutral Background White Light Sand */
    --clr-nb-white-light-sand: var(--clr-light-sand-dark);

    /* Glassmorphism */
    --clr-nb-glass-1: var(--clr-glass);
    --clr-nb-glass-2: var(--clr-glass-dark);

    /* Specialist Highlighter */
    --clr-sh-energizer-purple: var(--clr-energizer-purple);

    /* Buttons */
    --button-color: var(--clr-white);
    --button-hover-color: var(--clr-qnx-coral);
  }
}

/**************************************************************************************************
 * ELEMENTS
 *************************************************************************************************/

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* Required to prevent horizontal scroll initiation from touchpad on Edge */
html, body {
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  display: none;
  margin: 0;
  background-color: var(--body-background-color);
  color: var(--body-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-s);
  line-height: var(--body-line-height-s);
}

body.appear {
  display: block;
}

body.block-scroll {
  overflow: hidden;
}

a.button.skip-link[id] {
  --height: var(--space-xl);

  position: absolute;
  inset: 0 0 auto;
  width: fit-content;
  height: var(--height);
  font-size: var(--body-font-size-s);
  padding-block: var(--space-xs);
  margin-block: unset;
  margin-inline: auto;
  z-index: calc(var(--header-z-index) + 1);
  transform: translateY(calc(-1 * var(--height)));

  &:focus {
    transform: translateY(0);
  }
}

header {
  height: var(--header-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

main > div {
  margin: var(--section-padding-block) var(--content-grid-margin);
}

input,
textarea,
select,
button {
  font: inherit;
}

figure {
  margin: unset;
}

fieldset {
  margin-inline: unset;
  padding-block: unset;
  padding-inline: unset;
  border: none;
  min-inline-size: unset;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: var(--icon-size);
  width: var(--icon-size);

  svg {
    width: inherit;
    height: inherit;
  }

  img {
    height: 100%;
    width: 100%;
  }
}

/* sections */
main > .section {
  padding: var(--section-padding-block) 0;
  margin: 0;
}

main > .section.section-padding-top-100 {
  padding-block-start: var(--section-padding-block);
}

main > .section.section-padding-bottom-100 {
  padding-block-end: var(--section-padding-block);
}

main > .section.section-padding-top-0 {
  padding-block-start: 0;
}

main > .section.section-padding-bottom-0 {
  padding-block-end: 0;
}

main > .section.section-no-paddings {
  padding: 0;
}

main > .section.accordion-group,
main > .section.tabs-container {
  padding: var(--space-xl) 0;
}

main > .section > div {
  max-width: var(--full-width-content-max-width);
  margin: auto;
  padding: 0 var(--content-grid-margin);
}

main > .section:first-of-type {
  padding-top: 0;

  .qnx-title-wrapper:first-child {
    margin-top: calc(var(--header-height) + var(--space-4xl));
  }
}

/* Remove margin top from heading elements when qnx-title-wrapper is first in section */
main .section > .qnx-title-wrapper:first-child :is(h1,h2,h3,h4,h5,h6) {
  margin-block-start: 0;
}

/* Remove margin bottom from heading elements when qnx-title-wrapper is last in section */
main .section > .qnx-title-wrapper:last-child :is(h1,h2,h3,h4,h5,h6) {
  margin-block-end: 0;
}

/* Remove margin bottom from last text element when qnx-text-wrapper is last in section */
main .section > .qnx-text-wrapper:last-child .qnx-text > div > div > :last-child {
  margin-block-end: 0;
}

/* Remove margin bottom from last text element when qnx-text-wrapper is last in section (UE side) */
html.adobe-ue-edit,
html.adobe-ue-preview {
  main .section > .qnx-text-wrapper:last-child .qnx-text > div > div > div > :last-child {
    margin-block-end: 0;
  }
}

/* graphics */
[data-bg-graphic] {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  > svg:first-child {
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 480px;
    color: var(--graphic-color, var(--clr-primary));
  }
}

/**************************************************************************************************
 * TYPOGRAPHY
 *************************************************************************************************/

.font-onest,
[data-font="onest"] {
  font-family: var(--font-family-onest);
}

.font-noto-jp,
[data-font="noto-jp"],
[lang="ja"]:not(:root) {
  font-family: var(--font-family-noto-jp);
}

.font-noto-sc,
[data-font="noto-sc"],
[lang="zh"]:not(:root) {
  font-family: var(--font-family-noto-sc);
}

h1,
.heading-1 {
  font-size: var(--heading-font-size-xl);
  line-height: var(--heading-line-height-xl);
  font-weight: var(--font-weight-semibold);
}

h2,
.heading-2 {
  font-size: var(--heading-font-size-l);
  line-height: var(--heading-line-height-l);
  font-weight: var(--font-weight-semibold);
}

h3,
.heading-3 {
  font-size: var(--heading-font-size-m);
  line-height: var(--heading-line-height-m);
  font-weight: var(--font-weight-semibold);
}

h4,
.heading-4 {
  font-size: var(--heading-font-size-s);
  line-height: var(--heading-line-height-s);
  font-weight: var(--font-weight-semibold);
}

h5,
.heading-5 {
  font-size: var(--heading-font-size-s);
  line-height: var(--heading-line-height-s);
  font-weight: var(--font-weight-semibold);
}

h6,
.heading-6 {
  font-size: var(--heading-font-size-s);
  line-height: var(--heading-line-height-s);
  font-weight: var(--font-weight-semibold);
}

/* Responsive Heading classes (mobile-first) */

/* 6/5/4 → 3, 2, 1 */
.heading-responsive-6-3,
.heading-responsive-5-3,
.heading-responsive-4-3,
.heading-responsive-6-2,
.heading-responsive-5-2,
.heading-responsive-4-2,
.heading-responsive-6-1,
.heading-responsive-5-1,
.heading-responsive-4-1 {
  /* Mobile: .heading-6/5/4 */
  font-size: var(--heading-font-size-s);
  line-height: var(--heading-line-height-s);
  font-weight: var(--font-weight-semibold);
}

/* 3 → 2, 1 */
.heading-responsive-3-2,
.heading-responsive-3-1 {
  /* Mobile: .heading-3 */
  font-size: var(--heading-font-size-m);
  line-height: var(--heading-line-height-m);
  font-weight: var(--font-weight-semibold);
}

/* 2 → 1 */
.heading-responsive-2-1 {
  /* Mobile: .heading-2 */
  font-size: var(--heading-font-size-l);
  line-height: var(--heading-line-height-l);
  font-weight: var(--font-weight-semibold);
}

.quote-responsive {
  font-size: var(--quote-font-size-s);
  line-height: var(--quote-line-height);
  font-weight: var(--font-weight-semibold);
}

@media (width > 480px) {
  /* 6/5/4 → 3 */
  .heading-responsive-6-3,
  .heading-responsive-5-3,
  .heading-responsive-4-3 {
    /* Desktop: .heading-3 */
    font-size: var(--heading-font-size-m);
    line-height: var(--heading-line-height-m);
    font-weight: var(--font-weight-semibold);
  }

  /* 6/5/4/3 → 2 */
  .heading-responsive-6-2,
  .heading-responsive-5-2,
  .heading-responsive-4-2,
  .heading-responsive-3-2 {
    /* Desktop: .heading-2 */
    font-size: var(--heading-font-size-l);
    line-height: var(--heading-line-height-l);
    font-weight: var(--font-weight-semibold);
  }

  /* 6/5/4/3/2 → 1 */
  .heading-responsive-6-1,
  .heading-responsive-5-1,
  .heading-responsive-4-1,
  .heading-responsive-3-1,
  .heading-responsive-2-1 {
    /* Desktop: .heading-1 */
    font-size: var(--heading-font-size-xl);
    line-height: var(--heading-line-height-xl);
    font-weight: var(--font-weight-semibold);
  }

  .quote-responsive {
    font-size: var(--quote-font-size-xl);
    line-height: var(--quote-line-height);
    font-weight: var(--font-weight-semibold);
  }
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

p {
  font-size: var(--body-font-size-s);
  line-height: var(--body-line-height-s);
  font-weight: var(--font-weight-regular);
}

ol li,
ul li {
  font-size: var(--body-font-size-s);
}

@media (width > 480px) {
  p {
    font-size: var(--body-font-size-m);
    line-height: var(--body-line-height-m);
    font-weight: var(--font-weight-regular);
  }

  ol li,
  ul li {
    font-size: var(--body-font-size-m);
    line-height: var(--body-line-height-m);
  }

  main > .section.accordion-group,
  main > .section.tabs-container {
    padding: var(--space-6xl) 0;
  }
}

/* Paragraph classes */
.paragraph-xxs-regular,
p.paragraph-xxs-regular {
  font-size: var(--body-font-size-xxs);
  line-height: var(--body-line-height-xxs);
  font-weight: var(--font-weight-regular);
}

.paragraph-xs-regular,
p.paragraph-xs-regular {
  font-size: var(--body-font-size-xs);
  line-height: var(--body-line-height-xs);
  font-weight: var(--font-weight-regular);
}

.paragraph-s-regular,
p.paragraph-s-regular {
  font-size: var(--body-font-size-s);
  line-height: var(--body-line-height-s);
  font-weight: var(--font-weight-regular);
}

.paragraph-s-medium,
p.paragraph-s-medium {
  font-size: var(--body-font-size-s);
  line-height: var(--body-line-height-s);
  font-weight: var(--font-weight-medium);
}

.paragraph-s-semibold,
p.paragraph-s-semibold {
  font-size: var(--body-font-size-s);
  line-height: var(--body-line-height-s);
  font-weight: var(--font-weight-semibold);
}

.paragraph-m-regular,
p.paragraph-m-regular {
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height-m);
  font-weight: var(--font-weight-regular);
}

.paragraph-m-medium,
p.paragraph-m-medium {
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height-m);
  font-weight: var(--font-weight-medium);
}

.paragraph-m-semibold,
p.paragraph-m-semibold {
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height-m);
  font-weight: var(--font-weight-semibold);
}

.paragraph-l-regular,
p.paragraph-l-regular {
  font-size: var(--body-font-size-l);
  line-height: var(--body-line-height-l);
  font-weight: var(--font-weight-regular);
}

.paragraph-l-medium,
p.paragraph-l-medium {
  font-size: var(--body-font-size-l);
  line-height: var(--body-line-height-l);
  font-weight: var(--font-weight-medium);
}

.paragraph-l-semibold,
p.paragraph-l-semibold {
  font-size: var(--body-font-size-l);
  line-height: var(--body-line-height-l);
  font-weight: var(--font-weight-semibold);
}

/* Responsive Paragraph classes (mobile-first) */

/* xxs → xs/s/m/l (regular only) */
.paragraph-responsive-xxs-xs-regular,
.paragraph-responsive-xxs-s-regular,
.paragraph-responsive-xxs-m-regular,
.paragraph-responsive-xxs-l-regular {
  /* Mobile: .paragraph-xxs-regular */
  font-size: var(--body-font-size-xxs);
  line-height: var(--body-line-height-xxs);
  font-weight: var(--font-weight-regular);
}

/* xs → s/m/l (regular only) */
.paragraph-responsive-xs-s-regular,
.paragraph-responsive-xs-m-regular,
.paragraph-responsive-xs-l-regular {
  /* Mobile: .paragraph-xs-regular */
  font-size: var(--body-font-size-xs);
  line-height: var(--body-line-height-xs);
  font-weight: var(--font-weight-regular);
}

/* s → m/l (all weights) */
.paragraph-responsive-s-m-regular,
.paragraph-responsive-s-l-regular {
  /* Mobile: .paragraph-s-regular */
  font-size: var(--body-font-size-s);
  line-height: var(--body-line-height-s);
  font-weight: var(--font-weight-regular);
}

.paragraph-responsive-s-m-medium,
.paragraph-responsive-s-l-medium {
  /* Mobile: .paragraph-s-medium */
  font-size: var(--body-font-size-s);
  line-height: var(--body-line-height-s);
  font-weight: var(--font-weight-medium);
}

.paragraph-responsive-s-m-semibold,
.paragraph-responsive-s-l-semibold {
  /* Mobile: .paragraph-s-semibold */
  font-size: var(--body-font-size-s);
  line-height: var(--body-line-height-s);
  font-weight: var(--font-weight-semibold);
}

/* m → l (all weights) */
.paragraph-responsive-m-l-regular {
  /* Mobile: .paragraph-m-regular */
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height-m);
  font-weight: var(--font-weight-regular);
}

.paragraph-responsive-m-l-medium {
  /* Mobile: .paragraph-m-medium */
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height-m);
  font-weight: var(--font-weight-medium);
}

.paragraph-responsive-m-l-semibold {
  /* Mobile: .paragraph-m-semibold */
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height-m);
  font-weight: var(--font-weight-semibold);
}

@media (width > 480px) {
  /* xxs (regular) → xs (regular) */
  .paragraph-responsive-xxs-xs-regular {
    /* Desktop: .paragraph-xs */
    font-size: var(--body-font-size-xs);
    line-height: var(--body-line-height-xs);
    font-weight: var(--font-weight-regular);
  }

  /* xxs/xs (regular) → s (regular) */
  .paragraph-responsive-xxs-s-regular,
  .paragraph-responsive-xs-s-regular {
    /* Desktop: .paragraph-s-regular */
    font-size: var(--body-font-size-s);
    line-height: var(--body-line-height-s);
    font-weight: var(--font-weight-regular);
  }

  /* xxs/xs/s (regular) → m (regular) */
  .paragraph-responsive-xxs-m-regular,
  .paragraph-responsive-xs-m-regular,
  .paragraph-responsive-s-m-regular {
    /* Desktop: .paragraph-m-regular */
    font-size: var(--body-font-size-m);
    line-height: var(--body-line-height-m);
    font-weight: var(--font-weight-regular);
  }

  /* s (medium) → m (medium) */
  .paragraph-responsive-s-m-medium {
    /* Desktop: .paragraph-m-medium */
    font-size: var(--body-font-size-m);
    line-height: var(--body-line-height-m);
    font-weight: var(--font-weight-medium);
  }

  /* s (semibold) → m (semibold) */
  .paragraph-responsive-s-m-semibold {
    /* Desktop: .paragraph-m-semibold */
    font-size: var(--body-font-size-m);
    line-height: var(--body-line-height-m);
    font-weight: var(--font-weight-semibold);
  }

  /* xxs/xs/s/m (regular) → l (regular) */
  .paragraph-responsive-xxs-l-regular,
  .paragraph-responsive-xs-l-regular,
  .paragraph-responsive-s-l-regular,
  .paragraph-responsive-m-l-regular {
    /* Desktop: .paragraph-l-regular */
    font-size: var(--body-font-size-l);
    line-height: var(--body-line-height-l);
    font-weight: var(--font-weight-regular);
  }

  /* s/m (medium) → l (medium) */
  .paragraph-responsive-s-l-medium,
  .paragraph-responsive-m-l-medium {
    /* Desktop: .paragraph-l-medium */
    font-size: var(--body-font-size-l);
    line-height: var(--body-line-height-l);
    font-weight: var(--font-weight-medium);
  }

  /* s/m (semibold) → l (semibold) */
  .paragraph-responsive-s-l-semibold,
  .paragraph-responsive-m-l-semibold {
    /* Desktop: .paragraph-l-semibold */
    font-size: var(--body-font-size-l);
    line-height: var(--body-line-height-l);
    font-weight: var(--font-weight-semibold);
  }
}

/* Label classes */
.label-xs {
  font-size: var(--body-font-size-xxs);
  line-height: var(--label-line-height-xxs);
  font-weight: var(--font-weight-semibold);
}

.label-s {
  font-size: var(--body-font-size-xs);
  line-height: var(--label-line-height-xs);
  font-weight: var(--font-weight-semibold);
}

.label-m {
  font-size: var(--body-font-size-s);
  line-height: var(--label-line-height-s);
  font-weight: var(--font-weight-semibold);
}

.label-l {
  font-size: var(--body-font-size-m);
  line-height: var(--label-line-height-m);
  font-weight: var(--font-weight-semibold);
}

.label-xl {
  font-size: var(--body-font-size-l);
  line-height: var(--label-line-height-l);
  font-weight: var(--font-weight-semibold);
}

/* Responsive Label classes (mobile-first) */
.label-responsive-xs-s {
  /* Mobile: .label-xs */
  font-size: var(--body-font-size-xxs);
  line-height: var(--label-line-height-xxs);
  font-weight: var(--font-weight-semibold);
}

.label-responsive-xs-m {
  /* Mobile: .label-xs */
  font-size: var(--body-font-size-xxs);
  line-height: var(--label-line-height-xxs);
  font-weight: var(--font-weight-semibold);
}

.label-responsive-xs-l {
  /* Mobile: .label-xs */
  font-size: var(--body-font-size-xxs);
  line-height: var(--label-line-height-xxs);
  font-weight: var(--font-weight-semibold);
}

.label-responsive-xs-xl {
  /* Mobile: .label-xs */
  font-size: var(--body-font-size-xxs);
  line-height: var(--label-line-height-xxs);
  font-weight: var(--font-weight-semibold);
}

.label-responsive-s-m {
  /* Mobile: .label-s */
  font-size: var(--body-font-size-xs);
  line-height: var(--label-line-height-xs);
  font-weight: var(--font-weight-semibold);
}

.label-responsive-s-l {
  /* Mobile: .label-s */
  font-size: var(--body-font-size-xs);
  line-height: var(--label-line-height-xs);
  font-weight: var(--font-weight-semibold);
}

.label-responsive-s-xl {
  /* Mobile: .label-s */
  font-size: var(--body-font-size-xs);
  line-height: var(--label-line-height-xs);
  font-weight: var(--font-weight-semibold);
}

.label-responsive-m-l {
  /* Mobile: .label-m */
  font-size: var(--body-font-size-s);
  line-height: var(--label-line-height-s);
  font-weight: var(--font-weight-semibold);
}

.label-responsive-m-xl {
  /* Mobile: .label-m */
  font-size: var(--body-font-size-s);
  line-height: var(--label-line-height-s);
  font-weight: var(--font-weight-semibold);
}

.label-responsive-l-xl {
  /* Mobile: .label-l */
  font-size: var(--body-font-size-m);
  line-height: var(--label-line-height-m);
  font-weight: var(--font-weight-semibold);
}

@media (width > 480px) {
  .label-responsive-xs-s {
    /* Desktop: .label-s */
    font-size: var(--body-font-size-xs);
    line-height: var(--label-line-height-xs);
    font-weight: var(--font-weight-semibold);
  }

  .label-responsive-xs-m {
    /* Desktop: .label-m */
    font-size: var(--body-font-size-s);
    line-height: var(--label-line-height-s);
    font-weight: var(--font-weight-semibold);
  }

  .label-responsive-xs-l {
    /* Desktop: .label-l */
    font-size: var(--body-font-size-m);
    line-height: var(--label-line-height-m);
    font-weight: var(--font-weight-semibold);
  }

  .label-responsive-xs-xl {
    /* Desktop: .label-xl */
    font-size: var(--body-font-size-l);
    line-height: var(--label-line-height-l);
    font-weight: var(--font-weight-semibold);
  }

  .label-responsive-s-m {
    /* Desktop: .label-m */
    font-size: var(--body-font-size-s);
    line-height: var(--label-line-height-s);
    font-weight: var(--font-weight-semibold);
  }

  .label-responsive-s-l {
    /* Desktop: .label-l */
    font-size: var(--body-font-size-m);
    line-height: var(--label-line-height-m);
    font-weight: var(--font-weight-semibold);
  }

  .label-responsive-s-xl {
    /* Desktop: .label-xl */
    font-size: var(--body-font-size-l);
    line-height: var(--label-line-height-l);
    font-weight: var(--font-weight-semibold);
  }

  .label-responsive-m-l {
    /* Desktop: .label-l */
    font-size: var(--body-font-size-m);
    line-height: var(--label-line-height-m);
    font-weight: var(--font-weight-semibold);
  }

  .label-responsive-m-xl {
    /* Desktop: .label-xl */
    font-size: var(--body-font-size-l);
    line-height: var(--label-line-height-l);
    font-weight: var(--font-weight-semibold);
  }

  .label-responsive-l-xl {
    /* Desktop: .label-xl */
    font-size: var(--body-font-size-l);
    line-height: var(--label-line-height-l);
    font-weight: var(--font-weight-semibold);
  }
}

/* Number classes */
.number-m,
h1.number-m {
  font-size: var(--number-font-size-m);
  line-height: var(--number-line-height-m);
  font-weight: var(--font-weight-medium);
}

.number-l,
h1.number-l {
  font-size: var(--number-font-size-l);
  line-height: var(--number-line-height-l);
  font-weight: var(--font-weight-medium);
}

.number-xl {
  font-size: var(--number-font-size-xl);
  line-height: var(--number-line-height-xl);
  font-weight: var(--font-weight-medium);
}

/* Responsive Number classes (mobile-first) */
.number-responsive-m-l,
.number-responsive-m-xl {
  /* Mobile: .number-m */
  font-size: var(--number-font-size-m);
  line-height: var(--number-line-height-m);
  font-weight: var(--font-weight-medium);
}

.number-responsive-l-xl {
  /* Mobile: .number-l */
  font-size: var(--number-font-size-l);
  line-height: var(--number-line-height-l);
  font-weight: var(--font-weight-medium);
}

@media (width > 480px) {
  .number-responsive-m-l {
    /* Desktop: .number-l */
    font-size: var(--number-font-size-l);
    line-height: var(--number-line-height-l);
    font-weight: var(--font-weight-medium);
  }

  .number-responsive-m-xl,
  .number-responsive-l-xl {
    /* Desktop: .number-xl */
    font-size: var(--number-font-size-xl);
    line-height: var(--number-line-height-xl);
    font-weight: var(--font-weight-medium);
  }
}

/**************************************************************************************************
 * BUTTONS
 *************************************************************************************************/

/* links */
a:any-link {
  color: var(--button-color);
  text-decoration: underline;
  overflow-wrap: break-word;
}

a:hover {
  color: var(--button-hover-color);
  text-decoration: underline;
}

button {
  color: var(--button-color);
}

/* buttons */
a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  border: 2px solid transparent;
  margin: var(--space-xss) 0;
  font-style: normal;
  font-size: var(--button-text-size);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

a.button:focus-visible,
button:focus-visible {
  outline: 2px solid var(--clr-energizer-purple);
  outline-offset: -2px;
  border-color: transparent;
}

a.button[data-disabled="true"],
a.button[data-disabled="true"]:hover,
.button:disabled,
.button:disabled:hover {
  color: var(--clr-button-disabled);
  border: unset;
  pointer-events: none;
  cursor: not-allowed;
}

.showarrow a.button::after,
.showarrow .button::after {
  content: "";
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-left: var(--button-arrow-padding);
  margin-bottom: var(--space-xxs);
  background-color: currentcolor;
  mask: url("../icons/arrow-right.svg") no-repeat center / contain;
  vertical-align: middle;
}

a.button.primary,
button.primary {
  padding: var(--button-padding);
  background-color: var(--clr-primary);
  border: 2px solid var(--clr-primary);
  color: var(--clr-white);
}

a.button.primary[data-disabled="true"],
a.button.primary[data-disabled="true"]:hover,
.button.primary:disabled,
.button.primary:disabled:hover {
  background-color: var(--clr-button-disabled);
  color: var(--clr-gray-1);
  border: unset;
  pointer-events: none;
  cursor: not-allowed;
}

a.button.secondary,
button.secondary {
  padding: var(--button-padding);
  background-color: unset;
  border: 2px solid currentcolor;
  color: var(--text-color);
}

a.button.secondary[data-disabled="true"],
a.button.secondary[data-disabled="true"]:hover,
.button.secondary:disabled,
.button.secondary:disabled:hover {
  background-color: var(--clr-button-disabled);
  color: var(--clr-button-disabled);
  border: 1px solid var(--clr-button-disabled);
  pointer-events: none;
  cursor: not-allowed;
}

p.button-container {
  a.button:has(.icon) {
    display: inline-flex;
    gap: var(--button-icon-gap);
    align-items: center;
  }
}

.button-align-start .button-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

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

.button-align-end .button-container {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

@media (hover: hover) and (pointer: fine) {
  a.button:hover,
  button:hover {
    color: var(--button-hover-color);
    cursor: pointer;
  }

  a.button.primary:hover,
  button.primary:hover {
    background-color: var(--clr-burnt-umber);
    border: 2px solid var(--clr-burnt-umber);
    color: var(--clr-white);
  }

  a.button.secondary:hover,
  button.secondary:hover {
    border: 2px solid var(--clr-primary);
    color: var(--clr-primary);
  }
}

/**************************************************************************************************
 * DM IMAGE
 *************************************************************************************************/

.dm-image {
  --dm-image-caption-color: var(--clr-n-gray-3);
  --text-text-align: start;

  picture {
    display: block;

    img {
      display: inherit;
    }
  }

  figure {
    text-align: var(--text-text-align);

    button {
      margin-inline: 0;
    }

    figcaption {
      display: none;
      color: var(--dm-image-caption-color);
      margin-block-start: var(--space-s);

      > p {
        margin-block: unset;
      }
    }
  }

  &.text-align-center {
    figure {
      button,
      > picture img {
        margin-inline: auto;
      }
    }
  }

  &.text-align-end {
    figure {
      button,
      > picture img {
        margin-inline: auto 0;
      }
    }
  }
}

.dm-image-wrapper:has(> .dm-image.dm-image-bleed-out) {
  padding-inline: unset;
}

.dm-image-highlighter-xl {
  picture img {
    border-inline-start: var(--image-highlighter-xl) solid var(--clr-qnx-coral);
  }
}

.dm-image-highlighter-l {
  picture img {
    border-inline-start: var(--image-highlighter-l) solid var(--clr-qnx-coral);
  }
}

.dm-image-highlighter-m {
  picture img {
    border-inline-start: var(--image-highlighter-m) solid var(--clr-qnx-coral);
  }
}

.dm-image-highlighter-s {
  picture img {
    border-inline-start: var(--image-highlighter-s) solid var(--clr-qnx-coral);
  }
}

.dm-image-modal-opener {
  display: block;
  width: fit-content;
  height: fit-content;
  margin: unset;
  padding: unset;
  background-color: unset;
  border: none;
}

.dm-image-modal {
  --dm-image-modal-close-button-size: var(--space-xl);
  --dm-image-modal-close-icon-size: var(--space-m);

  max-width: 100dvw;
  max-height: 100dvh;
  margin: auto;
  padding: unset;
  background-color: transparent;
  border: none;

  &::backdrop {
    background: var(--clr-glass-dark);
  }

  .dm-image-modal-content {
    padding: var(--modal-padding);
    display: grid;
    place-items: center;

    button.dm-image-modal-close {
      width: var(--dm-image-modal-close-button-size);
      height: var(--dm-image-modal-close-button-size);
      position: fixed;
      top: var(--space-sm);
      right: var(--space-xss);
      border: none;
      background-color: transparent;
      cursor: pointer;
      color: var(--clr-b-overall-light);
      text-align: center;
      padding-inline: unset;
      margin-block: unset;
      display: grid;
      place-items: center;

      .icon {
        --icon-size: var(--dm-image-modal-close-icon-size);
      }
    }

    picture {
      display: block;

      img {
        display: inherit;
        width: 100%;
        max-height: calc(100dvh - 2 * var(--modal-padding));
      }
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  .dm-image-modal {
    .dm-image-modal-content {
      button.dm-image-modal-close:hover {
        color: var(--clr-primary);
      }
    }
  }
}

@supports not ((max-width: 100dvw) or (max-height: 100dvh)) {
  .dm-image-modal {
    max-width: 100vw;
    max-height: 100vh;

    .dm-image-modal-content {
      picture {
        img {
          max-height: calc(100vh - 2 * var(--modal-padding));
        }
      }
    }
  }
}

@media (width > 480px) {
  .dm-image {
    figure {
      figcaption {
        display: block;
      }
    }
  }
}

@media (width > 1062px) {
  .dm-image-modal {
    .dm-image-modal-content {
      button.dm-image-modal-close {
        top: var(--space-l);
        right: var(--space-ml);
      }
    }
  }
}

/**************************************************************************************************
 * UTILITIES
 *************************************************************************************************/

/* Color Scheme */
.color-scheme-light,
[data-color-scheme="light"] {
  color-scheme: light;
}

.color-scheme-dark,
[data-color-scheme="dark"] {
  color-scheme: dark;
}

/* Color */
.text-qnx-coral {
  color: var(--clr-qnx-coral);
}

.text-blush-red {
  color: var(--clr-blush-red);
}

.text-burnt-umber {
  color: var(--clr-burnt-umber);
}

.text-mahogany {
  color: var(--clr-mahogany);
}

.text-white {
  color: var(--clr-white);
}

.text-dark {
  color: var(--clr-dark);
}

.text-black {
  color: var(--clr-black);
}

.text-gray-1 {
  color: var(--clr-gray-1);
}

.text-gray-2 {
  color: var(--clr-gray-2);
}

.text-gray-3 {
  color: var(--clr-gray-3);
}

.text-sand {
  color: var(--clr-sand);
}

.text-sand-dark {
  color: var(--clr-sand-dark);
}

.text-light-sand {
  color: var(--clr-light-sand);
}

.text-light-sand-dark {
  color: var(--clr-light-sand-dark);
}

.text-energizer-purple {
  color: var(--clr-energizer-purple);
}

.text-glass {
  color: var(--clr-glass);
}

.text-glass-dark {
  color: var(--clr-glass-dark);
}

.text-primary {
  color: var(--clr-primary);
}

.text-secondary {
  color: var(--clr-secondary);
}

.text-tertiary {
  color: var(--clr-tertiary);
}

.text-quaternary {
  color: var(--clr-quaternary);
}

.text-b-light {
  color: var(--clr-b-light);
}

.text-b-overall-light {
  color: var(--clr-b-overall-light);
}

.text-b-dark {
  color: var(--clr-b-dark);
}

.text-b-overall-dark {
  color: var(--clr-b-overall-dark);
}

.text-b-black {
  color: var(--clr-b-black);
}

.text-b-text {
  color: var(--clr-b-text);
}

.text-n-gray-1 {
  color: var(--clr-n-gray-1);
}

.text-n-gray-2 {
  color: var(--clr-n-gray-2);
}

.text-n-gray-3 {
  color: var(--clr-n-gray-3);
}

.text-nb-sand {
  color: var(--clr-nb-sand);
}

.text-nb-light-sand {
  color: var(--clr-nb-light-sand);
}

.text-nb-glass-1 {
  color: var(--clr-nb-glass-1);
}

.text-nb-glass-2 {
  color: var(--clr-nb-glass-2);
}

.text-sh-energizer-purple {
  color: var(--clr-sh-energizer-purple);
}

/* Background */
.bg-qnx-coral {
  background-color: var(--clr-qnx-coral);
}

.bg-blush-red {
  background-color: var(--clr-blush-red);
}

.bg-burnt-umber {
  background-color: var(--clr-burnt-umber);
}

.bg-mahogany {
  background-color: var(--clr-mahogany);
}

.bg-white {
  background-color: var(--clr-white);
}

.bg-dark {
  background-color: var(--clr-dark);
}

.bg-black {
  background-color: var(--clr-black);
}

.bg-gray-1 {
  background-color: var(--clr-gray-1);
}

.bg-gray-2 {
  background-color: var(--clr-gray-2);
}

.bg-gray-3 {
  background-color: var(--clr-gray-3);
}

.bg-sand {
  background-color: var(--clr-sand);
}

.bg-sand-dark {
  background-color: var(--clr-sand-dark);
}

.bg-light-sand {
  background-color: var(--clr-light-sand);
}

.bg-light-sand-dark {
  background-color: var(--clr-light-sand-dark);
}

.bg-energizer-purple {
  background-color: var(--clr-energizer-purple);
}

.bg-glass {
  background: var(--clr-glass);
  backdrop-filter: blur(var(--background-blur-m));
}

.bg-glass-dark {
  background: var(--clr-glass-dark);
  backdrop-filter: blur(var(--background-blur-m));
}

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

.bg-secondary {
  background-color: var(--clr-secondary);
}

.bg-tertiary {
  background-color: var(--clr-tertiary);
}

.bg-quaternary {
  background-color: var(--clr-quaternary);
}

.bg-b-light {
  background-color: var(--clr-b-light);
}

.bg-b-overall-light {
  background-color: var(--clr-b-overall-light);
}

.bg-b-dark {
  background-color: var(--clr-b-dark);
}

.bg-b-overall-dark {
  background-color: var(--clr-b-overall-dark);
}

.bg-b-black {
  background-color: var(--clr-b-black);
}

.bg-n-gray-1 {
  background-color: var(--clr-n-gray-1);
}

.bg-n-gray-2 {
  background-color: var(--clr-n-gray-2);
}

.bg-n-gray-3 {
  background-color: var(--clr-n-gray-3);
}

.bg-nb-sand {
  background-color: var(--clr-nb-sand);
}

.bg-nb-light-sand {
  background-color: var(--clr-nb-light-sand);
}

.bg-nb-white-light-sand {
  background-color: var(--clr-nb-white-light-sand);
}

.bg-nb-glass-1 {
  background: var(--clr-nb-glass-1);
  backdrop-filter: blur(var(--background-blur-m));
}

.bg-nb-glass-2 {
  background: var(--clr-nb-glass-2);
  backdrop-filter: blur(var(--background-blur-m));
}

.bg-sh-energizer-purple {
  background-color: var(--clr-sh-energizer-purple);
}

.bg-glass-1 {
  background: var(--clr-nb-glass-1);
  backdrop-filter: blur(var(--background-blur-m));
}

.bg-glass-2 {
  background: var(--clr-nb-glass-2);
  backdrop-filter: blur(var(--background-blur-m));
}

/* Spacing */
.space-t-xxs {
  margin-block-start: var(--space-xxs);
}

.space-t-xs {
  margin-block-start: var(--space-xs);
}

.space-t-xss {
  margin-block-start: var(--space-xss);
}

.space-t-s {
  margin-block-start: var(--space-s);
}

.space-t-sm {
  margin-block-start: var(--space-sm);
}

.space-t-m {
  margin-block-start: var(--space-m);
}

.space-t-ml {
  margin-block-start: var(--space-ml);
}

.space-t-l {
  margin-block-start: var(--space-l);
}

.space-t-xl {
  margin-block-start: var(--space-xl);
}

.space-t-xll {
  margin-block-start: var(--space-xll);
}

.space-t-2xl {
  margin-block-start: var(--space-2xl);
}

.space-t-2xll {
  margin-block-start: var(--space-2xll);
}

.space-t-3xl {
  margin-block-start: var(--space-3xl);
}

.space-t-3xll {
  margin-block-start: var(--space-3xll);
}

.space-t-4xl {
  margin-block-start: var(--space-4xl);
}

.space-t-4xll {
  margin-block-start: var(--space-4xll);
}

.space-t-5xl {
  margin-block-start: var(--space-5xl);
}

.space-t-5xll {
  margin-block-start: var(--space-5xll);
}

.space-t-6xl {
  margin-block-start: var(--space-6xl);
}

.space-t-6xll {
  margin-block-start: var(--space-6xll);
}

.space-t-7xl {
  margin-block-start: var(--space-7xl);
}

.space-t-7xll {
  margin-block-start: var(--space-7xll);
}

.space-t-8xl {
  margin-block-start: var(--space-8xl);
}

.space-t-8xll {
  margin-block-start: var(--space-8xll);
}

.space-t-9xl {
  margin-block-start: var(--space-9xl);
}

.space-t-9xll {
  margin-block-start: var(--space-9xll);
}

.space-t-10xl {
  margin-block-start: var(--space-10xl);
}

.space-t-10xll {
  margin-block-start: var(--space-10xll);
}

.space-t-11xl {
  margin-block-start: var(--space-11xl);
}

.space-b-xxs {
  margin-block-end: var(--space-xxs);
}

.space-b-xs {
  margin-block-end: var(--space-xs);
}

.space-b-xss {
  margin-block-end: var(--space-xss);
}

.space-b-s {
  margin-block-end: var(--space-s);
}

.space-b-sm {
  margin-block-end: var(--space-sm);
}

.space-b-m {
  margin-block-end: var(--space-m);
}

.space-b-ml {
  margin-block-end: var(--space-ml);
}

.space-b-l {
  margin-block-end: var(--space-l);
}

.space-b-xl {
  margin-block-end: var(--space-xl);
}

.space-b-xll {
  margin-block-end: var(--space-xll);
}

.space-b-2xl {
  margin-block-end: var(--space-2xl);
}

.space-b-2xll {
  margin-block-end: var(--space-2xll);
}

.space-b-3xl {
  margin-block-end: var(--space-3xl);
}

.space-b-3xll {
  margin-block-end: var(--space-3xll);
}

.space-b-4xl {
  margin-block-end: var(--space-4xl);
}

.space-b-4xll {
  margin-block-end: var(--space-4xll);
}

.space-b-5xl {
  margin-block-end: var(--space-5xl);
}

.space-b-5xll {
  margin-block-end: var(--space-5xll);
}

.space-b-6xl {
  margin-block-end: var(--space-6xl);
}

.space-b-6xll {
  margin-block-end: var(--space-6xll);
}

.space-b-7xl {
  margin-block-end: var(--space-7xl);
}

.space-b-7xll {
  margin-block-end: var(--space-7xll);
}

.space-b-8xl {
  margin-block-end: var(--space-8xl);
}

.space-b-8xll {
  margin-block-end: var(--space-8xll);
}

.space-b-9xl {
  margin-block-end: var(--space-9xl);
}

.space-b-9xll {
  margin-block-end: var(--space-9xll);
}

.space-b-10xl {
  margin-block-end: var(--space-10xl);
}

.space-b-10xll {
  margin-block-end: var(--space-10xll);
}

.space-b-11xl {
  margin-block-end: var(--space-11xl);
}

/* Text Align styles */
.text-align-start {
  --text-text-align: start;
}

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

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

/* Text transform */
.text-transform-uppercase {
  text-transform: uppercase;
}

.text-transform-lowercase {
  text-transform: lowercase;
}

.text-transform-capitalize {
  text-transform: capitalize;
}

/* Accent Line */
.accent-line {
  /* Overwrite these variables in a block style scope to override style */
  --accent-line-width-desktop: var(--space-xxs);
  --accent-line-height-desktop: var(--space-3xl);
  --accent-line-width-mobile: calc(var(--accent-line-width-desktop) / 2);
  --accent-line-height-mobile: var(--space-xl);
  --accent-line-width: var(--accent-line-width-mobile);
  --accent-line-height: var(--accent-line-height-mobile);
  --accent-line-background-color: var(--clr-primary);
  --accent-line-margin-block-end: var(--space-m);

  &::before {
    content: "";
    display: block;
    width: var(--accent-line-width);
    height: var(--accent-line-height);
    background-color: var(--accent-line-background-color);
    margin-block-end: var(--accent-line-margin-block-end);
  }
}

@media (width > 480px) {
  .accent-line {
    --accent-line-width: var(--accent-line-width-desktop);
    --accent-line-height: var(--accent-line-height-desktop);
  }
}

/* Font weight */
.font-weight-regular {
  font-weight: var(--font-weight-regular);
}

.font-weight-medium {
  font-weight: var(--font-weight-medium);
}

.font-weight-semibold {
  font-weight: var(--font-weight-semibold);
}

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

/* Screen-reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**************************************************************************************************
 * Carousel
 *************************************************************************************************/

.carousel:focus {
  outline: none;
}

.carousel-slides {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel-slides::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start end;
  margin: 0 0 var(--space-3xl) 0;
  padding: 0;
}

.carousel-slide[aria-hidden="true"] {
  visibility: hidden;
}

.carousel-navigation-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-m);
  margin-bottom: var(--space-m);
  pointer-events: none;
  z-index: 2;
}

.carousel-navigation-buttons button {
  width: var(--space-l);
  height: var(--space-l);
  background: var(--clr-primary);
  color: white;
  cursor: pointer;
  pointer-events: auto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.carousel-navigation-buttons button:hover {
  background: var(--clr-tertiary);
}

.carousel-navigation-buttons button:disabled {
  background: var(--clr-n-gray-1);
  cursor: not-allowed;
}

.carousel-navigation-buttons .icon {
  width: var(--space-xss);
  height: var(--space-sm);
}

.carousel-slide-indicators {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: 0;
  padding: 0;
  list-style: none;
}

.carousel-slide-indicator button {
  width: var(--space-xss);
  height: var(--space-xss);
  background: transparent;
  border: 1px solid var(--clr-n-gray-3);
  cursor: pointer;
}

.carousel-slide-indicator button:disabled {
  background: var(--clr-primary);
  border: 1px solid var(--clr-primary);
  cursor: default;
}

.carousel-glider-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0;
  list-style: none;
}

.carousel-glider-dots button {
  width: var(--space-xss);
  height: var(--space-xss);
  background: transparent;
  border: 1px solid var(--clr-n-gray-3);
  cursor: pointer;
  border-radius: 0;
  margin: 0;

  &.active {
    background: var(--clr-primary);
    border: 1px solid var(--clr-primary);
    cursor: default;
  }
}

.carousel-glider-arrow.glider-next,
.carousel-glider-arrow.glider-prev {
  width: var(--space-l);
  height: var(--space-l);
  background: var(--clr-primary);
  font-size: unset;
  color: var(--clr-white);
  cursor: pointer;
  pointer-events: auto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: none;

  &:not(.disabled):hover {
    background: var(--clr-tertiary);
  }

  &.disabled {
    background: var(--clr-n-gray-1);
    cursor: not-allowed;
    opacity: 1;
    color: var(--clr-white);
  }

  .icon {
    width: var(--space-xss);
    height: var(--space-sm);
  }
}

@media (width >= 900px) {
  .carousel-slides-container {
    display: flex;
    align-items: center;
    gap: var(--space-l);
  }

  .carousel-navigation-buttons {
    display: contents;
    margin-bottom: 0;
  }

  .carousel-navigation-buttons button {
    position: static;
  }

  .carousel-navigation-buttons .slide-prev {
    order: 1;
  }

  .carousel-navigation-buttons .slide-next {
    order: 3;
  }

  .carousel-slides {
    order: 2;
    flex: 1;
  }
}

/**************************************************************************************************
 * Video Player
 *************************************************************************************************/

/* stylelint-disable */
.plyr--video {
  .plyr__controls:not(:empty) {
    margin: var(--space-s);
    padding: 0 var(--space-xss);
    height: var(--space-l);
    display: flex;
    align-content: center;
    background: var(--clr-transparent-20-dark);
    backdrop-filter: blur(var(--background-blur-s));
    color: var(--clr-white);
    border: 1px solid transparent;
    border-image-source: linear-gradient(
      201.53deg,
      rgb(255 255 255 / 5%) 0.41%,
      #fff 49.81%,
      rgb(255 255 255 / 5%) 99.2%
    );
    border-image-slice: 1;
  }

  .plyr__controls__item {
    padding: 0;
    margin: 0;
  }

  .plyr__time {
    font-weight: var(--font-weight-medium);
    font-size: var(--body-font-size-s);
  }

  .plyr__time--duration {
    margin: 0 0 0 var(--space-xs);

    &::before {
      margin: 0 var(--space-xs) 0 0;
      font-weight: var(--font-weight-medium);
    }
  }

  .plyr__control {
    padding: 0;

    svg {
      width: var(--space-sm);
      height: var(--space-sm);
    }

    &[download] svg {
      width: var(--space-s);
      height: var(--space-s);
    }
  }

  .plyr__progress__container,
  .plyr__time--current,
  .plyr__volume,
  .plyr__control[data-plyr="download"],
  .plyr__control[data-plyr="fullscreen"] {
    margin-left: var(--plyr-control-spacing);
  }

  /* Raised selector specificity to override Plyr lib CSS */
  .plyr__control--overlaid.plyr__control--overlaid.plyr__control--overlaid {
    backdrop-filter: blur(var(--background-blur-s));
    background: var(--clr-transparent-20-dark);
    border: 1px solid;
    border-image-source: linear-gradient(
      201.53deg,
      rgb(255 255 255 / 5%) 0.41%,
      #fff 49.81%,
      rgb(255 255 255 / 5%) 99.2%
    );
    border-image-slice: 1;
    width: var(--plyr-play-overlay-size);
    height: var(--plyr-play-overlay-size);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    color: var(--plyr-video-control-color-hover);
    outline: none;
    margin: 0;

    svg {
      width: var(--plyr-play-overlay-icon-size);
      height: var(--plyr-play-overlay-icon-size);
    }

    &:hover {
      background: rgb(255 255 255 / 80%);
    }

    &:focus {
      outline: 2px solid var(--clr-sh-energizer-purple);
      outline-offset: -2px;
    }
  }

  &.plyr--stopped .plyr__controls {
    display: none;
  }
}

@media (width > 768px) {
  .plyr--video {
    .plyr__controls:not(:empty) {
      margin-inline: var(--space-xl);
      margin-block-end: var(--space-2xll);
      padding: 0 var(--space-sm);
      height: var(--space-5xl);
    }

    .plyr__time {
      font-size: var(--body-font-size-m);
    }

    .plyr__control {
      svg {
        width: var(--space-l);
        height: var(--space-l);
      }

      &[download] svg {
        width: var(--space-m);
        height: var(--space-m);
      }
    }
  }
}

/**************************************************************************************************
 * Cookie Banner
 *************************************************************************************************/
#lanyard_root * {
  font-family: var(--font-family-onest) !important;
}