:root {
  /* ================= Colors ================= */
  --color-ignore-neutral-100: #ffffff;
  --color-ignore-neutral-200: #F4F4F4;
  --color-ignore-neutral-300: #EAEAEA;
  --color-ignore-neutral-400: #E1E1E1;
  --color-ignore-neutral-450: #D8D8D8;
  --color-ignore-neutral-475: #B8B8B8;
  --color-ignore-neutral-500: #817F7F;
  --color-ignore-neutral-525: #4F4C4C;
  --color-ignore-neutral-550: #393636;
  --color-ignore-neutral-600: #312E2E;
  --color-ignore-neutral-700: #2A2727;
  --color-ignore-neutral-800: #201D1D;
  --color-ignore-neutral-900: #151313;
  --color-ignore-neutral-950: #000000;

  --color-ignore-white: var(--color-ignore-neutral-100);
  --color-ignore-light: var(--color-ignore-neutral-200);
  --color-ignore-dark: var(--color-ignore-neutral-800);
  --color-ignore-black: var(--color-ignore-neutral-950);

  --color-ignore-rgb-dark: 32, 29, 29;
  --color-ignore-rgb-light: 249, 249, 249;
  --color-ignore-rgb-black: 0, 0, 0;
  --color-ignore-rgb-white: 255, 255, 255;

  --color-neutral-100: var(--color-ignore-neutral-100);
  --color-neutral-200: var(--color-ignore-neutral-200);
  --color-neutral-300: var(--color-ignore-neutral-300);
  --color-neutral-400: var(--color-ignore-neutral-400);
  --color-neutral-450: var(--color-ignore-neutral-450);
  --color-neutral-475: var(--color-ignore-neutral-475);
  --color-neutral-500: var(--color-ignore-neutral-500);
  --color-neutral-525: var(--color-ignore-neutral-525);
  --color-neutral-550: var(--color-ignore-neutral-550);
  --color-neutral-600: var(--color-ignore-neutral-600);
  --color-neutral-700: var(--color-ignore-neutral-700);
  --color-neutral-800: #201D1D;
  --color-neutral-900: var(--color-ignore-neutral-900);
  --color-neutral-950: var(--color-ignore-neutral-950);

  --color-white: var(--color-ignore-neutral-100);
  --color-light: var(--color-ignore-neutral-200);
  --color-dark: var(--color-ignore-neutral-800);
  --color-black: var(--color-ignore-neutral-950);

  --color-rgb-dark: var(--color-ignore-rgb-dark);
  --color-rgb-light: var(--color-ignore-rgb-light);
  --color-rgb-black: var(--color-ignore-rgb-black);
  --color-rgb-white: var(--color-ignore-rgb-white);
  --color-rgb-gray: 129, 127, 127;

  --color-purple: #3d4eec;
  --color-electric-blue: #7083ff;
  --color-electric: #a1ff62;
  --color-warning: #ff7180;

  /* ================= Layout ================= */
  --dash-side-width: 19em;
  --dash-col-gap: 1.5em;
  --dash-col-width: 0em;

  --nav-bar-height: 4.625em;
  --nav-bar-max-width-small: 38em;

  --container-padding: 1.875em;
  --padding-m: 7.5em;

  --card-padding-top: 3em;
  --card-padding-topX: 3.5em;
  --card-padding-right: 2em;

  --btn-height: 2.5em;
  --stroke-weight: 1px;

  /* ================= Gaps ================= */
  --gap-xxl: 2.5em;
  --gap-xl: 2em;
  --gap-l: 1.875em;
  --gap-m: 1.5em;
  --gap-sm: 1.25em;
  --gap-s: 1em;
  --gap-xxs: 0.5em;
  --gap-Xs: 0.2em;

  /* ================= Animation ================= */
  --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);

  --duration-default-double: 1.2s;
  --duration-default-onehalf: 0.9s;
  --duration-default: 0.6s;
  --duration-default-half: 0.3s;
  --duration-default-quarter: 0.15s;

  --animation-default-double: var(--duration-default-double) var(--cubic-default);
  --animation-default-onehalf: var(--duration-default-onehalf) var(--cubic-default);
  --animation-default: var(--duration-default) var(--cubic-default);
  --animation-default-half: var(--duration-default-half) var(--cubic-default);
  --animation-default-quarter: var(--duration-default-quarter) var(--cubic-default);
  --animation-ease: 0.2s ease;

  /* ================= Sizing ================= */
  --size-unit: 16;
  --size-container-ideal: 1500;
  --size-container-min: 1400px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min),
      100vw,
      var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}


