@layer globals,
layouts,
components,
utilities;

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-black-muted: #262626;
  --color-primary: #EF8933;
  --color-primary-muted: #F3B13E;
  --color-secondary: #144E8C;
  --color-secondary-muted: #E9ECF1;
  --color-tertiary: #81C05B;
  --color-tertiary-muted: #B7DB99;
  --color-transparent: transparent;
  --color-current: currentcolor;
  --color-danger: #ff0000;
  --font-sans: Gotham, system-ui, sans-serif;
  --font-serif: serif;
  --font-mono: monospace;
  --font-tiny: 0.75rem;
  --font-xsmall: 0.875rem;
  --font-small: 1rem;
  --font-medium: 1.125rem;
  --font-large: 1.25rem;
  --font-xlarge: 1.5rem;
  --font-huge: 7rem;
  --font-xxlarge: 3rem;
  --font-xxxlarge: 4rem;
  --font-xxxxlarge: 6rem;
  --font-xhuge: 20rem;
  --font-xxhuge: 40rem;
  --font-xxxhuge: 50rem;
  --font-tiny-xsmall: clamp(0.75rem, calc(0.675rem + 0.25vmin), 0.875rem);
  --font-xsmall-small: clamp(0.875rem, calc(0.8rem + 0.25vmin), 1rem);
  --font-small-medium: clamp(1rem, calc(0.925rem + 0.25vmin), 1.125rem);
  --font-small-large: clamp(1rem, calc(0.85rem + 0.5vmin), 1.25rem);
  --font-small-xlarge: clamp(1rem, calc(0.7rem + 1vmin), 1.5rem);
  --font-medium-xlarge: clamp(1.125rem, calc(0.9rem + 0.75vmin), 1.5rem);
  --font-large-xlarge: clamp(1.25rem, calc(1.1rem + 0.5vmin), 1.5rem);
  --font-xlarge-xxlarge: clamp(1.5rem, calc(0.6rem + 3vmin), 3rem);
  --font-xlarge-xxxlarge: clamp(1.5rem, calc(0rem + 5vmin), 4rem);
  --font-xxlarge-xxxxlarge: clamp(3rem, calc(1.2rem + 6vmin), 6rem);
  --font-xxxlarge-xhuge: clamp(4rem, calc(-6.6666666667rem + 26.6666666667vmin), 20rem);
  --font-xxxlarge-xxhuge: clamp(4rem, calc(-20rem + 60vmin), 40rem);
  --font-xxxxlarge-xhuge: clamp(5rem, calc(-5rem + 25vmin), 20rem);
  --font-xxxxlarge-xxhuge: clamp(5rem, calc(-18.3333333333rem + 58.3333333333vmin), 40rem);
  --font-huge-xhuge: clamp(7rem, calc(-1.6666666667rem + 21.6666666667vmin), 20rem);
  --font-huge-xxhuge: clamp(7rem, calc(-15rem + 55vmin), 40rem);
  --font-huge-xxxhuge: clamp(7rem, calc(-21.6666666667rem + 71.6666666667vmin), 50rem);
  --font-thin: 200;
  --font-regular: 400;
  --font-bold: 700;
  --tracking-small: -0.05em;
  --tracking-large: 0.025em;
  --tracking-normal: 0;
  --leading-none: 1;
  --leading-small: 1.375;
  --leading-medium: 1.5;
  --leading-large: 1.75;
  --leading-xlarge: 2;
  --leading-xsmall: 0.8;
  --outline-width: 0.125rem;
  --outline-type: solid;
  --outline-color: currentcolor;
  --space-tiny: 0.75rem;
  --space-xsmall: 1rem;
  --space-small: 1.5rem;
  --space-medium: 2rem;
  --space-large: 3rem;
  --space-xlarge: 6rem;
  --space-huge: 12rem;
  --space-xxlarge: 8rem;
  --space-tiny-xsmall: clamp(0.75rem, calc(0.6rem + 0.5vmin), 1rem);
  --space-xsmall-small: clamp(1rem, calc(0.7rem + 1vmin), 1.5rem);
  --space-xsmall-large: clamp(1rem, calc(-0.2rem + 4vmin), 3rem);
  --space-small-medium: clamp(1.5rem, calc(1.2rem + 1vmin), 2rem);
  --space-small-large: clamp(1.5rem, calc(0.6rem + 3vmin), 3rem);
  --space-small-xlarge: clamp(1.5rem, calc(-1.2rem + 9vmin), 6rem);
  --space-medium-large: clamp(2rem, calc(1.4rem + 2vmin), 3rem);
  --space-medium-xlarge: clamp(2rem, calc(-0.4rem + 8vmin), 6rem);
  --space-medium-xxlarge: clamp(2rem, calc(-1.6rem + 12vmin), 8rem);
  --space-medium-huge: clamp(2rem, calc(-4rem + 20vmin), 12rem);
  --space-large-xlarge: clamp(3rem, calc(1.2rem + 6vmin), 6rem);
  --space-large-xxlarge: clamp(3rem, calc(0rem + 10vmin), 8rem);
  --space-large-huge: clamp(3rem, calc(-2.4rem + 18vmin), 12rem);
  --space-xlarge-xxlarge: clamp(6rem, calc(4.8rem + 4vmin), 8rem);
  --space-xlarge-huge: clamp(6rem, calc(2.4rem + 12vmin), 12rem)
}

