@charset "UTF-8";
/**
 * Rounds a number to the specified number of decimal places.
 *
 * @param {number} $number - The number to be rounded.
 * @param {number} $decimals - The number of decimal places to round to. Default is 0.
 * @return {number} - The rounded number.
 */
/**
 * Converts pixel values to rem
 *
 * @param {number} $px - The pixel value to convert.
 * @return {number} - The converted value in rem.
 */
/**
 * Create a fluid value between two breakpoints
 *
 * @param {number} $min-size - The minimum size value.
 * @param {number} $max-size - The maximum size value.
 * @param {number} $min-breakpoint - The minimum breakpoint value. Default is $default-min-bp.
 * @param {number} $max-breakpoint - The maximum breakpoint value. Default is $default-max-bp.
 * @param {string} $unit - The unit to use. Default is vw.
 * @return {number} - The calculated value.
 */
/**
 * Strips units from value
 *
 * @param $value {px}
 */
/**
 * Convert pixel values to either rem or em
 *
 * @param $value {px} The pixel value to convert
 * @param $unit {rem or em} The unit to use
 * @param $base-value {px} optional The base pixel value by which the output value will be determined
 */
/**
 * Return a list of relative values from a single function call
 */
/**
 * Wrapper function for relative-unit that returns rem values
 */
/**
 * Wrapper function for relative-unit that returns em values
 */
/**
 * Hide element but make it accessible to screen readers
 *
 * Usage:
 * .selector {
 *   @include visually-hidden;
 * }
 */
/**
 * Reverse the properties applied by @mixin visually-hidden
 *
 * Accepts:
 * - $position: {String} Positioning method for element
 *
 * Usage:
 * .selector {
 *   @include visually-shown(relative);
 * }
 */
