:root {
  /*=================================================================*/
  /* COLORS - ALIASES */
  /*=================================================================*/
  --color-bg: #ffffff;
  --color-bg-subtl: #f8f8f8;
  --color-bg-muted: #f0f0f0;
  --color-bg-inverted: #0a0a0a;
  --color-bg-white: #ffffff;
  --color-surface: #ffffff;
  --color-surface-subtl: #f8f8f8;
  --color-surface-hover: #f8f8f8;
  --color-fill: #f0f0f0;
  --color-fill-hover: #e2e2e2;
  --color-text: #181818;
  --color-text-secondary: #737373;
  --color-text-disabled: #a0a0a0;
  --color-text-disable: #a0a0a0;
  --color-text-white: #ffffff;
  --color-text-brand: #FD3638;
  --color-text-on-brand: #ffffff;
  --color-text-on-accent: #ffffff;
  --color-text-focus: #3366FF;
  --color-border: #e2e2e2;
  --color-border-layout: #f0f0f0;
  --color-border-subtl: #f8f8f8;
  --color-border-strong: #c4c4c4;
  --color-border-focus: #C2D4FF;
  --color-border-ring: #E0EAFF;
  --color-brand: #15368a;
  --color-brand-hover: #0b1f52;
  --color-brand-active: #E91416;
  --color-brand-subtl: #FFF1F1;
  --color-brand-on: #ffffff;
  --color-brand-dark: #E91416;
  --color-brand-darker: #C60F11;
  --color-accent: #FD3638;
  --color-accent-hover: #E91416;
  --color-accent-active: #E91416;
  --color-accent-subtl: #fff9e6;
  --color-accent-on: #0a0a0a;
  --color-error: #FD3638;
  --color-error-bg: #FFF1F1;
  --color-success: #21C452;
  --color-success-bg: #F2FDF4;
  --color-warning: #997800;
  --color-warning-bg: #fff9e6;
  --color-info: #3366FF;
  --color-info-bg: #F0F5FF;
  --color-alpha-black-low: rgba(10, 10, 10, 0.08);
  --color-alpha-black-mid: rgba(10, 10, 10, 0.32);
  --color-alpha-black-high: rgba(10, 10, 10, 0.64);
  --color-alpha-white-low: rgba(255, 255, 255, 0.08);
  --color-alpha-white-mid: rgba(255, 255, 255, 0.32);
  --color-alpha-white-high: rgba(255, 255, 255, 0.64);
  --color-alpha-brand: rgba(253, 54, 56, 0.16);
  --color-alpha-brand-low: rgba(253, 54, 56, 0.08);
  /*=================================================================*/
  /* COLORS - GRADIENT */
  /*=================================================================*/
  --gradient-brand-cta:linear-gradient(
      105deg,
      rgba(253, 54, 56, 0.97)
      rgba(253, 54, 56, 0.93)
      rgba(253, 54, 56, 0.82)
      rgba(253, 54, 56, 0.7)
    );
  --shadow-brand: 0 4px 16px rgba(#FD3638, 0.35);
  
}

/*=================================================================*/
/* DARK THEME*/
/*=================================================================*/
:root[data-theme=dark],
[data-theme=dark] {
  --color-bg: #0a0a0a;
  --color-bg-subtl: #111111;
  --color-bg-muted: #181818;
  --color-bg-white: #ffffff;
  --color-surface: #111111;
  --color-surface-subtl: #181818;
  --color-surface-hover: #282828;
  --color-text: #ffffff;
  --color-text-secondary: #737373;
  --color-border: #282828;
  --color-border-layout: #181818;
  --color-border-subtl: #111111;
  --color-border-strong: #282828;
  --color-fill: #282828;
  --color-fill-hover: #3d3d3d;
  --color-border-focus: #173CCB;
  --color-border-ring: #162882;
}


:root[data-theme=light] .mv-dark {
  display: none !important;
}
:root[data-theme=light] .mv-light {
  display: inherit !important;
}

:root[data-theme=dark] .mv-light {
  display: none !important;
}
:root[data-theme=dark] .mv-dark {
  display: inherit !important;
}

.mv-main-nav__logo img {
  margin-left: 10px;
  height: 35px;
}
@media only screen and (min-width: 768px) {
  .mv-main-nav__logo img {
    height: 38px;
  }
}

.mv-hero__brand {
  position: absolute;
  display: none;
}
@media only screen and (min-width: 1280px) {
  .mv-hero__brand {
    display: block;
  }

  .mv-hero__brand img {
    transform: translateX(calc(-100% - (var(--hero-height) * 24 / 170 + var(--gutter-sm)))) rotate(-90deg);
    transform-origin: top right;
    padding-inline: 0.5rem;
    height: 86px;
    max-height: 86px;
  }
}

.mv-drawer__header img,
.mv-footer-bottom__brand img {
  height: 32px;
}

.mv-drawer__logo {
  position: relative;
}

.mv-drawer__logo {
  position: fixed;
  z-index: 3;
  bottom: 20px;
  right: 0;
  transform-origin: bottom left;
  transform: translateX(100%) rotate(-90deg);
  z-index: 1;
}
.mv-drawer__logo::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    height: 65px;
}
:root[data-theme=dark] .mv-drawer__logo::after {
  background-color: rgba(17, 17, 17, 0.7);
}

.mv-drawer__logo img {
  height: 65px;
}
@media only screen and (min-width: 768px) {
  .mv-drawer__logo::after {
    height: 100px;
  }
  .mv-drawer__logo img {
    height: 100px;
  }
}