@layer globals {

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

  html {
    scroll-behavior: smooth
  }

  body {
    font-family: var(--font-sans);
    line-height: 1.5;
    text-rendering: optimizeSpeed;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%
  }

  p,
  a,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word
  }

  a {
    color: currentcolor;
    text-decoration-skip-ink: auto
  }

  input,
  button,
  textarea,
  select {
    font: inherit
  }

  ol[role=list],
  ul[role=list] {
    list-style: none
  }

  ol:not([role=list]),
  ul:not([role=list]) {
    padding-inline-start: 1rem
  }

  img,
  picture,
  canvas,
  video {
    max-width: 100%;
    height: auto
  }

  iframe {
    border: 0
  }

  table {
    border-collapse: collapse;
    caption-side: bottom
  }

  thead,
  tbody,
  tfoot,
  th,
  tr,
  td {
    border-color: inherit;
    border-style: solid;
    border-width: 0
  }

  th {
    text-align: inherit;
    text-align: -webkit-match-parent
  }

  button,
  [type=button],
  [type=reset],
  [type=submit] {
    appearance: button;
    -webkit-appearance: button
  }

  fieldset {
    border: none
  }

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

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

@layer layouts {
  .flex {
    --direction: row;
    --wrap: wrap;
    --align: normal;
    --place: normal;
    --gap: 0;
    --width: auto;
    display: flex;
    flex-direction: var(--direction);
    flex-wrap: var(--wrap);
    align-items: var(--align);
    place-content: var(--place);
    gap: var(--gap);
    width: var(--width)
  }

  .flex>* {
    --basis: auto;
    --grow: 0;
    --shrink: 1;
    --align: auto;
    --order: 0;
    --min-width: 0;
    --max-width: none;
    flex-basis: var(--basis);
    flex-grow: var(--grow);
    flex-shrink: var(--shrink);
    align-self: var(--align);
    order: var(--order);
    min-width: var(--min-width);
    max-width: var(--max-width)
  }

  @container (min-width: 960px) {
    .flex {
      --md-direction: var(--direction);
      --md-wrap: var(--wrap);
      --md-align: var(--align);
      --md-place: var(--place);
      --md-gap: var(--gap);
      --md-width: var(--width);
      flex-direction: var(--md-direction);
      flex-wrap: var(--md-wrap);
      align-items: var(--md-align);
      place-content: var(--md-place);
      gap: var(--md-gap);
      width: var(--md-width)
    }

    .flex>* {
      --md-basis: var(--basis);
      --md-grow: var(--grow);
      --md-shrink: var(--shrink);
      --md-align: var(--align);
      --md-order: var(--order);
      --md-min-width: var(--min-width);
      --md-max-width: var(--max-width);
      flex-basis: var(--md-basis);
      flex-grow: var(--md-grow);
      flex-shrink: var(--md-shrink);
      align-self: var(--md-align);
      order: var(--md-order);
      min-width: var(--md-min-width);
      max-width: var(--md-max-width)
    }
  }

  @container (min-width: 1920px) {
    .flex {
      --lg-direction: var(--md-direction);
      --lg-wrap: var(--md-wrap);
      --lg-align: var(--md-align);
      --lg-place: var(--md-place);
      --lg-gap: var(--md-gap);
      --lg-width: var(--md-width);
      flex-direction: var(--lg-direction);
      flex-wrap: var(--lg-wrap);
      align-items: var(--lg-align);
      place-content: var(--lg-place);
      gap: var(--lg-gap);
      width: var(--lg-width)
    }

    .flex>* {
      --lg-basis: var(--md-basis);
      --lg-grow: var(--md-grow);
      --lg-shrink: var(--md-shrink);
      --lg-align: var(--md-align);
      --lg-order: var(--md-order);
      --lg-min-width: var(--md-min-width);
      --lg-max-width: var(--md-max-width);
      flex-basis: var(--lg-basis);
      flex-grow: var(--lg-grow);
      flex-shrink: var(--lg-shrink);
      align-self: var(--lg-align);
      order: var(--lg-order);
      min-width: var(--lg-min-width);
      max-width: var(--lg-max-width)
    }
  }
}

@layer layouts {
  .flow {
    --flow: var(--space-small)
  }

  .flow>*+* {
    margin-top: var(--flow)
  }
}