/*
All clamp-based font sizes are based on 576px (mobile) min to 1280px (desktop) max viewport width
*/
@font-face {
  font-family: "Case VF";
  src: url("https://www.skydio.com/assets/fonts/CaseVAR.woff2") format("woff2-variations"), url("https://www.skydio.com/assets/fonts/CaseVAR.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 500;
  font-variation-settings: normal;
}
@font-face {
  font-family: "Case";
  src: url("https://www.skydio.com/assets/fonts/Case-Regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "Case";
  src: url("https://www.skydio.com/assets/fonts/Case-Medium.woff2") format("woff2");
  font-display: swap;
  font-weight: 500;
}
:root, header, footer {
  --gray-0: #ffffff;
  --gray-100: #f1f1f1;
  --gray-200: #dcdcdc;
  --gray-300: #b3b3b3;
  --gray-400: #999999;
  --gray-500: #808080;
  --gray-600: #666666;
  --gray-700: #4d4d4d;
  --gray-800: #333333;
  --gray-850: #22211f;
  --gray-900: #1a1a1a;
  --gray-1000: #000000;
  --gray-825: #222222;
  --blue-0: #e6f7ff;
  --blue-100: #cce6ff;
  --blue-200: #99ccff;
  --blue-300: #66b3ff;
  --blue-400: #3399ff;
  --blue-500: #007fff;
  --blue-600: #005ccc;
  --blue-700: #004499;
  --blue-800: #002e66;
  --blue-900: #001a33;
  --blue-1000: #000c1a;
  --highlight: #4849b5;
  --gray-01: #4a4947;
  --gray-02: #6d6c69;
  --gray-03: #c6c5c2;
  --gray-04: #f0f0f0;
  --gray-05: #f7f7f7;
  --blue-01: #0f33ff;
  --blue-02: #027BC6;
  --skydio-primary-01: var(--blue-02);
  --skydio-primary-02: var(--blue-02);
  --skydio-primary-03: #066EA5;
  --Background-Skydio-White: var(--gray-0);
  --Background-Skydio-Gray-05: var(--gray-05);
  --Background-Skydio-Gray-04: var(--gray-04);
  --Brand-Skydio-Blue: var(--blue-02);
  --Text-Skydio-Black: var(--gray-850);
  --Text-Skydio-Gray-01: var(--gray-01);
  --Text-Skydio-Gray-02: var(--gray-02);
  --Text-Skydio-Gray-03: var(--gray-03);
  --color-black: var(--gray-1000);
  --color-white: var(--gray-0);
  --color-skydio-black: var(--gray-850);
  --color-skydio-blue: var(--blue-02);
  --color-blue-25: var(--blue-02);
  --color-blue-15: var(--blue-02);
  --color-blue-10: var(--blue-02);
  --color-sand: #ebe7e0;
  --fg-color: var(--gray-850);
  --bg-color: var(--gray-0);
}
:root .module-style--default, header .module-style--default, footer .module-style--default {
  --ms-background-color: var(--color-white);
  --ms-text-color: var(--color-skydio-black);
}
:root .module-style--light, header .module-style--light, footer .module-style--light {
  --ms-background-color: var(--gray-05);
}
:root .module-style--medium-light, header .module-style--medium-light, footer .module-style--medium-light {
  --ms-background-color: var(--gray-04);
}

/* @link https://utopia.fyi/space/calculator/?c=576,16,1.2,1280,16,1.25,5,2,&s=0.5,1.5|2|2.5|3|4|4.5|6|7.5|10|11.25|14.25|16,l-2xl|xl-3xl|2xl-4xl|3xl-5xl|4xl-6xl|5xl-7xl|5xl-8xl|6xl-9xl&g=s,m,xl,12 */
:root, header, footer {
  /**
   * Static spacing
   **/
  --space-0: clamp(0rem, 0rem + 0vw, 0rem);
  /* 8px */
  --space-1: clamp(0.5rem, 0.5rem + 0vw, 0.5rem);
  /* 16px */
  --space-2: clamp(1rem, 1rem + 0vw, 1rem);
  /* 24px */
  --space-3: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
  /* 32px */
  --space-4: clamp(2rem, 2rem + 0vw, 2rem);
  /* 40px */
  --space-5: clamp(2.5rem, 2.5rem + 0vw, 2.5rem);
  /* 48px */
  --space-6: clamp(3rem, 3rem + 0vw, 3rem);
  /* 64px */
  --space-7: clamp(4rem, 4rem + 0vw, 4rem);
  /* 72px */
  --space-8: clamp(4.5rem, 4.5rem + 0vw, 4.5rem);
  /* 96px */
  --space-9: clamp(6rem, 6rem + 0vw, 6rem);
  /* 120px */
  --space-10: clamp(7.5rem, 7.5rem + 0vw, 7.5rem);
  /* 160px */
  --space-11: clamp(10rem, 10rem + 0vw, 10rem);
  /* 180px */
  --space-12: clamp(11.25rem, 11.25rem + 0vw, 11.25rem);
  /* 228px */
  --space-13: clamp(14.25rem, 14.25rem + 0vw, 14.25rem);
  /**
   * Fluid spacing from 576px (mobile) to 1280px (desktop)
   **/
  /* 32px → 48px */
  --space-6-fluid: clamp(2rem, 1.1818rem + 2.2727vw, 3rem);
  /* 40px → 64px */
  --space-7-fluid: clamp(2.5rem, 1.2727rem + 3.4091vw, 4rem);
  /* 48px → 72px */
  --space-8-fluid: clamp(3rem, 1.7727rem + 3.4091vw, 4.5rem);
  /* 64px → 96px */
  --space-9-fluid: clamp(4rem, 2.3636rem + 4.5455vw, 6rem);
  /* 72px → 120px */
  --space-10-fluid: clamp(4.5rem, 2.0455rem + 6.8182vw, 7.5rem);
  /* 96px → 160px */
  --space-11-fluid: clamp(6rem, 2.7273rem + 9.0909vw, 10rem);
  /* 96px → 180px */
  --space-12-fluid: clamp(6rem, 1.7045rem + 11.9318vw, 11.25rem);
  /* 120px → 228px */
  --space-13-fluid: clamp(7.5rem, 1.9773rem + 15.3409vw, 14.25rem);
  /**
   * One-up fluid spacing pairs from 576px (mobile) to 1280px (desktop)
   **/
  /* 0 → 8px */
  --space-0-1: clamp(0rem, -0.4091rem + 1.1364vw, 0.5rem);
  /* 8px → 16px */
  --space-1-2: clamp(0.5rem, 0.0909rem + 1.1364vw, 1rem);
  /* 16px → 24px */
  --space-2-3: clamp(1rem, 0.5909rem + 1.1364vw, 1.5rem);
  /* 24px → 32px */
  --space-3-4: clamp(1.5rem, 1.0909rem + 1.1364vw, 2rem);
  /* 32px → 40px */
  --space-4-5: clamp(2rem, 1.5909rem + 1.1364vw, 2.5rem);
  /* 40px → 48px */
  --space-5-6: clamp(2.5rem, 2.0909rem + 1.1364vw, 3rem);
  /* 48px → 64px */
  --space-6-7: clamp(3rem, 2.1818rem + 2.2727vw, 4rem);
  /* 64px → 72px */
  --space-7-8: clamp(4rem, 3.5909rem + 1.1364vw, 4.5rem);
  /* 72px → 96px */
  --space-8-9: clamp(4.5rem, 3.2727rem + 3.4091vw, 6rem);
  /* 96px → 120px */
  --space-9-10: clamp(6rem, 4.7727rem + 3.4091vw, 7.5rem);
  /* 120px → 160px */
  --space-10-11: clamp(7.5rem, 5.4545rem + 5.6818vw, 10rem);
  /* 160px → 180px */
  --space-11-12: clamp(10rem, 8.9773rem + 2.8409vw, 11.25rem);
  /* 180px → 228px */
  --space-12-13: clamp(11.25rem, 8.7955rem + 6.8182vw, 14.25rem);
  /**
   * Two-up fluid spacing pairs from 576px (mobile) to 1280px (desktop)
   **/
  /* 16px → 32px */
  --space-2-4: clamp(1rem, 0.1818rem + 2.2727vw, 2rem);
  /* 24px → 40px */
  --space-3-5: clamp(1.5rem, 0.6818rem + 2.2727vw, 2.5rem);
  /* 32px → 64px */
  --space-4-6: clamp(2rem, 0.3636rem + 4.5455vw, 4rem);
}

:root, header, footer {
  --ff: "Case", sans-serif;
  /* @link https://utopia.fyi/clamp/calculator?a=576,1280,56—140 */
  --fs-h1-xxl: clamp(3.5rem, -0.7955rem + 11.9318vw, 8.75rem);
  --fs-h1-xl: clamp(3rem, 0.5455rem + 6.8182vw, 6rem);
  --fs-h1-lg: clamp(2.625rem, 1.0909rem + 4.2614vw, 4.5rem);
  --fs-h1: clamp(2.375rem, 1.25rem + 3.125vw, 3.75rem);
  --fs-h2-xl: clamp(2.625rem, 1.0909rem + 4.2614vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 0.7273rem + 2.8409vw, 3rem);
  --fs-h3: clamp(1.375rem, 0.8636rem + 1.4205vw, 2rem);
  --fs-h4: clamp(1.125rem, 0.6136rem + 1.4205vw, 1.75rem);
  --fs-h5: clamp(1rem, 0.5909rem + 1.1364vw, 1.5rem);
  --fs-h6: clamp(1rem, 0.8977rem + 0.2841vw, 1.125rem);
  --fs-body-1: clamp(1.125rem, 0.8182rem + 0.8523vw, 1.5rem);
  --fs-body-2: clamp(1rem, 0.8977rem + 0.2841vw, 1.125rem);
  --fs-body-3: clamp(0.875rem, 0.7727rem + 0.2841vw, 1rem);
  --fs-h4-alt: clamp(1rem, 0.7955rem + 0.5682vw, 1.25rem);
  --fs-prose-h1: var(--fs-h2);
  --fs-prose-h2: var(--fs-h3);
  --fs-prose-h3: var(--fs-h4);
  --fs-prose-h4: clamp(1.375rem, 1.2727rem + 0.2841vw, 1.5rem);
  --fs-prose-h5: clamp(1.125rem, 0.9205rem + 0.5682vw, 1.375rem);
  --fs-prose-h6: var(--fs-body-2);
  --fs-prose-h7: var(--fs-body-3);
  --fs-emphasis: clamp(1.375rem, 0.8636rem + 1.4205vw, 2rem);
  --fs-eyebrow: clamp(0.875rem, 0.7727rem + 0.2841vw, 1rem);
  --fs-media: clamp(1rem, -1.3523rem + 6.5341vw, 3.875rem);
  --lh-media: clamp(1.3rem, -0.8068rem + 5.8523vw, 3.875rem);
  --fs-note: clamp(0.75rem, 0.6477rem + 0.2841vw, 0.875rem);
  --fs-small-note: clamp(0.625rem, 0.5227rem + 0.2841vw, 0.75rem);
  --fs-number: clamp(4rem, 3.3864rem + 1.7045vw, 4.75rem);
  --fs-post-header: clamp(1.625rem, 0.8068rem + 2.2727vw, 2.625rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-x-bold: 800;
}

:root,
header,
footer {
  --button-border-radius: 0.25rem;
  --button-padding-top-bottom: 0.625rem;
  --button-padding-left-right: var(--space-2);
  --button-padding: var(--button-padding-top-bottom) var(--button-padding-left-right);
}

.button,
.button--primary {
  --button-bg: var(--fg-color);
  --button-fg: var(--bg-color);
  --button-border: 1px solid var(--button-bg);
  font-size: var(--fs-body-3);
  font-weight: normal;
  letter-spacing: 0;
  line-height: 140%;
}
@media (min-width: 1024px) {
  .button,
  .button--primary {
    line-height: 140%;
  }
}
.button,
.button--primary {
  background-color: var(--button-bg);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  box-shadow: none;
  color: var(--button-fg);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ff);
  font-size: var(--fs-body-3, 0.875rem);
  font-weight: normal;
  gap: var(--space-2);
  line-height: 1;
  min-width: auto;
  padding: var(--button-padding-top-bottom) var(--button-padding-left-right);
  text-decoration: none;
  text-transform: unset;
  align-items: center;
}
.button:has(svg),
.button--primary:has(svg) {
  gap: var(--space-2);
}
.button svg,
.button--primary svg {
  height: auto;
  margin-inline: -0.25rem;
  max-width: clamp(0.875rem, -1.625rem + 3.9063vw, 1.5rem);
}
.button svg path,
.button svg path[fill],
.button--primary svg path,
.button--primary svg path[fill] {
  fill: var(--button-fg);
  transition: fill 0.3s ease-in-out;
}
.button svg path[stroke],
.button--primary svg path[stroke] {
  stroke: var(--button-fg);
  transition: stroke 0.3s ease-in-out;
}
.button.button--download, .button.button--secondary,
.button--primary.button--download,
.button--primary.button--secondary {
  --button-border: 1px solid var(--fg-color);
  --button-fg: var(--fg-color);
  --button-bg: var(--color-white);
}
.button.button--secondary,
.button--primary.button--secondary {
  --button-bg: transparent;
}
.button.button--tertiary,
.button--primary.button--tertiary {
  --button-border: 1px solid var(--color-white);
  --button-fg: var(--color-skydio-black);
  --button-bg: var(--color-white);
}
.button.button--quaternary,
.button--primary.button--quaternary {
  --button-border: 1px solid var(--blue-02);
  --button-fg: var(--color-white);
  --button-bg: var(--blue-02);
}
.button.button--quinary,
.button--primary.button--quinary {
  --button-border: 1px solid var(--color-white);
  --button-fg: var(--color-white);
  --button-bg: transparent;
}
.button.button--transparent,
.button--primary.button--transparent {
  --button-bg: transparent;
  --button-fg: var(--fg-color);
}
.button.button--toggle span:not(.visually-hidden) + span.button--icon-plus,
.button--primary.button--toggle span:not(.visually-hidden) + span.button--icon-plus {
  margin-left: 0.5rem;
}
.button.button--toggle span:not(.visually-hidden) + span + span.button--icon-minus,
.button--primary.button--toggle span:not(.visually-hidden) + span + span.button--icon-minus {
  margin-left: 0.5rem;
}
.button.button--toggle .button--icon-minus,
.button.button--toggle .button--icon-plus,
.button--primary.button--toggle .button--icon-minus,
.button--primary.button--toggle .button--icon-plus {
  width: 1rem;
  height: 1rem;
  position: relative;
  top: -1px;
}
.button.button--toggle .button--icon-plus,
.button--primary.button--toggle .button--icon-plus {
  display: inline-block;
}
.button.button--toggle .button--icon-minus,
.button--primary.button--toggle .button--icon-minus {
  display: none;
}
.button.button--toggle.is-active .button--icon-minus,
.button--primary.button--toggle.is-active .button--icon-minus {
  display: inline-block;
}
.button.button--toggle.is-active .button--icon-plus,
.button--primary.button--toggle.is-active .button--icon-plus {
  display: none;
}
@media (min-width: 768px) {
  .button.button--toggle .button--icon-minus,
  .button.button--toggle .button--icon-plus,
  .button--primary.button--toggle .button--icon-minus,
  .button--primary.button--toggle .button--icon-plus {
    width: 1.375rem;
    height: 1.375rem;
  }
}
.button--icon,
.button--primary--icon {
  --button-padding-left-right: var(--space-2);
}
.button--icon .button__icon,
.button--primary--icon .button__icon {
  margin-left: var(--button-padding-left-right);
  margin-right: 0;
}
.button--icon .button__inner,
.button--primary--icon .button__inner {
  height: auto;
  flex-direction: row-reverse;
}
.button--icon .button__inner svg,
.button--primary--icon .button__inner svg {
  margin-top: -1px;
  height: 100%;
  margin-bottom: -1px;
}
.button.button--secondary:hover:not([disabled]):not(.button--transparent), .button:hover:not([disabled]):not(.button--transparent),
.button--primary.button--secondary:hover:not([disabled]):not(.button--transparent),
.button--primary:hover:not([disabled]):not(.button--transparent) {
  --button-border: 1px solid var(--blue-02);
  --button-fg: var(--color-white);
  --button-bg: var(--skydio-primary-02);
  transition: all 0.3s ease-in-out;
}
.button.button--quaternary:hover:not([disabled]):not(.button--transparent),
.button--primary.button--quaternary:hover:not([disabled]):not(.button--transparent) {
  --button-bg: var(--skydio-primary-03);
}
.button.button--invisible, .button.button--invisible:hover:not([disabled]),
.button--primary.button--invisible,
.button--primary.button--invisible:hover:not([disabled]) {
  --button-border: none;
  --button-fg: transparent;
  --button-bg: transparent;
  text-indent: -9999px;
}
.button[disabled],
.button--primary[disabled] {
  opacity: 0.2;
}

.button--large {
  font-size: var(--fs-body-2);
  font-weight: normal;
  letter-spacing: 0;
  line-height: 140%;
  --button-padding-top-bottom: calc(var(--space-1) * 1.5);
  --button-padding-left-right: calc(var(--space-2) * 1.5);
}
@media (min-width: 768px) {
  .button--large {
    --button-padding-top-bottom: var(--space-2);
    --button-padding-left-right: var(--space-4);
  }
}

.button.button--link {
  padding: 0;
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--btn-color);
  vertical-align: inherit;
  text-align: inherit;
  text-decoration: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background-color: inherit;
  border: inherit;
  border-radius: inherit;
}

.button--small {
  --button-padding-left-right: var(--space-2);
  --button-padding-top-bottom: var(--space-1);
}

input:is([type=button], [type=submit], [type=reset]),
input[type=file]::file-selector-button,
button {
  color: var(--gray-1000);
}

:root, header, footer {
  --z-header: 10;
  font-family: var(--ff);
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
}

:root {
  --header-margin-left-right: clamp(0.5rem, 0.5rem + 0vw, 0.5rem);
}
@media (min-width: 768px) {
  :root {
    --header-margin-left-right: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
  }
}

.header {
  --header-text-color: var(--fg-color);
  --header-padding: 0;
  --header-inner-padding-left-right: 1rem;
  --header-inner-padding-top-bottom: 0.5rem;
  --header-margin: clamp(0.5rem, 0.5rem + 0vw, 0.5rem);
  --header-inner-padding: var(--header-inner-padding-top-bottom)
    var(--header-inner-padding-left-right);
  --header-border-radius: 0.5rem;
  --header-background: rgba(255, 255, 255, 0.5);
  --header-background-focus: rgba(255, 255, 255, 1);
  --header-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
  --header-l2-background: rgba(240, 240, 240, 0.5);
  --header-l2-background-focus: var(--gray-04);
  --header-section-height: 48px;
  --header-base-font-size: 0.875rem;
  --header-logo-width: 0;
  --header-l2-height-ratio: 0.75;
  transition: top 0.3s ease-in-out;
}
.header * {
  box-sizing: border-box;
}

.header__lang-button {
  gap: 0 !important;
}
.header__lang-button span {
  margin-left: 0.6125rem !important;
}

.header__actions .button {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

@keyframes showL2Only {
  0% {
    height: var(--header-section-height, 69px);
    overflow: hidden;
  }
  100% {
    height: 0px;
    overflow: hidden;
  }
}
@keyframes hideL2Only {
  0% {
    height: 0;
    overflow: hidden;
  }
  100% {
    height: var(--header-section-height, 69px);
    overflow: unset;
  }
}
header.header {
  z-index: var(--z-header);
  isolation: isolate;
  position: fixed;
  transform: translateY(var(--header-offset, 0));
  top: var(--header-top, 0);
  left: 0;
  right: 0;
  transition: margin 0.3s, padding 0.3s, height 2.3s, top 0.6s, height 0.3s ease-in-out, background-color 0.3s;
}
header.header:hover, header.header:focus-within {
  --header-background: var(--header-background-focus);
}
header.header:hover .header__bottom, header.header:focus-within .header__bottom {
  --header-l2-background: var(--header-l2-background-focus);
}
header.header .header__wrap {
  border-radius: var(--header-border-radius);
  min-height: var(--header-section-height);
}
header.header:not(.header--secondary) .header__wrap {
  background: var(--header-background) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
header.header.header--secondary .header__top {
  border-radius: var(--header-border-radius);
  background: var(--header-background) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
  z-index: 1;
  position: relative;
}
header.header.header--secondary .header__wrap {
  min-height: calc(var(--header-section-height) * (1 + var(--header-l2-height-ratio)));
}
header.header.header--secondary:not(.header--mobile) .header__sub-nav {
  margin-top: calc(var(--header-section-height) * var(--header-l2-height-ratio) * -1);
}
header.header .header__top {
  display: flex;
  padding: var(--header-padding);
  flex-wrap: wrap;
  transition: margin 0.3s, padding 0.3s, height 2.3s, top 0.6s, height 0.3s ease-in-out, background-color 0.3s;
  height: var(--header-section-height);
}
@media (max-width: 1279px) {
  header.header--mobile {
    --header-background: var(--header-background-focus);
    --header-padding: var(--space-1);
    --header-margin: 0 !important;
    --header-border-radius: 0;
    --header-section-height: calc(48px + 16px);
    transition: margin 0.3s, padding 0.3s, height 0.3s;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    margin-top: 0 !important;
  }
  header.header--mobile:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
    pointer-events: none;
  }
  header.header--mobile .header__main {
    display: none;
  }
  header.header--mobile .header__bottom {
    display: none;
  }
}

.header--l2-only {
  --header-logo-width: 43px;
}
.header--l2-only .header__top {
  animation: showL2Only 0.3s ease-in-out forwards;
}
.header--l2-only .header__wrap {
  min-height: var(--header-section-height) !important;
}
.header--l2-only .header__bottom {
  border-radius: var(--header-border-radius);
  transition: border-radius 0.3s ease-in-out;
}

.header__main {
  display: none;
}

.header__action:not(.button) {
  color: var(--color-black);
  text-decoration: none;
  padding: clamp(1rem, 1rem + 0vw, 1rem) 0 clamp(1rem, 1rem + 0vw, 1rem) clamp(1rem, 1rem + 0vw, 1rem);
  transition: color 0.3s ease-in-out;
  display: none;
}
.header__action:not(.button):hover {
  color: var(--blue-02);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: var(--header-inner-padding-left-right);
  position: relative;
}
.header__actions .header__support,
.header__actions .header__lang-button {
  display: none;
}

.header__logo {
  display: flex;
  align-items: center;
  padding: var(--header-inner-padding-top-bottom) 0 var(--header-inner-padding-top-bottom) var(--header-inner-padding-left-right);
  flex-grow: 1;
}
.header__logo a {
  display: flex;
  align-items: center;
}
.header__logo svg {
  width: 27px;
  height: 24px;
}

.header__lang-button {
  display: flex;
  align-items: center;
  position: relative;
  top: 0;
  border: 0;
  background-color: transparent;
  color: var(--header-text-color);
  line-height: 1;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  height: 100%;
}
.header__lang-button svg {
  width: 0.75rem;
}
.header__lang-button svg g {
  stroke: var(--header-text-color);
}
.header__lang-button span {
  position: relative;
  top: -1px;
  display: inline-block;
  margin-left: 0.3125rem;
}

div.header__lang-button {
  cursor: unset;
}

.header__wrap {
  border-radius: var(--header-border-radius);
  box-shadow: var(--header-box-shadow);
  margin: var(--header-margin);
  transition: all 0.3s ease-in-out;
}

.header__sub-nav {
  width: 100%;
  transition: height 0.3s ease-in-out;
  height: var(--sub-nav-height, 0);
  overflow: hidden auto;
  position: relative;
  grid-column: span 2;
  background-color: var(--header-background);
}

.button.header__mobile-menu {
  display: block;
  padding: 0 var(--space-1) 0 var(--space-1) !important;
  height: 100%;
}
.button.header__mobile-menu svg {
  max-width: 22px;
}
.button.header__mobile-menu .icon-menu-close {
  display: none;
}
.header--mobile .button.header__mobile-menu .icon-menu-close {
  display: block;
}
.button.header__mobile-menu .icon-menu-open {
  display: block;
}
.header--mobile .button.header__mobile-menu .icon-menu-open {
  display: none;
}

.header--l2-only .header__top {
  overflow: hidden;
}
.header--l2-only-end .header__top {
  animation: hideL2Only 0.3s ease-in-out forwards;
}

@media (max-width: 1279px) {
  header.header .header__top {
    transition: all 0.3s ease-in-out !important;
  }
  header.header .header__top * {
    transition: all 0.3s ease-in-out !important;
  }
  header.header--mobile .header__top {
    transition: all 0.3s ease-in-out !important;
  }
  header.header--mobile .header__top * {
    transition: all 0.3s ease-in-out !important;
  }
  header.header .button {
    line-height: 1;
  }
  .header__actions > .button:first-child {
    --button-padding-top-bottom: 8px;
  }
}
@media (min-width: 768px) {
  .header {
    --header-margin: clamp(1rem, 1rem + 0vw, 1rem) clamp(1.5rem, 1.5rem + 0vw, 1.5rem) clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
    --header-padding: 0;
  }
  .header--mobile {
    --header-padding: clamp(1rem, 1rem + 0vw, 1rem) clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
    --header-margin: 0;
  }
}
@media (min-width: 1280px) {
  .header {
    --header-inner-padding-top-bottom: 0.75rem;
    --header-inner-padding-left-right: 0.875rem;
    --header-section-height: 69px;
    --header-logo-width: 59px;
  }
  .header__main {
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    padding-left: var(--space-2);
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }
  .header__main--search-open {
    opacity: 0;
    transform: translateY(-1rem);
    visibility: hidden;
  }
  .header__sub-nav {
    overflow-y: hidden;
    border-bottom-right-radius: var(--header-border-radius);
    border-bottom-left-radius: var(--header-border-radius);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    width: 100%;
    z-index: 1;
    position: relative;
  }
  .header__sub-nav:after {
    display: none;
  }
  .header__logo {
    justify-content: flex-end;
    flex-grow: 0;
    max-height: var(--header-section-height);
  }
  .header__logo svg {
    width: 45px;
    height: auto;
  }
  .header__actions .button.header__lang-button {
    display: flex;
    align-items: center;
  }
  .header__actions .button.header__lang-button span {
    top: auto;
  }
  .header__actions .button.header__lang-button svg {
    width: clamp(1rem, 0.85vw + 0.69rem, 1.38rem);
  }
  a.header__action:not(.button) {
    display: block;
  }
  .header__actions > * {
    display: inline-block;
  }
  .header__actions .button--secondary:first-child {
    --button-bg: var(--fg-color);
    --button-fg: var(--bg-color);
  }
  .header__actions .button,
  .header__actions .header__action {
    font-size: 14px;
  }
  .header__actions .header__mobile-menu {
    display: none;
  }
  .header__actions .header__support,
  .header__actions .header__lang-button {
    display: block;
  }
  .button.header__mobile-menu {
    display: none;
  }
}
@media (min-width: 1980px) {
  .header__actions .button,
  .header__actions .header__action {
    font-size: 16px;
  }
}
/**
 * Scroll padding to accommodate this fixed header
 */
html {
  scroll-padding-top: 5rem;
}
@media (min-width: 1280px) {
  html {
    scroll-padding-top: 7rem;
  }
}

.nav {
  --nav-link-padding: 24px 0;
  --nav-link-padding-left-right: 0;
  --nav-link-padding-top-bottom: 16px;
  --nav-base-font-size: 1.5rem;
  display: flex;
  flex-direction: column;
}
.nav .nav__button {
  height: 100%;
  position: relative;
  text-align: left;
  font-size: var(--nav-base-font-size);
  padding: var(--nav-link-padding-top-bottom) var(--nav-link-padding-left-right);
}

.sub-nav {
  --sub-nav-padding-left-right: 80px;
  --sub-nav-padding-top: 120px;
  --sub-nav-padding-bottom: 110px;
  --sub-nav-item-align-adjustment: 16px;
  max-height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  opacity: 1;
  top: calc(var(--header-section-height) + var(--space-1));
  left: 0;
  right: 0;
  position: absolute;
  pointer-events: all;
  transition: opacity 0.3s ease-in-out, transform 0.45s ease;
  transform: translateX(0);
}
.sub-nav a {
  color: var(--fg-color);
  text-decoration: none;
}
.sub-nav a:hover {
  text-decoration: underline;
}

.sub-nav__column--image {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--space-5);
}

.sub-nav--initial.sub-nav--mobile-menu {
  transform: translateX(0);
}

.sub-nav__column.sub-nav__column--mobile-locale {
  padding: 80px var(--sub-nav-item-align-adjustment) 0;
  display: grid;
  grid-gap: 24px;
  opacity: 1;
  transition: opacity 0.3s 0.3s ease-in-out;
}
.sub-nav__column.sub-nav__column--mobile-locale svg {
  width: 16px;
}
.sub-nav__column.sub-nav__column--mobile-locale svg path {
  stroke: black;
}
.sub-nav__column.sub-nav__column--mobile-locale a {
  font-size: 14px;
}

.sub-nav__column--initial.sub-nav__column--mobile-locale {
  opacity: 0;
}

.sub-nav__header-link {
  padding: 23px var(--sub-nav-item-align-adjustment) 50px;
  display: flex;
  align-items: center;
  font-size: 32px;
  text-decoration: none;
  color: var(--fg-color);
  transition: all 0.3s ease-in-out;
}
.sub-nav__header-link:hover, .sub-nav__header-link--current {
  color: var(--blue-02);
}
.sub-nav__header-link:hover svg, .sub-nav__header-link--current svg {
  width: 52px;
}
.sub-nav__header-link:hover svg path, .sub-nav__header-link--current svg path {
  stroke: var(--blue-02);
}
.sub-nav__header-link svg {
  margin-left: 24px;
}
.sub-nav__header-link svg path {
  transition: all 0.3s ease-in-out;
}

.sub-nav--initial {
  transform: translateX(20%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.sub-nav__container {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
  grid-gap: 0;
  padding-bottom: var(--space-5);
}

.sub-nav__column-section {
  display: flex;
  flex-direction: column;
  position: relative;
}

.sub-nav__header + .sub-nav__container {
  padding-top: 0;
}

.sub-nav__column {
  margin-top: -1px;
  display: flex;
  flex-direction: column;
}
.sub-nav__column h2 {
  padding: 0;
  color: var(--gray-600);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  transition: opacity 0.15s ease-in-out;
  opacity: 1;
  margin: 0 var(--sub-nav-item-align-adjustment) 24px;
  letter-spacing: 0.2px;
}
.sub-nav__column h2.sub-nav__column-title--subheadline {
  color: var(--gray-850);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
}
.sub-nav__column a.sub-nav__column-link {
  display: flex;
  text-decoration: none;
}
.sub-nav__column a.sub-nav__column-link h2 {
  color: var(--gray-850);
  transition: color 0.3s ease-in-out;
}
.sub-nav__column a.sub-nav__column-link svg {
  max-width: var(--space-3);
  transform: translateY(-0.3em);
}
.sub-nav__column a.sub-nav__column-link svg path {
  transition: stroke 0.3s ease-in-out;
}
.sub-nav__column a.sub-nav__column-link:hover h2, .sub-nav__column a.sub-nav__column-link--current h2 {
  color: var(--blue-02);
}
.sub-nav__column a.sub-nav__column-link:hover svg path, .sub-nav__column a.sub-nav__column-link--current svg path {
  stroke: var(--blue-02);
}
.sub-nav__column:first-child .sub-nav__column-section:first-child {
  margin-top: 0;
}
.sub-nav__column .sub-nav__column-section {
  margin-top: 0;
}
.sub-nav__column .sub-nav__image-wrapper {
  transition: opacity 0.3s 0.4s ease-in-out;
  opacity: 1;
}
.sub-nav__column .sub-nav__image-overlay {
  transition: opacity 0.4s 0.2s ease-in-out;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-nav__column .sub-nav__image-overlay__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-white);
  border-radius: var(--border-radius-small);
}
.sub-nav__column + .sub-nav__column.sub-nav__column--no-heading {
  position: relative;
  top: -1px;
}
.sub-nav__column + .sub-nav__column.sub-nav__column--no-heading .sub-nav__column-section {
  margin-top: 0;
}
@media (max-width: 1279px) {
  .sub-nav__column .sub-nav__column-section + .sub-nav__column-section {
    margin-top: clamp(2.5rem, 2.5rem + 0vw, 2.5rem);
  }
  .sub-nav__column:has(h2):not(:first-child) {
    margin-top: clamp(2.5rem, 2.5rem + 0vw, 2.5rem);
  }
}
@media (min-width: 1280px) {
  .sub-nav__column {
    margin-top: 0;
  }
  .sub-nav__column .sub-nav__column-section {
    margin-top: var(--space-5);
  }
}

.sub-nav__column--initial h2 {
  opacity: 0;
}
.sub-nav__column--initial .sub-nav__image-wrapper {
  opacity: 0;
}
.sub-nav__column--initial .sub-nav__image-overlay {
  opacity: 0;
}

.sub-nav__link {
  background: transparent;
  border: none;
  color: var(--fg-color);
  font-size: 1rem;
  line-height: 1.15;
  overflow: hidden;
  padding: 1rem var(--sub-nav-item-align-adjustment);
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}
.sub-nav__link:before, .sub-nav__link:after {
  transition: background-color 0.3s ease-in-out, opacity 0.6s ease, width 0.5s ease-in-out;
  background-color: var(--fg-color);
  content: "";
  height: 1px;
  left: var(--sub-nav-item-align-adjustment);
  position: absolute;
  top: 0;
  width: calc(100% - var(--sub-nav-item-align-adjustment) * 2);
}
.sub-nav__link:after {
  display: none;
}
.sub-nav__link:hover, .sub-nav__link--current.sub-nav__link {
  color: var(--blue-02);
  transition: color 0.3s ease-in-out;
}
.sub-nav__link:hover:before, .sub-nav__link:hover:after, .sub-nav__link--current.sub-nav__link:before, .sub-nav__link--current.sub-nav__link:after {
  background-color: var(--blue-02);
}
.sub-nav__link:hover + *:before, .sub-nav__link--current.sub-nav__link + *:before {
  background-color: var(--blue-02);
}

.sub-nav__link:last-child:after {
  display: block;
  top: calc(100% - 1px);
}

.sub-nav--mobile-menu {
  padding-top: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
}
.sub-nav--mobile-menu .sub-nav__link {
  font-size: 24px;
  padding: 1.25rem var(--sub-nav-item-align-adjustment);
}
.sub-nav--mobile-menu .sub-nav__link-text {
  display: flex;
  position: relative;
  cursor: pointer;
}
.sub-nav--mobile-menu button .sub-nav__link-text:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path stroke="%2322211F" stroke-width="1.3" d="m8 3.5 7.8 7.8c.4.4.4 1 0 1.4L8 20.5"/></svg>');
  position: absolute;
  right: 0;
  top: 0.05em;
}

.v2 .button.sub-nav__mobile-back {
  display: flex;
  align-items: center;
}
.v2 .button.sub-nav__mobile-back svg {
  transform: rotate(180deg);
}
.v2 .button.sub-nav__mobile-back span {
  margin-left: 14px;
}

.sub-nav__forward-icon {
  flex-grow: 0;
  flex-shrink: 1;
}

.sub-nav__column--small .sub-nav__link {
  font-size: 1.25rem;
}

.sub-nav__link-inner {
  display: block;
  position: relative;
  overflow: hidden;
}

.sub-nav__link-text {
  transition: transform 0.3s ease-in-out;
  position: relative;
  display: block;
  transform: translateY(0%);
}

.sub-nav__link--initial {
  transition: none;
  color: transparent;
}
.sub-nav__link--initial .sub-nav__link-text {
  transform: translateY(100%);
}
.sub-nav__link--initial:before, .sub-nav__link--initial:after {
  transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out;
  width: 0;
}

.sub-nav__link--animate {
  transition: color 0.2s 0.5s ease-in-out;
}

.sub-nav__image-wrapper {
  margin: var(--sub-nav-item-align-adjustment);
  max-width: calc(100% - var(--sub-nav-item-align-adjustment) * 2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.sub-nav__image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}
.sub-nav__image-overlay:hover {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.sub-nav__image {
  width: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
  aspect-ratio: 16/9;
}

.sub-nav__mobile-nav {
  min-height: 96px;
  display: flex;
  align-items: center;
}

@media (min-width: 1280px) {
  .nav {
    --nav-link-padding-top-bottom: clamp(1rem, 1rem + 0vw, 1rem);
    --nav-link-padding-left-right: var(--space-2);
    --nav-base-font-size: 0.875rem;
    display: block;
  }
  .nav .nav__button {
    height: 100%;
    position: relative;
    display: inline-flex;
    justify-content: center;
  }
  .nav .nav__button:after {
    background-color: var(--fg-color);
    content: "";
    height: 2px;
    left: var(--nav-link-padding-left-right);
    position: absolute;
    top: calc(100% - 2px);
    opacity: 0;
    width: 0;
    transition: all 0.3s ease-in-out;
  }
  .nav .nav__button--selected:after,
  .nav .nav__button--active:after {
    opacity: 1;
    width: calc(100% - var(--nav-link-padding-left-right) * 2);
  }
  .sub-nav {
    --sub-nav-padding-top: clamp(2rem, 16.86vh + -3.27rem, 9.38rem);
    --sub-nav-padding-left-right: clamp(3rem, 6.35vw + -1.07rem, 6.88rem);
    --sub-nav-padding-bottom: clamp(4.38rem, 6.15vw + 0.44rem, 8.13rem);
    display: grid;
    max-height: calc(100vh - 108px);
    min-height: auto;
    top: calc(var(--header-section-height) * (1 - var(--header-l2-height-ratio)));
    transition: opacity 0.15s ease-in-out;
  }
  .sub-nav--initial {
    transform: translateX(0);
    transition: none;
  }
  .sub-nav__column--shaded {
    position: relative;
  }
  .sub-nav__column--shaded:before {
    background-color: #ebebeb;
    content: "";
    display: block;
    top: calc(var(--sub-nav-padding-top) * -1);
    bottom: calc(var(--sub-nav-padding-bottom) * -1);
    left: calc(var(--space-1) * -1);
    right: calc(var(--space-1) * -1);
    position: absolute;
  }
  .sub-nav__column--shaded:last-child:before {
    right: calc(var(--sub-nav-padding-left-right) * -1);
  }
  .sub-nav__mobile-nav {
    display: none;
  }
  .sub-nav__link {
    --sub-nav-link-padding: clamp(1rem, 0.41vw + 0.74rem, 1.25rem);
    padding: var(--sub-nav-link-padding) var(--sub-nav-item-align-adjustment);
    font-size: 32px;
    font-size: clamp(1.38rem, 0vw + 1.38rem, 1.38rem);
  }
}
@media (min-width: 1280px) and (min-width: 1980px) {
  .sub-nav__link {
    --sub-nav-link-padding: clamp(1rem, 1.43vw + 0.08rem, 1.88rem);
    font-size: clamp(1.38rem, 1.02vw + 0.72rem, 2rem);
  }
}
@media (min-width: 1280px) {
  .sub-nav__link-text {
    display: inline-block;
  }
  .sub-nav__header-link {
    padding: 68px calc(var(--sub-nav-padding-left-right) + var(--sub-nav-item-align-adjustment)) 80px;
    font-size: 60px;
  }
  .sub-nav__container {
    display: grid;
    grid-gap: var(--space-2);
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    padding: var(--sub-nav-padding-top) var(--sub-nav-padding-left-right) var(--sub-nav-padding-bottom);
  }
  .sub-nav__container .sub-nav__column {
    margin-top: 0;
    display: inline;
  }
  .sub-nav__container .sub-nav__column .sub-nav__column-section {
    margin-top: 0;
  }
  .sub-nav__container .sub-nav__column-section {
    -webkit-column-break-inside: avoid;
    padding-bottom: 50px;
  }
  .sub-nav__column + .sub-nav__column {
    margin-top: 0;
  }
  .sub-nav__column + .sub-nav__column h2 {
    margin-top: 0;
  }
  .sub-nav__column .sub-nav__column-section--media h2 {
    margin-top: var(--space-2);
    font-size: var(--fs-note);
  }
  .sub-nav__column h2 {
    margin: 0 var(--sub-nav-item-align-adjustment) clamp(1rem, 1rem + 0vw, 1rem);
  }
  .sub-nav__column .sub-nav__column-section > a:first-child {
    margin-top: 34px;
  }
  .sub-nav__column--small h2 {
    margin: 0 var(--sub-nav-item-align-adjustment) clamp(1rem, 1rem + 0vw, 1rem);
  }
  .sub-nav__column--small .sub-nav__column-section {
    padding-bottom: clamp(2rem, 2rem + 0vw, 2rem);
  }
  .sub-nav__column--small .sub-nav__link {
    --sub-nav-link-padding: clamp(0.5rem, 0.41vw + 0.24rem, 0.75rem);
    font-size: 0.875rem;
    font-size: clamp(0.88rem, 0.2vw + 0.74rem, 1rem);
  }
  .sub-nav__column--image {
    justify-content: flex-start;
    padding-top: 0;
  }
  .sub-nav__image-wrapper {
    margin: 34px 0 0 var(--sub-nav-item-align-adjustment);
  }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .sub-nav__column:first-child {
    grid-row: span 2;
  }
  .sub-nav__column--shaded:nth-child(2) {
    grid-column: 2;
  }
  .sub-nav__column--shaded:nth-child(2):before {
    right: calc(var(--sub-nav-padding-left-right) * -1);
  }
  .sub-nav__column--shaded:nth-child(3) {
    grid-column: 2;
  }
  .sub-nav__column--shaded:nth-child(3):before {
    top: 0;
  }
  .sub-nav__column--shaded:nth-child(3) .sub-nav__column-section {
    padding-bottom: 0;
  }
}
@media (min-width: 1280px) {
  .sub-nav__container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1980px) {
  .nav {
    --nav-link-padding-top-bottom: 16px;
    --nav-base-font-size: 16px;
  }
  .sub-nav__link:before, .sub-nav__link:after {
    height: 1px;
  }
  .sub-nav__link:last-child:after {
    top: calc(100% - 1px);
  }
}
.locale-switcher {
  --ls-translate-y: calc(100% - var(--header-border-radius));
  position: absolute;
  background: var(--header-background);
  padding: calc(48px - var(--header-border-radius)) 48px 48px 48px;
  right: calc(var(--header-inner-padding-left-right) * -1);
  bottom: 0;
  transform: translateY(100%);
  min-width: 320px;
  border-radius: 0 0 var(--header-border-radius, 5px) var(--header-border-radius, 5px);
  z-index: 3;
  box-shadow: var(--header-box-shadow);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
.locale-switcher--active {
  pointer-events: auto;
  opacity: 1;
}
.locale-switcher:before {
  content: "";
  display: block;
  position: absolute;
  top: -7px;
  width: 100%;
  right: 0;
  background: inherit;
  height: 7px;
}
.locale-switcher__container {
  display: grid;
  flex-direction: column;
}
.locale-switcher__lang {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--fg-color);
  font-size: clamp(1rem, 0.85vw + 0.69rem, 1.38rem);
  color: var(--color-skydio-black);
  text-decoration: none;
}
.locale-switcher__lang:first-child {
  border-top: 1px solid var(--fg-color);
}
.locale-switcher__lang-name {
  text-align: right;
}

.header__bottom {
  background-color: var(--header-l2-background);
  border-bottom-right-radius: var(--header-border-radius);
  border-bottom-left-radius: var(--header-border-radius);
  z-index: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: margin 0.3s, padding 0.3s, height 2.3s, top 0.6s, background-color 0.3s;
  position: relative;
  display: flex;
  font-size: var(--header-base-font-size);
}
.header__bottom * {
  font-size: inherit;
}
.header__bottom .header__logo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  position: absolute;
  top: 0;
  bottom: 0;
}
.header__bottom .l2nav__action.button {
  display: none;
  width: 0px;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .header--l2-only .header__bottom .l2nav__action.button {
    display: block;
  }
}
header.header:hover .l2nav__left,
header.header:hover .l2nav__right {
  opacity: 1;
}

.l2nav {
  max-width: 100%;
  display: flex;
  height: calc(var(--header-section-height) * var(--header-l2-height-ratio));
  overflow-x: auto;
  position: relative;
  mask-image: unset;
  padding-right: var(--space-5);
  scroll-behavior: smooth;
  transition: padding-left 0.3s, height 0.3s, margin-left 0.3s 0.3s;
}
.l2nav > * {
  height: 100%;
}
.l2nav .button {
  white-space: nowrap;
}
.l2nav--button-left .l2nav {
  mask-image: linear-gradient(90deg, transparent 30px, #fff 10%, #fff 100%);
}
.l2nav--button-right .l2nav {
  mask-image: linear-gradient(90deg, #fff 0, #fff 10%, #fff 86%, transparent 91%);
}
@media (min-width: 568px) {
  .l2nav--button-right .l2nav {
    mask-image: linear-gradient(90deg, #fff 0, #fff 10%, #fff 90%, transparent 96%);
  }
}
.l2nav--button-right.l2nav--button-left .l2nav {
  mask-image: linear-gradient(90deg, transparent 30px, #fff 10%, #fff 86%, transparent 91%);
}
@media (min-width: 568px) {
  .l2nav--button-right.l2nav--button-left .l2nav {
    mask-image: linear-gradient(90deg, transparent 30px, #fff 10%, #fff 90%, transparent 96%);
  }
}
.l2nav__wrapper {
  position: relative;
  margin-left: 0;
  padding-left: calc(var(--header-logo-width) + var(--space-2));
  max-width: 100%;
  flex-grow: 1;
  overflow: hidden;
  transition: padding-left 0.3s, height 0.3s, margin-left 0.3s;
}
.l2nav__left, .l2nav__right {
  position: absolute;
  height: 100%;
  top: 0;
  background: transparent;
  border: none;
  opacity: 0.4;
  padding: 0;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.l2nav__left:after, .l2nav__right:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" fill="none"><path stroke="#fff" d="m1 1 5.5 5.5c.3.2.3.6 0 .9L1 12.9"/></svg>');
  opacity: 0;
}
.l2nav__left:before, .l2nav__left:after, .l2nav__right:before, .l2nav__right:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" fill="none"><path stroke="#22211F" d="m1 1 5.5 5.5c.3.2.3.6 0 .9L1 12.9"/></svg>');
  display: block;
  position: absolute;
  transform: translateY(8%);
  transition: all 0.3s ease-in-out;
}
.l2nav__left:after, .l2nav__right:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" fill="none"><path stroke="#fff" d="m1 1 5.5 5.5c.3.2.3.6 0 .9L1 12.9"/></svg>');
  opacity: 0;
}
.l2nav__left:hover, .l2nav__right:hover {
  background-color: #326df3;
}
.l2nav__left:hover:after, .l2nav__right:hover:after {
  opacity: 1;
}
.l2nav__left:hover:before, .l2nav__right:hover:before {
  opacity: 0;
}
.l2nav__left.hidden, .l2nav__right.hidden {
  display: none;
}
.l2nav__left {
  left: 0;
  border-right: 1px solid #d9d9d9;
}
.l2nav__left:before, .l2nav__left:after {
  transform: rotateZ(-180deg) translateY(8%);
}
.l2nav__right {
  right: 0;
  border-left: 1px solid #d9d9d9;
}
.l2nav__action {
  flex-grow: 0;
  height: min-content;
  align-self: center;
  margin-right: var(--space-2);
  opacity: 0;
  pointer-events: none;
}
.l2nav__button {
  transition: color 0.3s ease-in-out;
}
.l2nav__button:hover {
  color: var(--blue-02);
}
.l2nav__drop-button {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.l2nav__drop-button:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" fill="none"><path stroke="%2322211F" d="M12 1.3 6.8 6.5c-.3.3-.7.3-1 0L.8 1.3"/></svg>');
  display: block;
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease-in-out;
}
.l2nav__drop-button--active:after {
  transform: rotateZ(-180deg);
  transition: transform 0.3s ease-in-out;
}
.l2nav__drop {
  display: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  background-color: inherit;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  top: calc(var(--header-section-height) * 0.75);
  box-shadow: var(--header-box-shadow);
  max-width: calc(100dvw - var(--space-1) * 2);
  padding-right: var(--space-2);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  z-index: 10;
}
.l2nav__drop--visible {
  flex-direction: column;
  display: flex;
  pointer-events: all;
  opacity: 1;
}
.l2nav__drop--visible:before {
  position: relative;
  content: "";
  margin-top: calc(var(--space-1) * -1 - 2px);
  background-color: inherit;
  width: calc(100% + var(--space-2));
  height: 2px;
  display: block;
}

.header--l2-only .header__logo {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s 0.3s;
}
.header--l2-only .l2nav {
  height: var(--header-section-height);
  padding-left: 0;
  transition: padding-left 0.3s, height 0.3s, margin-left 0.3s;
}
.header--l2-only .l2nav__drop {
  top: var(--header-section-height);
  z-index: 10;
}
.header--l2-only .l2nav__wrapper {
  padding-left: 0;
  margin-left: calc(var(--header-logo-width) + var(--space-2));
  transition: padding-left 0.3s, height 0.3s, margin-left 0.3s;
}
.header--l2-only .l2nav__action {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s 0.3s;
  width: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
@media (min-width: 1025px) {
  .header--l2-only .l2nav__wrapper {
    margin-right: var(--space-1);
  }
}

@media (max-width: 1023px) {
  .header--l2-only .l2nav__wrapper {
    margin-left: calc(var(--header-logo-width) + var(--space-2));
    padding-left: 0;
  }
}