@font-face {
  font-family: "Fixel Text";
  src: url("../assets/fonts/fixel-text/FixelText-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Text";
  src: url("../assets/fonts/fixel-text/FixelText-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Text";
  src: url("../assets/fonts/fixel-text/FixelText-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Text";
  src: url("../assets/fonts/fixel-text/FixelText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Text";
  src: url("../assets/fonts/fixel-text/FixelText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Text";
  src: url("../assets/fonts/fixel-text/FixelText-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Text";
  src: url("../assets/fonts/fixel-text/FixelText-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Text";
  src: url("../assets/fonts/fixel-text/FixelText-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Text";
  src: url("../assets/fonts/fixel-text/FixelText-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Display";
  src: url("../assets/fonts/fixel-display/FixelDisplay-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Display";
  src: url("../assets/fonts/fixel-display/FixelDisplay-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Display";
  src: url("../assets/fonts/fixel-display/FixelDisplay-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Display";
  src: url("../assets/fonts/fixel-display/FixelDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Display";
  src: url("../assets/fonts/fixel-display/FixelDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Display";
  src: url("../assets/fonts/fixel-display/FixelDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Display";
  src: url("../assets/fonts/fixel-display/FixelDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Display";
  src: url("../assets/fonts/fixel-display/FixelDisplay-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel Display";
  src: url("../assets/fonts/fixel-display/FixelDisplay-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0a2748;
  --paper: #ffffff;
  --paper-blue: #e8f2fb;
  --white: #ffffff;
  --muted: #4f7094;
  --line: rgba(10, 39, 72, .14);
  --white-line: rgba(255, 255, 255, .62);
  --blue: #3b82c4;
  --blue-dark: #1a4d82;
  --blue-light: rgb(235, 244, 255);
  --radius: 32px;
  --max: 1540px;
  --pad: clamp(22px, 5vw, 78px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --black: #000000;
  --font-body: "Fixel Text", sans-serif;
  --font-head: "Fixel Display", sans-serif;

  --fs-label: 11px;
  --fs-meta: 14px;
  --fs-sm: 17px;
  --fs-body: 18px;
  --fs-lead: 20px;
  --fs-h3: 26px;
  --fs-h2: clamp(28px, 3.5vw, 42px);
  --fs-display: clamp(32px, 4vw, 48px);
  --fs-hero: clamp(40px, 5vw, 64px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
  /* clip avoids creating a scroll container (overflow-x: hidden breaks position: sticky) */
  overflow-x: clip;
}

body {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: clip;
  min-width: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea {
  font: inherit;
}

button {
  color: inherit;
}

img, video, svg {
  display: block;
}

img {
  max-width: 100%;
}

::selection {
  background: var(--ink);
  color: #fff;
}

.section-pad {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.eyebrow {
  font-size: var(--fs-label);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

h2 {
  line-height: .98;
  font-weight: 350;
  letter-spacing: -.066em;
  font-size: var(--fs-h2);
}

h2 em {
  color: var(--blue-dark);
  font-style: normal;
}

.js .reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: .25s;
}

.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.js.preload .headline-line i {
  transform: translateY(110%);
}

.js.preload .hero-in {
  opacity: 0;
  transform: translateY(20px);
}

.headline-line i {
  transition: transform .9s var(--ease);
}

.hero-in {
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.js.hero-ready .headline-line i,
.js.hero-ready .hero-in {
  transition-delay: .25s;
}

.js.hero-ready .headline-line i {
  transform: translateY(0);
}

.js.hero-ready .hero-in {
  opacity: 1;
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .js.preload .headline-line i, .js.preload .hero-in,
  .js.hero-ready .headline-line i, .js.hero-ready .hero-in {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}

@media (max-width: 1100px) {
  :root {
    --pad: clamp(20px, 3.5vw, 40px);
  }
}

@media (max-width: 820px) {
  :root {
    --pad: 20px;
    --radius: 24px;
    --fs-h2: clamp(26px, 7vw, 36px);
    --fs-h3: 22px;
    --fs-display: clamp(28px, 7vw, 40px);
    --fs-hero: clamp(34px, 9vw, 52px);
    --fs-lead: 18px;
    --fs-body: 17px;
    --fs-sm: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --pad: 16px;
  }

  .eyebrow {
    font-size: 9px;
  }

  .button,
  .header-cta {
    max-width: 100%;
  }
}