@layer layouts {
  .frame {
    --object-x: 50%;
    --object-y: 50%;
    --object-fit: cover;
    --ratio: 1/1;
    position: relative;
    width: 100%;
    aspect-ratio: var(--ratio);
    overflow: hidden
  }

  .frame>* {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--object-fit);
    object-position: var(--object-x) var(--object-y)
  }
}

@layer layouts {
  .grid {
    --columns: 1;
    --size: 1fr;
    --align: normal;
    --justify: normal;
    --place: normal;
    --gap: 0;
    --width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--columns), var(--size));
    align-items: var(--align);
    justify-items: var(--justify);
    place-content: var(--place);
    gap: var(--gap);
    width: var(--width)
  }

  .grid>* {
    --column: auto;
    --row: auto;
    --align: auto;
    --justify: auto;
    grid-column: var(--column);
    grid-row: var(--row);
    align-self: var(--align);
    justify-self: var(--justify);
    min-width: 0;
    max-width: 100%;
    min-height: 0
  }

  @container (min-width: 960px) {
    .grid {
      --md-columns: var(--columns);
      --md-size: var(--size);
      --md-align: var(--align);
      --md-justify: var(--justify);
      --md-place: var(--place);
      --md-gap: var(--gap);
      --md-width: var(--width);
      grid-template-columns: repeat(var(--md-columns), var(--md-size));
      align-items: var(--md-align);
      justify-items: var(--md-justify);
      place-content: var(--md-place);
      gap: var(--md-gap);
      width: var(--md-width)
    }

    .grid>* {
      --md-column: var(--column);
      --md-row: var(--row);
      --md-align: var(--align);
      --md-justify: var(--justify);
      grid-column: var(--md-column);
      grid-row: var(--md-row);
      align-self: var(--md-align);
      justify-self: var(--md-justify)
    }
  }

  @container (min-width: 1920px) {
    .grid {
      --lg-columns: var(--md-columns);
      --lg-size: var(--md-size);
      --lg-align: var(--md-align);
      --lg-justify: var(--md-justify);
      --lg-place: var(--md-place);
      --lg-gap: var(--md-gap);
      --lg-width: var(--md-width);
      grid-template-columns: repeat(var(--lg-columns), var(--lg-size));
      align-items: var(--lg-align);
      justify-items: var(--lg-justify);
      place-content: var(--lg-place);
      gap: var(--lg-gap);
      width: var(--lg-width)
    }

    .grid>* {
      --lg-column: var(--md-column);
      --lg-row: var(--md-row);
      --lg-align: var(--md-align);
      --lg-justify: var(--md-justify);
      grid-column: var(--lg-column);
      grid-row: var(--lg-row);
      align-self: var(--lg-align);
      justify-self: var(--lg-justify)
    }
  }
}

@layer layouts {
  .pin {
    --position: relative;
    --top: 0;
    --right: 0;
    --bottom: 0;
    --left: 0;
    --z-index: 0;
    position: var(--position);
    top: var(--top);
    right: var(--right);
    bottom: var(--bottom);
    left: var(--left);
    z-index: var(--z-index)
  }
}

@layer layouts {
  .switch {
    --basis: calc((var(--breakpoint) - 100%) * 999);
    --breakpoint: 0;
    --gap: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap)
  }

  .switch>* {
    --grow: 1;
    flex-basis: max(var(--basis), 0rem);
    flex-grow: calc(var(--grow))
  }
}

@layer layouts {
  .wrap {
    --width: calc(100% - var(--padding-inline));
    --max-width: none;
    --margin-inline: auto;
    --padding-inline: clamp(2rem, 10%, 4rem);
    width: var(--width);
    max-width: var(--max-width);
    margin-inline: var(--margin-inline)
  }
}

@layer utilities {
  .\@container {
    container-type: inline-size
  }
}

@layer utilites {
  .margin-block {
    --margin-block: var(--space-small);
    margin-block: var(--margin-block)
  }
}

@layer utilites {
  .margin-inline {
    --margin-inline: var(--space-small);
    margin-inline: var(--margin-inline)
  }
}

@layer utilites {
  .padding-block {
    --padding-block: var(--space-small);
    padding-block: var(--padding-block)
  }
}

@layer utilites {
  .padding-inline {
    --padding-inline: var(--space-small);
    padding-inline: var(--padding-inline)
  }
}

