/*!*********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./static/scss/style.scss ***!
  \*********************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Tools
 */
/**
 * Tools
 */
/**
 * Get breakpoint from breakpoints settings map
 */
/**
 * Media query mixin
 * @param {} $to - Value from $settings-breakpoints
 * available breakpoints can be found in _settings.breakpoints.scss
 * usage for max width:
 * @include mq(md){};
 * usage for min width:
 * @include mq(null, md)
 */
/**
 * Fluid font sizes
 * @param {String} $size - Size
 * usage:
 * @include fontSize("a5");
 */
/**
 * Fluid property values
 * @param {String} $property - Property
 * @param {String} $spacing - Spacing
 * @param {String} $value - Value
 * usage:
 * @include fluidValue("margin-top", "s-56");
 * @include fluidValue("max-width", null, 600px);
 * used In fluidValue mixin and fontSize mixin
 * use mixin instead
 */
/**
 * Fluid font sizes
 * @param {Number} $min-size - Min font size
 * @param {Number} $max-size - Max font size
 * @param {Number} $min-breakpoint - Min breakpoint
 * @param {Number} $max-breakpoint - Max breakpoint
 * @param {String} $unit - Return unit
 * @return {String}
 * used In fluidValue mixin and fontSize mixin
 * use mixin instead
 */
/**
 * Fluid font sizes
 * Used For Sizes > $breakpoint-xxl
 * @param {Number} $min-size - Min font size
 * @param {Number} $max-size - Max font size
 * @param {Number} $min-breakpoint - Min breakpoint
 * @param {Number} $max-breakpoint - Max breakpoint
 * @param {String} $unit - Return unit
 * @return {String}
 */
/**
 * Round number to decimals
 * @param {Number} $number - Number to round
 * @param {Number} $decimals - Number of decimals
 */
/**
 * Get spacing values from settings
 */
/**
 * Fetch nested keys
 * @param {Map} $map - Map
 * @param {Arglist} $keys - Keys to fetch
 * @return {*}
 */
/**
 * CSS Grid mixin
 * @param {number} $columns — optional and defaults to _settings.grid.scss -> $grid-column-count
 * usage:
 * @include cssGrid()
 */
/**
 * Grid value TODO
 */
/**
 * Hover support mixin
 * Detect if device supports hover interaction
 * 1. If device is not supporting hover, add properties as active state styles
 * 2. If device is supporting hover, add properties as hover state styles
 * usage:
 * @include hover{}
 */
/**
 * Focus accessibility support mixin
 * Enable box shadow for focusable (tabbable) elements
 * 1. Target only elements that are not disabled and need a visible indicator to show focus
 * usage:
 * @include focus{}
 */
/**
 * Button reset
 * Make button to look like text
 * Useful for any kind of UI based on <button> element
 * usage:
 * @include button-reset;
 */
/**
 * Percentage function
 * Abbreviation function for using percentage without math.div
 * https://sass-lang.com/documentation/breaking-changes/slash-div
 * usage:
 * padding-left: percentage(1, 24);
 */
/**
 * Mixin that hides scrollbar on scrollable elements (for example overflow lists)
 * usage:
 *  div {
 *      overflow: scroll;
 *      @include hide-scrollbar;
 *  }
 */
/**
 * Get transition easing from $settings-transitions-easing
 */
/**
 * Transition function
 * @param {string} $transitionName - Name of the transition from $settings-transitions
 * @param {string} $transitionEasing - get transition easing from $settings-transitions-easing
 * usage:
 * transition: getTransition;
 * transition: getTransition(slide, ease-in-quad);
 */
/**
 * Custom transition function
 * used when you need to specify custom transition for only one or multiple properties but not all
 * if you will not change the property use getTransition instead
 * default easing is from getTransitionEasing
 * @param {string} $transitions - any number of transitions
 * usage:
 * transition: getCustomTransition(opacity);
 * transition: getCustomTransition(transform 0.3s);
 * transition: getCustomTransition(transform 0.5s ease, background-color 0.2s);
 * transition: getCustomTransition(
 *                  top 0.3s cubic-bezier(0.23, 1, 0.32, 1),
 *                  transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s
 *               );
 */
/**
 * Unfold transition function
 * Helper for getCustomTransition();
 * Takes any number of arguments passed to getCustomTransition() and makes unfolds them to single properties
 * 1. Transition property defaults
 * 2. Grab transition properties if they exist
 */
/**
 * Font face mixin
 * @param {string} $font-name - Name of the font
 * @param {string} $font-filename - Name of the file without extension
 * @param {number} $version - Font version
 * @param {number} $font-weight - Font weight value
 * @param {string} $font-name - Font style property (if the font is italic)
 * usage:
 * @include font-face("Hanken-Grotesk", "HankenGrotesk-Regular");
 * usage for weight or style other than default
 * @include font-face(
 *  "Hanken-Grotesk",
 *  "HankenGrotesk-SemiBold",
 *  $font-weight: 600,
 *  $font-style: italic
 * );
 */
/**
 * Convert font-size from px to rem
 * 1. Default font size on html element is 100%, equivalent to 16px;
 * @param {number} $size - the value in pixel you want to convert
 * usage:
 * padding-top: rem(20px);
 */
/**
 * Convert font-size from px to em
 * 1. Default font size on html element is 100%, equivalent to 16px;
 * @param {number} $size - the value in pixel you want to convert
 * @param {number} $font-size - font size of element in pixels
 * usage:
 * padding-top: em(20px);
 */
/**
 * Context
 */
/**
 * Viewport width function
 * 1. 1 vw is equal to 1% of the viewport width
 * @param {number} $size - the value in pixel you want to convert
 * usage:
 * padding-top: get-vw(100px);
 */
/**
 * Viewport height function
 * 1. 1 vw is equal to 1% of the viewport width
 * @param {number} $size - the value in pixel you want to convert
 * usage:
 * padding-top: get-vh(100px);
 */
/**
 * Strip units function
 * @param {number} $number - the value you want to strip unuts from
 * usage:
 * strip-units(100px);
 * returns: 100
 */
/**
 * Get z-index from $settings-zindex
 * usage:
 * z-index: getZindex(navigation);
 * z-index: getZindex(navigation, 1);
 */
/**
 * Third party tools
 */
/**
 * Settings
 */
/**
 * Settings
 */
/**
 * Breakpoints
 */
/**
 * Breakpoints - map
 */
/**
 * Colors
 */
/**
 * Colors - focus accessibility
 */
/**
 * Colors - re-assigning
 */
/**
 * Colors - map
 * used for generating css variables
 */
/**
 * Ratio map
 */
/**
* Set useContainer to true if you are using container design, and dont need scaling for > xxl breakpoint
* @var {boolean} $useContainer - Use container
 */
/**
 * Set use-css-var to true if you want to use css var for spacing
 * @var {boolean} $use-css-var - Use css var
 */
/**
 * Set variable-prefix to change css var prefix
 * @var {string} $variable-prefix - Variable prefix
*/
/**
 * Big screen coefficient for fluid sizing, used for > xxl breakpoint
 * used for lowering sizes on big screens
 * @var {number} $big-viewport-coefficient - Big viewport coefficient
 */
/**
 * Spacing map
 */
/**
 * Transition easing map
 */
/**
 * Transitions variables
 */
/**
 * Transitions map
 */
/**
 * Roboto
 */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2?1") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.woff2?1") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/**
 * Font variables
 */
/**
 * Font size map
 */
/**
 * Typography mixins
 * usage:
 * @include a5;
 */
/**
 * Z-index map
 */
/**
 * Third party settings
 */
/**
 * Generics
 */
/**
 * Generics
 */
/**
 * b-reset.scss - modern CSS reset used by Bornfight frontend team.
 * Consists of best CSS reset practices combined into one file.
 */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Tells the browser to account for any border and padding in the values you specify for an element's width and height
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  box-sizing: border-box; /* 3 */
  width: 100%;
}

/**
 * All elements inherit box model
 */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/**
 * Reset elements in all browsers
 */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/**
 * Set core body defaults
 * 1. sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
 * 2. The browser emphasizes rendering speed over legibility and geometric precision when drawing text.
 * 3. Disables the browser's inflation algorithm on some smart phones and tablets.
 * 4. Font smoothing
 */
body {
  scroll-behavior: smooth; /* 1 */
  text-rendering: optimizeSpeed; /* 2 */
  -webkit-text-size-adjust: none; /* 3 */
  -webkit-font-smoothing: antialiased; /* 4 */
  -moz-osx-font-smoothing: grayscale; /* 4 */
  width: 100%;
}

/**
 * Remove list style from lists
 */
ul {
  list-style: none;
}

/**
 * Make media easier to work with
 */
img,
video,
object,
embed,
picture {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
}

body:not(.wp-admin) iframe {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
}

/**
 * Remove outline from tabindex -1
 */
[tabindex="-1"] {
  outline: none !important;
}

/**
 * Add the correct height in Firefox.
 */
hr {
  height: 0;
}

/**
 * Add the correct text decoration in Chrome, Edge, and Safari.
 */
abbr[title] {
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Edge and Safari.
 */
b,
strong {
  font-weight: bold;
}

/**
 * 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 * 2. Correct the odd 'em' font sizing in all browsers.
 */
code,
kbd,
samp,
pre {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none; /* 1 */
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Add the correct vertical alignment in Chrome and Firefox.
 */
progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to 'inherit' in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Add the correct display in Chrome and Safari.
 */
summary {
  display: list-item;
}

/**
 * Remove all animations and transitions for people that prefer not to see them
 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/**
 * Browser specific form elements reset
 */
/**
 * Search input browser additions reset
 * 1. Clears the 'X' from Chrome
 * 2. Clears the 'X' from Internet Explorer
 */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  /* 1 */
  -webkit-appearance: none;
  display: none;
}

input[type=search]::-ms-clear,
input[type=search]::-ms-reveal {
  /* 2 */
  display: none;
  width: 0;
  height: 0;
}

/**
 * Remove arrows/spinners from number input
 * 1. Chrome, Safari, Edge, Opera
 * 2. Firefox
 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* 1 */
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  /* 2 */
  -moz-appearance: textfield;
}

/**
 * Remove Safari autocomplete additions
 * 1. Contacts fill button
 * 2. Password fill button
 * 3. Number input spinner
 */
input[autocomplete=off]::-webkit-contacts-auto-fill-button,
input[autocomplete=off]::-webkit-credentials-auto-fill-button {
  /* 1, 2, 3 */
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}

/**
 * Remove select triangle on IE
 */
select::-ms-expand {
  display: none;
}

/**
 * Remove dotted outline from range input on Firefox
 */
input[type=range]::-moz-focus-outer {
  border: 0;
}

/**
 * WP Editor specific form elements reset
 */
.components-popover__content .block-editor-block-contextual-toolbar {
  background-color: #fff !important;
}

/**
 * Third party generics
 */
/**
 * Elements
 */
/**
 * Elements
 */
/**
 * Generate css variables for spacing if use-css-var is true
 */
:root {
  --s-5: 0.31rem;
  --s-10: 0.63rem;
  --s-15: 0.94rem;
  --s-20: clamp(0.94rem, 0.52vw + 0.78rem, 1.25rem);
  --s-25: clamp(0.94rem, 1.04vw + 0.63rem, 1.56rem);
  --s-30: clamp(1.25rem, 1.04vw + 0.94rem, 1.88rem);
  --s-35: clamp(1.56rem, 1.04vw + 1.25rem, 2.19rem);
  --s-40: clamp(1.88rem, 1.04vw + 1.56rem, 2.5rem);
  --s-45: clamp(2.19rem, 1.04vw + 1.88rem, 2.81rem);
  --s-50: clamp(2.5rem, 1.04vw + 2.19rem, 3.13rem);
  --s-60: clamp(3.13rem, 1.04vw + 2.81rem, 3.75rem);
  --s-70: clamp(3.13rem, 2.08vw + 2.5rem, 4.38rem);
  --s-80: clamp(3.75rem, 2.08vw + 3.13rem, 5rem);
  --s-90: clamp(3.75rem, 3.13vw + 2.81rem, 5.63rem);
  --s-100: clamp(4.38rem, 3.13vw + 3.44rem, 6.25rem);
  --s-125: clamp(4.38rem, 5.73vw + 2.66rem, 7.81rem);
  --s-150: clamp(5rem, 7.29vw + 2.81rem, 9.38rem);
  --a5: clamp(3.44rem, 3.13vw + 2.5rem, 5.31rem);
  --a4: clamp(2.38rem, 2.71vw + 1.56rem, 4rem);
  --a3: clamp(1.75rem, 2.08vw + 1.13rem, 3rem);
  --a2: clamp(1.56rem, 1.67vw + 1.06rem, 2.56rem);
  --a1: clamp(1.13rem, 0.73vw + 0.91rem, 1.56rem);
  --b0: clamp(1rem, 0.21vw + 0.94rem, 1.13rem);
  --b1: clamp(0.88rem, 0.21vw + 0.81rem, 1rem);
  --b2: clamp(0.81rem, 0.21vw + 0.75rem, 0.94rem);
  --b3: clamp(0.75rem, 0.21vw + 0.69rem, 0.88rem);
  --b4: clamp(0.69rem, 0.1vw + 0.66rem, 0.75rem);
  --breakpoint-sm: 480px;
  --breakpoint-sm-md: 640px;
  --breakpoint-md: 800px;
  --breakpoint-md-lg: 960px;
  --breakpoint-lg: 1140px;
  --breakpoint-lg-xl: 1280px;
  --breakpoint-xl: 1440px;
  --breakpoint-xxl: 1920px;
  --breakpoint-xxxl: 3840px;
  --white: #ffffff;
  --black: #000000;
  --mango: #f7b334;
  --slate: #3c5163;
}