@font-face {
  font-family: 'icomoon';
  src: url('../font/icomoon.eot?3yqem');
  src: url('../font/icomoon.eot?3yqem#iefix') format('embedded-opentype'),
    url('../font/icomoon.ttf?3yqem') format('truetype'),
    url('../font/icomoon.woff?3yqem') format('woff'),
    url('../font/icomoon.svg?3yqem#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}



@font-face {
  font-family: Haffer Mono;
  src: url(../font/68a5e16300ff1c3e56d220c5_HafferMonoMedium.woff2)format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Haffer VF;
  src: url(../font/68a5df2de5b7c113032b4047_HafferStandardUprights-VF.ttf)format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Haffer Bold;
  src: url(../font/Haffer-Bold.woff2)format("woff2"),
    url(../font/Haffer-Bold.woff)format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Haffer XH;
  src: url(../font/68a5e1630039e3499e62b7be_HafferXHRegular.woff2)format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Haffer Mono;
  src: url(../font/68a5e163329ff81e2107c078_HafferMonoRegular.woff2)format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Brisa Pro;
  src: url(../font/68ad7bb9169ac0f55949c7e4_BrisaPro-Regular.woff2)format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


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


html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
}


:selection {
  background-color: rgba(var(--color-rgb-gray), 0.2);
  text-shadow: none;
}


body {
  /* CSS Variables */
  --r: 20deg;

  /* Layout */
  margin: 0;
  min-height: 100%;
  overflow: auto;
  overscroll-behavior: none;

  /* Typography */
  font-family: Haffer VF, Arial, sans-serif;
  font-size: var(--size-font);
  font-weight: 400;
  font-variation-settings: "wght" 460;
  line-height: 20px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;

  /* Colors */
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-200);

  /* Scrollbars */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body:-webkit-scrollbar,
html:-webkit-scrollbar {
  display: none;
}

/* Links */
a {
  color: inherit;
  text-decoration: none !important;
  background-color: transparent;
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease;
}

a:hover {
  color: #0056b3;
}

a:active,
a:hover {
  outline: 0;
}

/* Typography */
h3 {
  margin: 0;
  letter-spacing: -.04em;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 3.875em;
  font-weight: 400;
  line-height: 1;
}

h4 {
  margin: 0;
  letter-spacing: -.03em;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 2.5em;
  font-weight: 400;
  line-height: 1.05;
}

p {
  margin: 0;
}

/* Lists */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}



/* Paragraph large */
.p-l {
  font-variation-settings: "wght" 420;
  letter-spacing: -.02em;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1.1875em;
  font-weight: 400;
  line-height: 1.25;
}

/* Buttons */
button {
  color: inherit;
  font: inherit;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}


section {
  padding: 20px 0px;
}

section.hero_center {
  display: flex;
  align-items: center;
}

.section-spacer {
  height: calc(var(--nav-bar-height) + max(3em, 5vh));
}

.hero_title.centre {
  text-align: center;
  justify-content: center;
}

.hero_title h1 {
  font-size: 5em;
  line-height: .9em;
  line-height: .9em;
  letter-spacing: -0.02em;
  padding: 10px 10px 0px;
  color: var(--color-electric-blue);
}

.hero_title h2 {
  font-size: 3em;
  padding: 10px 10px 0px;
  line-height: 1;
}

.hero_title p {
  padding: 20px;
}