@layer utilities {
  .background-white {
    background-color: var(--color-white)
  }

  .background-black {
    background-color: var(--color-black)
  }

  .background-black-muted {
    background-color: var(--color-black-muted)
  }

  .background-primary {
    background-color: var(--color-primary)
  }

  .background-primary-muted {
    background-color: var(--color-primary-muted)
  }

  .background-secondary {
    background-color: var(--color-secondary)
  }

  .background-secondary-muted {
    background-color: var(--color-secondary-muted)
  }

  .background-tertiary {
    background-color: var(--color-tertiary)
  }

  .background-tertiary-muted {
    background-color: var(--color-tertiary-muted)
  }

  .background-transparent {
    background-color: rgba(0, 0, 0, 0)
  }

  .background-current {
    background-color: currentcolor
  }

  .color-white {
    color: var(--color-white)
  }

  .color-black {
    color: var(--color-black)
  }

  .color-black-muted {
    color: var(--color-black-muted)
  }

  .color-primary {
    color: var(--color-primary)
  }

  .color-primary-muted {
    color: var(--color-primary-muted)
  }

  .color-secondary {
    color: var(--color-secondary)
  }

  .color-secondary-muted {
    color: var(--color-secondary-muted)
  }

  .color-tertiary {
    color: var(--color-tertiary)
  }

  .color-tertiary-muted {
    color: var(--color-tertiary-muted)
  }

  .color-transparent {
    color: rgba(0, 0, 0, 0)
  }

  .color-current {
    color: currentcolor
  }

  .font-sans {
    font-family: var(--font-sans)
  }

  .font-serif {
    font-family: var(--font-serif)
  }

  .font-mono {
    font-family: var(--font-mono)
  }

  .font-tiny {
    font-size: var(--font-tiny)
  }

  .font-xsmall {
    font-size: var(--font-xsmall)
  }

  .font-small {
    font-size: var(--font-small)
  }

  .font-medium {
    font-size: var(--font-medium)
  }

  .font-large {
    font-size: var(--font-large)
  }

  .font-xlarge {
    font-size: var(--font-xlarge)
  }

  .font-huge {
    font-size: var(--font-huge)
  }

  .font-xxlarge {
    font-size: var(--font-xxlarge)
  }

  .font-xxxlarge {
    font-size: var(--font-xxxlarge)
  }

  .font-xxxxlarge {
    font-size: var(--font-xxxxlarge)
  }

  .font-xhuge {
    font-size: var(--font-xhuge)
  }

  .font-xxhuge {
    font-size: var(--font-xxhuge)
  }

  .font-xxxhuge {
    font-size: var(--font-xxxhuge)
  }

  .font-tiny-xsmall {
    font-size: var(--font-tiny-xsmall)
  }

  .font-xsmall-small {
    font-size: var(--font-xsmall-small)
  }

  .font-small-medium {
    font-size: var(--font-small-medium)
  }

  .font-small-large {
    font-size: var(--font-small-large)
  }

  .font-small-xlarge {
    font-size: var(--font-small-xlarge)
  }

  .font-medium-xlarge {
    font-size: var(--font-medium-xlarge)
  }

  .font-large-xlarge {
    font-size: var(--font-large-xlarge)
  }

  .font-xlarge-xxlarge {
    font-size: var(--font-xlarge-xxlarge)
  }

  .font-xlarge-xxxlarge {
    font-size: var(--font-xlarge-xxxlarge)
  }

  .font-xxlarge-xxxxlarge {
    font-size: var(--font-xxlarge-xxxxlarge)
  }

  .font-xxxlarge-xhuge {
    font-size: var(--font-xxxlarge-xhuge)
  }

  .font-xxxlarge-xxhuge {
    font-size: var(--font-xxxlarge-xxhuge)
  }

  .font-xxxxlarge-xhuge {
    font-size: var(--font-xxxxlarge-xhuge)
  }

  .font-xxxxlarge-xxhuge {
    font-size: var(--font-xxxxlarge-xxhuge)
  }

  .font-huge-xhuge {
    font-size: var(--font-huge-xhuge)
  }

  .font-huge-xxhuge {
    font-size: var(--font-huge-xxhuge)
  }

  .font-huge-xxxhuge {
    font-size: var(--font-huge-xxxhuge)
  }

  .font-thin {
    font-weight: var(--font-thin)
  }

  .font-regular {
    font-weight: var(--font-regular)
  }

  .font-bold {
    font-weight: var(--font-bold)
  }

  .tracking-small {
    letter-spacing: var(--tracking-small)
  }

  .tracking-large {
    letter-spacing: var(--tracking-large)
  }

  .tracking-normal {
    letter-spacing: var(--tracking-normal)
  }

  .leading-none {
    line-height: 1
  }

  .leading-small {
    line-height: var(--leading-small)
  }

  .leading-medium {
    line-height: var(--leading-medium)
  }

  .leading-large {
    line-height: var(--leading-large)
  }

  .leading-xlarge {
    line-height: var(--leading-xlarge)
  }

  .leading-xsmall {
    line-height: var(--leading-xsmall)
  }

  .text-left {
    text-align: left
  }

  .text-center {
    text-align: center
  }

  .text-right {
    text-align: right
  }

  .text-upper {
    text-transform: uppercase
  }

  .text-lower {
    text-transform: lowercase
  }

  .text-caps {
    text-transform: capitalize
  }
}