/**
 * Generate css variables for spacing in > xxl breakpoint if use-css-var is true and use-container is false
 */
@media (min-width: 1920px) {
  :root {
    --s-5: max(0.31rem, 0.16vw + 0.13rem);
    --s-10: max(0.63rem, 0.31vw + 0.25rem);
    --s-15: max(0.94rem, 0.47vw + 0.38rem);
    --s-20: max(1.25rem, 0.63vw + 0.5rem);
    --s-25: max(1.56rem, 0.78vw + 0.63rem);
    --s-30: max(1.88rem, 0.94vw + 0.75rem);
    --s-35: max(2.19rem, 1.09vw + 0.88rem);
    --s-40: max(2.5rem, 1.25vw + 1rem);
    --s-45: max(2.81rem, 1.41vw + 1.13rem);
    --s-50: max(3.13rem, 1.56vw + 1.25rem);
    --s-60: max(3.75rem, 1.88vw + 1.5rem);
    --s-70: max(4.38rem, 2.19vw + 1.75rem);
    --s-80: max(5rem, 2.5vw + 2rem);
    --s-90: max(5.63rem, 2.81vw + 2.25rem);
    --s-100: max(6.25rem, 3.13vw + 2.5rem);
    --s-125: max(7.81rem, 3.91vw + 3.12rem);
    --s-150: max(9.38rem, 4.69vw + 3.75rem);
    --a5: max(5.31rem, 2.66vw + 2.13rem);
    --a4: max(4rem, 2vw + 1.6rem);
    --a3: max(3rem, 1.5vw + 1.2rem);
    --a2: max(2.56rem, 1.28vw + 1.02rem);
    --a1: max(1.56rem, 0.78vw + 0.63rem);
    --b0: max(1.13rem, 0.56vw + 0.45rem);
    --b1: max(1rem, 0.5vw + 0.4rem);
    --b2: max(0.94rem, 0.47vw + 0.38rem);
    --b3: max(0.88rem, 0.44vw + 0.35rem);
    --b4: max(0.75rem, 0.38vw + 0.3rem);
  }
}

html,
body {
  -webkit-font-smoothing: antialiased;
}

html.interface-interface-skeleton__html-container .components-resizable-box__container {
  color: #000000;
  background-color: #ffffff;
  font-size: var(--b0);
  font-family: "Roboto", sans-serif;
  line-height: 144%;
  letter-spacing: normal;
}

html:not(.interface-interface-skeleton__html-container) body {
  color: #000000;
  background-color: #ffffff;
  font-size: var(--b0);
  font-family: "Roboto", sans-serif;
  line-height: 144%;
  letter-spacing: normal;
}

a {
  color: inherit;
  text-decoration: none;
}
a:active, a:focus {
  /* 1 */
}
a:active:not(:disabled):focus-visible, a:focus:not(:disabled):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}

/**
 * Objects
 */
/**
 * Objects
 */
.o-section {
  padding-left: 8.3333333333%;
  padding-right: 8.3333333333%;
  position: relative;
}
@media (max-width: 1140px) {
  .o-section {
    padding-left: 4.1666666667%;
    padding-right: 4.1666666667%;
  }
}
.o-section {
  /**
   * Horizontal modifiers
   */
}
.o-section--thin {
  padding-left: 16.6666666667%;
  padding-right: 16.6666666667%;
}
@media (max-width: 1140px) {
  .o-section--thin {
    padding-left: 4.1666666667%;
    padding-right: 4.1666666667%;
  }
}
.o-section--narrow {
  padding-left: 12.5%;
  padding-right: 12.5%;
}
@media (max-width: 1140px) {
  .o-section--narrow {
    padding-left: 4.1666666667%;
    padding-right: 4.1666666667%;
  }
}
.o-section--wide {
  padding-left: 4.1666666667%;
  padding-right: 4.1666666667%;
}
.o-section--no-padding-left {
  padding-left: 0;
}
@media (max-width: 1140px) {
  .o-section--no-padding-left {
    padding-left: 0;
  }
}
.o-section--no-padding-right {
  padding-right: 0;
}
@media (max-width: 1140px) {
  .o-section--no-padding-right {
    padding-right: 0;
  }
}
.o-section--full-width {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1140px) {
  .o-section--full-width {
    padding-left: 0;
    padding-right: 0;
  }
}
.o-section {
  /**
   * Vertical modifiers
   */
}
.o-section--full-vh {
  height: 100vh;
}
.o-section {
  /**
   * Color modifiers
   */
}
.o-section--black {
  background-color: #000000;
}
.o-section {
  /**
   * Overflow modifiers
   */
}
.o-section--no-overflow {
  overflow: hidden;
}

.o-navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--white);
  z-index: 200;
}

.o-footer {
  position: relative;
  padding-top: clamp(72px, 12vh, 160px);
  padding-bottom: clamp(28px, 5vw, 72px);
  color: #ffffff;
  font-family: "Courier New", Courier, monospace;
  z-index: getzindex(default);
}
.o-footer__glass {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 0;
  background: radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.14), transparent 36%), linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(32px) saturate(135%);
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari still requires the prefixed glass filter */
  -webkit-backdrop-filter: blur(32px) saturate(135%);
}
.o-footer__glass::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.07) 38%, rgba(255, 255, 255, 0.22) 72%, rgba(255, 255, 255, 0.03));
  /* stylelint-disable property-no-vendor-prefix -- Safari still requires prefixed masking */
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  /* stylelint-enable property-no-vendor-prefix */
  mask-composite: exclude;
  pointer-events: none;
}
.o-footer__glass::after {
  content: "";
  position: absolute;
  top: -120px;
  left: 12%;
  width: 42%;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  filter: blur(55px);
  pointer-events: none;
}
.o-footer__top, .o-footer__bottom {
  position: relative;
  display: grid;
  align-items: center;
  z-index: 1;
}
.o-footer__top {
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 80px);
}
.o-footer__tagline {
  max-width: 600px;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: "Roboto", sans-serif;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.55;
}
.o-footer__rule {
  position: relative;
  height: 1px;
  margin: clamp(28px, 4vw, 48px) 0;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22) 16%, rgba(255, 255, 255, 0.22) 84%, transparent);
  z-index: 1;
}
.o-footer__bottom {
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  line-height: 1.5;
}
.o-footer__copyright, .o-footer__credit {
  margin: 0;
}
.o-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 32px);
}
.o-footer__credit {
  justify-self: end;
  text-align: right;
}
.o-footer__heart {
  display: inline-block;
  color: rgb(255, 121, 145);
  text-shadow: 0 0 14px rgba(255, 121, 145, 0.65);
  transform: translateY(1px);
}

.o-footer__links a {
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  transition: color 180ms ease;
}
@media (min-width: 1140px) and (hover: none) {
  .o-footer__links a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .o-footer__links a:active {
    /* 1 */
    color: #ffffff;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .o-footer__links a:hover {
    /* 2 */
    color: #ffffff;
  }
}
.o-footer__links a:active, .o-footer__links a:focus {
  /* 1 */
}
.o-footer__links a:active:not(:disabled):focus-visible, .o-footer__links a:focus:not(:disabled):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}

.o-footer__credit a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
@media (min-width: 1140px) and (hover: none) {
  .o-footer__credit a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .o-footer__credit a:active {
    /* 1 */
    color: #ffffff;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .o-footer__credit a:hover {
    /* 2 */
    color: #ffffff;
  }
}
.o-footer__credit a:active, .o-footer__credit a:focus {
  /* 1 */
}
.o-footer__credit a:active:not(:disabled):focus-visible, .o-footer__credit a:focus:not(:disabled):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}

@media (max-width: 800px) {
  .o-footer__top, .o-footer__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .o-footer__top {
    gap: 24px;
  }
  .o-footer__tagline {
    max-width: 520px;
  }
  .o-footer__credit {
    justify-self: center;
    text-align: center;
  }
  .o-footer__links {
    grid-row: 1;
    flex-wrap: wrap;
  }
}
/**
 * Components
 */
/**
 * Components
 */
/**
 * GridBackground
 * Fixed, full-viewport layer sitting behind every other layer on the
 * page - a static dark gray grid. "__overlay" is a solid black cover
 * sitting on top of the grid, fully opaque at rest; GridBackground.js
 * fades it out (and zooms "__grid" in slightly from a resting
 * scaled-down state) as the page scrolls, revealing the grid
 * underneath. "__spotlight" is a lighter copy of the same grid lines,
 * masked down to a soft circle that GridBackground.js keeps centered
 * on the cursor (via the --grid-spotlight-* custom properties), so the
 * lines nearest the pointer read brighter. The grid itself is painted
 * as square $cell-size tiles (linear-gradient + background-size) so
 * horizontal and vertical lines always meet on exact cell corners.
 * Purely decorative - pointer events are disabled throughout.
 */
.c-grid-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background-color: rgb(0, 0, 0);
}
.c-grid-background__grid {
  position: absolute;
  inset: -15%;
  transform-origin: center;
  will-change: transform;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 100%);
  background-size: 56px 56px;
  background-repeat: repeat;
}
.c-grid-background__spotlight {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.45) 0, rgba(255, 255, 255, 0.45) 1px, transparent 1px, transparent 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 0, rgba(255, 255, 255, 0.45) 1px, transparent 1px, transparent 100%);
  background-size: 56px 56px;
  background-repeat: repeat;
  mask-image: radial-gradient(circle var(--grid-spotlight-radius, 220px) at var(--grid-spotlight-x, 50%) var(--grid-spotlight-y, 50%), #000000 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: opacity;
}
.c-grid-background__overlay {
  position: absolute;
  inset: 0;
  background-color: #000000;
  opacity: 1;
  will-change: opacity;
}

.c-navigation__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-10);
}
.c-navigation__item-wrapper {
  position: relative;
}
.c-navigation__item-wrapper.is-active .c-navigation__item {
  opacity: 0.5;
  pointer-events: none;
}
.c-navigation__item-wrapper.has-active .c-navigation__item {
  opacity: 0.5;
}
@media (min-width: 1140px) and (hover: none) {
  .c-navigation__item-wrapper {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-navigation__item-wrapper:active {
    /* 1 */
  }
  .c-navigation__item-wrapper:active .c-navigation__sublist {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-navigation__item-wrapper:hover {
    /* 2 */
  }
  .c-navigation__item-wrapper:hover .c-navigation__sublist {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
.c-navigation__sublist {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.3s;
}
.c-navigation__sublist {
  width: 150px;
}
@media (min-width: 1920px) {
  .c-navigation__sublist {
    width: max(9.38rem, 4.69vw + 3.75rem);
  }
}
.c-navigation__sublist-item-wrapper.is-active {
  opacity: 0.5;
  pointer-events: none;
}

.c-hamburger {
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  text-transform: none;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  width: auto;
  height: auto;
  background: transparent;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.c-hamburger:hover, .c-hamburger:focus, .c-hamburger:active {
  outline: none;
}
.c-hamburger:active, .c-hamburger:focus {
  /* 1 */
}
.c-hamburger:active:not(:disabled):focus-visible, .c-hamburger:focus:not(:disabled):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}
.c-hamburger {
  height: 12px;
  width: 25px;
  position: relative;
  overflow: visible;
  display: inline-flex;
}
.c-hamburger.is-active span:nth-child(1) {
  transform: translateY(-50%) rotate(45deg);
}
.c-hamburger.is-active span:nth-child(2) {
  transform: translateY(-50%);
  opacity: 0;
}
.c-hamburger.is-active span:nth-child(3) {
  transform: translateY(-50%) rotate(-45deg);
}
.c-hamburger span {
  width: 100%;
  background-color: currentColor;
  position: absolute;
  left: 0;
  top: 50%;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.c-hamburger span {
  height: 2px;
}
@media (min-width: 1920px) {
  .c-hamburger span {
    height: max(0.13rem, 0.06vw + 0.05rem);
  }
}
.c-hamburger span:nth-child(1) {
  transform: translateY(-300%);
}
.c-hamburger span:nth-child(2) {
  transform: translateY(-50%);
}
.c-hamburger span:nth-child(3) {
  transform: translateY(200%);
}

.c-media-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 2;
  pointer-events: none;
}
.c-media-loader--black {
  background-color: #000000;
}

.c-media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #000000;
}

.c-media-trigger {
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  text-transform: none;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  width: auto;
  height: auto;
  background: transparent;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.c-media-trigger:hover, .c-media-trigger:focus, .c-media-trigger:active {
  outline: none;
}
.c-media-trigger {
  width: 80px;
}
@media (min-width: 1920px) {
  .c-media-trigger {
    width: max(5rem, 2.5vw + 2rem);
  }
}
.c-media-trigger {
  height: 80px;
}
@media (min-width: 1920px) {
  .c-media-trigger {
    height: max(5rem, 2.5vw + 2rem);
  }
}
.c-media-trigger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  background: #ffffff;
  color: #000000;
  border-radius: 100%;
  z-index: 1;
}
.is-playing .c-media-trigger {
  opacity: 0;
  visibility: hidden;
}

.c-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.c-breadcrumbs li {
  color: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-breadcrumbs li:before {
  content: "";
  display: inline-flex;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjgiIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiMwMDNFMzMiIGQ9Ik0wIDcuNXYtN0w2IDQgMCA3LjVaIi8+PC9zdmc+");
  flex-shrink: 0;
  flex-grow: 0;
  margin-left: var(--s-10);
  margin-right: var(--s-10);
}
.c-breadcrumbs li:before {
  width: 6px;
}
@media (min-width: 1920px) {
  .c-breadcrumbs li:before {
    width: max(0.38rem, 0.19vw + 0.15rem);
  }
}
.c-breadcrumbs li:before {
  height: 8px;
}
@media (min-width: 1920px) {
  .c-breadcrumbs li:before {
    height: max(0.5rem, 0.25vw + 0.2rem);
  }
}
.c-breadcrumbs li:first-child:before {
  display: none;
}
.c-breadcrumbs a {
  color: #000000;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
  padding-left: var(--s-50);
  padding-right: var(--s-50);
  overflow: hidden;
  outline: 0;
  border: none;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  background-color: #000000;
  color: #ffffff;
  box-shadow: none;
  text-align: center;
  outline: none;
  box-sizing: border-box;
  position: relative;
  height: 50px;
}
.c-button {
  border-radius: 50px;
}
@media (min-width: 1920px) {
  .c-button {
    border-radius: max(3.13rem, 1.56vw + 1.25rem);
  }
}
@media (min-width: 1140px) and (hover: none) {
  .c-button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-button:active {
    /* 1 */
  }
  .c-button:active:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-button:hover {
    /* 2 */
  }
  .c-button:hover:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
  }
}
.c-button:active, .c-button:focus {
  /* 1 */
}
.c-button:active:not(:disabled):focus-visible, .c-button:focus:not(:disabled):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}
.c-button:disabled {
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  cursor: not-allowed;
  pointer-events: none;
}
.c-button--secondary {
  background-color: #ffffff;
  color: #000000;
}
@media (min-width: 1140px) and (hover: none) {
  .c-button--secondary {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-button--secondary:active {
    /* 1 */
  }
  .c-button--secondary:active:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.5);
    color: #000000;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-button--secondary:hover {
    /* 2 */
  }
  .c-button--secondary:hover:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.5);
    color: #000000;
  }
}
.c-button--full {
  width: 100%;
}
.c-button--small {
  padding-left: var(--s-40);
  padding-right: var(--s-40);
}
.c-button--small {
  height: 40px;
}
@media (min-width: 1920px) {
  .c-button--small {
    height: max(2.5rem, 1.25vw + 1rem);
  }
}
.c-button__loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.c-button.is-loading {
  transition: none;
  cursor: not-allowed;
  pointer-events: none;
  color: transparent;
}
.c-button.is-loading .c-button__loader {
  display: flex;
}
@media (min-width: 1140px) and (hover: none) {
  .c-button-parent {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-button-parent:active {
    /* 1 */
  }
  .c-button-parent:active .c-button:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-button-parent:hover {
    /* 2 */
  }
  .c-button-parent:hover .c-button:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
  }
}