@layer globals {
  :root {
    --easing: cubic-bezier(0.5, 0, 0.25, 1)
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 400;
    font-variant-ligatures: none;
    color: var(--color-black);
    background-color: var(--color-white);
    overflow-x: hidden
  }

  body.is-locked {
    overflow: hidden
  }

  img,
  video {
    display: block
  }

  a {
    text-decoration: none
  }

  button {
    color: currentcolor
  }

  ::selection {
    background-color: var(--color-secondary);
    color: var(--color-white)
  }
}

@layer globals {
  @font-face {
    font-family: "Gotham";
    src: url("fonts/Gotham-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap
  }

  @font-face {
    font-family: "Gotham";
    src: url("fonts/Gotham-Book.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
  }

  body {
    font-size: var(--font-small);
    letter-spacing: var(--tracking-small)
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--font-regular)
  }
}

@layer components {
  .bar-diagram {
    padding-top: var(--space-xlarge-huge);
    color: var(--color-secondary)
  }

  .bar-diagram--wrap {
    position: relative
  }

  .bar-diagram--proposed-bar {
    position: relative;
    z-index: 2;
    width: 0;
    height: 18rem;
    background-color: var(--color-secondary)
  }

  .bar-diagram--proposed-bar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    left: -1px;
    width: 1px;
    background-color: currentcolor
  }

  .bar-diagram--proposed-content {
    position: relative;
    padding-top: var(--space-xsmall);
    padding-inline-start: var(--space-xsmall)
  }

  .bar-diagram--proposed-content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: .5rem;
    z-index: 2;
    left: -1px;
    width: 1px;
    background-color: currentcolor
  }

  .bar-diagram--proposed-meta {
    font-size: var(--font-tiny-xsmall);
    opacity: 0;
    margin-bottom: var(--space-medium-large)
  }

  @container (min-width: 960px) {
    .bar-diagram--proposed-meta {
      text-align: right;
      transform: translateX(calc(-100% - var(--space-medium)))
    }
  }

  .bar-diagram--current-bar {
    position: relative;
    z-index: 1;
    width: 0;
    height: 18rem;
    background: repeating-linear-gradient(90deg, currentcolor, currentcolor 2px, var(--color-white) 2px, var(--color-white) 4px)
  }

  .bar-diagram--current-content {
    position: relative;
    display: flex;
    justify-content: end
  }

  .bar-diagram--current-meta {
    position: relative;
    font-size: var(--font-tiny-xsmall);
    padding-top: var(--space-xsmall);
    padding-inline-end: var(--space-xsmall);
    text-align: right;
    opacity: 0
  }

  .bar-diagram--current-meta::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    right: 2px;
    width: 1px;
    background-color: currentcolor
  }
}

@layer components {

  .hubspot-form--skin1 .hs-submit [type="submit"],
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-tiny-xsmall) var(--space-small-medium);
    font-size: var(--font-xsmall-small);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out
  }

  .hubspot-form--skin1 .hs-submit [type="submit"]:hover,
  .button:hover {
    background-color: var(--color-secondary);
    color: var(--color-white)
  }

  .hubspot-form--skin1 .hs-submit [type="submit"]:focus,
  .button:focus {
    outline: none
  }

  .button:focus:not(:active, :hover) {
    outline: var(--outline-width) var(--outline-type) var(--outline-color)
  }

  .button[data-type=outline] {
    border: 1px solid currentcolor;
    color: currentcolor;
    background-color: rgba(0, 0, 0, 0)
  }

  .button[data-type=outline]:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary)
  }

  .button[data-size=large] {
    font-size: var(--font-xlarge-xxxlarge);
    font-weight: var(--font-thin);
    padding: var(--space-tiny-xsmall) var(--space-medium-large)
  }

  .button.is-active {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary)
  }
}

@layer components {
  .case {
    position: relative;
    padding-block: var(--space-xlarge-huge);
    color: var(--color-secondary)
  }

  .case--wrap {
    position: relative;
    z-index: 9;
    padding-inline-start: var(--space-small-medium)
  }

  .case--media {
    --ratio: 1/1;
    width: calc(100% + clamp(1rem, 10%, 2rem));
    max-width: none;
    margin-inline-start: var(--space-small-medium);
    margin-block: 0
  }

  @container (min-width: 960px) {
    .case--media {
      --ratio: 16/9;
      margin-block: var(--space-medium-large) 0
    }
  }

  .case--text {
    max-width: 50ch;
    padding-block: var(--space-medium-large) var(--space-medium-xlarge);
    font-size: var(--font-small-medium)
  }
}

@layer components {
  .card {
    padding: var(--space-small);
    background-color: var(--color-white);
    color: var(--color-secondary);
    border-radius: 1rem;
    opacity: 0
  }
}

@layer components {
  .cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-xlarge-xxlarge);
    min-height: 100vh;
    color: var(--color-white)
  }

  .cover>img,
  .cover>video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .cover--wrap {
    position: relative;
    z-index: 2
  }
}

@layer components {
  .count-on-us--calc-logo {
    margin-block: var(--space-tiny-xsmall)
  }

  .count-on-us--calc-logo svg {
    width: clamp(5rem,
        calc(3.2rem + 6vmin),
        8rem);
    height: auto
  }
}

@layer components {
  .footer {
    padding-block: var(--space-small-large);
    background-color: var(--color-white);
    color: var(--color-secondary)
  }

  .footer--brand {
    padding-top: var(--space-tiny)
  }

  .footer--brand svg {
    width: 113px;
    height: auto
  }
}

@layer components {

  .hubspot-form--skin1,
  .form {
    position: relative;
    padding: var(--space-small-large);
    width: 100%;
    color: var(--color-secondary);
    background-color: var(--color-white);
    border-radius: 1rem;
  }

  .hubspot-form--skin1 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
  }

  .hubspot-form--skin1 *:focus,
  .form *:focus {
    outline: none
  }

  .form *:focus:not(:active, :hover) {
    outline: var(--outline-width) var(--outline-type) var(--outline-color)
  }

  .form button:focus {
    outline: none
  }

  .form button:focus:not(:active, :hover) {
    --outline-color: var(--color-black);
    outline: var(--outline-width) var(--outline-type) var(--outline-color)
  }

  .hubspot-form--skin1 .hs-form-field,
  .form--field {
    display: flex;
    flex-direction: column;
    gap: .5rem
  }

  .hubspot-form--skin1 .hs-form-field input,
  .hubspot-form--skin1 .hs-form-field textarea {
    width: 100%;
  }

  .hubspot-form--skin1 .hs-form-field textarea {
    height: 100px;
  }

  .hubspot-form--skin1 .hs-form-field input,
  .hubspot-form--skin1 .hs-form-field textarea,
  .form--field input,
  .form--field textarea {
    padding: var(--space-tiny);
    font-size: var(--font-tiny-xsmall);
    background-color: var(--color-secondary-muted);
    border: none;
    border-radius: 4px
  }

  .hubspot-form--skin1 .hs-form-field label,
  .form--label {
    font-size: var(--font-tiny-xsmall)
  }

  .hubspot-form--skin1 .hs-form-required {
    color: var(--color-danger);
    margin-left: 2px;
  }

  .hubspot-form--skin1 .hs-error-msgs {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: -8px;
  }

  .hubspot-form--skin1 .hs-fieldtype-textarea .hs-error-msgs {
    margin-top: -15px;
  }

  .hubspot-form--skin1 .hs-error-msg {
    color: var(--color-danger);
  }

  .hubspot-form--skin1 .hs_error_rollup {
    color: var(--color-danger);
    font-weight: bold;
  }

  .hubspot-form--skin1 .hs-submit {
    margin-left: auto;
    margin-top: 16px;
  }
}

@layer components {
  .green-calc--container {
    position: relative;
    z-index: 1;
    padding-block: var(--space-xlarge-huge);
    background-color: var(--color-tertiary-muted);
    color: var(--color-secondary)
  }

  .green-calc--wrap {
    color: var(--color-secondary)
  }

  @container (min-width: 960px) {
    .green-calc--wrap {
      padding-inline: var(--space-small-medium)
    }
  }

  .green-calc--media {
    width: calc(100% + clamp(1rem, 10%, 2rem));
    max-width: none;
    max-height: 90vh
  }

  @container (min-width: 960px) {
    .green-calc--media {
      margin-inline-start: var(--space-small-medium)
    }
  }

  .green-calc--stripes-start,
  .green-calc--stripes-end {
    display: flex;
    flex-direction: column;
    overflow: hidden
  }

  .green-calc--stripes-start span,
  .green-calc--stripes-end span {
    --index: 1;
    --height-value: 0.25vmin;
    --gap-value: 0.25vmin;
    --height: calc(var(--height-value) * var(--index));
    --gap: calc(var(--gap-value) * var(--index));
    width: 100%;
    height: var(--height);
    background-color: var(--color-tertiary-muted)
  }

  .green-calc--stripe-start {
    margin-block-end: var(--gap)
  }

  .green-calc--stripe-end {
    margin-block-start: var(--gap)
  }

  .green-calc--graphic-small {
    display: flex
  }

  @container (min-width: 960px) {
    .green-calc--graphic-small {
      display: none
    }
  }

  .green-calc--graphic-large {
    display: none;
    width: 100%;
    max-width: none
  }

  @container (min-width: 960px) {
    .green-calc--graphic-large {
      display: flex
    }
  }

  .green-calc--graphic-text {
    font-size: var(--font-small-large)
  }

  @container (min-width: 960px) {
    .green-calc--graphic-text {
      text-align: center
    }
  }
}