.c-responsive-media {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.c-responsive-media--background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.c-responsive-media__inner {
  height: 0;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  /**
   * Aspect ratio modifiers
   */
}
.c-responsive-media__inner--1-1 {
  padding-bottom: 100%;
}
.c-responsive-media__inner--2-1 {
  padding-bottom: 50%;
}
.c-responsive-media__inner--1-2 {
  padding-bottom: 200%;
}
.c-responsive-media__inner--3-1 {
  padding-bottom: 33.3333333333%;
}
.c-responsive-media__inner--1-3 {
  padding-bottom: 300%;
}
.c-responsive-media__inner--3-2 {
  padding-bottom: 66.6666666667%;
}
.c-responsive-media__inner--2-3 {
  padding-bottom: 150%;
}
.c-responsive-media__inner--4-3 {
  padding-bottom: 75%;
}
.c-responsive-media__inner--5-3 {
  padding-bottom: 60%;
}
.c-responsive-media__inner--3-4 {
  padding-bottom: 133.3333333333%;
}
.c-responsive-media__inner--4-5 {
  padding-bottom: 125%;
}
.c-responsive-media__inner--16-9 {
  padding-bottom: 56.25%;
}
.c-responsive-media__inner--9-16 {
  padding-bottom: 177.7777777778%;
}
.c-responsive-media__inner--auto {
  padding-bottom: unset;
  height: auto;
}
.c-responsive-media__inner--auto .c-responsive-media__img,
.c-responsive-media__inner--auto .c-responsive-media__video,
.c-responsive-media__inner--auto iframe,
.c-responsive-media__inner--auto object,
.c-responsive-media__inner--auto embed {
  width: auto;
  height: auto;
  position: relative;
}
.c-responsive-media__inner--adopt {
  padding-bottom: unset;
  height: 100%;
}
.c-responsive-media__inner {
  /**
   * Loaded state
   */
}
.c-responsive-media__inner[loaded] > .c-embed-video__trigger {
  display: none;
}
.c-responsive-media__img, .c-responsive-media__video,
.c-responsive-media iframe,
.c-responsive-media object,
.c-responsive-media embed {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /**
   * Object fit modifiers
   */
}
.c-responsive-media__img--cover, .c-responsive-media__video--cover,
.c-responsive-media iframe--cover,
.c-responsive-media object--cover,
.c-responsive-media embed--cover {
  object-fit: cover;
}
.c-responsive-media__img--contain, .c-responsive-media__video--contain,
.c-responsive-media iframe--contain,
.c-responsive-media object--contain,
.c-responsive-media embed--contain {
  object-fit: contain;
}
.c-responsive-media__img, .c-responsive-media__video,
.c-responsive-media iframe,
.c-responsive-media object,
.c-responsive-media embed {
  /**
   * Object position modifiers
   */
}
.c-responsive-media__img--center, .c-responsive-media__video--center,
.c-responsive-media iframe--center,
.c-responsive-media object--center,
.c-responsive-media embed--center {
  object-position: center;
}
.c-responsive-media__img--top, .c-responsive-media__video--top,
.c-responsive-media iframe--top,
.c-responsive-media object--top,
.c-responsive-media embed--top {
  object-position: top;
}
.c-responsive-media__img--bottom, .c-responsive-media__video--bottom,
.c-responsive-media iframe--bottom,
.c-responsive-media object--bottom,
.c-responsive-media embed--bottom {
  object-position: bottom;
}
.c-responsive-media__img--left, .c-responsive-media__video--left,
.c-responsive-media iframe--left,
.c-responsive-media object--left,
.c-responsive-media embed--left {
  object-position: left;
}
.c-responsive-media__img--right, .c-responsive-media__video--right,
.c-responsive-media iframe--right,
.c-responsive-media object--right,
.c-responsive-media embed--right {
  object-position: right;
}
.c-responsive-media__img, .c-responsive-media__video,
.c-responsive-media iframe,
.c-responsive-media object,
.c-responsive-media embed {
  /**
   * Loaded state
   */
}
.c-responsive-media__img.is-loaded + .c-media-loader, .c-responsive-media__video.is-loaded + .c-media-loader,
.c-responsive-media iframe.is-loaded + .c-media-loader,
.c-responsive-media object.is-loaded + .c-media-loader,
.c-responsive-media embed.is-loaded + .c-media-loader {
  transform: translateY(-100%);
}
.c-responsive-media video,
.c-responsive-media iframe {
  display: block;
  width: 100%;
}

.c-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-10);
}
.c-pagination-arrow.is-disabled,
.c-pagination-number.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.c-pagination-arrow.is-active,
.c-pagination-number.is-active {
  opacity: 0.5;
  pointer-events: none;
}

.c-spinner-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  z-index: 400;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.c-spinner-loader__inner {
  border: 1px solid var(--black);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s ease-out infinite;
}
.c-spinner-loader__inner {
  width: 48px;
}
@media (min-width: 1920px) {
  .c-spinner-loader__inner {
    width: max(3rem, 1.5vw + 1.2rem);
  }
}
.c-spinner-loader__inner {
  height: 48px;
}
@media (min-width: 1920px) {
  .c-spinner-loader__inner {
    height: max(3rem, 1.5vw + 1.2rem);
  }
}
.c-spinner-loader__inner:after, .c-spinner-loader__inner:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--mango);
  width: 6px;
  height: 6px;
  transform: translate(150%, 150%);
  border-radius: 50%;
}
.c-spinner-loader__inner:before {
  left: auto;
  top: auto;
  right: 0;
  bottom: 0;
  transform: translate(-150%, -150%);
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/**
 * CardScene
 * Fixed, full-viewport 3D layer that floats above all page content.
 * Pointer events are disabled so it never blocks clicks/links underneath.
 */
.c-card-scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 250;
  pointer-events: none;
}
.c-card-scene__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.c-card-scene {
  /**
   * iPhone frame revealed once the cards restack at the end of the
   * sequence. Sits behind the canvas, whose transparent background
   * lets it show through everywhere except where the (by then
   * scaled-down) card stack is drawn, so the cards read as sitting on
   * the phone's display. Opacity/blur/scale are driven per-frame from
   * CardScene.js.
   */
}
.c-card-scene__phone {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(320px, 62vw);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(2.2);
  will-change: transform, opacity, filter;
  pointer-events: none;
}

/**
 * OnboardingStep
 * Big bold white headline text, one step per slide - mocked scroll
 * filler content behind the card scene. Background is transparent so
 * the fixed grid-background layer shows through underneath.
 *
 * Each (non-hero) step's copy never actually moves: its immediate
 * wrapper is `position: fixed`, pinned to the same spot in the
 * viewport at all times, so the text only ever fades/rises in and out
 * in place - it doesn't scroll along with the page at all. The
 * `.c-onboarding-step` section itself is still a normal, tall
 * (min-height below) in-flow block purely to buy scroll distance -
 * OnboardingCopy.js reads *that* element's position to work out how
 * "into" this step the user has scrolled, then drives each word's
 * opacity/offset from that alone, staggered by which visual line it
 * lands on. Lines are never authored - copy is one flowing phrase per
 * step (see onboarding-step.php) and the line each word belongs to is
 * worked out from the browser's own wrapping at runtime (see
 * static/js/site/utils/groupWordsIntoLines.js), so the stagger always
 * matches whatever actually wraps at the current viewport width.
 */
.c-onboarding-step {
  position: relative;
  min-height: 200vh;
}
.c-onboarding-step__inner {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100vh;
  padding-bottom: clamp(32px, 8vh, 96px);
  pointer-events: none;
  z-index: 255;
}
.c-onboarding-step__paragraph {
  font-size: var(--a5);
  font-family: "Roboto", sans-serif;
  line-height: 100%;
  letter-spacing: normal;
  margin: 0;
  color: #ffffff;
  font-weight: 700;
}
.c-onboarding-step__word {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  will-change: opacity, transform, filter;
  pointer-events: auto;
}
.c-onboarding-step__text--full {
  opacity: 1;
}
.c-onboarding-step__text--muted {
  opacity: 0.6;
}

.c-onboarding-step--hero {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}
.c-onboarding-step--hero .c-onboarding-step__inner {
  position: relative;
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 38vw);
  grid-template-rows: min-content 1fr;
  min-height: 100vh;
  padding-top: clamp(48px, 7vh, 82px);
  padding-bottom: clamp(32px, 6vh, 72px);
  z-index: 249;
}
.c-onboarding-step--hero .c-onboarding-step__copy {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  max-width: 560px;
  padding-bottom: clamp(24px, 5vh, 64px);
}
.c-onboarding-step--hero .c-onboarding-step__paragraph {
  font-size: var(--a3);
  font-family: "Roboto", sans-serif;
  line-height: 116%;
  letter-spacing: -0.0208333333em;
  font-weight: 700;
}