@layer components {
  .hero {
    position: relative;
    margin-bottom: var(--space-xlarge-huge);
    color: var(--color-secondary)
  }

  .hero--media {
    position: relative;
    min-height: 50vh;
    width: calc(100% + clamp(2rem, 10vw, 4rem));
    max-width: none;
    margin-inline: calc(clamp(2rem, 10vw, 4rem)*-0.5)
  }

  .hero--media img,
  .hero--media video {
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  @media(orientation: portrait) {
    .hero--media {
      min-height: 70vh
    }
  }

  .hero--headline {
    opacity: .25
  }

  .hero--overlay {
    --opacity: 0.25;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: var(--color-black);
    opacity: var(--opacity)
  }

  .hero--content {
    position: relative;
    z-index: 9;
    padding-inline: var(--space-small-medium);
    color: var(--color-white)
  }

  .hero--counter {
    display: block
  }

  .hero--text {
    position: relative;
    z-index: 9;
    padding-top: var(--space-xlarge-xxlarge);
    padding-inline: var(--space-small-medium)
  }
}

@layer components {
  .media-overlay {
    --opacity: 0.25;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-black);
    opacity: var(--opacity)
  }
}

@layer components {
  .navbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    padding-block: var(--space-xsmall-small)
  }

  .navbar--brand {
    display: flex;
    color: var(--color-white)
  }

  .navbar--brand svg {
    width: 113px;
    height: auto
  }

  .navbar--bullets li {
    max-width: 15rem;
    padding-inline-start: var(--space-tiny);
    border-left: 1px solid var(--color-white);
    letter-spacing: var(--tracking-normal)
  }
}

@layer components {
  .numbers {
    padding-block: var(--space-xlarge-huge);
    background-color: var(--color-black);
    color: var(--color-white);
    text-align: center
  }

  .numbers--panels {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    font-size: var(--font-xlarge-xxlarge)
  }

  .numbers--panel {
    display: none;
    width: 100%;
    max-width: 50ch;
    transition: all 0ms ease-in-out
  }

  .numbers--panel.is-expanded {
    display: block
  }

  .numbers--panel.is-collapsing {
    position: relative;
    height: 0;
    overflow: hidden
  }

  .numbers--panel>p {
    padding-top: var(--space-small-medium)
  }
}

@layer components {
  .our-promise {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--space-xlarge-huge)*-1);
    padding-bottom: var(--space-xlarge-huge)
  }

  .our-promise--wrap {
    position: relative;
    z-index: 9;
    padding-top: calc(var(--space-xlarge-huge)*2);
    padding-inline: var(--space-small-medium);
    color: var(--color-secondary)
  }

  .our-promise--number {
    min-width: 2.75ch
  }

  .our-promise--text {
    max-width: 20rem
  }
}

@layer components {
  .overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
    overflow: hidden;
    will-change: transform;
    transition: all 200ms ease-in-out;
    outline: 0;
    -webkit-overflow-scrolling: touch
  }

  .overlay--trigger {
    position: absolute;
    top: var(--space-xsmall-small);
    right: var(--space-xsmall-small);
    display: flex;
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-secondary);
    border: 0;
    cursor: pointer;
    transition: color 200ms ease-in-out
  }

  .overlay--trigger:hover {
    color: var(--color-black)
  }

  .overlay--trigger svg {
    width: auto;
    height: 1.5rem
  }

  .overlay--backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: var(--color-secondary);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    transition: opacity 200ms ease-in-out
  }

  .overlay.is-active .overlay--backdrop {
    opacity: .5;
    pointer-events: auto
  }

  .overlay--wrap {
    max-height: calc(100% - var(--space-large-xlarge)*2);
    pointer-events: auto
  }

  .overlay--content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: calc(100% - var(--space-large-xlarge)*2);
    opacity: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    will-change: transform;
    pointer-events: none;
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
    transform: scale(0.5);
    -webkit-overflow-scrolling: touch
  }

  .overlay.is-active .overlay--content {
    transform: scale(1);
    opacity: 1
  }
}