@keyframes onboarding-line-in {
  from {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-onboarding-step__inner {
    position: static;
    height: auto;
    min-height: 100vh;
    pointer-events: auto;
  }
  .c-onboarding-step__word {
    opacity: 1;
    filter: none;
  }
  .c-onboarding-step--hero .c-onboarding-step__word {
    opacity: 1;
    filter: none;
    animation: none;
  }
}
@media (max-width: 800px) {
  .c-onboarding-step--hero .c-onboarding-step__inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .c-onboarding-step--hero .c-onboarding-step__copy {
    max-width: none;
    margin-top: clamp(32px, 8vw, 56px);
  }
}
/**
 * ZeroServer
 * Closing section: same "section buys scroll distance, fixed inner
 * content just fades/rises in and out of place instead of actually
 * scrolling" trick as onboarding-step (see that file's docblock), but
 * tall enough to also buy scroll distance for the subtitle's own
 * sentence-by-sentence reveal once the main word is up - see
 * ZeroServer.js for how that whole sequence (word reveal -> hold ->
 * subtitle reveal -> hold -> exit) is paced against this section's
 * height, and how it also re-darkens the grid-background layer's
 * overlay and fades the card-scene layer out over the same stretch.
 */
.c-zero-server {
  position: relative;
  min-height: 300vh;
}
.c-zero-server__inner {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 256;
}
.c-zero-server__line {
  margin: 0;
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(32px, 9vw, 160px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.c-zero-server__letter {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  will-change: opacity, transform, filter;
}
.c-zero-server {
  /**
   * Centered at the bottom of the screen, underneath the (vertically
   * centered) main word - positioned absolutely within "&__inner"
   * itself (fixed, full-viewport), so "bottom" anchors to the actual
   * bottom of the screen regardless of how tall the word above it is.
   */
}
.c-zero-server__subtitle {
  position: absolute;
  left: 50%;
  bottom: clamp(32px, 8vh, 96px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em;
  max-width: min(90vw, 720px);
  margin: 0;
  color: #ffffff;
  font-weight: 600;
  font-size: clamp(16px, 1.9vw, 24px);
  letter-spacing: 0.02em;
  text-align: center;
  transform: translateX(-50%);
}
.c-zero-server__subtitle-line {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
}
.c-zero-server__subtitle-line--break {
  flex-basis: 100%;
}
.c-zero-server__subtitle-line {
  will-change: opacity, transform, filter;
}

@media (prefers-reduced-motion: reduce) {
  .c-zero-server__inner {
    position: static;
    height: auto;
    padding: clamp(64px, 12vh, 160px) 0;
  }
  .c-zero-server__letter {
    opacity: 1;
    filter: none;
  }
  .c-zero-server__subtitle {
    position: static;
    left: auto;
    bottom: auto;
    margin: clamp(24px, 4vh, 48px) auto 0;
    transform: none;
  }
  .c-zero-server__subtitle-line {
    opacity: 1;
    filter: none;
  }
}
/**
 * ShareMethods
 * Follows ZERO-SERVER on the same plain black backdrop: a QR code icon
 * and a WLAN icon, stacked vertically on the left half of the viewport,
 * each traced stroke-first and then filled in solid, with a caption
 * (left-aligned on the right half) cascading in beside them at the same
 * time - see ShareMethods.js for how that sequence is paced against
 * this section's height, and how it also keeps the grid-background
 * layer darkened/card-scene layer hidden for as long as it's active.
 *
 * Same "section buys scroll distance, fixed inner content just fades/
 * rises in and out of place instead of actually scrolling" trick as
 * zero-server/onboarding-step (see their own docblocks).
 *
 * The caption itself uses the exact same typography as an onboarding
 * step's headline copy ("&__paragraph" in _components.onboarding-step.scss)
 * and cascades in the same way too - word by word, staggered line by
 * line (see "&__word" below and ShareMethods.js) - rather than fading in
 * as a single block.
 */
.c-share-methods {
  position: relative;
  min-height: 278vh;
}
.c-share-methods__inner {
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 257;
}
.c-share-methods__icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vh, 72px);
}
.c-share-methods__icon {
  display: flex;
  opacity: 0;
  will-change: opacity, transform, filter;
}
.c-share-methods__icon--qr {
  width: clamp(96px, 16vw, 180px);
}
.c-share-methods__icon--wifi {
  width: clamp(120px, 19vw, 225px);
}
.c-share-methods__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.c-share-methods__path {
  fill: #ffffff;
  fill-opacity: 0;
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 9999;
  stroke-dashoffset: 9999;
  will-change: stroke-dashoffset, fill-opacity;
}
.c-share-methods__caption {
  font-size: var(--a5);
  font-family: "Roboto", sans-serif;
  line-height: 100%;
  letter-spacing: normal;
  margin: 0;
  color: #ffffff;
  font-weight: 700;
  text-align: left;
}
.c-share-methods__word {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  will-change: opacity, transform, filter;
}
.c-share-methods__text--full {
  opacity: 1;
}
.c-share-methods__text--muted {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .c-share-methods__inner {
    position: static;
    height: auto;
    padding: clamp(64px, 12vh, 160px) 0;
  }
  .c-share-methods__icon {
    opacity: 1;
  }
  .c-share-methods__path {
    fill-opacity: 0.85;
    stroke: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .c-share-methods__word {
    opacity: 1;
    filter: none;
  }
}
@media (max-width: 800px) {
  .c-share-methods__inner {
    grid-template-columns: 1fr;
    gap: clamp(32px, 7vh, 64px);
  }
  .c-share-methods__icons {
    flex-direction: row;
    gap: clamp(32px, 10vw, 96px);
  }
  .c-share-methods__caption {
    text-align: center;
  }
}
/**
 * AppReviews
 * Follows SHARE METHODS on the same "section buys scroll distance,
 * fixed inner content stays pinned" trick: a seamless full-viewport
 * 3×2 review grid with no gaps. Each cell has a distinct translucent
 * white fill; AppReviews.js scroll-scrubs staggered typewriters, then
 * pops stars one by one after each quote finishes on the timeline.
 * Section height is set from that timeline in JS (see measure()).
 */
.c-app-reviews {
  position: relative;
  min-height: 250vh;
}
.c-app-reviews__inner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 258;
  opacity: 0;
  will-change: opacity;
}
.c-app-reviews__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  height: 100%;
}
.c-app-reviews__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  min-height: 0;
  padding: clamp(var(--s-15), 2.5vw, var(--s-30));
  text-align: left;
}
.c-app-reviews__card:nth-child(-n+3) {
  padding-top: clamp(120px, 15vh, 176px);
}
.c-app-reviews__card:nth-child(1) {
  background-color: rgba(255, 255, 255, 0.04);
}
.c-app-reviews__card:nth-child(2) {
  background-color: rgba(255, 255, 255, 0.14);
}
.c-app-reviews__card:nth-child(3) {
  background-color: rgba(255, 255, 255, 0.08);
}
.c-app-reviews__card:nth-child(4) {
  background-color: rgba(255, 255, 255, 0.2);
}
.c-app-reviews__card:nth-child(5) {
  background-color: rgba(255, 255, 255, 0.1);
}
.c-app-reviews__card:nth-child(6) {
  background-color: rgba(255, 255, 255, 0.24);
}
.c-app-reviews__stars {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  margin-top: var(--s-15);
  color: rgba(255, 255, 255, 0.7);
}
.c-app-reviews__star {
  display: block;
  width: clamp(14px, 1.4vw, 20px);
  height: clamp(14px, 1.4vw, 20px);
  opacity: 0;
  transform: scale(0.35);
  transform-origin: center;
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.c-app-reviews__star.is-popped {
  opacity: 1;
  transform: scale(1);
}
.c-app-reviews__quote {
  font-size: var(--b0);
  font-family: "Roboto", sans-serif;
  line-height: 144%;
  letter-spacing: normal;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  min-height: 0;
}
.c-app-reviews__quote::after {
  content: "";
  display: inline-block;
  width: 0.55ch;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: currentcolor;
  opacity: 0;
}
.c-app-reviews__quote.is-typing::after {
  opacity: 0.7;
  animation: app-reviews-cursor 0.7s steps(1) infinite;
}
.c-app-reviews__author {
  font-size: var(--b2);
  font-family: "Roboto", sans-serif;
  line-height: 133%;
  letter-spacing: -0.0066666667em;
  flex-shrink: 0;
  margin: var(--s-10) 0 0;
  color: #ffffff;
  opacity: 0;
  font-weight: 700;
}

@keyframes app-reviews-cursor {
  0%, 49% {
    opacity: 0.7;
  }
  50%, 100% {
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .c-app-reviews__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .c-app-reviews__card:nth-child(-n+3) {
    padding-top: clamp(var(--s-15), 2.5vw, var(--s-30));
  }
  .c-app-reviews__card:nth-child(-n+2) {
    padding-top: clamp(120px, 15vh, 176px);
  }
  .c-app-reviews__quote {
    font-size: var(--b2);
    font-family: "Roboto", sans-serif;
    line-height: 133%;
    letter-spacing: -0.0066666667em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-app-reviews__inner {
    position: static;
    height: auto;
    opacity: 1;
  }
  .c-app-reviews__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .c-app-reviews__star {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .c-app-reviews__quote::after {
    display: none;
  }
  .c-app-reviews__author {
    opacity: 0.6;
    transition: none;
  }
}
/**
 * AppDownload
 * Fixed download callout whose section supplies the scroll distance for
 * AppDownload.js. The copy fades through blur while the phone slides in
 * through the right edge. The sticky inner releases and scrolls away
 * naturally at the end of the section.
 */
.c-app-download {
  position: relative;
  min-height: 300vh;
  z-index: getzindex(app-download);
}
.c-app-download__inner {
  position: sticky;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.72fr);
  align-items: center;
  gap: clamp(40px, 8vw, 140px);
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding-top: clamp(96px, 12vh, 144px);
  padding-bottom: clamp(64px, 9vh, 112px);
  pointer-events: none;
}
.c-app-download__copy {
  max-width: 700px;
}
.c-app-download__eyebrow, .c-app-download__caption, .c-app-download__button {
  opacity: 0;
  will-change: opacity, transform, filter;
}
.c-app-download__eyebrow {
  font-size: var(--b1);
  font-family: "Roboto", sans-serif;
  line-height: 110%;
  letter-spacing: normal;
  margin: 0 0 var(--s-15);
  color: #ffffff;
  opacity: 0.6;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.c-app-download__caption {
  font-size: var(--a2);
  font-family: "Roboto", sans-serif;
  line-height: 112%;
  letter-spacing: -0.0195121951em;
  margin: 0 0 clamp(28px, 5vh, 48px);
  color: #ffffff;
  font-weight: 700;
}
.c-app-download__button {
  border: 0;
  cursor: pointer;
}
.c-app-download__phone {
  position: relative;
  justify-self: center;
  width: min(100%, 360px, 38vh);
  aspect-ratio: 490/1018;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
  transform: translateX(110vw);
  will-change: transform;
}
.c-app-download__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
.c-app-download__screen {
  position: absolute;
  inset: 1.45% 3%;
  overflow: hidden;
  border-radius: 15%/7.5%;
  background-color: #000000;
  z-index: 2;
}
.c-app-download__screen::after {
  content: "";
  position: absolute;
  top: 4.1%;
  left: 50%;
  width: clamp(5px, 1.7%, 7px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgb(37, 49, 67), rgb(5, 7, 10) 65%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
}
.c-app-download__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .c-app-download {
    min-height: auto;
  }
  .c-app-download__inner {
    position: static;
    height: auto;
  }
  .c-app-download__eyebrow, .c-app-download__caption, .c-app-download__button {
    opacity: 1;
    filter: none;
  }
  .c-app-download__eyebrow {
    opacity: 0.6;
  }
  .c-app-download__phone {
    transform: none;
  }
}
@media (max-width: 800px) {
  .c-app-download__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(24px, 4vh, 40px);
    padding-top: clamp(72px, 9vh, 96px);
    padding-bottom: clamp(24px, 4vh, 40px);
    text-align: center;
  }
  .c-app-download__copy {
    justify-self: center;
  }
  .c-app-download__phone {
    align-self: start;
    width: min(68vw, 26vh, 280px);
  }
}
/**
 * HeroTitle
 * Fixed, always-on-top layer for the front page's hero heading - lives in
 * the same spot the heading used to occupy inside the first onboarding
 * step (see "components.onboarding-step"), but sits in its own layer so
 * it can react to scroll independently of the content scrolling behind
 * it. HeroTitle.js drives the scroll-linked part (caption blur-out, then
 * title scale-down) by writing inline styles - this file only owns the
 * resting/entrance look, which reveals the whole heading (caption + title)
 * through the same radial mask-reveal used by the onboarding step's copy,
 * just anchored to the top-left and with no start delay. The download CTA
 * shares this same top row, pinned to the right.
 */
.c-hero-title {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  pointer-events: none;
}
.c-hero-title__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-20);
  width: 100%;
  padding-top: clamp(48px, 7vh, 82px);
}
.c-hero-title__heading {
  --hero-title-font-size: clamp(80px, 15vw, 220px);
  width: fit-content;
  max-width: 100%;
  padding-right: calc(var(--hero-title-font-size) * 0.08);
  margin-right: calc(var(--hero-title-font-size) * -0.08);
  opacity: 0;
  mask-image: radial-gradient(circle at 0 0, #000000 0 45%, transparent 72%);
  mask-position: 0 0;
  mask-repeat: no-repeat;
  mask-size: 0 0;
  animation: hero-title-heading-mask-in 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.c-hero-title__cta {
  flex-shrink: 0;
  pointer-events: auto;
}
.c-hero-title__caption {
  font-size: var(--b1);
  font-family: "Roboto", sans-serif;
  line-height: 110%;
  letter-spacing: normal;
  width: 100%;
  margin: 0 0 0.4em;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}
.c-hero-title__title {
  margin: 0 0 0.18em;
  color: #ffffff;
  font-size: var(--hero-title-font-size);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.075em;
  transform-origin: top left;
  will-change: transform;
}

@keyframes hero-title-heading-mask-in {
  to {
    opacity: 1;
    mask-size: 240% 240%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero-title__heading {
    opacity: 1;
    mask-image: none;
    animation: none;
  }
}
@media (max-width: 800px) {
  .c-hero-title__caption {
    text-align: left;
  }
}
/**
 * DownloadButton
 * Frosted-glass capsule CTA, part of the hero title layer (see
 * "components.hero-title"), pinned to the right of its top row. Dark,
 * blurred (backdrop-filter) background with a soft white-to-transparent
 * gradient stroke around the pill.
 *
 * Its padding shrinks continuously as the page scrolls - HeroTitle.js
 * drives this by writing a 0-1 "--cta-padding-t" custom property on
 * scroll, blended here between a fluid "full" and "small" padding pair
 * so the pill keeps behaving responsively at any viewport size.
 */
.c-download-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: var(--b1);
  font-family: "Roboto", sans-serif;
  line-height: 110%;
  letter-spacing: normal;
  --cta-padding-t: 0;
}
.c-download-button {
  --cta-padding-y-full: 16px;
}
@media (min-width: 1920px) {
  .c-download-button {
    --cta-padding-y-full: max(1rem, 0.5vw + 0.4rem);
  }
}
.c-download-button {
  --cta-padding-x-full: 30px;
}
@media (min-width: 1920px) {
  .c-download-button {
    --cta-padding-x-full: max(1.88rem, 0.94vw + 0.75rem);
  }
}
.c-download-button {
  --cta-padding-y-small: 10px;
}
@media (min-width: 1920px) {
  .c-download-button {
    --cta-padding-y-small: max(0.63rem, 0.31vw + 0.25rem);
  }
}
.c-download-button {
  --cta-padding-x-small: 20px;
}
@media (min-width: 1920px) {
  .c-download-button {
    --cta-padding-x-small: max(1.25rem, 0.63vw + 0.5rem);
  }
}
.c-download-button {
  padding-block: calc(var(--cta-padding-y-full) - (var(--cta-padding-y-full) - var(--cta-padding-y-small)) * var(--cta-padding-t));
  padding-inline: calc(var(--cta-padding-x-full) - (var(--cta-padding-x-full) - var(--cta-padding-x-small)) * var(--cta-padding-t));
  border-radius: 999px;
  background-color: rgba(32, 32, 36, 0.55);
  backdrop-filter: blur(20px);
  /* stylelint-disable-next-line property-no-vendor-prefix -- no autoprefixer step in the build, Safari still needs this */
  -webkit-backdrop-filter: blur(20px);
  transition: background-color 0.2s;
  /**
   * Gradient stroke, white fading to transparent - a plain
   * "border: 1px solid gradient" doesn't support radius, so the
   * border is instead painted as a padding-boxed gradient layer,
   * masked down to a ring with mask-composite.
   */
}
.c-download-button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%);
  /* stylelint-disable property-no-vendor-prefix -- no autoprefixer step in the build, Safari still needs these */
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  /* stylelint-enable property-no-vendor-prefix */
  mask-composite: exclude;
  pointer-events: none;
}
@media (min-width: 1140px) and (hover: none) {
  .c-download-button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-download-button:active {
    /* 1 */
    background-color: rgba(32, 32, 36, 0.75);
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-download-button:hover {
    /* 2 */
    background-color: rgba(32, 32, 36, 0.75);
  }
}
.c-download-button:active, .c-download-button:focus {
  /* 1 */
}
.c-download-button:active:not(:disabled):focus-visible, .c-download-button:focus:not(:disabled):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}

@media (prefers-reduced-motion: reduce) {
  .c-download-button {
    transition: none;
  }
}
/**
 * DetailWindow
 * Fixed, frosted-glass panel docked below the sticky header, on either
 * edge of the viewport, showing extra detail copy for its onboarding
 * step. Sits in its own always-on-top layer (above the card scene,
 * navigation, and every onboarding step's own copy) so it's never
 * clipped or covered by them.
 *
 * DetailWindow.js reads the same "how close is this step's section to
 * the viewport's centre" signal OnboardingCopy.js uses for the headline
 * words - so the panel opens and closes in lockstep with its step's
 * copy - and drives opacity/transform/filter from it every scroll
 * frame, sliding the panel in from whichever edge it's docked to. Once
 * a panel is fully faded out it's no longer just invisible, it's also
 * detached from hit-testing (visibility/pointer-events, also toggled by
 * DetailWindow.js) - otherwise every not-currently-shown panel would
 * still sit there, fixed on top of everything, silently swallowing
 * hover/clicks meant for whatever's underneath.
 *
 * The text inside types in after the panel has settled, character by
 * character: each glyph (see "__char" below) is its own inline element,
 * and DetailWindow.js toggles ".is-typed" on them from the enter half of
 * the scroll signal (panel first, then typing - see panelSettle). On
 * the way out the fully-typed panel just fades as one piece. Untyped
 * characters are display:none so they drop out of flow, which leaves
 * the blinking caret (a sibling at the end of the paragraph) sitting
 * right after whatever's been typed so far.
 *
 * The hover feedback below (lighten + a small nudge towards the centre
 * of the viewport) is driven by "margin", not "transform" - transform is
 * DetailWindow.js's property to write every scroll frame, and a CSS
 * hover transform on the same element would just get overwritten by it
 * on the next frame.
 */
.c-detail-window {
  position: fixed;
  top: clamp(96px, 15vh, 148px);
  z-index: 300;
  max-width: min(360px, 86vw);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform, filter;
  padding: var(--s-20);
  background-color: rgba(58, 58, 64, 0.55);
  backdrop-filter: blur(20px);
  transition: background-color 0.2s, margin 0.2s;
  /* stylelint-disable-next-line property-no-vendor-prefix -- no autoprefixer step in the build, Safari still needs this */
  -webkit-backdrop-filter: blur(20px);
  /**
   * Gradient stroke, white fading to transparent - see
   * _components.download-button.scss for why this is painted as a
   * masked gradient layer rather than a plain border.
   */
}
.c-detail-window::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.425), rgba(255, 255, 255, 0) 60%);
  /* stylelint-disable property-no-vendor-prefix -- no autoprefixer step in the build, Safari still needs these */
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  /* stylelint-enable property-no-vendor-prefix */
  mask-composite: exclude;
  pointer-events: none;
}
.c-detail-window--left {
  left: 8.3333333333%;
}
@media (max-width: 1140px) {
  .c-detail-window--left {
    left: 4.1666666667%;
  }
}
@media (min-width: 1140px) and (hover: none) {
  .c-detail-window--left {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-detail-window--left:active {
    /* 1 */
    margin-left: 8px;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-detail-window--left:hover {
    /* 2 */
    margin-left: 8px;
  }
}
.c-detail-window--right {
  right: 8.3333333333%;
}
@media (max-width: 1140px) {
  .c-detail-window--right {
    right: 4.1666666667%;
  }
}
@media (min-width: 1140px) and (hover: none) {
  .c-detail-window--right {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-detail-window--right:active {
    /* 1 */
    margin-right: 8px;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-detail-window--right:hover {
    /* 2 */
    margin-right: 8px;
  }
}
@media (min-width: 1140px) and (hover: none) {
  .c-detail-window {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-detail-window:active {
    /* 1 */
    background-color: rgba(78, 78, 86, 0.65);
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-detail-window:hover {
    /* 2 */
    background-color: rgba(78, 78, 86, 0.65);
  }
}
.c-detail-window__text {
  margin: 0;
  color: #ffffff;
  font-size: var(--b1);
  font-family: "Roboto", sans-serif;
  line-height: 110%;
  letter-spacing: normal;
  font-family: "Courier New", Courier, monospace;
  line-height: 1.5;
}
.c-detail-window__char {
  display: none;
}
.c-detail-window__char--highlight {
  color: #ff6eb4;
  font-weight: 700;
}
.c-detail-window__char.is-typed {
  display: inline;
}
.c-detail-window__caret {
  display: none;
  width: 0.55em;
  height: 1.05em;
  margin-left: 1px;
  background-color: #ff6eb4;
  vertical-align: -0.15em;
}
.c-detail-window__caret.is-active {
  display: inline-block;
  animation: detail-window-caret-blink 1.05s steps(1, end) infinite;
}

@keyframes detail-window-caret-blink {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-detail-window {
    position: static;
    max-width: none;
    opacity: 1;
    filter: none;
    margin: var(--s-20) auto;
    pointer-events: auto;
    transition: none;
  }
  .c-detail-window__char {
    display: inline;
  }
  .c-detail-window__caret {
    display: none;
    animation: none;
  }
}
/**
 * ScrollIndicator
 * Fixed, always-on-top layer that draws a dashed vertical rail down the
 * left edge of the viewport - a stylised stand-in for a scrollbar.
 *
 * The dashes are a single repeating background (no per-dash DOM nodes),
 * and the scroll-driven "glow" is a mask-image gradient centred on the
 * --scroll-progress custom property that ScrollIndicator.js updates on
 * scroll - so a scroll event only ever touches one CSS variable instead
 * of looping over every dash.
 */
.c-scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 260;
  height: 100vh;
  pointer-events: none;
}
.c-scroll-indicator__track {
  width: 20px;
  height: 100%;
  background-image: repeating-linear-gradient(to bottom, #ffffff 0, #ffffff 2px, transparent 2px, transparent 8px);
  mask-image: radial-gradient(ellipse 100% 16% at 50% var(--scroll-progress, 0%), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.867) 25%, rgba(0, 0, 0, 0.575) 50%, rgba(0, 0, 0, 0.283) 75%, rgba(0, 0, 0, 0.15) 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 16% at 50% var(--scroll-progress, 0%), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.867) 25%, rgba(0, 0, 0, 0.575) 50%, rgba(0, 0, 0, 0.283) 75%, rgba(0, 0, 0, 0.15) 100%);
}

/**
 * DeveloperCredit
 * Fixed, always-on-top tab pinned to the top of the right edge of the
 * viewport - a small white rectangle carrying a "developed by"
 * credit. `writing-mode: vertical-lr` does double duty here: it
 * turns the box's own layout sideways (so it naturally shrink-wraps to
 * the text as a tall, narrow tab hugging the edge, rather than us
 * having to fake that with a manual transform), and - combined with
 * `text-orientation: sideways` - it also rotates the copy itself 90deg
 * for free. `vertical-lr` + `sideways` (rather than the more common
 * `vertical-rl` + `mixed`) rotates counter-clockwise instead of
 * clockwise; the inline axis is still vertical either way, so nothing
 * else below cares which one is used.
 *
 * The copy is authored letter by letter (see the partial) rather than
 * as one text node, because collapsing down to "FLB" is animated per
 * letter rather than swapped as a block: every letter except the "F",
 * "L", and first "B" in "FLABBERGAST" ("__letter--keep" below) shrinks
 * its own box down to nothing once DeveloperCredit.js adds
 * "is-condensed" (past a small scroll threshold), which is what makes
 * the kept letters end up reading "FLB" - they never move or change
 * themselves, their neighbours just shrink away around them. Since
 * "inline-size" tracks the writing-mode's inline (here, vertical) axis
 * rather than a fixed physical dimension, the same rule collapses each
 * letter correctly however the tab ends up oriented. Hovering always
 * reddens the copy - and, while condensed, also overrides every letter
 * back to its roomy, uncollapsed state. It's a real link out to
 * Flabbergast's own site (see the partial), hence the anchor-specific
 * resets ("display", "text-decoration") below.
 */
.c-developer-credit {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 261;
  display: block;
  writing-mode: vertical-lr;
  text-orientation: sideways;
  padding: 32px 14px 26px;
  background-color: #ffffff;
  text-decoration: none;
  transition: padding 0.35s ease;
  will-change: padding;
}
@media (min-width: 1140px) and (hover: none) {
  .c-developer-credit {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-developer-credit:active {
    /* 1 */
  }
  .c-developer-credit:active .c-developer-credit__text {
    color: #fb0000;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-developer-credit:hover {
    /* 2 */
  }
  .c-developer-credit:hover .c-developer-credit__text {
    color: #fb0000;
  }
}
.c-developer-credit__text {
  display: block;
  color: #000000;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.c-developer-credit__letter {
  display: inline-block;
  overflow: hidden;
  inline-size: 15px;
  opacity: 1;
  vertical-align: top;
  transition: inline-size 0.35s ease, opacity 0.25s ease;
  will-change: inline-size, opacity;
}
.c-developer-credit.is-condensed {
  padding: 12px 10px 8px;
}
.c-developer-credit.is-condensed .c-developer-credit__letter:not(.c-developer-credit__letter--keep) {
  inline-size: 0;
  opacity: 0;
}
@media (min-width: 1140px) and (hover: none) {
  .c-developer-credit.is-condensed {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-developer-credit.is-condensed:active {
    /* 1 */
    padding: 32px 14px 26px;
  }
  .c-developer-credit.is-condensed:active .c-developer-credit__letter:not(.c-developer-credit__letter--keep) {
    inline-size: 15px;
    opacity: 1;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-developer-credit.is-condensed:hover {
    /* 2 */
    padding: 32px 14px 26px;
  }
  .c-developer-credit.is-condensed:hover .c-developer-credit__letter:not(.c-developer-credit__letter--keep) {
    inline-size: 15px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-developer-credit {
    transition: none;
  }
  .c-developer-credit__text {
    transition: none;
  }
  .c-developer-credit__letter {
    transition: none;
  }
}
/**
 * MobileNotice
 * Full-viewport "under development" screen shown only below 600px wide
 * (see the @media block at the bottom of this file) - hidden entirely
 * above that width via "display: none", so it costs nothing on desktop
 * and needs no JS to toggle. Sits above every other layer (including
 * "modal", the highest existing z-index key) and blocks all pointer/
 * touch interaction with the real page underneath it.
 */
.c-mobile-notice {
  display: none;
}

@media (max-width: 600px) {
  .c-mobile-notice {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--s-30);
    background-color: #000000;
    text-align: center;
  }
  .c-mobile-notice__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-20);
    max-width: 340px;
  }
  .c-mobile-notice__caption {
    font-size: var(--b1);
    font-family: "Roboto", sans-serif;
    line-height: 110%;
    letter-spacing: normal;
    margin: 0;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .c-mobile-notice__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(48px, 16vw, 72px);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.04em;
  }
  .c-mobile-notice__badge {
    font-size: var(--b2);
    font-family: "Roboto", sans-serif;
    line-height: 133%;
    letter-spacing: -0.0066666667em;
    margin: 0;
    padding: 0.5em 1em;
    border: 1px solid #f7b334;
    border-radius: 999px;
    color: #f7b334;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .c-mobile-notice__message {
    font-size: var(--b1);
    font-family: "Roboto", sans-serif;
    line-height: 110%;
    letter-spacing: normal;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
  }
  body:has(.c-mobile-notice) {
    overflow: hidden;
  }
}
/**
 * Forms
 */
/*
 * Form
 * Custom form styles and resets
 * usage: form.c-form
 */
.c-form {
  display: block;
  width: 100%;
  /**
   * Fieldset flex wrapper
   * wraps fieldset to achieve multiple column inputs
   * usage: .c-form__fieldset-flex-wrapper > .c-form__fieldset + .c-form__fieldset
   */
}
.c-form__fieldset-flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-30);
}
@media (max-width: 800px) {
  .c-form__fieldset-flex-wrapper {
    margin-bottom: var(--s-30);
    display: block;
  }
  .c-form__fieldset-flex-wrapper:last-child {
    margin-bottom: 0;
  }
}
.c-form__fieldset-flex-wrapper .c-form__fieldset:last-child {
  margin-bottom: var(--s-30);
}
.c-form {
  /**
   * Fieldset
   * 1. When wrapped with flex wrapper make the columns equal width
   * usage: .c-form__fieldset
   */
}
.c-form__fieldset {
  padding: 0;
  margin: 0 0 var(--s-30);
  border-width: 0;
}
.c-form__fieldset:last-child {
  margin-bottom: 0;
}
.c-form__fieldset:last-of-type {
  margin-bottom: 0;
}
.c-form__fieldset {
  /* 1 */
}
.c-form__fieldset-flex-wrapper .c-form__fieldset {
  flex: 1 0 0;
}
.c-form__fieldset--flex {
  display: flex;
  gap: var(--s-15);
}
.c-form {
  /**
  * Label and legend
  * usage: .c-form__fieldset > .c-form__label
  * usage: .c-form__fieldset > .c-form__legend
  */
}
.c-form__label, .c-form__legend {
  display: block;
  margin: 0 0 var(--s-10);
  color: #000000;
  cursor: pointer;
  width: 100%;
}
.c-form {
  /**
   * Input resets and styling
   */
}
.c-form__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--s-15);
  margin: 0;
  border: 1px solid #000000;
  background-color: #ffffff;
  box-shadow: none;
  outline: none;
  color: #000000;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: var(--b0);
  font-family: "Roboto", sans-serif;
  line-height: 144%;
  letter-spacing: normal;
}
.c-form__input {
  height: 50px;
}
@media (min-width: 1920px) {
  .c-form__input {
    height: max(3.13rem, 1.56vw + 1.25rem);
  }
}
.c-form__input {
  border-radius: 10px;
}
@media (min-width: 1920px) {
  .c-form__input {
    border-radius: max(0.63rem, 0.31vw + 0.25rem);
  }
}
@media (min-width: 1140px) and (hover: none) {
  .c-form__input {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-form__input:active {
    /* 1 */
    outline: 0;
    box-shadow: none;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-form__input:hover {
    /* 2 */
    outline: 0;
    box-shadow: none;
  }
}
.c-form__input:focus {
  outline: 0;
  box-shadow: none;
}
.c-form__input:disabled {
  outline: 0;
  box-shadow: none;
  pointer-events: none;
}
.c-form__input:-webkit-autofill, .c-form__input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}
.c-form__input[data-autocompleted] {
  background-color: transparent !important;
}
.c-form__input {
  /**
   * Input placeholders
   * 1. Chrome, Firefox, Opera, Safari 10.1+
   * 2. Firefox needs opacity reset
   * 3. Internet Explorer 10-11
   * 4. Microsoft Edge
   */
  /* 1 */
}
.c-form__input::placeholder {
  color: rgba(0, 0, 0, 0.5);
  /* 2 */
  opacity: 1;
}
.c-form__input {
  /* 3 */
}
.c-form__input:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.c-form__input {
  /* 4 */
}
.c-form__input::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.c-form {
  /**
   * Error state for input
   * Add border to show which input has error
   * 1. Hover state
   * 2. Focus state - disable outline and enable border for better design
   * 3. State when input is not empty
   * usage: .c-form__input.c-form__input--error
   */
}
.c-form__input--error {
  border-color: #ff0000;
  /* 1 */
}
@media (min-width: 1140px) and (hover: none) {
  .c-form__input--error {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-form__input--error:active {
    /* 1 */
    border-color: #ff0000;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-form__input--error:hover {
    /* 2 */
    border-color: #ff0000;
  }
}
.c-form__input--error {
  /* 2 */
}
.c-form__input--error:focus {
  border-color: #ff0000;
}
.c-form {
  /**
   * Password input
   * Modifier for password inputs
   * Compensate padding for password reveal icon
   * usage: .c-form__input.c-form__input--password
   */
}
.c-form__input--password {
  padding-right: var(--s-60);
}
.c-form {
  /**
   * Search input
   * Modifier for search inputs
   * Compensate padding for submit button
   * usage: .c-form__input.c-form__input--search
   */
}
.c-form__input--search {
  padding-right: var(--s-60);
}
.c-form {
  /**
   * Newsletter input
   * Modifier for newsletter inputs
   * 1. Hover state
   * 2. Focus state
   * 3. Disabled state
   * 4. State when input is not empty
   * usage: .c-form__input.c-form__input--newsletter
   */
}
.c-form__input--newsletter {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-color: #ffffff;
  padding-left: 0;
  background-color: transparent;
  color: #ffffff;
  border-radius: 0;
}
.c-form__input--newsletter {
  height: 40px;
}
@media (min-width: 1920px) {
  .c-form__input--newsletter {
    height: max(2.5rem, 1.25vw + 1rem);
  }
}
.c-form__input--newsletter {
  /**
   * Input placeholders
   * 1. Chrome, Firefox, Opera, Safari 10.1+
   * 2. Firefox needs opacity reset
   * 3. Internet Explorer 10-11
   * 4. Microsoft Edge
   */
  /* 1 */
}
.c-form__input--newsletter::placeholder {
  color: rgba(255, 255, 255, 0.5);
  /* 2 */
  opacity: 1;
}
.c-form__input--newsletter {
  /* 3 */
}
.c-form__input--newsletter:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.c-form__input--newsletter {
  /* 4 */
}
.c-form__input--newsletter::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.c-form {
  /**
   * Textarea input
   * Modifier for textarea inputs
   * Remove resizing option from textarea
   * Add height or min height to textarea
   * Needs to be combined with .c-form__input for reset
   * usage: .c-form__input.c-form__input--textarea
   */
}
.c-form__input--textarea {
  padding-top: var(--s-15);
  padding-bottom: var(--s-15);
  resize: none;
}
.c-form__input--textarea {
  min-height: 160px;
}
@media (min-width: 1920px) {
  .c-form__input--textarea {
    min-height: max(10rem, 5vw + 4rem);
  }
}
.c-form__input--textarea {
  height: 160px;
}
@media (min-width: 1920px) {
  .c-form__input--textarea {
    height: max(10rem, 5vw + 4rem);
  }
}
.c-form {
  /**
   * Select input
   * Modifier for native select inputs without using third party lib's
   * Compensate padding for indicator icon
   * usage: .c-form__input.c-form__input--select
   */
}
.c-form__input--select {
  padding-right: var(--s-40);
  cursor: pointer;
}
.c-form {
  /**
   * Inline input
   * Modifier for inputs which appear inline
   * usage: .c-form__input.c-form__input--inline
   */
}
.c-form__input--inline {
  display: block;
  text-align: center;
  padding-left: var(--s-10);
  padding-right: var(--s-10);
  font-size: var(--b1);
  font-family: "Roboto", sans-serif;
  line-height: 110%;
  letter-spacing: normal;
}
.c-form__input--inline {
  width: 70px;
}
@media (min-width: 1920px) {
  .c-form__input--inline {
    width: max(4.38rem, 2.19vw + 1.75rem);
  }
}
.c-form__input--inline {
  height: 40px;
}
@media (min-width: 1920px) {
  .c-form__input--inline {
    height: max(2.5rem, 1.25vw + 1rem);
  }
}
.c-form {
  /**
   * Checkbox and radio common style
   * 1. Hide default HTML input
   * 2. Single checkbox wrapper
   * 3. Single radio wrapper
   * 4. Reset line height on fake checkbox and radio
   * 5. Style links inside labels
   * 6. Wrapper around radio buttons to create flexbox grid
   */
  /* 1 */
}
.c-form__checkbox, .c-form__radio {
  position: absolute;
  z-index: -1;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  box-sizing: border-box;
}
.c-form {
  /* 2 */
}
.c-form__checkbox-wrapper {
  margin-bottom: var(--s-15);
}
.c-form__checkbox-wrapper:last-child {
  margin-bottom: 0;
}
.c-form {
  /* 3 */
}
.c-form {
  /* 4 */
}
.c-form__checkbox-label, .c-form__radio-label {
  box-sizing: border-box;
}
.c-form__checkbox-label:before, .c-form__checkbox-label:after, .c-form__radio-label:before, .c-form__radio-label:after {
  box-sizing: border-box;
  line-height: 1;
  transform-origin: center;
}
.c-form__checkbox-label, .c-form__radio-label {
  /* 5 */
}
.c-form__checkbox-label a, .c-form__radio-label a {
  text-decoration: underline;
}
.c-form {
  /* 6 */
}
.c-form__radio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-15);
}
@media (max-width: 1140px) {
  .c-form__radio-grid {
    gap: var(--s-10);
  }
}
.c-form {
  /**
   * Custom checkbox
   * 1. Custom checkbox holder
   * 2. Custom checkbox checked indicator
   * 3. Hover state
   * 4. Focus state
   * 5. Checked state - size of the indicator can be controlled with scale ratio
   * 6. Disabled state
   * usage: .c-form__fieldset > .c-form__checkbox-wrapper > .c-form__checkbox + .c-form__checkbox-label
   */
}
.c-form__checkbox + .c-form__checkbox-label {
  padding-left: var(--s-30);
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 1.3;
}
@media (max-width: 1140px) {
  .c-form__checkbox + .c-form__checkbox-label {
    padding-left: var(--s-40);
  }
}
.c-form__checkbox + .c-form__checkbox-label {
  /* 1, 2 */
}
.c-form__checkbox + .c-form__checkbox-label:before, .c-form__checkbox + .c-form__checkbox-label:after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.c-form__checkbox + .c-form__checkbox-label:before, .c-form__checkbox + .c-form__checkbox-label:after {
  width: 20px;
}
@media (min-width: 1920px) {
  .c-form__checkbox + .c-form__checkbox-label:before, .c-form__checkbox + .c-form__checkbox-label:after {
    width: max(1.25rem, 0.63vw + 0.5rem);
  }
}
.c-form__checkbox + .c-form__checkbox-label:before, .c-form__checkbox + .c-form__checkbox-label:after {
  height: 20px;
}
@media (min-width: 1920px) {
  .c-form__checkbox + .c-form__checkbox-label:before, .c-form__checkbox + .c-form__checkbox-label:after {
    height: max(1.25rem, 0.63vw + 0.5rem);
  }
}
.c-form__checkbox + .c-form__checkbox-label {
  /* 1 */
}
.c-form__checkbox + .c-form__checkbox-label:before {
  content: "";
  background-color: #ffffff;
  border: 1px solid #000000;
}
.c-form__checkbox + .c-form__checkbox-label:before {
  border-radius: 5px;
}
@media (min-width: 1920px) {
  .c-form__checkbox + .c-form__checkbox-label:before {
    border-radius: max(0.31rem, 0.16vw + 0.13rem);
  }
}
.c-form__checkbox + .c-form__checkbox-label {
  /* 2 */
}
.c-form__checkbox + .c-form__checkbox-label:after {
  content: "";
  transform: scale(0);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMy44MjIgNS4xNzggMS40NjUgMi44MjEuMjg2IDRsMy41MzYgMy41MzYgNS44OTItNS44OTNMOC41MzYuNDY0IDMuODIyIDUuMTc4WiIvPjwvc3ZnPg==");
}
.c-form__checkbox {
  /* 3 */
}
@media (min-width: 1140px) and (hover: none) {
  .c-form__checkbox {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-form__checkbox:active {
    /* 1 */
  }
  .c-form__checkbox:active:not(:checked) + .c-form__checkbox-label:before {
    outline: 0;
    border-color: #000000;
    background-color: #ffffff;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-form__checkbox:hover {
    /* 2 */
  }
  .c-form__checkbox:hover:not(:checked) + .c-form__checkbox-label:before {
    outline: 0;
    border-color: #000000;
    background-color: #ffffff;
  }
}
.c-form__checkbox {
  /* 4 */
}
.c-form__checkbox:focus:not(:checked) + .c-form__checkbox-label:before {
  outline: 0;
  border-color: #000000;
  background-color: #ffffff;
}
.c-form__checkbox {
  /* 5 */
}
.c-form__checkbox:checked + .c-form__checkbox-label:before {
  outline: 0;
  border-color: #000000;
  background-color: #000000;
}
.c-form__checkbox:checked + .c-form__checkbox-label:after {
  transform: scale(0.5);
}
.c-form__checkbox {
  /* 6 */
}
.c-form__checkbox:disabled + .c-form__checkbox-label {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}
.c-form__checkbox:disabled {
  /* 8 */
}
.c-form {
  /**
   * Custom radio
   * 1. Radio button label that holds the design of the radio buttons
   * 2. Hover state
   * 3. Focus state
   * 4. Checked state - size of the indicator can be controlled with scale ratio
   * 5. Disabled state
   * usage: .c-form__fieldset > .c-form__legend + .c-form__radio-grid > .c-form__radio-wrapper > .c-form__radio + .c-form__radio-label
   */
}
.c-form__radio {
  /* 1 */
}
.c-form__radio + .c-form__radio-label {
  color: #000000;
  border: 1px solid #000000;
  background-color: #ffffff;
  box-shadow: none;
  outline: none;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--s-15);
  cursor: pointer;
  font-size: var(--b0);
  font-family: "Roboto", sans-serif;
  line-height: 144%;
  letter-spacing: normal;
}
.c-form__radio + .c-form__radio-label {
  border-radius: 10px;
}
@media (min-width: 1920px) {
  .c-form__radio + .c-form__radio-label {
    border-radius: max(0.63rem, 0.31vw + 0.25rem);
  }
}
@media (max-width: 1140px) {
  .c-form__radio + .c-form__radio-label {
    padding: var(--s-10);
  }
}
.c-form__radio + .c-form__radio-label .u-icon {
  margin-right: var(--s-15);
  font-size: 1.4em;
}
.c-form__radio {
  /* 2 */
}
@media (min-width: 1140px) and (hover: none) {
  .c-form__radio {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-form__radio:active {
    /* 1 */
  }
  .c-form__radio:active:not(:checked) + .c-form__radio-label {
    outline: 0;
    box-shadow: none;
    color: #000000;
    border-color: #000000;
    background-color: #ffffff;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-form__radio:hover {
    /* 2 */
  }
  .c-form__radio:hover:not(:checked) + .c-form__radio-label {
    outline: 0;
    box-shadow: none;
    color: #000000;
    border-color: #000000;
    background-color: #ffffff;
  }
}
.c-form__radio {
  /* 3 */
}
.c-form__radio:focus:not(:checked) + .c-form__radio-label {
  outline: 0;
  box-shadow: none;
  color: #000000;
  border-color: #000000;
  background-color: #ffffff;
}
.c-form__radio {
  /* 4 */
}
.c-form__radio:checked + .c-form__radio-label {
  outline: 0;
  box-shadow: none;
  color: #ffffff;
  border-color: #000000;
  background-color: #000000;
}
.c-form__radio {
  /* 5 */
}
.c-form {
  /**
   * Form errors
   * 1. Wrapper styles
   * 2. Title styles
   * 3. List styles
   * usage: .c-form__errors > .c-form__errors-title + .c-form__errors-list
   */
  /* 1 */
}
.c-form__errors {
  margin-bottom: var(--s-30);
  color: #ff0000;
}
.c-form {
  /* 2 */
}
.c-form {
  /* 3 */
}
.c-form__errors-list {
  margin-top: var(--s-15);
}
.c-form__errors-list li {
  margin-bottom: var(--s-5);
}
.c-form__errors-list li:last-child {
  margin-bottom: 0;
}
.c-form__errors-list a {
  text-decoration: underline;
}
.c-form {
  /**
   * Form success
   * 1. Wrapper styles
   * 2. Title styles
   * 3. Message styles
   * 4. CTA styles
   * 5. Newsletter success styles
   * usage: .c-form__success > .c-form__success-message
   * usage: .c-form__success > .c-form__success-title + .c-form__success-message + .c-form__success-cta
   */
  /* 1 */
}
.c-form__success {
  margin-bottom: var(--s-30);
}
.c-form__success:last-child {
  margin-bottom: 0;
}
.c-form {
  /* 2 */
}
.c-form {
  /* 3 */
}
.c-form__success-message {
  margin-top: var(--s-15);
}
.c-form__success-message:first-child, .c-form__success-message:only-child {
  margin-top: 0;
}
.c-form {
  /* 4 */
}
.c-form__success-cta {
  margin-top: var(--s-15);
}
.c-form__success-cta:first-child, .c-form__success-cta:only-child {
  margin-top: 0;
}
.c-form {
  /* 5 */
}
.c-form__success--newsletter {
  margin-top: var(--s-5);
  margin-bottom: 0;
}
.c-form {
  /**
   * Validation message
   * Styles a validation message displayed bellow the input with error
   * usage: .c-form__input.c-form__input--error + .c-form__validation-message
   */
}
.c-form__validation-message {
  margin-top: var(--s-5);
  color: #ff0000;
}
.c-form {
  /**
   * Password wrapper
   * Used as wrapper for password input and show/hide toggle button
   * 1. Styles for show/hide toggle button
   * 2. Styles for show/hide toggle button when password is displayed as text
   * usage: .c-form__password-wrapper > .c-form__input.c-form__input--password + .c-form__password-toggle
   */
}
.c-form__password-wrapper {
  position: relative;
}
.c-form {
  /* 1 */
}
.c-form__password-toggle {
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  text-transform: none;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  width: auto;
  height: auto;
  background: transparent;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.c-form__password-toggle:hover, .c-form__password-toggle:focus, .c-form__password-toggle:active {
  outline: none;
}
.c-form__password-toggle:active, .c-form__password-toggle:focus {
  /* 1 */
}
.c-form__password-toggle:active:not(:disabled):focus-visible, .c-form__password-toggle:focus:not(:disabled):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}
.c-form__password-toggle {
  font-size: 20px;
}
@media (min-width: 1920px) {
  .c-form__password-toggle {
    font-size: max(1.25rem, 0.63vw + 0.5rem);
  }
}
.c-form__password-toggle {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-left: var(--s-15);
  padding-right: var(--s-15);
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
@media (min-width: 1140px) and (hover: none) {
  .c-form__password-toggle {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-form__password-toggle:active {
    /* 1 */
    color: #000000;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-form__password-toggle:hover {
    /* 2 */
    color: #000000;
  }
}
.c-form__password-toggle:active, .c-form__password-toggle:focus {
  /* 1 */
}
.c-form__password-toggle:active:not(:disabled):focus-visible, .c-form__password-toggle:focus:not(:disabled):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}
@media (max-width: 800px) {
  .c-form__password-toggle {
    font-size: 16px;
  }
}
.c-form__password-toggle {
  /* 2 */
}
.has-password-visible .c-form__password-toggle {
  color: #000000;
}
.c-form {
  /**
   * Search wrapper
   * Used as wrapper for search input, reset and submit button
   * 1. Styles for search actions wrapper that contains reset and submit button
   * 2. Styles for reset button
   * 3. Styles for submit button
   * usage: .c-form__search-wrapper > .c-form__input.c-form__input--search + .c-form__search-actions > .c-form__search-reset + .c-form__search-submit
   */
}
.c-form__search-wrapper {
  position: relative;
}
.c-form {
  /* 1 */
}
.c-form__search-actions {
  position: absolute;
  top: 50%;
  right: var(--s-15);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
}
.c-form {
  /* 2, 3 */
}
.c-form__search-reset, .c-form__search-submit {
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  text-transform: none;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  width: auto;
  height: auto;
  background: transparent;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.c-form__search-reset:hover, .c-form__search-reset:focus, .c-form__search-reset:active, .c-form__search-submit:hover, .c-form__search-submit:focus, .c-form__search-submit:active {
  outline: none;
}
.c-form__search-reset:active, .c-form__search-reset:focus, .c-form__search-submit:active, .c-form__search-submit:focus {
  /* 1 */
}
.c-form__search-reset:active:not(:disabled):focus-visible, .c-form__search-reset:focus:not(:disabled):focus-visible, .c-form__search-submit:active:not(:disabled):focus-visible, .c-form__search-submit:focus:not(:disabled):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}
.c-form {
  /* 2 */
}
.c-form__search-reset {
  display: none;
}
.c-form__search-reset.is-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-form {
  /* 3 */
}
.c-form {
  /**
   * Newsletter wrapper
   * Used as wrapper for newsletter input and submit button
   * 1. Styles for submit button
   * usage: .c-form__newsletter-wrapper > .c-form__input.c-form__input--newsletter + .c-form__newsletter-submit
   */
}
.c-form__newsletter-wrapper {
  position: relative;
  display: flex;
}
.c-form {
  /* 1 */
}
.c-form__newsletter-submit {
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  text-transform: none;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  width: auto;
  height: auto;
  background: transparent;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.c-form__newsletter-submit:hover, .c-form__newsletter-submit:focus, .c-form__newsletter-submit:active {
  outline: none;
}
.c-form__newsletter-submit:active, .c-form__newsletter-submit:focus {
  /* 1 */
}
.c-form__newsletter-submit:active:not(:disabled):focus-visible, .c-form__newsletter-submit:focus:not(:disabled):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}
.c-form__newsletter-submit {
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  background-color: #000000;
  color: #ffffff;
  flex-shrink: 0;
  flex-grow: 0;
  padding-left: var(--s-10);
  padding-right: var(--s-10);
}
@media (min-width: 1140px) and (hover: none) {
  .c-form__newsletter-submit {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-form__newsletter-submit:active {
    /* 1 */
    background-color: #ffffff;
    color: #000000;
  }
}
@media (min-width: 1140px) and (hover: hover), (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
  .c-form__newsletter-submit:hover {
    /* 2 */
    background-color: #ffffff;
    color: #000000;
  }
}
.c-form {
  /**
   * Select wrapper
   * Used as wrapper for select input and fake indicator
   * 1. Styles for indicator
   * usage: .c-form__select-wrapper > .c-form__input.c-form__input--select + .c-form__select-indicator
   */
}
.c-form__select-wrapper {
  position: relative;
  cursor: pointer;
}
.c-form {
  /* 1 */
}
.c-form__select-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--s-15);
  transform: translateY(-50%);
  font-size: 0.75em;
  pointer-events: none;
}

/**
 * Utilities
 */
/**
 * Utilities
 */
.is-hidden {
  display: none !important;
}

.is-visually-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

.is-visually-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

.is-disabled {
  pointer-events: none !important;
}

@media (max-width: 800px) {
  .is-mobile-hidden {
    display: none !important;
  }
}

.is-mobile-visible {
  display: none !important;
}
@media (max-width: 800px) {
  .is-mobile-visible {
    display: block !important;
  }
}

.is-offscreen {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

/**
 * Typography utility classes
 */
.u-a5 {
  font-size: var(--a5);
  font-family: "Roboto", sans-serif;
  line-height: 100%;
  letter-spacing: normal;
}

.u-a4 {
  font-size: var(--a4);
  font-family: "Roboto", sans-serif;
  line-height: 107%;
  letter-spacing: -0.02078125em;
}

.u-a3 {
  font-size: var(--a3);
  font-family: "Roboto", sans-serif;
  line-height: 116%;
  letter-spacing: -0.0208333333em;
}

.u-a2 {
  font-size: var(--a2);
  font-family: "Roboto", sans-serif;
  line-height: 112%;
  letter-spacing: -0.0195121951em;
}

.u-a1 {
  font-size: var(--a1);
  font-family: "Roboto", sans-serif;
  line-height: 130%;
  letter-spacing: normal;
}

.u-b0 {
  font-size: var(--b0);
  font-family: "Roboto", sans-serif;
  line-height: 144%;
  letter-spacing: normal;
}

.u-b1 {
  font-size: var(--b1);
  font-family: "Roboto", sans-serif;
  line-height: 110%;
  letter-spacing: normal;
}

.u-b2 {
  font-size: var(--b2);
  font-family: "Roboto", sans-serif;
  line-height: 133%;
  letter-spacing: -0.0066666667em;
}

.u-uppercase {
  text-transform: uppercase;
}

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

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

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

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

.u-underline {
  text-decoration: underline;
}

.u-fw-thin,
.u-fw-100 {
  font-weight: 100;
}

.u-fw-extra-light,
.u-fw-200 {
  font-weight: 200;
}

.u-fw-light,
.u-fw-300 {
  font-weight: 300;
}

.u-fw-regular,
.u-fw-normal,
.u-fw-400 {
  font-weight: 400;
}

.u-fw-medium,
.u-fw-500 {
  font-weight: 500;
}

.u-fw-semi-bold,
.u-fw-600 {
  font-weight: 600;
}

.u-fw-bold,
.u-fw-700 {
  font-weight: 700;
}

.u-fw-extra-bold,
.u-fw-800 {
  font-weight: 800;
}

.u-fw-black,
.u-fw-900 {
  font-weight: 900;
}

.u-pt-0 {
  padding-top: 0;
}

.u-pt-small {
  padding-top: var(--s-60);
}

.u-pt-medium {
  padding-top: var(--s-90);
}

.u-pt-large {
  padding-top: var(--s-125);
}

.u-pb-0 {
  padding-bottom: 0;
}

.u-pb-small {
  padding-bottom: var(--s-60);
}

.u-pb-medium {
  padding-bottom: var(--s-90);
}

.u-pb-large {
  padding-bottom: var(--s-125);
}

/**
 * Ratio
 * create ratio-bound content blocks, to keep media (e.g. images, videos) in their correct aspect ratios
 * 1. default cropping is a 1:1 ratio (i.e. a perfect square)
 * inspiration:
 * https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.ratio.scss
 */
.u-ratio {
  position: relative;
  display: block;
  overflow: hidden;
}
.u-ratio:before {
  display: block;
  padding-bottom: 100%;
  width: 100%;
  content: "";
}

.u-ratio__inner,
.u-ratio > img,
.u-ratio > video,
.u-ratio > iframe,
.u-ratio > embed,
.u-ratio > object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/**
 * Ratio variants
 * generate a series of ratio classes
 * usage:
 * <div class="u-ratio u-ratio--16:9"></div>
 */
.u-ratio--1-2:before {
  padding-bottom: 200%;
}

.u-ratio--2-1:before {
  padding-bottom: 50%;
}

.u-ratio--1-2:before {
  padding-bottom: 200%;
}

.u-ratio--3-1:before {
  padding-bottom: 33.3333333333%;
}

.u-ratio--1-3:before {
  padding-bottom: 300%;
}

.u-ratio--3-2:before {
  padding-bottom: 66.6666666667%;
}

.u-ratio--2-3:before {
  padding-bottom: 150%;
}

.u-ratio--4-3:before {
  padding-bottom: 75%;
}

.u-ratio--3-4:before {
  padding-bottom: 133.3333333333%;
}

.u-ratio--16-9:before {
  padding-bottom: 56.25%;
}

.u-ratio--9-16:before {
  padding-bottom: 177.7777777778%;
}

.u-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.u-content-editor,
.u-rte {
  word-break: break-word;
}
.u-content-editor > h2,
.u-content-editor > h3,
.u-content-editor > h4,
.u-content-editor > h5,
.u-content-editor > h6,
.u-rte > h2,
.u-rte > h3,
.u-rte > h4,
.u-rte > h5,
.u-rte > h6 {
  margin-bottom: var(--s-30);
}
.u-content-editor > h2:last-child,
.u-content-editor > h3:last-child,
.u-content-editor > h4:last-child,
.u-content-editor > h5:last-child,
.u-content-editor > h6:last-child,
.u-rte > h2:last-child,
.u-rte > h3:last-child,
.u-rte > h4:last-child,
.u-rte > h5:last-child,
.u-rte > h6:last-child {
  margin-bottom: 0;
}
.u-content-editor > h2 + h2,
.u-content-editor > h2 + h3,
.u-content-editor > h2 + h4,
.u-content-editor > h2 + h5,
.u-content-editor > h2 + h6,
.u-content-editor > h3 + h2,
.u-content-editor > h3 + h3,
.u-content-editor > h3 + h4,
.u-content-editor > h3 + h5,
.u-content-editor > h3 + h6,
.u-content-editor > h4 + h2,
.u-content-editor > h4 + h3,
.u-content-editor > h4 + h4,
.u-content-editor > h4 + h5,
.u-content-editor > h4 + h6,
.u-content-editor > h5 + h2,
.u-content-editor > h5 + h3,
.u-content-editor > h5 + h4,
.u-content-editor > h5 + h5,
.u-content-editor > h5 + h6,
.u-content-editor > h6 + h2,
.u-content-editor > h6 + h3,
.u-content-editor > h6 + h4,
.u-content-editor > h6 + h5,
.u-content-editor > h6 + h6,
.u-rte > h2 + h2,
.u-rte > h2 + h3,
.u-rte > h2 + h4,
.u-rte > h2 + h5,
.u-rte > h2 + h6,
.u-rte > h3 + h2,
.u-rte > h3 + h3,
.u-rte > h3 + h4,
.u-rte > h3 + h5,
.u-rte > h3 + h6,
.u-rte > h4 + h2,
.u-rte > h4 + h3,
.u-rte > h4 + h4,
.u-rte > h4 + h5,
.u-rte > h4 + h6,
.u-rte > h5 + h2,
.u-rte > h5 + h3,
.u-rte > h5 + h4,
.u-rte > h5 + h5,
.u-rte > h5 + h6,
.u-rte > h6 + h2,
.u-rte > h6 + h3,
.u-rte > h6 + h4,
.u-rte > h6 + h5,
.u-rte > h6 + h6 {
  margin-top: var(--s-60);
}
.u-content-editor > h2 > u,
.u-content-editor > h3 > u,
.u-content-editor > h4 > u,
.u-content-editor > h5 > u,
.u-content-editor > h6 > u,
.u-rte > h2 > u,
.u-rte > h3 > u,
.u-rte > h4 > u,
.u-rte > h5 > u,
.u-rte > h6 > u {
  text-decoration: underline;
}
.u-content-editor > h2 > a,
.u-content-editor > h3 > a,
.u-content-editor > h4 > a,
.u-content-editor > h5 > a,
.u-content-editor > h6 > a,
.u-rte > h2 > a,
.u-rte > h3 > a,
.u-rte > h4 > a,
.u-rte > h5 > a,
.u-rte > h6 > a {
  text-decoration: underline;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.u-content-editor > p,
.u-content-editor > ul,
.u-content-editor > ol,
.u-rte > p,
.u-rte > ul,
.u-rte > ol {
  margin-bottom: var(--s-15);
  font-size: var(--b0);
  font-family: "Roboto", sans-serif;
  line-height: 144%;
  letter-spacing: normal;
}
.u-content-editor > p:last-child,
.u-content-editor > ul:last-child,
.u-content-editor > ol:last-child,
.u-rte > p:last-child,
.u-rte > ul:last-child,
.u-rte > ol:last-child {
  margin-bottom: 0;
}
.u-content-editor > p + h2,
.u-content-editor > p + h3,
.u-content-editor > p + h4,
.u-content-editor > p + h5,
.u-content-editor > p + h6,
.u-content-editor > ul + h2,
.u-content-editor > ul + h3,
.u-content-editor > ul + h4,
.u-content-editor > ul + h5,
.u-content-editor > ul + h6,
.u-content-editor > ol + h2,
.u-content-editor > ol + h3,
.u-content-editor > ol + h4,
.u-content-editor > ol + h5,
.u-content-editor > ol + h6,
.u-rte > p + h2,
.u-rte > p + h3,
.u-rte > p + h4,
.u-rte > p + h5,
.u-rte > p + h6,
.u-rte > ul + h2,
.u-rte > ul + h3,
.u-rte > ul + h4,
.u-rte > ul + h5,
.u-rte > ul + h6,
.u-rte > ol + h2,
.u-rte > ol + h3,
.u-rte > ol + h4,
.u-rte > ol + h5,
.u-rte > ol + h6 {
  margin-top: var(--s-60);
}
.u-content-editor > p > u,
.u-content-editor > ul > u,
.u-content-editor > ol > u,
.u-rte > p > u,
.u-rte > ul > u,
.u-rte > ol > u {
  text-decoration: underline;
}
.u-content-editor > p > a,
.u-content-editor > ul > a,
.u-content-editor > ol > a,
.u-rte > p > a,
.u-rte > ul > a,
.u-rte > ol > a {
  text-decoration: underline;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.u-content-editor > h2,
.u-rte > h2 {
  font-size: var(--a4);
  font-family: "Roboto", sans-serif;
  line-height: 107%;
  letter-spacing: -0.02078125em;
}
.u-content-editor > h3,
.u-rte > h3 {
  font-size: var(--a3);
  font-family: "Roboto", sans-serif;
  line-height: 116%;
  letter-spacing: -0.0208333333em;
}
.u-content-editor > h4,
.u-rte > h4 {
  font-size: var(--a2);
  font-family: "Roboto", sans-serif;
  line-height: 112%;
  letter-spacing: -0.0195121951em;
}
.u-content-editor > h5,
.u-rte > h5 {
  font-size: var(--a1);
  font-family: "Roboto", sans-serif;
  line-height: 130%;
  letter-spacing: normal;
}
.u-content-editor > h6,
.u-rte > h6 {
  font-size: var(--a1);
  font-family: "Roboto", sans-serif;
  line-height: 130%;
  letter-spacing: normal;
}
.u-content-editor li,
.u-rte li {
  margin-bottom: var(--s-15);
}
.u-content-editor li:last-child,
.u-rte li:last-child {
  margin-bottom: 0;
}
.u-content-editor > ul,
.u-rte > ul {
  list-style: disc;
  margin-left: 1em;
  padding-left: 1em;
}
.u-content-editor > ul li,
.u-rte > ul li {
  list-style-position: outside;
  padding-left: 0.5em;
}
.u-content-editor > ol,
.u-rte > ol {
  list-style: decimal inside;
  margin-left: 1em;
  padding-left: 1em;
}
.u-content-editor > ol li,
.u-rte > ol li {
  list-style-position: outside;
  padding-left: 0.5em;
}
.u-content-editor > u,
.u-rte > u {
  text-decoration: underline;
}
.u-content-editor > a,
.u-rte > a {
  text-decoration: underline;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.u-content-editor b,
.u-content-editor strong,
.u-content-editor .wp-block-heading,
.u-rte b,
.u-rte strong,
.u-rte .wp-block-heading {
  font-weight: 700;
}
.u-content-editor b > u,
.u-content-editor strong > u,
.u-content-editor .wp-block-heading > u,
.u-rte b > u,
.u-rte strong > u,
.u-rte .wp-block-heading > u {
  text-decoration: underline;
}
.u-content-editor b > a,
.u-content-editor strong > a,
.u-content-editor .wp-block-heading > a,
.u-rte b > a,
.u-rte strong > a,
.u-rte .wp-block-heading > a {
  text-decoration: underline;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.u-content-editor hr,
.u-rte hr {
  border-top: 1px solid #000000;
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding: 0;
  margin: var(--s-60) 0;
  outline: none;
  box-shadow: none;
}
.u-content-editor hr:first-child,
.u-rte hr:first-child {
  margin-top: 0;
}
.u-content-editor hr:last-child,
.u-rte hr:last-child {
  margin-bottom: 0;
}
.u-content-editor .wp-block-table,
.u-rte .wp-block-table {
  margin-top: var(--s-60);
  margin-bottom: var(--s-60);
}
.u-content-editor .wp-block-table:first-child,
.u-rte .wp-block-table:first-child {
  margin-top: 0;
}
.u-content-editor .wp-block-table:last-child,
.u-rte .wp-block-table:last-child {
  margin-bottom: 0;
}
.u-content-editor .wp-block-table table,
.u-rte .wp-block-table table {
  width: 100%;
  font-size: var(--b1);
  font-family: "Roboto", sans-serif;
  line-height: 110%;
  letter-spacing: normal;
}
.u-content-editor .wp-block-table tr,
.u-rte .wp-block-table tr {
  border-bottom: 1px solid #000000;
  display: flex;
  gap: var(--s-15);
}
.u-content-editor .wp-block-table td,
.u-rte .wp-block-table td {
  padding-top: var(--s-15);
  padding-bottom: var(--s-15);
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.u-content-editor .wp-block-table u,
.u-rte .wp-block-table u {
  text-decoration: underline;
}
.u-content-editor .wp-block-table a,
.u-rte .wp-block-table a {
  text-decoration: underline;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.u-content-editor .wp-block-quote,
.u-rte .wp-block-quote {
  margin-top: var(--s-60);
  margin-bottom: var(--s-60);
  padding-left: var(--s-15);
  border-left: 3px solid #000000;
}
.u-content-editor .wp-block-quote:first-child,
.u-rte .wp-block-quote:first-child {
  margin-top: 0;
}
.u-content-editor .wp-block-quote:last-child,
.u-rte .wp-block-quote:last-child {
  margin-bottom: 0;
}
.u-content-editor .wp-block-quote p,
.u-rte .wp-block-quote p {
  font-size: var(--a2);
  font-family: "Roboto", sans-serif;
  line-height: 112%;
  letter-spacing: -0.0195121951em;
}
.u-content-editor .wp-block-quote cite,
.u-rte .wp-block-quote cite {
  margin-top: var(--s-15);
  display: block;
  font-size: var(--b1);
  font-family: "Roboto", sans-serif;
  line-height: 110%;
  letter-spacing: normal;
}
.u-content-editor .wp-block-quote cite > u,
.u-rte .wp-block-quote cite > u {
  text-decoration: underline;
}
.u-content-editor .wp-block-quote cite > a,
.u-rte .wp-block-quote cite > a {
  text-decoration: underline;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.u-content-editor .wp-block-embed,
.u-rte .wp-block-embed {
  margin-top: var(--s-60);
  margin-bottom: var(--s-60);
}
.u-content-editor .wp-block-embed:first-child,
.u-rte .wp-block-embed:first-child {
  margin-top: 0;
}
.u-content-editor .wp-block-embed:last-child,
.u-rte .wp-block-embed:last-child {
  margin-bottom: 0;
}
.u-content-editor .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.u-rte .wp-block-embed.is-type-video .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.u-content-editor .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
.u-content-editor .wp-block-embed.is-type-video .wp-block-embed__wrapper object,
.u-content-editor .wp-block-embed.is-type-video .wp-block-embed__wrapper embed,
.u-rte .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
.u-rte .wp-block-embed.is-type-video .wp-block-embed__wrapper object,
.u-rte .wp-block-embed.is-type-video .wp-block-embed__wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.u-content-editor .wp-block-image,
.u-rte .wp-block-image {
  margin-top: var(--s-60);
  margin-bottom: var(--s-60);
}
.u-content-editor .wp-block-image:first-child,
.u-rte .wp-block-image:first-child {
  margin-top: 0;
}
.u-content-editor .wp-block-image:last-child,
.u-rte .wp-block-image:last-child {
  margin-bottom: 0;
}
.u-content-editor .wp-block-image.size-medium img,
.u-rte .wp-block-image.size-medium img {
  width: auto;
}
.u-content-editor .wp-block-image.size-thumbnail img,
.u-rte .wp-block-image.size-thumbnail img {
  width: auto;
}
.u-content-editor .wp-block-image figcaption,
.u-rte .wp-block-image figcaption {
  margin-top: var(--s-15);
  font-size: var(--b1);
  font-family: "Roboto", sans-serif;
  line-height: 110%;
  letter-spacing: normal;
}
.u-content-editor .wp-block-image figcaption > u,
.u-rte .wp-block-image figcaption > u {
  text-decoration: underline;
}
.u-content-editor .wp-block-image figcaption > a,
.u-rte .wp-block-image figcaption > a {
  text-decoration: underline;
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.u-content-editor .wp-block-code,
.u-content-editor pre,
.u-rte .wp-block-code,
.u-rte pre {
  margin-top: var(--s-60);
  margin-bottom: var(--s-60);
  padding: var(--s-30);
  background-color: #ffffff;
  color: #000000;
}
.u-content-editor .wp-block-code:first-child,
.u-content-editor pre:first-child,
.u-rte .wp-block-code:first-child,
.u-rte pre:first-child {
  margin-top: 0;
}
.u-content-editor .wp-block-code:last-child,
.u-content-editor pre:last-child,
.u-rte .wp-block-code:last-child,
.u-rte pre:last-child {
  margin-bottom: 0;
}
.u-content-editor .wp-block-code code,
.u-content-editor pre code,
.u-rte .wp-block-code code,
.u-rte pre code {
  font-size: 0.75em;
  line-height: 1.5;
  white-space: pre-wrap;
}
.u-content-editor .c-gutenberg-block,
.u-rte .c-gutenberg-block {
  margin-top: var(--s-60);
  margin-bottom: var(--s-60);
  position: relative;
  z-index: 1;
}
.u-content-editor .c-gutenberg-block:first-child,
.u-rte .c-gutenberg-block:first-child {
  margin-top: 0;
}
.u-content-editor .c-gutenberg-block:last-child,
.u-rte .c-gutenberg-block:last-child {
  margin-bottom: 0;
}

/**
 * Vendors
 */
/**
 * Third party vendors
 */
/**
 * Vendors
 */
body.logged-in.admin-bar .o-navigation {
  top: var(--wp-admin--admin-bar--height, 0);
}

.otgs-development-site-front-end {
  display: none;
}

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