@layer components {
  .problem {
    position: relative;
    color: var(--color-secondary)
  }

  .problem[data-theme=dark] {
    background-color: var(--color-black);
    color: var(--color-white)
  }

  .problem--wrap {
    padding-bottom: var(--space-xlarge-huge)
  }

  .problem--wrap[data-overlap=true]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1rem;
    left: 0;
    background-color: var(--color-black);
    height: calc(var(--space-xlarge-huge)*2);
    z-index: -1
  }

  .problem--text {
    position: relative;
    z-index: 9;
    max-width: 60ch;
    padding-bottom: var(--space-medium-xlarge);
    font-size: var(--font-small-medium)
  }

  .problem--media {
    width: calc(100% + clamp(1rem, 10%, 2rem));
    max-width: none;
    max-height: 90vh
  }

  .problem--number {
    z-index: 1;
    color: var(--color-primary)
  }

  @container (min-width: 960px) {
    .problem--number {
      margin-top: var(--space-medium-xlarge)
    }
  }

  .problem--stripes {
    display: none;
    flex-wrap: wrap;
    min-height: 70vmin;
    max-width: none;
    margin-inline-start: calc(clamp(2rem, 10%, 4rem)*-1);
    overflow: hidden
  }

  @container (min-width: 960px) {
    .problem--stripes {
      display: flex
    }
  }

  .problem--stripes span {
    --index: 1;
    --width: calc(0.25% * var(--index));
    --gap: calc(0.25% * var(--index));
    flex-grow: 1;
    width: var(--width);
    height: 100%;
    margin-inline-end: var(--gap);
    background-color: var(--color-black-muted)
  }

  .problem--stripes-data {
    max-width: none;
    padding-block: var(--space-xsmall-large) var(--space-xlarge-huge)
  }

  @container (min-width: 960px) {
    .problem--stripes-data {
      margin-inline: 0 calc(clamp(1rem, 10vw, 2rem)*-1);
      padding: var(--space-xsmall-large);
      background-color: var(--color-black-muted)
    }
  }

  .problem--shapes {
    display: none
  }

  @container (min-width: 960px) {
    .problem--shapes {
      display: block
    }
  }

  .problem--shapes-row {
    position: relative;
    height: 10vmin;
    margin-bottom: 1vmin
  }

  .problem--shapes-row span {
    position: absolute;
    top: 0;
    left: 0;
    height: 10vmin;
    width: 10vmin;
    display: block;
    border-radius: 5vmin;
    background-color: var(--color-black-muted)
  }

  .problem--shapes-row span.background-white {
    opacity: 0
  }
}

@layer components {
  .section-line {
    position: relative;
    z-index: 3;
    color: var(--color-primary);
    font-size: var(--font-small-large)
  }

  .section-line[data-variant=aside-green-calc] {
    display: none
  }

  @container (min-width: 960px) {
    .section-line[data-variant=aside-green-calc] {
      display: block
    }
  }

  .section-line[data-variant=aside],
  .section-line[data-variant=aside-green-calc] {
    padding-inline-start: var(--space-small-medium)
  }

  .section-line svg {
    width: clamp(5rem,
        calc(3.2rem + 6vmin),
        8rem);
    height: auto
  }

  .section-line--line {
    position: absolute;
    top: 2rem;
    bottom: 0;
    left: 0;
    display: none;
    width: 1px;
    background-color: var(--color-primary);
    transform-origin: top
  }

  .section-line--line[data-state=visible] {
    display: block
  }

  @container (min-width: 960px) {
    .section-line--line {
      display: block
    }
  }

  .section-line[data-variant=aside] .section-line--line,
  .section-line[data-variant=aside-green-calc] .section-line--line {
    top: 0
  }
}

/*! purgecss start ignore */
@layer utilities {

  .animate-fade-in,
  .animate-slide-up,
  .animate-counter,
  .animate-slide-from-left,
  .animate-stripe {
    opacity: 0;
    font-variant-numeric: tabular-nums
  }

  .animate-line {
    height: 0
  }

  .animate-overlay {
    opacity: 0
  }

  .animate-overlay[data-animate-overlay=loaded] {
    --property: opacity;
    --duration: 1000ms;
    --delay: 600ms;
    --easing: ease-in-out;
    transition-property: var(--property);
    transition-duration: var(--duration);
    transition-delay: var(--delay);
    transition-timing-function: var(--easing);
    opacity: var(--opacity)
  }

  .animate-clip-in-from-left {
    --property: clip-path;
    --duration: 600ms;
    --delay: 100ms;
    --easing: ease-in-out;
    clip-path: inset(0 100% 0 0);
    transition-property: var(--property);
    transition-duration: var(--duration);
    transition-delay: var(--delay);
    transition-timing-function: var(--easing);
    will-change: clip-path
  }

  .animate-clip-in-from-left[data-animate-clip-in=loaded] {
    clip-path: inset(0 0 0 0)
  }

  .animate-clip-in-from-top {
    --property: clip-path;
    --duration: 600ms;
    --delay: 100ms;
    --easing: ease-in-out;
    clip-path: inset(0 0 100% 0);
    transition-property: var(--property);
    transition-duration: var(--duration);
    transition-delay: var(--delay);
    transition-timing-function: var(--easing);
    will-change: clip-path
  }

  .animate-clip-in-from-top[data-animate-clip-in=loaded] {
    clip-path: inset(0 0 0 0)
  }

  .animate-clip-in-from-bottom {
    --property: clip-path;
    --duration: 600ms;
    --delay: 100ms;
    --easing: ease-in-out;
    clip-path: inset(100% 0 0 0);
    transition-property: var(--property);
    transition-duration: var(--duration);
    transition-delay: var(--delay);
    transition-timing-function: var(--easing);
    will-change: clip-path
  }

  .animate-clip-in-from-bottom[data-animate-clip-in=loaded] {
    clip-path: inset(0 0 0 0)
  }
}

/*! purgecss end ignore */