@charset "UTF-8";
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/

  Andy Bell CSS reset
  https://andy-bell.co.uk/a-more-modern-css-reset/
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

#root,
#__next {
  isolation: isolate;
}

/* Media Queries */
.tc {
  text-align: center;
}

.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

.i {
  font-style: italic;
}

.link {
  text-decoration: none;
}

.normal {
  font-weight: 300;
}

.medium {
  font-weight: 500;
}

strong,
.bold,
.b {
  font-weight: 700;
}

.number {
  font-variant-numeric: tabular-nums;
}

.list {
  list-style: none;
  padding-left: 0;
}

.big {
  font-size: 2rem;
}

:root {
  --height-1: 1rem;
  --height-2: 2rem;
  --height-3: 4rem;
  --height-4: 8rem;
  --height-5: 16rem;
  --height-6: 24rem;
}

.height1 {
  height: 1rem;
}

.maxh1 {
  max-height: 1rem;
}

.minh1 {
  min-height: 1rem;
}

.height2 {
  height: 2rem;
}

.maxh2 {
  max-height: 2rem;
}

.minh2 {
  min-height: 2rem;
}

.height3 {
  height: 4rem;
}

.maxh3 {
  max-height: 4rem;
}

.minh3 {
  min-height: 4rem;
}

.height4 {
  height: 8rem;
}

.maxh4 {
  max-height: 8rem;
}

.minh4 {
  min-height: 8rem;
}

.height5 {
  height: 16rem;
}

.maxh5 {
  max-height: 16rem;
}

.minh5 {
  min-height: 16rem;
}

.height6 {
  height: 24rem;
}

.maxh6 {
  max-height: 24rem;
}

.minh6 {
  min-height: 24rem;
}

.height-25 {
  height: 25%;
}

.maxh-25 {
  max-height: 25%;
}

.minh-25 {
  min-height: 25%;
}

.height-50 {
  height: 50%;
}

.maxh-50 {
  max-height: 50%;
}

.minh-50 {
  min-height: 50%;
}

.height-75 {
  height: 75%;
}

.maxh-75 {
  max-height: 75%;
}

.minh-75 {
  min-height: 75%;
}

.height-100 {
  height: 100%;
}

.maxh-100 {
  max-height: 100%;
}

.minh-100 {
  min-height: 100%;
}

.height-25vh {
  height: 25vh;
}

.maxh-25vh {
  max-height: 25vh;
}

.minh-25vh {
  min-height: 25vh;
}

.height-50vh {
  height: 50vh;
}

.maxh-50vh {
  max-height: 50vh;
}

.minh-50vh {
  min-height: 50vh;
}

.height-75vh {
  height: 75vh;
}

.maxh-75vh {
  max-height: 75vh;
}

.minh-75vh {
  min-height: 75vh;
}

.height-100vh {
  height: 100vh;
}

.maxh-100vh {
  max-height: 100vh;
}

.minh-100vh {
  min-height: 100vh;
}

.height-auto {
  height: auto;
}

.maxh-auto {
  max-height: auto;
}

.minh-auto {
  min-height: auto;
}

.height-inherit {
  height: inherit;
}

.maxh-inherit {
  max-height: inherit;
}

.minh-inherit {
  min-height: inherit;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

@media screen and (min-width: 45em) {
  .height1-ns {
    height: 1rem;
  }
  .maxh1-ns {
    max-height: 1rem;
  }
  .minh1-ns {
    min-height: 1rem;
  }
  .height2-ns {
    height: 2rem;
  }
  .maxh2-ns {
    max-height: 2rem;
  }
  .minh2-ns {
    min-height: 2rem;
  }
  .height3-ns {
    height: 4rem;
  }
  .maxh3-ns {
    max-height: 4rem;
  }
  .minh3-ns {
    min-height: 4rem;
  }
  .height4-ns {
    height: 8rem;
  }
  .maxh4-ns {
    max-height: 8rem;
  }
  .minh4-ns {
    min-height: 8rem;
  }
  .height5-ns {
    height: 16rem;
  }
  .maxh5-ns {
    max-height: 16rem;
  }
  .minh5-ns {
    min-height: 16rem;
  }
  .height6-ns {
    height: 24rem;
  }
  .maxh6-ns {
    max-height: 24rem;
  }
  .minh6-ns {
    min-height: 24rem;
  }
  .height-25-ns {
    height: 25%;
  }
  .maxh-25-ns {
    max-height: 25%;
  }
  .minh-25-ns {
    min-height: 25%;
  }
  .height-50-ns {
    height: 50%;
  }
  .maxh-50-ns {
    max-height: 50%;
  }
  .minh-50-ns {
    min-height: 50%;
  }
  .height-75-ns {
    height: 75%;
  }
  .maxh-75-ns {
    max-height: 75%;
  }
  .minh-75-ns {
    min-height: 75%;
  }
  .height-100-ns {
    height: 100%;
  }
  .maxh-100-ns {
    max-height: 100%;
  }
  .minh-100-ns {
    min-height: 100%;
  }
  .height-25vh-ns {
    height: 25vh;
  }
  .maxh-25vh-ns {
    max-height: 25vh;
  }
  .minh-25vh-ns {
    min-height: 25vh;
  }
  .height-50vh-ns {
    height: 50vh;
  }
  .maxh-50vh-ns {
    max-height: 50vh;
  }
  .minh-50vh-ns {
    min-height: 50vh;
  }
  .height-75vh-ns {
    height: 75vh;
  }
  .maxh-75vh-ns {
    max-height: 75vh;
  }
  .minh-75vh-ns {
    min-height: 75vh;
  }
  .height-100vh-ns {
    height: 100vh;
  }
  .maxh-100vh-ns {
    max-height: 100vh;
  }
  .minh-100vh-ns {
    min-height: 100vh;
  }
  .height-auto-ns {
    height: auto;
  }
  .maxh-auto-ns {
    max-height: auto;
  }
  .minh-auto-ns {
    min-height: auto;
  }
  .height-inherit-ns {
    height: inherit;
  }
  .maxh-inherit-ns {
    max-height: inherit;
  }
  .minh-inherit-ns {
    min-height: inherit;
  }
  .overflow-hidden-ns {
    overflow: hidden;
  }
  .overflow-scroll-ns {
    overflow: scroll;
  }
  .overflow-auto-ns {
    overflow: auto;
  }
  .overflow-x-hidden-ns {
    overflow-x: hidden;
  }
  .overflow-x-scroll-ns {
    overflow-x: scroll;
  }
  .overflow-x-auto-ns {
    overflow-x: auto;
  }
  .overflow-y-hidden-ns {
    overflow-y: hidden;
  }
  .overflow-y-scroll-ns {
    overflow-y: scroll;
  }
  .overflow-y-auto-ns {
    overflow-y: auto;
  }
}
@media screen and (min-width: 45em) and (max-width: 60em) {
  .height1-m {
    height: 1rem;
  }
  .maxh1-m {
    max-height: 1rem;
  }
  .minh1-m {
    min-height: 1rem;
  }
  .height2-m {
    height: 2rem;
  }
  .maxh2-m {
    max-height: 2rem;
  }
  .minh2-m {
    min-height: 2rem;
  }
  .height3-m {
    height: 4rem;
  }
  .maxh3-m {
    max-height: 4rem;
  }
  .minh3-m {
    min-height: 4rem;
  }
  .height4-m {
    height: 8rem;
  }
  .maxh4-m {
    max-height: 8rem;
  }
  .minh4-m {
    min-height: 8rem;
  }
  .height5-m {
    height: 16rem;
  }
  .maxh5-m {
    max-height: 16rem;
  }
  .minh5-m {
    min-height: 16rem;
  }
  .height6-m {
    height: 24rem;
  }
  .maxh6-m {
    max-height: 24rem;
  }
  .minh6-m {
    min-height: 24rem;
  }
  .height-25-m {
    height: 25%;
  }
  .maxh-25-m {
    max-height: 25%;
  }
  .minh-25-m {
    min-height: 25%;
  }
  .height-50-m {
    height: 50%;
  }
  .maxh-50-m {
    max-height: 50%;
  }
  .minh-50-m {
    min-height: 50%;
  }
  .height-75-m {
    height: 75%;
  }
  .maxh-75-m {
    max-height: 75%;
  }
  .minh-75-m {
    min-height: 75%;
  }
  .height-100-m {
    height: 100%;
  }
  .maxh-100-m {
    max-height: 100%;
  }
  .minh-100-m {
    min-height: 100%;
  }
  .height-25vh-m {
    height: 25vh;
  }
  .maxh-25vh-m {
    max-height: 25vh;
  }
  .minh-25vh-m {
    min-height: 25vh;
  }
  .height-50vh-m {
    height: 50vh;
  }
  .maxh-50vh-m {
    max-height: 50vh;
  }
  .minh-50vh-m {
    min-height: 50vh;
  }
  .height-75vh-m {
    height: 75vh;
  }
  .maxh-75vh-m {
    max-height: 75vh;
  }
  .minh-75vh-m {
    min-height: 75vh;
  }
  .height-100vh-m {
    height: 100vh;
  }
  .maxh-100vh-m {
    max-height: 100vh;
  }
  .minh-100vh-m {
    min-height: 100vh;
  }
  .height-auto-m {
    height: auto;
  }
  .maxh-auto-m {
    max-height: auto;
  }
  .minh-auto-m {
    min-height: auto;
  }
  .height-inherit-m {
    height: inherit;
  }
  .maxh-inherit-m {
    max-height: inherit;
  }
  .minh-inherit-m {
    min-height: inherit;
  }
  .overflow-hidden-m {
    overflow: hidden;
  }
  .overflow-scroll-m {
    overflow: scroll;
  }
  .overflow-auto-m {
    overflow: auto;
  }
  .overflow-x-hidden-m {
    overflow-x: hidden;
  }
  .overflow-x-scroll-m {
    overflow-x: scroll;
  }
  .overflow-x-auto-m {
    overflow-x: auto;
  }
  .overflow-y-hidden-m {
    overflow-y: hidden;
  }
  .overflow-y-scroll-m {
    overflow-y: scroll;
  }
  .overflow-y-auto-m {
    overflow-y: auto;
  }
}
@media screen and (min-width: 60em) {
  .height1-l {
    height: 1rem;
  }
  .maxh1-l {
    max-height: 1rem;
  }
  .minh1-l {
    min-height: 1rem;
  }
  .height2-l {
    height: 2rem;
  }
  .maxh2-l {
    max-height: 2rem;
  }
  .minh2-l {
    min-height: 2rem;
  }
  .height3-l {
    height: 4rem;
  }
  .maxh3-l {
    max-height: 4rem;
  }
  .minh3-l {
    min-height: 4rem;
  }
  .height4-l {
    height: 8rem;
  }
  .maxh4-l {
    max-height: 8rem;
  }
  .minh4-l {
    min-height: 8rem;
  }
  .height5-l {
    height: 16rem;
  }
  .maxh5-l {
    max-height: 16rem;
  }
  .minh5-l {
    min-height: 16rem;
  }
  .height6-l {
    height: 24rem;
  }
  .maxh6-l {
    max-height: 24rem;
  }
  .minh6-l {
    min-height: 24rem;
  }
  .height-25-l {
    height: 25%;
  }
  .maxh-25-l {
    max-height: 25%;
  }
  .minh-25-l {
    min-height: 25%;
  }
  .height-50-l {
    height: 50%;
  }
  .maxh-50-l {
    max-height: 50%;
  }
  .minh-50-l {
    min-height: 50%;
  }
  .height-75-l {
    height: 75%;
  }
  .maxh-75-l {
    max-height: 75%;
  }
  .minh-75-l {
    min-height: 75%;
  }
  .height-100-l {
    height: 100%;
  }
  .maxh-100-l {
    max-height: 100%;
  }
  .minh-100-l {
    min-height: 100%;
  }
  .height-25vh-l {
    height: 25vh;
  }
  .maxh-25vh-l {
    max-height: 25vh;
  }
  .minh-25vh-l {
    min-height: 25vh;
  }
  .height-50vh-l {
    height: 50vh;
  }
  .maxh-50vh-l {
    max-height: 50vh;
  }
  .minh-50vh-l {
    min-height: 50vh;
  }
  .height-75vh-l {
    height: 75vh;
  }
  .maxh-75vh-l {
    max-height: 75vh;
  }
  .minh-75vh-l {
    min-height: 75vh;
  }
  .height-100vh-l {
    height: 100vh;
  }
  .maxh-100vh-l {
    max-height: 100vh;
  }
  .minh-100vh-l {
    min-height: 100vh;
  }
  .height-auto-l {
    height: auto;
  }
  .maxh-auto-l {
    max-height: auto;
  }
  .minh-auto-l {
    min-height: auto;
  }
  .height-inherit-l {
    height: inherit;
  }
  .maxh-inherit-l {
    max-height: inherit;
  }
  .minh-inherit-l {
    min-height: inherit;
  }
  .overflow-hidden-l {
    overflow: hidden;
  }
  .overflow-scroll-l {
    overflow: scroll;
  }
  .overflow-auto-l {
    overflow: auto;
  }
  .overflow-x-hidden-l {
    overflow-x: hidden;
  }
  .overflow-x-scroll-l {
    overflow-x: scroll;
  }
  .overflow-x-auto-l {
    overflow-x: auto;
  }
  .overflow-y-hidden-l {
    overflow-y: hidden;
  }
  .overflow-y-scroll-l {
    overflow-y: scroll;
  }
  .overflow-y-auto-l {
    overflow-y: auto;
  }
}
.prose {
  --background-color: var(--color-grey);
}
.prose > table {
  width: 100%;
}
.prose > table td,
.prose > table th {
  border: 2px solid #E8E8E8;
  padding: 1rem;
  font-weight: var(--font-weight);
}
.prose > table td .tr,
.prose > table th .tr {
  text-align: right;
}
.prose > table th {
  background-color: var(--background-color);
  text-align: left;
}
.prose > figure > figcaption {
  background-color: var(--background-color);
  color: var(--color-dark-purple);
  padding: 1.3rem 1.6rem;
}
.prose > figure.quote {
  padding-left: 3rem;
  border-left: 7px solid var(--color-purple);
}
.prose > figure.quote > figcaption {
  margin-left: 6.6rem;
  font-style: italic;
  padding: 0px;
  background-color: inherit;
}
.prose > figure.quote > blockquote > p:first-child {
  margin-top: 0.75rem;
}
.prose > figure.quote > blockquote::before {
  content: "“";
  font-family: var(--heading-font);
  color: var(--color-purple);
  font-size: 10rem;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: -7rem;
  margin-left: -0.3rem;
  display: block;
}
.prose p {
  line-height: 1.5;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.prose ol,
.prose ul {
  padding-left: 4.5rem;
}
.prose ol > li,
.prose ul > li {
  padding-left: 0.8125rem;
  margin-bottom: 0.4em;
  margin-top: 0.4em;
}
.prose > ol > li::marker {
  font-weight: 700;
}
.prose > ol > li > ol {
  list-style-type: lower-alpha;
}
.prose img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
}
.prose h1 {
  font-weight: 400;
}

/* Variables */
:root {
  --spacing-none: 0;
  --spacing-extra-small: .25rem;
  --spacing-small: .5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
  --spacing-extra-large: 4rem;
  --spacing-extra-extra-large: 8rem;
  --spacing-extra-extra-extra-large: 16rem;
}

/*
   SPACING
   Docs: http://tachyons.io/docs/layout/spacing/
   An eight step powers of two scale ranging from 0 to 16rem.
   Base:
     p = padding
     m = margin
   Modifiers:
     a = all
     h = horizontal
     v = vertical
     t = top
     r = right
     b = bottom
     l = left
     0 = none
     1 = 1st step in spacing scale
     2 = 2nd step in spacing scale
     3 = 3rd step in spacing scale
     4 = 4th step in spacing scale
     5 = 5th step in spacing scale
     6 = 6th step in spacing scale
     7 = 7th step in spacing scale
   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large
*/
.pa0 {
  padding: var(--spacing-none);
}

.ph0 {
  padding-left: var(--spacing-none);
  padding-right: var(--spacing-none);
}

.pv0 {
  padding-top: var(--spacing-none);
  padding-bottom: var(--spacing-none);
}

.pl0 {
  padding-left: var(--spacing-none);
}

.pr0 {
  padding-right: var(--spacing-none);
}

.pt0 {
  padding-top: var(--spacing-none);
}

.pb0 {
  padding-bottom: var(--spacing-none);
}

.pa1 {
  padding: var(--spacing-extra-small);
}

.ph1 {
  padding-left: var(--spacing-extra-small);
  padding-right: var(--spacing-extra-small);
}

.pv1 {
  padding-top: var(--spacing-extra-small);
  padding-bottom: var(--spacing-extra-small);
}

.pl1 {
  padding-left: var(--spacing-extra-small);
}

.pr1 {
  padding-right: var(--spacing-extra-small);
}

.pt1 {
  padding-top: var(--spacing-extra-small);
}

.pb1 {
  padding-bottom: var(--spacing-extra-small);
}

.pa2 {
  padding: var(--spacing-small);
}

.ph2 {
  padding-left: var(--spacing-small);
  padding-right: var(--spacing-small);
}

.pv2 {
  padding-top: var(--spacing-small);
  padding-bottom: var(--spacing-small);
}

.pl2 {
  padding-left: var(--spacing-small);
}

.pr2 {
  padding-right: var(--spacing-small);
}

.pt2 {
  padding-top: var(--spacing-small);
}

.pb2 {
  padding-bottom: var(--spacing-small);
}

.pa3 {
  padding: var(--spacing-medium);
}

.ph3 {
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
}

.pv3 {
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
}

.pl3 {
  padding-left: var(--spacing-medium);
}

.pr3 {
  padding-right: var(--spacing-medium);
}

.pt3 {
  padding-top: var(--spacing-medium);
}

.pb3 {
  padding-bottom: var(--spacing-medium);
}

.pa4 {
  padding: var(--spacing-large);
}

.ph4 {
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}

.pv4 {
  padding-top: var(--spacing-large);
  padding-bottom: var(--spacing-large);
}

.pl4 {
  padding-left: var(--spacing-large);
}

.pr4 {
  padding-right: var(--spacing-large);
}

.pt4 {
  padding-top: var(--spacing-large);
}

.pb4 {
  padding-bottom: var(--spacing-large);
}

.pa5 {
  padding: var(--spacing-extra-large);
}

.ph5 {
  padding-left: var(--spacing-extra-large);
  padding-right: var(--spacing-extra-large);
}

.pv5 {
  padding-top: var(--spacing-extra-large);
  padding-bottom: var(--spacing-extra-large);
}

.pl5 {
  padding-left: var(--spacing-extra-large);
}

.pr5 {
  padding-right: var(--spacing-extra-large);
}

.pt5 {
  padding-top: var(--spacing-extra-large);
}

.pb5 {
  padding-bottom: var(--spacing-extra-large);
}

.pa6 {
  padding: var(--spacing-extra-extra-large);
}

.ph6 {
  padding-left: var(--spacing-extra-extra-large);
  padding-right: var(--spacing-extra-extra-large);
}

.pv6 {
  padding-top: var(--spacing-extra-extra-large);
  padding-bottom: var(--spacing-extra-extra-large);
}

.pl6 {
  padding-left: var(--spacing-extra-extra-large);
}

.pr6 {
  padding-right: var(--spacing-extra-extra-large);
}

.pt6 {
  padding-top: var(--spacing-extra-extra-large);
}

.pb6 {
  padding-bottom: var(--spacing-extra-extra-large);
}

.pa7 {
  padding: var(--spacing-extra-extra-extra-large);
}

.ph7 {
  padding-left: var(--spacing-extra-extra-extra-large);
  padding-right: var(--spacing-extra-extra-extra-large);
}

.pv7 {
  padding-top: var(--spacing-extra-extra-extra-large);
  padding-bottom: var(--spacing-extra-extra-extra-large);
}

.pl7 {
  padding-left: var(--spacing-extra-extra-extra-large);
}

.pr7 {
  padding-right: var(--spacing-extra-extra-extra-large);
}

.pt7 {
  padding-top: var(--spacing-extra-extra-extra-large);
}

.pb7 {
  padding-bottom: var(--spacing-extra-extra-extra-large);
}

.ma0 {
  margin: var(--spacing-none);
}

.mh0 {
  margin-left: var(--spacing-none);
  margin-right: var(--spacing-none);
}

.mv0 {
  margin-top: var(--spacing-none);
  margin-bottom: var(--spacing-none);
}

.ml0 {
  margin-left: var(--spacing-none);
}

.mr0 {
  margin-right: var(--spacing-none);
}

.mt0 {
  margin-top: var(--spacing-none);
}

.mb0 {
  margin-bottom: var(--spacing-none);
}

.ma1 {
  margin: var(--spacing-extra-small);
}

.mh1 {
  margin-left: var(--spacing-extra-small);
  margin-right: var(--spacing-extra-small);
}

.mv1 {
  margin-top: var(--spacing-extra-small);
  margin-bottom: var(--spacing-extra-small);
}

.ml1 {
  margin-left: var(--spacing-extra-small);
}

.mr1 {
  margin-right: var(--spacing-extra-small);
}

.mt1 {
  margin-top: var(--spacing-extra-small);
}

.mb1 {
  margin-bottom: var(--spacing-extra-small);
}

.ma2 {
  margin: var(--spacing-small);
}

.mh2 {
  margin-left: var(--spacing-small);
  margin-right: var(--spacing-small);
}

.mv2 {
  margin-top: var(--spacing-small);
  margin-bottom: var(--spacing-small);
}

.ml2 {
  margin-left: var(--spacing-small);
}

.mr2 {
  margin-right: var(--spacing-small);
}

.mt2 {
  margin-top: var(--spacing-small);
}

.mb2 {
  margin-bottom: var(--spacing-small);
}

.ma3 {
  margin: var(--spacing-medium);
}

.mh3 {
  margin-left: var(--spacing-medium);
  margin-right: var(--spacing-medium);
}

.mv3 {
  margin-top: var(--spacing-medium);
  margin-bottom: var(--spacing-medium);
}

.ml3 {
  margin-left: var(--spacing-medium);
}

.mr3 {
  margin-right: var(--spacing-medium);
}

.mt3 {
  margin-top: var(--spacing-medium);
}

.mb3 {
  margin-bottom: var(--spacing-medium);
}

.ma4 {
  margin: var(--spacing-large);
}

.mh4 {
  margin-left: var(--spacing-large);
  margin-right: var(--spacing-large);
}

.mv4 {
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}

.ml4 {
  margin-left: var(--spacing-large);
}

.mr4 {
  margin-right: var(--spacing-large);
}

.mt4 {
  margin-top: var(--spacing-large);
}

.mb4 {
  margin-bottom: var(--spacing-large);
}

.ma5 {
  margin: var(--spacing-extra-large);
}

.mh5 {
  margin-left: var(--spacing-extra-large);
  margin-right: var(--spacing-extra-large);
}

.mv5 {
  margin-top: var(--spacing-extra-large);
  margin-bottom: var(--spacing-extra-large);
}

.ml5 {
  margin-left: var(--spacing-extra-large);
}

.mr5 {
  margin-right: var(--spacing-extra-large);
}

.mt5 {
  margin-top: var(--spacing-extra-large);
}

.mb5 {
  margin-bottom: var(--spacing-extra-large);
}

.ma6 {
  margin: var(--spacing-extra-extra-large);
}

.mh6 {
  margin-left: var(--spacing-extra-extra-large);
  margin-right: var(--spacing-extra-extra-large);
}

.mv6 {
  margin-top: var(--spacing-extra-extra-large);
  margin-bottom: var(--spacing-extra-extra-large);
}

.ml6 {
  margin-left: var(--spacing-extra-extra-large);
}

.mr6 {
  margin-right: var(--spacing-extra-extra-large);
}

.mt6 {
  margin-top: var(--spacing-extra-extra-large);
}

.mb6 {
  margin-bottom: var(--spacing-extra-extra-large);
}

.ma7 {
  margin: var(--spacing-extra-extra-extra-large);
}

.mh7 {
  margin-left: var(--spacing-extra-extra-extra-large);
  margin-right: var(--spacing-extra-extra-extra-large);
}

.mv7 {
  margin-top: var(--spacing-extra-extra-extra-large);
  margin-bottom: var(--spacing-extra-extra-extra-large);
}

.ml7 {
  margin-left: var(--spacing-extra-extra-extra-large);
}

.mr7 {
  margin-right: var(--spacing-extra-extra-extra-large);
}

.mt7 {
  margin-top: var(--spacing-extra-extra-extra-large);
}

.mb7 {
  margin-bottom: var(--spacing-extra-extra-extra-large);
}

@media screen and (min-width: 45em) {
  .pa0-ns {
    padding: var(--spacing-none);
  }
  .ph0-ns {
    padding-left: var(--spacing-none);
    padding-right: var(--spacing-none);
  }
  .pv0-ns {
    padding-top: var(--spacing-none);
    padding-bottom: var(--spacing-none);
  }
  .pl0-ns {
    padding-left: var(--spacing-none);
  }
  .pr0-ns {
    padding-right: var(--spacing-none);
  }
  .pt0-ns {
    padding-top: var(--spacing-none);
  }
  .pb0-ns {
    padding-bottom: var(--spacing-none);
  }
  .pa1-ns {
    padding: var(--spacing-extra-small);
  }
  .ph1-ns {
    padding-left: var(--spacing-extra-small);
    padding-right: var(--spacing-extra-small);
  }
  .pv1-ns {
    padding-top: var(--spacing-extra-small);
    padding-bottom: var(--spacing-extra-small);
  }
  .pl1-ns {
    padding-left: var(--spacing-extra-small);
  }
  .pr1-ns {
    padding-right: var(--spacing-extra-small);
  }
  .pt1-ns {
    padding-top: var(--spacing-extra-small);
  }
  .pb1-ns {
    padding-bottom: var(--spacing-extra-small);
  }
  .pa2-ns {
    padding: var(--spacing-small);
  }
  .ph2-ns {
    padding-left: var(--spacing-small);
    padding-right: var(--spacing-small);
  }
  .pv2-ns {
    padding-top: var(--spacing-small);
    padding-bottom: var(--spacing-small);
  }
  .pl2-ns {
    padding-left: var(--spacing-small);
  }
  .pr2-ns {
    padding-right: var(--spacing-small);
  }
  .pt2-ns {
    padding-top: var(--spacing-small);
  }
  .pb2-ns {
    padding-bottom: var(--spacing-small);
  }
  .pa3-ns {
    padding: var(--spacing-medium);
  }
  .ph3-ns {
    padding-left: var(--spacing-medium);
    padding-right: var(--spacing-medium);
  }
  .pv3-ns {
    padding-top: var(--spacing-medium);
    padding-bottom: var(--spacing-medium);
  }
  .pl3-ns {
    padding-left: var(--spacing-medium);
  }
  .pr3-ns {
    padding-right: var(--spacing-medium);
  }
  .pt3-ns {
    padding-top: var(--spacing-medium);
  }
  .pb3-ns {
    padding-bottom: var(--spacing-medium);
  }
  .pa4-ns {
    padding: var(--spacing-large);
  }
  .ph4-ns {
    padding-left: var(--spacing-large);
    padding-right: var(--spacing-large);
  }
  .pv4-ns {
    padding-top: var(--spacing-large);
    padding-bottom: var(--spacing-large);
  }
  .pl4-ns {
    padding-left: var(--spacing-large);
  }
  .pr4-ns {
    padding-right: var(--spacing-large);
  }
  .pt4-ns {
    padding-top: var(--spacing-large);
  }
  .pb4-ns {
    padding-bottom: var(--spacing-large);
  }
  .pa5-ns {
    padding: var(--spacing-extra-large);
  }
  .ph5-ns {
    padding-left: var(--spacing-extra-large);
    padding-right: var(--spacing-extra-large);
  }
  .pv5-ns {
    padding-top: var(--spacing-extra-large);
    padding-bottom: var(--spacing-extra-large);
  }
  .pl5-ns {
    padding-left: var(--spacing-extra-large);
  }
  .pr5-ns {
    padding-right: var(--spacing-extra-large);
  }
  .pt5-ns {
    padding-top: var(--spacing-extra-large);
  }
  .pb5-ns {
    padding-bottom: var(--spacing-extra-large);
  }
  .pa6-ns {
    padding: var(--spacing-extra-extra-large);
  }
  .ph6-ns {
    padding-left: var(--spacing-extra-extra-large);
    padding-right: var(--spacing-extra-extra-large);
  }
  .pv6-ns {
    padding-top: var(--spacing-extra-extra-large);
    padding-bottom: var(--spacing-extra-extra-large);
  }
  .pl6-ns {
    padding-left: var(--spacing-extra-extra-large);
  }
  .pr6-ns {
    padding-right: var(--spacing-extra-extra-large);
  }
  .pt6-ns {
    padding-top: var(--spacing-extra-extra-large);
  }
  .pb6-ns {
    padding-bottom: var(--spacing-extra-extra-large);
  }
  .pa7-ns {
    padding: var(--spacing-extra-extra-extra-large);
  }
  .ph7-ns {
    padding-left: var(--spacing-extra-extra-extra-large);
    padding-right: var(--spacing-extra-extra-extra-large);
  }
  .pv7-ns {
    padding-top: var(--spacing-extra-extra-extra-large);
    padding-bottom: var(--spacing-extra-extra-extra-large);
  }
  .pl7-ns {
    padding-left: var(--spacing-extra-extra-extra-large);
  }
  .pr7-ns {
    padding-right: var(--spacing-extra-extra-extra-large);
  }
  .pt7-ns {
    padding-top: var(--spacing-extra-extra-extra-large);
  }
  .pb7-ns {
    padding-bottom: var(--spacing-extra-extra-extra-large);
  }
  .ma0-ns {
    margin: var(--spacing-none);
  }
  .mh0-ns {
    margin-left: var(--spacing-none);
    margin-right: var(--spacing-none);
  }
  .mv0-ns {
    margin-top: var(--spacing-none);
    margin-bottom: var(--spacing-none);
  }
  .ml0-ns {
    margin-left: var(--spacing-none);
  }
  .mr0-ns {
    margin-right: var(--spacing-none);
  }
  .mt0-ns {
    margin-top: var(--spacing-none);
  }
  .mb0-ns {
    margin-bottom: var(--spacing-none);
  }
  .ma1-ns {
    margin: var(--spacing-extra-small);
  }
  .mh1-ns {
    margin-left: var(--spacing-extra-small);
    margin-right: var(--spacing-extra-small);
  }
  .mv1-ns {
    margin-top: var(--spacing-extra-small);
    margin-bottom: var(--spacing-extra-small);
  }
  .ml1-ns {
    margin-left: var(--spacing-extra-small);
  }
  .mr1-ns {
    margin-right: var(--spacing-extra-small);
  }
  .mt1-ns {
    margin-top: var(--spacing-extra-small);
  }
  .mb1-ns {
    margin-bottom: var(--spacing-extra-small);
  }
  .ma2-ns {
    margin: var(--spacing-small);
  }
  .mh2-ns {
    margin-left: var(--spacing-small);
    margin-right: var(--spacing-small);
  }
  .mv2-ns {
    margin-top: var(--spacing-small);
    margin-bottom: var(--spacing-small);
  }
  .ml2-ns {
    margin-left: var(--spacing-small);
  }
  .mr2-ns {
    margin-right: var(--spacing-small);
  }
  .mt2-ns {
    margin-top: var(--spacing-small);
  }
  .mb2-ns {
    margin-bottom: var(--spacing-small);
  }
  .ma3-ns {
    margin: var(--spacing-medium);
  }
  .mh3-ns {
    margin-left: var(--spacing-medium);
    margin-right: var(--spacing-medium);
  }
  .mv3-ns {
    margin-top: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
  }
  .ml3-ns {
    margin-left: var(--spacing-medium);
  }
  .mr3-ns {
    margin-right: var(--spacing-medium);
  }
  .mt3-ns {
    margin-top: var(--spacing-medium);
  }
  .mb3-ns {
    margin-bottom: var(--spacing-medium);
  }
  .ma4-ns {
    margin: var(--spacing-large);
  }
  .mh4-ns {
    margin-left: var(--spacing-large);
    margin-right: var(--spacing-large);
  }
  .mv4-ns {
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large);
  }
  .ml4-ns {
    margin-left: var(--spacing-large);
  }
  .mr4-ns {
    margin-right: var(--spacing-large);
  }
  .mt4-ns {
    margin-top: var(--spacing-large);
  }
  .mb4-ns {
    margin-bottom: var(--spacing-large);
  }
  .ma5-ns {
    margin: var(--spacing-extra-large);
  }
  .mh5-ns {
    margin-left: var(--spacing-extra-large);
    margin-right: var(--spacing-extra-large);
  }
  .mv5-ns {
    margin-top: var(--spacing-extra-large);
    margin-bottom: var(--spacing-extra-large);
  }
  .ml5-ns {
    margin-left: var(--spacing-extra-large);
  }
  .mr5-ns {
    margin-right: var(--spacing-extra-large);
  }
  .mt5-ns {
    margin-top: var(--spacing-extra-large);
  }
  .mb5-ns {
    margin-bottom: var(--spacing-extra-large);
  }
  .ma6-ns {
    margin: var(--spacing-extra-extra-large);
  }
  .mh6-ns {
    margin-left: var(--spacing-extra-extra-large);
    margin-right: var(--spacing-extra-extra-large);
  }
  .mv6-ns {
    margin-top: var(--spacing-extra-extra-large);
    margin-bottom: var(--spacing-extra-extra-large);
  }
  .ml6-ns {
    margin-left: var(--spacing-extra-extra-large);
  }
  .mr6-ns {
    margin-right: var(--spacing-extra-extra-large);
  }
  .mt6-ns {
    margin-top: var(--spacing-extra-extra-large);
  }
  .mb6-ns {
    margin-bottom: var(--spacing-extra-extra-large);
  }
  .ma7-ns {
    margin: var(--spacing-extra-extra-extra-large);
  }
  .mh7-ns {
    margin-left: var(--spacing-extra-extra-extra-large);
    margin-right: var(--spacing-extra-extra-extra-large);
  }
  .mv7-ns {
    margin-top: var(--spacing-extra-extra-extra-large);
    margin-bottom: var(--spacing-extra-extra-extra-large);
  }
  .ml7-ns {
    margin-left: var(--spacing-extra-extra-extra-large);
  }
  .mr7-ns {
    margin-right: var(--spacing-extra-extra-extra-large);
  }
  .mt7-ns {
    margin-top: var(--spacing-extra-extra-extra-large);
  }
  .mb7-ns {
    margin-bottom: var(--spacing-extra-extra-extra-large);
  }
}
@media screen and (min-width: 45em) and (max-width: 60em) {
  .pa0-m {
    padding: var(--spacing-none);
  }
  .ph0-m {
    padding-left: var(--spacing-none);
    padding-right: var(--spacing-none);
  }
  .pv0-m {
    padding-top: var(--spacing-none);
    padding-bottom: var(--spacing-none);
  }
  .pl0-m {
    padding-left: var(--spacing-none);
  }
  .pr0-m {
    padding-right: var(--spacing-none);
  }
  .pt0-m {
    padding-top: var(--spacing-none);
  }
  .pb0-m {
    padding-bottom: var(--spacing-none);
  }
  .pa1-m {
    padding: var(--spacing-extra-small);
  }
  .ph1-m {
    padding-left: var(--spacing-extra-small);
    padding-right: var(--spacing-extra-small);
  }
  .pv1-m {
    padding-top: var(--spacing-extra-small);
    padding-bottom: var(--spacing-extra-small);
  }
  .pl1-m {
    padding-left: var(--spacing-extra-small);
  }
  .pr1-m {
    padding-right: var(--spacing-extra-small);
  }
  .pt1-m {
    padding-top: var(--spacing-extra-small);
  }
  .pb1-m {
    padding-bottom: var(--spacing-extra-small);
  }
  .pa2-m {
    padding: var(--spacing-small);
  }
  .ph2-m {
    padding-left: var(--spacing-small);
    padding-right: var(--spacing-small);
  }
  .pv2-m {
    padding-top: var(--spacing-small);
    padding-bottom: var(--spacing-small);
  }
  .pl2-m {
    padding-left: var(--spacing-small);
  }
  .pr2-m {
    padding-right: var(--spacing-small);
  }
  .pt2-m {
    padding-top: var(--spacing-small);
  }
  .pb2-m {
    padding-bottom: var(--spacing-small);
  }
  .pa3-m {
    padding: var(--spacing-medium);
  }
  .ph3-m {
    padding-left: var(--spacing-medium);
    padding-right: var(--spacing-medium);
  }
  .pv3-m {
    padding-top: var(--spacing-medium);
    padding-bottom: var(--spacing-medium);
  }
  .pl3-m {
    padding-left: var(--spacing-medium);
  }
  .pr3-m {
    padding-right: var(--spacing-medium);
  }
  .pt3-m {
    padding-top: var(--spacing-medium);
  }
  .pb3-m {
    padding-bottom: var(--spacing-medium);
  }
  .pa4-m {
    padding: var(--spacing-large);
  }
  .ph4-m {
    padding-left: var(--spacing-large);
    padding-right: var(--spacing-large);
  }
  .pv4-m {
    padding-top: var(--spacing-large);
    padding-bottom: var(--spacing-large);
  }
  .pl4-m {
    padding-left: var(--spacing-large);
  }
  .pr4-m {
    padding-right: var(--spacing-large);
  }
  .pt4-m {
    padding-top: var(--spacing-large);
  }
  .pb4-m {
    padding-bottom: var(--spacing-large);
  }
  .pa5-m {
    padding: var(--spacing-extra-large);
  }
  .ph5-m {
    padding-left: var(--spacing-extra-large);
    padding-right: var(--spacing-extra-large);
  }
  .pv5-m {
    padding-top: var(--spacing-extra-large);
    padding-bottom: var(--spacing-extra-large);
  }
  .pl5-m {
    padding-left: var(--spacing-extra-large);
  }
  .pr5-m {
    padding-right: var(--spacing-extra-large);
  }
  .pt5-m {
    padding-top: var(--spacing-extra-large);
  }
  .pb5-m {
    padding-bottom: var(--spacing-extra-large);
  }
  .pa6-m {
    padding: var(--spacing-extra-extra-large);
  }
  .ph6-m {
    padding-left: var(--spacing-extra-extra-large);
    padding-right: var(--spacing-extra-extra-large);
  }
  .pv6-m {
    padding-top: var(--spacing-extra-extra-large);
    padding-bottom: var(--spacing-extra-extra-large);
  }
  .pl6-m {
    padding-left: var(--spacing-extra-extra-large);
  }
  .pr6-m {
    padding-right: var(--spacing-extra-extra-large);
  }
  .pt6-m {
    padding-top: var(--spacing-extra-extra-large);
  }
  .pb6-m {
    padding-bottom: var(--spacing-extra-extra-large);
  }
  .pa7-m {
    padding: var(--spacing-extra-extra-extra-large);
  }
  .ph7-m {
    padding-left: var(--spacing-extra-extra-extra-large);
    padding-right: var(--spacing-extra-extra-extra-large);
  }
  .pv7-m {
    padding-top: var(--spacing-extra-extra-extra-large);
    padding-bottom: var(--spacing-extra-extra-extra-large);
  }
  .pl7-m {
    padding-left: var(--spacing-extra-extra-extra-large);
  }
  .pr7-m {
    padding-right: var(--spacing-extra-extra-extra-large);
  }
  .pt7-m {
    padding-top: var(--spacing-extra-extra-extra-large);
  }
  .pb7-m {
    padding-bottom: var(--spacing-extra-extra-extra-large);
  }
  .ma0-m {
    margin: var(--spacing-none);
  }
  .mh0-m {
    margin-left: var(--spacing-none);
    margin-right: var(--spacing-none);
  }
  .mv0-m {
    margin-top: var(--spacing-none);
    margin-bottom: var(--spacing-none);
  }
  .ml0-m {
    margin-left: var(--spacing-none);
  }
  .mr0-m {
    margin-right: var(--spacing-none);
  }
  .mt0-m {
    margin-top: var(--spacing-none);
  }
  .mb0-m {
    margin-bottom: var(--spacing-none);
  }
  .ma1-m {
    margin: var(--spacing-extra-small);
  }
  .mh1-m {
    margin-left: var(--spacing-extra-small);
    margin-right: var(--spacing-extra-small);
  }
  .mv1-m {
    margin-top: var(--spacing-extra-small);
    margin-bottom: var(--spacing-extra-small);
  }
  .ml1-m {
    margin-left: var(--spacing-extra-small);
  }
  .mr1-m {
    margin-right: var(--spacing-extra-small);
  }
  .mt1-m {
    margin-top: var(--spacing-extra-small);
  }
  .mb1-m {
    margin-bottom: var(--spacing-extra-small);
  }
  .ma2-m {
    margin: var(--spacing-small);
  }
  .mh2-m {
    margin-left: var(--spacing-small);
    margin-right: var(--spacing-small);
  }
  .mv2-m {
    margin-top: var(--spacing-small);
    margin-bottom: var(--spacing-small);
  }
  .ml2-m {
    margin-left: var(--spacing-small);
  }
  .mr2-m {
    margin-right: var(--spacing-small);
  }
  .mt2-m {
    margin-top: var(--spacing-small);
  }
  .mb2-m {
    margin-bottom: var(--spacing-small);
  }
  .ma3-m {
    margin: var(--spacing-medium);
  }
  .mh3-m {
    margin-left: var(--spacing-medium);
    margin-right: var(--spacing-medium);
  }
  .mv3-m {
    margin-top: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
  }
  .ml3-m {
    margin-left: var(--spacing-medium);
  }
  .mr3-m {
    margin-right: var(--spacing-medium);
  }
  .mt3-m {
    margin-top: var(--spacing-medium);
  }
  .mb3-m {
    margin-bottom: var(--spacing-medium);
  }
  .ma4-m {
    margin: var(--spacing-large);
  }
  .mh4-m {
    margin-left: var(--spacing-large);
    margin-right: var(--spacing-large);
  }
  .mv4-m {
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large);
  }
  .ml4-m {
    margin-left: var(--spacing-large);
  }
  .mr4-m {
    margin-right: var(--spacing-large);
  }
  .mt4-m {
    margin-top: var(--spacing-large);
  }
  .mb4-m {
    margin-bottom: var(--spacing-large);
  }
  .ma5-m {
    margin: var(--spacing-extra-large);
  }
  .mh5-m {
    margin-left: var(--spacing-extra-large);
    margin-right: var(--spacing-extra-large);
  }
  .mv5-m {
    margin-top: var(--spacing-extra-large);
    margin-bottom: var(--spacing-extra-large);
  }
  .ml5-m {
    margin-left: var(--spacing-extra-large);
  }
  .mr5-m {
    margin-right: var(--spacing-extra-large);
  }
  .mt5-m {
    margin-top: var(--spacing-extra-large);
  }
  .mb5-m {
    margin-bottom: var(--spacing-extra-large);
  }
  .ma6-m {
    margin: var(--spacing-extra-extra-large);
  }
  .mh6-m {
    margin-left: var(--spacing-extra-extra-large);
    margin-right: var(--spacing-extra-extra-large);
  }
  .mv6-m {
    margin-top: var(--spacing-extra-extra-large);
    margin-bottom: var(--spacing-extra-extra-large);
  }
  .ml6-m {
    margin-left: var(--spacing-extra-extra-large);
  }
  .mr6-m {
    margin-right: var(--spacing-extra-extra-large);
  }
  .mt6-m {
    margin-top: var(--spacing-extra-extra-large);
  }
  .mb6-m {
    margin-bottom: var(--spacing-extra-extra-large);
  }
  .ma7-m {
    margin: var(--spacing-extra-extra-extra-large);
  }
  .mh7-m {
    margin-left: var(--spacing-extra-extra-extra-large);
    margin-right: var(--spacing-extra-extra-extra-large);
  }
  .mv7-m {
    margin-top: var(--spacing-extra-extra-extra-large);
    margin-bottom: var(--spacing-extra-extra-extra-large);
  }
  .ml7-m {
    margin-left: var(--spacing-extra-extra-extra-large);
  }
  .mr7-m {
    margin-right: var(--spacing-extra-extra-extra-large);
  }
  .mt7-m {
    margin-top: var(--spacing-extra-extra-extra-large);
  }
  .mb7-m {
    margin-bottom: var(--spacing-extra-extra-extra-large);
  }
}
@media screen and (min-width: 60em) {
  .pa0-l {
    padding: var(--spacing-none);
  }
  .ph0-l {
    padding-left: var(--spacing-none);
    padding-right: var(--spacing-none);
  }
  .pv0-l {
    padding-top: var(--spacing-none);
    padding-bottom: var(--spacing-none);
  }
  .pl0-l {
    padding-left: var(--spacing-none);
  }
  .pr0-l {
    padding-right: var(--spacing-none);
  }
  .pt0-l {
    padding-top: var(--spacing-none);
  }
  .pb0-l {
    padding-bottom: var(--spacing-none);
  }
  .pa1-l {
    padding: var(--spacing-extra-small);
  }
  .ph1-l {
    padding-left: var(--spacing-extra-small);
    padding-right: var(--spacing-extra-small);
  }
  .pv1-l {
    padding-top: var(--spacing-extra-small);
    padding-bottom: var(--spacing-extra-small);
  }
  .pl1-l {
    padding-left: var(--spacing-extra-small);
  }
  .pr1-l {
    padding-right: var(--spacing-extra-small);
  }
  .pt1-l {
    padding-top: var(--spacing-extra-small);
  }
  .pb1-l {
    padding-bottom: var(--spacing-extra-small);
  }
  .pa2-l {
    padding: var(--spacing-small);
  }
  .ph2-l {
    padding-left: var(--spacing-small);
    padding-right: var(--spacing-small);
  }
  .pv2-l {
    padding-top: var(--spacing-small);
    padding-bottom: var(--spacing-small);
  }
  .pl2-l {
    padding-left: var(--spacing-small);
  }
  .pr2-l {
    padding-right: var(--spacing-small);
  }
  .pt2-l {
    padding-top: var(--spacing-small);
  }
  .pb2-l {
    padding-bottom: var(--spacing-small);
  }
  .pa3-l {
    padding: var(--spacing-medium);
  }
  .ph3-l {
    padding-left: var(--spacing-medium);
    padding-right: var(--spacing-medium);
  }
  .pv3-l {
    padding-top: var(--spacing-medium);
    padding-bottom: var(--spacing-medium);
  }
  .pl3-l {
    padding-left: var(--spacing-medium);
  }
  .pr3-l {
    padding-right: var(--spacing-medium);
  }
  .pt3-l {
    padding-top: var(--spacing-medium);
  }
  .pb3-l {
    padding-bottom: var(--spacing-medium);
  }
  .pa4-l {
    padding: var(--spacing-large);
  }
  .ph4-l {
    padding-left: var(--spacing-large);
    padding-right: var(--spacing-large);
  }
  .pv4-l {
    padding-top: var(--spacing-large);
    padding-bottom: var(--spacing-large);
  }
  .pl4-l {
    padding-left: var(--spacing-large);
  }
  .pr4-l {
    padding-right: var(--spacing-large);
  }
  .pt4-l {
    padding-top: var(--spacing-large);
  }
  .pb4-l {
    padding-bottom: var(--spacing-large);
  }
  .pa5-l {
    padding: var(--spacing-extra-large);
  }
  .ph5-l {
    padding-left: var(--spacing-extra-large);
    padding-right: var(--spacing-extra-large);
  }
  .pv5-l {
    padding-top: var(--spacing-extra-large);
    padding-bottom: var(--spacing-extra-large);
  }
  .pl5-l {
    padding-left: var(--spacing-extra-large);
  }
  .pr5-l {
    padding-right: var(--spacing-extra-large);
  }
  .pt5-l {
    padding-top: var(--spacing-extra-large);
  }
  .pb5-l {
    padding-bottom: var(--spacing-extra-large);
  }
  .pa6-l {
    padding: var(--spacing-extra-extra-large);
  }
  .ph6-l {
    padding-left: var(--spacing-extra-extra-large);
    padding-right: var(--spacing-extra-extra-large);
  }
  .pv6-l {
    padding-top: var(--spacing-extra-extra-large);
    padding-bottom: var(--spacing-extra-extra-large);
  }
  .pl6-l {
    padding-left: var(--spacing-extra-extra-large);
  }
  .pr6-l {
    padding-right: var(--spacing-extra-extra-large);
  }
  .pt6-l {
    padding-top: var(--spacing-extra-extra-large);
  }
  .pb6-l {
    padding-bottom: var(--spacing-extra-extra-large);
  }
  .pa7-l {
    padding: var(--spacing-extra-extra-extra-large);
  }
  .ph7-l {
    padding-left: var(--spacing-extra-extra-extra-large);
    padding-right: var(--spacing-extra-extra-extra-large);
  }
  .pv7-l {
    padding-top: var(--spacing-extra-extra-extra-large);
    padding-bottom: var(--spacing-extra-extra-extra-large);
  }
  .pl7-l {
    padding-left: var(--spacing-extra-extra-extra-large);
  }
  .pr7-l {
    padding-right: var(--spacing-extra-extra-extra-large);
  }
  .pt7-l {
    padding-top: var(--spacing-extra-extra-extra-large);
  }
  .pb7-l {
    padding-bottom: var(--spacing-extra-extra-extra-large);
  }
  .ma0-l {
    margin: var(--spacing-none);
  }
  .mh0-l {
    margin-left: var(--spacing-none);
    margin-right: var(--spacing-none);
  }
  .mv0-l {
    margin-top: var(--spacing-none);
    margin-bottom: var(--spacing-none);
  }
  .ml0-l {
    margin-left: var(--spacing-none);
  }
  .mr0-l {
    margin-right: var(--spacing-none);
  }
  .mt0-l {
    margin-top: var(--spacing-none);
  }
  .mb0-l {
    margin-bottom: var(--spacing-none);
  }
  .ma1-l {
    margin: var(--spacing-extra-small);
  }
  .mh1-l {
    margin-left: var(--spacing-extra-small);
    margin-right: var(--spacing-extra-small);
  }
  .mv1-l {
    margin-top: var(--spacing-extra-small);
    margin-bottom: var(--spacing-extra-small);
  }
  .ml1-l {
    margin-left: var(--spacing-extra-small);
  }
  .mr1-l {
    margin-right: var(--spacing-extra-small);
  }
  .mt1-l {
    margin-top: var(--spacing-extra-small);
  }
  .mb1-l {
    margin-bottom: var(--spacing-extra-small);
  }
  .ma2-l {
    margin: var(--spacing-small);
  }
  .mh2-l {
    margin-left: var(--spacing-small);
    margin-right: var(--spacing-small);
  }
  .mv2-l {
    margin-top: var(--spacing-small);
    margin-bottom: var(--spacing-small);
  }
  .ml2-l {
    margin-left: var(--spacing-small);
  }
  .mr2-l {
    margin-right: var(--spacing-small);
  }
  .mt2-l {
    margin-top: var(--spacing-small);
  }
  .mb2-l {
    margin-bottom: var(--spacing-small);
  }
  .ma3-l {
    margin: var(--spacing-medium);
  }
  .mh3-l {
    margin-left: var(--spacing-medium);
    margin-right: var(--spacing-medium);
  }
  .mv3-l {
    margin-top: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
  }
  .ml3-l {
    margin-left: var(--spacing-medium);
  }
  .mr3-l {
    margin-right: var(--spacing-medium);
  }
  .mt3-l {
    margin-top: var(--spacing-medium);
  }
  .mb3-l {
    margin-bottom: var(--spacing-medium);
  }
  .ma4-l {
    margin: var(--spacing-large);
  }
  .mh4-l {
    margin-left: var(--spacing-large);
    margin-right: var(--spacing-large);
  }
  .mv4-l {
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large);
  }
  .ml4-l {
    margin-left: var(--spacing-large);
  }
  .mr4-l {
    margin-right: var(--spacing-large);
  }
  .mt4-l {
    margin-top: var(--spacing-large);
  }
  .mb4-l {
    margin-bottom: var(--spacing-large);
  }
  .ma5-l {
    margin: var(--spacing-extra-large);
  }
  .mh5-l {
    margin-left: var(--spacing-extra-large);
    margin-right: var(--spacing-extra-large);
  }
  .mv5-l {
    margin-top: var(--spacing-extra-large);
    margin-bottom: var(--spacing-extra-large);
  }
  .ml5-l {
    margin-left: var(--spacing-extra-large);
  }
  .mr5-l {
    margin-right: var(--spacing-extra-large);
  }
  .mt5-l {
    margin-top: var(--spacing-extra-large);
  }
  .mb5-l {
    margin-bottom: var(--spacing-extra-large);
  }
  .ma6-l {
    margin: var(--spacing-extra-extra-large);
  }
  .mh6-l {
    margin-left: var(--spacing-extra-extra-large);
    margin-right: var(--spacing-extra-extra-large);
  }
  .mv6-l {
    margin-top: var(--spacing-extra-extra-large);
    margin-bottom: var(--spacing-extra-extra-large);
  }
  .ml6-l {
    margin-left: var(--spacing-extra-extra-large);
  }
  .mr6-l {
    margin-right: var(--spacing-extra-extra-large);
  }
  .mt6-l {
    margin-top: var(--spacing-extra-extra-large);
  }
  .mb6-l {
    margin-bottom: var(--spacing-extra-extra-large);
  }
  .ma7-l {
    margin: var(--spacing-extra-extra-extra-large);
  }
  .mh7-l {
    margin-left: var(--spacing-extra-extra-extra-large);
    margin-right: var(--spacing-extra-extra-extra-large);
  }
  .mv7-l {
    margin-top: var(--spacing-extra-extra-extra-large);
    margin-bottom: var(--spacing-extra-extra-extra-large);
  }
  .ml7-l {
    margin-left: var(--spacing-extra-extra-extra-large);
  }
  .mr7-l {
    margin-right: var(--spacing-extra-extra-extra-large);
  }
  .mt7-l {
    margin-top: var(--spacing-extra-extra-extra-large);
  }
  .mb7-l {
    margin-bottom: var(--spacing-extra-extra-extra-large);
  }
}
:root {
  --width-1: 1rem;
  --width-2: 2rem;
  --width-3: 4rem;
  --width-4: 8rem;
  --width-5: 16rem;
  --width-6: 32rem;
  --width-7: 48rem;
  --width-8: 64rem;
  --width-9: 96rem;
}

.w1 {
  width: 1rem;
}

.mw1 {
  max-width: 1rem;
}

.minw1 {
  min-width: 1rem;
}

.w2 {
  width: 2rem;
}

.mw2 {
  max-width: 2rem;
}

.minw2 {
  min-width: 2rem;
}

.w3 {
  width: 4rem;
}

.mw3 {
  max-width: 4rem;
}

.minw3 {
  min-width: 4rem;
}

.w4 {
  width: 8rem;
}

.mw4 {
  max-width: 8rem;
}

.minw4 {
  min-width: 8rem;
}

.w5 {
  width: 16rem;
}

.mw5 {
  max-width: 16rem;
}

.minw5 {
  min-width: 16rem;
}

.w6 {
  width: 32rem;
}

.mw6 {
  max-width: 32rem;
}

.minw6 {
  min-width: 32rem;
}

.w7 {
  width: 48rem;
}

.mw7 {
  max-width: 48rem;
}

.minw7 {
  min-width: 48rem;
}

.w8 {
  width: 64rem;
}

.mw8 {
  max-width: 64rem;
}

.minw8 {
  min-width: 64rem;
}

.w9 {
  width: 96rem;
}

.mw9 {
  max-width: 96rem;
}

.minw9 {
  min-width: 96rem;
}

.w-10 {
  width: 10%;
}

.mw-10 {
  max-width: 10%;
}

.minw-10 {
  min-width: 10%;
}

.w-20 {
  width: 20%;
}

.mw-20 {
  max-width: 20%;
}

.minw-20 {
  min-width: 20%;
}

.w-25 {
  width: 25%;
}

.mw-25 {
  max-width: 25%;
}

.minw-25 {
  min-width: 25%;
}

.w-30 {
  width: 30%;
}

.mw-30 {
  max-width: 30%;
}

.minw-30 {
  min-width: 30%;
}

.w-33 {
  width: 33%;
}

.mw-33 {
  max-width: 33%;
}

.minw-33 {
  min-width: 33%;
}

.w-40 {
  width: 40%;
}

.mw-40 {
  max-width: 40%;
}

.minw-40 {
  min-width: 40%;
}

.w-50 {
  width: 50%;
}

.mw-50 {
  max-width: 50%;
}

.minw-50 {
  min-width: 50%;
}

.w-60 {
  width: 60%;
}

.mw-60 {
  max-width: 60%;
}

.minw-60 {
  min-width: 60%;
}

.w-66 {
  width: 66%;
}

.mw-66 {
  max-width: 66%;
}

.minw-66 {
  min-width: 66%;
}

.w-70 {
  width: 70%;
}

.mw-70 {
  max-width: 70%;
}

.minw-70 {
  min-width: 70%;
}

.w-75 {
  width: 75%;
}

.mw-75 {
  max-width: 75%;
}

.minw-75 {
  min-width: 75%;
}

.w-80 {
  width: 80%;
}

.mw-80 {
  max-width: 80%;
}

.minw-80 {
  min-width: 80%;
}

.w-90 {
  width: 90%;
}

.mw-90 {
  max-width: 90%;
}

.minw-90 {
  min-width: 90%;
}

.w-100 {
  width: 100%;
}

.mw-100 {
  max-width: 100%;
}

.minw-100 {
  min-width: 100%;
}

.w-third {
  width: 33.3333333333%;
}

.mw-third {
  max-width: 33.3333333333%;
}

.minw-third {
  min-width: 33.3333333333%;
}

.w-two-thirds {
  width: 66.6666666667%;
}

.mw-two-thirds {
  max-width: 66.6666666667%;
}

.minw-two-thirds {
  min-width: 66.6666666667%;
}

.w-auto {
  width: auto;
}

.mw-auto {
  max-width: auto;
}

.minw-auto {
  min-width: auto;
}

@media screen and (min-width: 45em) {
  .w1-ns {
    width: 1rem;
  }
  .mw1-ns {
    max-width: 1rem;
  }
  .minw1-ns {
    min-width: 1rem;
  }
  .w2-ns {
    width: 2rem;
  }
  .mw2-ns {
    max-width: 2rem;
  }
  .minw2-ns {
    min-width: 2rem;
  }
  .w3-ns {
    width: 4rem;
  }
  .mw3-ns {
    max-width: 4rem;
  }
  .minw3-ns {
    min-width: 4rem;
  }
  .w4-ns {
    width: 8rem;
  }
  .mw4-ns {
    max-width: 8rem;
  }
  .minw4-ns {
    min-width: 8rem;
  }
  .w5-ns {
    width: 16rem;
  }
  .mw5-ns {
    max-width: 16rem;
  }
  .minw5-ns {
    min-width: 16rem;
  }
  .w6-ns {
    width: 32rem;
  }
  .mw6-ns {
    max-width: 32rem;
  }
  .minw6-ns {
    min-width: 32rem;
  }
  .w7-ns {
    width: 48rem;
  }
  .mw7-ns {
    max-width: 48rem;
  }
  .minw7-ns {
    min-width: 48rem;
  }
  .w8-ns {
    width: 64rem;
  }
  .mw8-ns {
    max-width: 64rem;
  }
  .minw8-ns {
    min-width: 64rem;
  }
  .w9-ns {
    width: 96rem;
  }
  .mw9-ns {
    max-width: 96rem;
  }
  .minw9-ns {
    min-width: 96rem;
  }
  .w-10-ns {
    width: 10%;
  }
  .mw-10-ns {
    max-width: 10%;
  }
  .minw-10-ns {
    min-width: 10%;
  }
  .w-20-ns {
    width: 20%;
  }
  .mw-20-ns {
    max-width: 20%;
  }
  .minw-20-ns {
    min-width: 20%;
  }
  .w-25-ns {
    width: 25%;
  }
  .mw-25-ns {
    max-width: 25%;
  }
  .minw-25-ns {
    min-width: 25%;
  }
  .w-30-ns {
    width: 30%;
  }
  .mw-30-ns {
    max-width: 30%;
  }
  .minw-30-ns {
    min-width: 30%;
  }
  .w-33-ns {
    width: 33%;
  }
  .mw-33-ns {
    max-width: 33%;
  }
  .minw-33-ns {
    min-width: 33%;
  }
  .w-40-ns {
    width: 40%;
  }
  .mw-40-ns {
    max-width: 40%;
  }
  .minw-40-ns {
    min-width: 40%;
  }
  .w-50-ns {
    width: 50%;
  }
  .mw-50-ns {
    max-width: 50%;
  }
  .minw-50-ns {
    min-width: 50%;
  }
  .w-60-ns {
    width: 60%;
  }
  .mw-60-ns {
    max-width: 60%;
  }
  .minw-60-ns {
    min-width: 60%;
  }
  .w-66-ns {
    width: 66%;
  }
  .mw-66-ns {
    max-width: 66%;
  }
  .minw-66-ns {
    min-width: 66%;
  }
  .w-70-ns {
    width: 70%;
  }
  .mw-70-ns {
    max-width: 70%;
  }
  .minw-70-ns {
    min-width: 70%;
  }
  .w-75-ns {
    width: 75%;
  }
  .mw-75-ns {
    max-width: 75%;
  }
  .minw-75-ns {
    min-width: 75%;
  }
  .w-80-ns {
    width: 80%;
  }
  .mw-80-ns {
    max-width: 80%;
  }
  .minw-80-ns {
    min-width: 80%;
  }
  .w-90-ns {
    width: 90%;
  }
  .mw-90-ns {
    max-width: 90%;
  }
  .minw-90-ns {
    min-width: 90%;
  }
  .w-100-ns {
    width: 100%;
  }
  .mw-100-ns {
    max-width: 100%;
  }
  .minw-100-ns {
    min-width: 100%;
  }
  .w-third-ns {
    width: 33.3333333333%;
  }
  .mw-third-ns {
    max-width: 33.3333333333%;
  }
  .minw-third-ns {
    min-width: 33.3333333333%;
  }
  .w-two-thirds-ns {
    width: 66.6666666667%;
  }
  .mw-two-thirds-ns {
    max-width: 66.6666666667%;
  }
  .minw-two-thirds-ns {
    min-width: 66.6666666667%;
  }
  .w-auto-ns {
    width: auto;
  }
  .mw-auto-ns {
    max-width: auto;
  }
  .minw-auto-ns {
    min-width: auto;
  }
}
@media screen and (min-width: 45em) and (max-width: 60em) {
  .w1-m {
    width: 1rem;
  }
  .mw1-m {
    max-width: 1rem;
  }
  .minw1-m {
    min-width: 1rem;
  }
  .w2-m {
    width: 2rem;
  }
  .mw2-m {
    max-width: 2rem;
  }
  .minw2-m {
    min-width: 2rem;
  }
  .w3-m {
    width: 4rem;
  }
  .mw3-m {
    max-width: 4rem;
  }
  .minw3-m {
    min-width: 4rem;
  }
  .w4-m {
    width: 8rem;
  }
  .mw4-m {
    max-width: 8rem;
  }
  .minw4-m {
    min-width: 8rem;
  }
  .w5-m {
    width: 16rem;
  }
  .mw5-m {
    max-width: 16rem;
  }
  .minw5-m {
    min-width: 16rem;
  }
  .w6-m {
    width: 32rem;
  }
  .mw6-m {
    max-width: 32rem;
  }
  .minw6-m {
    min-width: 32rem;
  }
  .w7-m {
    width: 48rem;
  }
  .mw7-m {
    max-width: 48rem;
  }
  .minw7-m {
    min-width: 48rem;
  }
  .w8-m {
    width: 64rem;
  }
  .mw8-m {
    max-width: 64rem;
  }
  .minw8-m {
    min-width: 64rem;
  }
  .w9-m {
    width: 96rem;
  }
  .mw9-m {
    max-width: 96rem;
  }
  .minw9-m {
    min-width: 96rem;
  }
  .w-10-m {
    width: 10%;
  }
  .mw-10-m {
    max-width: 10%;
  }
  .minw-10-m {
    min-width: 10%;
  }
  .w-20-m {
    width: 20%;
  }
  .mw-20-m {
    max-width: 20%;
  }
  .minw-20-m {
    min-width: 20%;
  }
  .w-25-m {
    width: 25%;
  }
  .mw-25-m {
    max-width: 25%;
  }
  .minw-25-m {
    min-width: 25%;
  }
  .w-30-m {
    width: 30%;
  }
  .mw-30-m {
    max-width: 30%;
  }
  .minw-30-m {
    min-width: 30%;
  }
  .w-33-m {
    width: 33%;
  }
  .mw-33-m {
    max-width: 33%;
  }
  .minw-33-m {
    min-width: 33%;
  }
  .w-40-m {
    width: 40%;
  }
  .mw-40-m {
    max-width: 40%;
  }
  .minw-40-m {
    min-width: 40%;
  }
  .w-50-m {
    width: 50%;
  }
  .mw-50-m {
    max-width: 50%;
  }
  .minw-50-m {
    min-width: 50%;
  }
  .w-60-m {
    width: 60%;
  }
  .mw-60-m {
    max-width: 60%;
  }
  .minw-60-m {
    min-width: 60%;
  }
  .w-66-m {
    width: 66%;
  }
  .mw-66-m {
    max-width: 66%;
  }
  .minw-66-m {
    min-width: 66%;
  }
  .w-70-m {
    width: 70%;
  }
  .mw-70-m {
    max-width: 70%;
  }
  .minw-70-m {
    min-width: 70%;
  }
  .w-75-m {
    width: 75%;
  }
  .mw-75-m {
    max-width: 75%;
  }
  .minw-75-m {
    min-width: 75%;
  }
  .w-80-m {
    width: 80%;
  }
  .mw-80-m {
    max-width: 80%;
  }
  .minw-80-m {
    min-width: 80%;
  }
  .w-90-m {
    width: 90%;
  }
  .mw-90-m {
    max-width: 90%;
  }
  .minw-90-m {
    min-width: 90%;
  }
  .w-100-m {
    width: 100%;
  }
  .mw-100-m {
    max-width: 100%;
  }
  .minw-100-m {
    min-width: 100%;
  }
  .w-third-m {
    width: 33.3333333333%;
  }
  .mw-third-m {
    max-width: 33.3333333333%;
  }
  .minw-third-m {
    min-width: 33.3333333333%;
  }
  .w-two-thirds-m {
    width: 66.6666666667%;
  }
  .mw-two-thirds-m {
    max-width: 66.6666666667%;
  }
  .minw-two-thirds-m {
    min-width: 66.6666666667%;
  }
  .w-auto-m {
    width: auto;
  }
  .mw-auto-m {
    max-width: auto;
  }
  .minw-auto-m {
    min-width: auto;
  }
}
@media screen and (min-width: 60em) {
  .w1-l {
    width: 1rem;
  }
  .mw1-l {
    max-width: 1rem;
  }
  .minw1-l {
    min-width: 1rem;
  }
  .w2-l {
    width: 2rem;
  }
  .mw2-l {
    max-width: 2rem;
  }
  .minw2-l {
    min-width: 2rem;
  }
  .w3-l {
    width: 4rem;
  }
  .mw3-l {
    max-width: 4rem;
  }
  .minw3-l {
    min-width: 4rem;
  }
  .w4-l {
    width: 8rem;
  }
  .mw4-l {
    max-width: 8rem;
  }
  .minw4-l {
    min-width: 8rem;
  }
  .w5-l {
    width: 16rem;
  }
  .mw5-l {
    max-width: 16rem;
  }
  .minw5-l {
    min-width: 16rem;
  }
  .w6-l {
    width: 32rem;
  }
  .mw6-l {
    max-width: 32rem;
  }
  .minw6-l {
    min-width: 32rem;
  }
  .w7-l {
    width: 48rem;
  }
  .mw7-l {
    max-width: 48rem;
  }
  .minw7-l {
    min-width: 48rem;
  }
  .w8-l {
    width: 64rem;
  }
  .mw8-l {
    max-width: 64rem;
  }
  .minw8-l {
    min-width: 64rem;
  }
  .w9-l {
    width: 96rem;
  }
  .mw9-l {
    max-width: 96rem;
  }
  .minw9-l {
    min-width: 96rem;
  }
  .w-10-l {
    width: 10%;
  }
  .mw-10-l {
    max-width: 10%;
  }
  .minw-10-l {
    min-width: 10%;
  }
  .w-20-l {
    width: 20%;
  }
  .mw-20-l {
    max-width: 20%;
  }
  .minw-20-l {
    min-width: 20%;
  }
  .w-25-l {
    width: 25%;
  }
  .mw-25-l {
    max-width: 25%;
  }
  .minw-25-l {
    min-width: 25%;
  }
  .w-30-l {
    width: 30%;
  }
  .mw-30-l {
    max-width: 30%;
  }
  .minw-30-l {
    min-width: 30%;
  }
  .w-33-l {
    width: 33%;
  }
  .mw-33-l {
    max-width: 33%;
  }
  .minw-33-l {
    min-width: 33%;
  }
  .w-40-l {
    width: 40%;
  }
  .mw-40-l {
    max-width: 40%;
  }
  .minw-40-l {
    min-width: 40%;
  }
  .w-50-l {
    width: 50%;
  }
  .mw-50-l {
    max-width: 50%;
  }
  .minw-50-l {
    min-width: 50%;
  }
  .w-60-l {
    width: 60%;
  }
  .mw-60-l {
    max-width: 60%;
  }
  .minw-60-l {
    min-width: 60%;
  }
  .w-66-l {
    width: 66%;
  }
  .mw-66-l {
    max-width: 66%;
  }
  .minw-66-l {
    min-width: 66%;
  }
  .w-70-l {
    width: 70%;
  }
  .mw-70-l {
    max-width: 70%;
  }
  .minw-70-l {
    min-width: 70%;
  }
  .w-75-l {
    width: 75%;
  }
  .mw-75-l {
    max-width: 75%;
  }
  .minw-75-l {
    min-width: 75%;
  }
  .w-80-l {
    width: 80%;
  }
  .mw-80-l {
    max-width: 80%;
  }
  .minw-80-l {
    min-width: 80%;
  }
  .w-90-l {
    width: 90%;
  }
  .mw-90-l {
    max-width: 90%;
  }
  .minw-90-l {
    min-width: 90%;
  }
  .w-100-l {
    width: 100%;
  }
  .mw-100-l {
    max-width: 100%;
  }
  .minw-100-l {
    min-width: 100%;
  }
  .w-third-l {
    width: 33.3333333333%;
  }
  .mw-third-l {
    max-width: 33.3333333333%;
  }
  .minw-third-l {
    min-width: 33.3333333333%;
  }
  .w-two-thirds-l {
    width: 66.6666666667%;
  }
  .mw-two-thirds-l {
    max-width: 66.6666666667%;
  }
  .minw-two-thirds-l {
    min-width: 66.6666666667%;
  }
  .w-auto-l {
    width: auto;
  }
  .mw-auto-l {
    max-width: auto;
  }
  .minw-auto-l {
    min-width: auto;
  }
}
:root {
  /* Main colours */
  --colour-navy: #141D44;
  --colour-purple: #7777A5;
  --colour-blue: #9CCCF5;
  --colour-jordan: #E8706D;
  --colour-yellow: #F4E8AD;
  --colour-pink: #F6306C;
  --colour-orange: #F4B34F;
  --colour-teal: #68C7C3;
  /* Greys */
  --colour-white: #FFFFFF;
  --colour-grey: #FBFBFF;
  --colour-black: #000000;
  /* Foreground colours */
  --colour-on-navy: var(--colour-white);
  --colour-on-purple: var(--colour-white);
  --colour-on-blue: var(--colour-navy);
  --colour-on-jordan: var(--colour-white);
  --colour-on-yellow: var(--colour-navy);
  --colour-on-pink: var(--colour-white);
  --colour-on-orange: var(--colour-white);
  --colour-on-teal: var(--colour-white);
  --colour-on-black: var(--colour-white);
  /* Tints */
  --tint-05: 0.05;
  --tint-10: 0.20;
  --tint-20: 0.333;
  --tint-30: 0.5;
  --tint-40: 0.6667;
  --tint-50: 0.8333;
  --colour-navy-05: rgb(from var(--colour-navy) calc(255 - (var(--tint-05) * (255 - r))) calc(255 - (var(--tint-05) * (255 - g))) calc(255 - (var(--tint-05) * (255 - b))));
  --colour-navy-10: rgb(from var(--colour-navy) calc(255 - (var(--tint-10) * (255 - r))) calc(255 - (var(--tint-10) * (255 - g))) calc(255 - (var(--tint-10) * (255 - b))));
  --colour-navy-20: rgb(from var(--colour-navy) calc(255 - (var(--tint-20) * (255 - r))) calc(255 - (var(--tint-20) * (255 - g))) calc(255 - (var(--tint-20) * (255 - b))));
  --colour-navy-30: rgb(from var(--colour-navy) calc(255 - (var(--tint-30) * (255 - r))) calc(255 - (var(--tint-30) * (255 - g))) calc(255 - (var(--tint-30) * (255 - b))));
  --colour-navy-40: rgb(from var(--colour-navy) calc(255 - (var(--tint-40) * (255 - r))) calc(255 - (var(--tint-40) * (255 - g))) calc(255 - (var(--tint-40) * (255 - b))));
  --colour-navy-50: rgb(from var(--colour-navy) calc(255 - (var(--tint-50) * (255 - r))) calc(255 - (var(--tint-50) * (255 - g))) calc(255 - (var(--tint-50) * (255 - b))));
  --colour-purple-05: rgb(from var(--colour-purple) calc(255 - (var(--tint-05) * (255 - r))) calc(255 - (var(--tint-05) * (255 - g))) calc(255 - (var(--tint-05) * (255 - b))));
  --colour-purple-10: rgb(from var(--colour-purple) calc(255 - (var(--tint-10) * (255 - r))) calc(255 - (var(--tint-10) * (255 - g))) calc(255 - (var(--tint-10) * (255 - b))));
  --colour-purple-20: rgb(from var(--colour-purple) calc(255 - (var(--tint-20) * (255 - r))) calc(255 - (var(--tint-20) * (255 - g))) calc(255 - (var(--tint-20) * (255 - b))));
  --colour-purple-30: rgb(from var(--colour-purple) calc(255 - (var(--tint-30) * (255 - r))) calc(255 - (var(--tint-30) * (255 - g))) calc(255 - (var(--tint-30) * (255 - b))));
  --colour-purple-40: rgb(from var(--colour-purple) calc(255 - (var(--tint-40) * (255 - r))) calc(255 - (var(--tint-40) * (255 - g))) calc(255 - (var(--tint-40) * (255 - b))));
  --colour-purple-50: rgb(from var(--colour-purple) calc(255 - (var(--tint-50) * (255 - r))) calc(255 - (var(--tint-50) * (255 - g))) calc(255 - (var(--tint-50) * (255 - b))));
  --colour-blue-05: rgb(from var(--colour-blue) calc(255 - (var(--tint-05) * (255 - r))) calc(255 - (var(--tint-05) * (255 - g))) calc(255 - (var(--tint-05) * (255 - b))));
  --colour-blue-10: rgb(from var(--colour-blue) calc(255 - (var(--tint-10) * (255 - r))) calc(255 - (var(--tint-10) * (255 - g))) calc(255 - (var(--tint-10) * (255 - b))));
  --colour-blue-20: rgb(from var(--colour-blue) calc(255 - (var(--tint-20) * (255 - r))) calc(255 - (var(--tint-20) * (255 - g))) calc(255 - (var(--tint-20) * (255 - b))));
  --colour-blue-30: rgb(from var(--colour-blue) calc(255 - (var(--tint-30) * (255 - r))) calc(255 - (var(--tint-30) * (255 - g))) calc(255 - (var(--tint-30) * (255 - b))));
  --colour-blue-40: rgb(from var(--colour-blue) calc(255 - (var(--tint-40) * (255 - r))) calc(255 - (var(--tint-40) * (255 - g))) calc(255 - (var(--tint-40) * (255 - b))));
  --colour-blue-50: rgb(from var(--colour-blue) calc(255 - (var(--tint-50) * (255 - r))) calc(255 - (var(--tint-50) * (255 - g))) calc(255 - (var(--tint-50) * (255 - b))));
  --colour-jordan-05: rgb(from var(--colour-jordan) calc(255 - (var(--tint-05) * (255 - r))) calc(255 - (var(--tint-05) * (255 - g))) calc(255 - (var(--tint-05) * (255 - b))));
  --colour-jordan-10: rgb(from var(--colour-jordan) calc(255 - (var(--tint-10) * (255 - r))) calc(255 - (var(--tint-10) * (255 - g))) calc(255 - (var(--tint-10) * (255 - b))));
  --colour-jordan-20: rgb(from var(--colour-jordan) calc(255 - (var(--tint-20) * (255 - r))) calc(255 - (var(--tint-20) * (255 - g))) calc(255 - (var(--tint-20) * (255 - b))));
  --colour-jordan-30: rgb(from var(--colour-jordan) calc(255 - (var(--tint-30) * (255 - r))) calc(255 - (var(--tint-30) * (255 - g))) calc(255 - (var(--tint-30) * (255 - b))));
  --colour-jordan-40: rgb(from var(--colour-jordan) calc(255 - (var(--tint-40) * (255 - r))) calc(255 - (var(--tint-40) * (255 - g))) calc(255 - (var(--tint-40) * (255 - b))));
  --colour-jordan-50: rgb(from var(--colour-jordan) calc(255 - (var(--tint-50) * (255 - r))) calc(255 - (var(--tint-50) * (255 - g))) calc(255 - (var(--tint-50) * (255 - b))));
  --colour-yellow-05: rgb(from var(--colour-yellow) calc(255 - (var(--tint-05) * (255 - r))) calc(255 - (var(--tint-05) * (255 - g))) calc(255 - (var(--tint-05) * (255 - b))));
  --colour-yellow-10: rgb(from var(--colour-yellow) calc(255 - (var(--tint-10) * (255 - r))) calc(255 - (var(--tint-10) * (255 - g))) calc(255 - (var(--tint-10) * (255 - b))));
  --colour-yellow-20: rgb(from var(--colour-yellow) calc(255 - (var(--tint-20) * (255 - r))) calc(255 - (var(--tint-20) * (255 - g))) calc(255 - (var(--tint-20) * (255 - b))));
  --colour-yellow-30: rgb(from var(--colour-yellow) calc(255 - (var(--tint-30) * (255 - r))) calc(255 - (var(--tint-30) * (255 - g))) calc(255 - (var(--tint-30) * (255 - b))));
  --colour-yellow-40: rgb(from var(--colour-yellow) calc(255 - (var(--tint-40) * (255 - r))) calc(255 - (var(--tint-40) * (255 - g))) calc(255 - (var(--tint-40) * (255 - b))));
  --colour-yellow-50: rgb(from var(--colour-yellow) calc(255 - (var(--tint-50) * (255 - r))) calc(255 - (var(--tint-50) * (255 - g))) calc(255 - (var(--tint-50) * (255 - b))));
  --colour-pink-05: rgb(from var(--colour-pink) calc(255 - (var(--tint-05) * (255 - r))) calc(255 - (var(--tint-05) * (255 - g))) calc(255 - (var(--tint-05) * (255 - b))));
  --colour-pink-10: rgb(from var(--colour-pink) calc(255 - (var(--tint-10) * (255 - r))) calc(255 - (var(--tint-10) * (255 - g))) calc(255 - (var(--tint-10) * (255 - b))));
  --colour-pink-20: rgb(from var(--colour-pink) calc(255 - (var(--tint-20) * (255 - r))) calc(255 - (var(--tint-20) * (255 - g))) calc(255 - (var(--tint-20) * (255 - b))));
  --colour-pink-30: rgb(from var(--colour-pink) calc(255 - (var(--tint-30) * (255 - r))) calc(255 - (var(--tint-30) * (255 - g))) calc(255 - (var(--tint-30) * (255 - b))));
  --colour-pink-40: rgb(from var(--colour-pink) calc(255 - (var(--tint-40) * (255 - r))) calc(255 - (var(--tint-40) * (255 - g))) calc(255 - (var(--tint-40) * (255 - b))));
  --colour-pink-50: rgb(from var(--colour-pink) calc(255 - (var(--tint-50) * (255 - r))) calc(255 - (var(--tint-50) * (255 - g))) calc(255 - (var(--tint-50) * (255 - b))));
  --colour-orange-05: rgb(from var(--colour-orange) calc(255 - (var(--tint-05) * (255 - r))) calc(255 - (var(--tint-05) * (255 - g))) calc(255 - (var(--tint-05) * (255 - b))));
  --colour-orange-10: rgb(from var(--colour-orange) calc(255 - (var(--tint-10) * (255 - r))) calc(255 - (var(--tint-10) * (255 - g))) calc(255 - (var(--tint-10) * (255 - b))));
  --colour-orange-20: rgb(from var(--colour-orange) calc(255 - (var(--tint-20) * (255 - r))) calc(255 - (var(--tint-20) * (255 - g))) calc(255 - (var(--tint-20) * (255 - b))));
  --colour-orange-30: rgb(from var(--colour-orange) calc(255 - (var(--tint-30) * (255 - r))) calc(255 - (var(--tint-30) * (255 - g))) calc(255 - (var(--tint-30) * (255 - b))));
  --colour-orange-40: rgb(from var(--colour-orange) calc(255 - (var(--tint-40) * (255 - r))) calc(255 - (var(--tint-40) * (255 - g))) calc(255 - (var(--tint-40) * (255 - b))));
  --colour-orange-50: rgb(from var(--colour-orange) calc(255 - (var(--tint-50) * (255 - r))) calc(255 - (var(--tint-50) * (255 - g))) calc(255 - (var(--tint-50) * (255 - b))));
  --colour-teal-05: rgb(from var(--colour-teal) calc(255 - (var(--tint-05) * (255 - r))) calc(255 - (var(--tint-05) * (255 - g))) calc(255 - (var(--tint-05) * (255 - b))));
  --colour-teal-10: rgb(from var(--colour-teal) calc(255 - (var(--tint-10) * (255 - r))) calc(255 - (var(--tint-10) * (255 - g))) calc(255 - (var(--tint-10) * (255 - b))));
  --colour-teal-20: rgb(from var(--colour-teal) calc(255 - (var(--tint-20) * (255 - r))) calc(255 - (var(--tint-20) * (255 - g))) calc(255 - (var(--tint-20) * (255 - b))));
  --colour-teal-30: rgb(from var(--colour-teal) calc(255 - (var(--tint-30) * (255 - r))) calc(255 - (var(--tint-30) * (255 - g))) calc(255 - (var(--tint-30) * (255 - b))));
  --colour-teal-40: rgb(from var(--colour-teal) calc(255 - (var(--tint-40) * (255 - r))) calc(255 - (var(--tint-40) * (255 - g))) calc(255 - (var(--tint-40) * (255 - b))));
  --colour-teal-50: rgb(from var(--colour-teal) calc(255 - (var(--tint-50) * (255 - r))) calc(255 - (var(--tint-50) * (255 - g))) calc(255 - (var(--tint-50) * (255 - b))));
  --colour-white-05: rgb(from var(--colour-white) calc(255 - (var(--tint-05) * (255 - r))) calc(255 - (var(--tint-05) * (255 - g))) calc(255 - (var(--tint-05) * (255 - b))));
  --colour-white-10: rgb(from var(--colour-white) calc(255 - (var(--tint-10) * (255 - r))) calc(255 - (var(--tint-10) * (255 - g))) calc(255 - (var(--tint-10) * (255 - b))));
  --colour-white-20: rgb(from var(--colour-white) calc(255 - (var(--tint-20) * (255 - r))) calc(255 - (var(--tint-20) * (255 - g))) calc(255 - (var(--tint-20) * (255 - b))));
  --colour-white-30: rgb(from var(--colour-white) calc(255 - (var(--tint-30) * (255 - r))) calc(255 - (var(--tint-30) * (255 - g))) calc(255 - (var(--tint-30) * (255 - b))));
  --colour-white-40: rgb(from var(--colour-white) calc(255 - (var(--tint-40) * (255 - r))) calc(255 - (var(--tint-40) * (255 - g))) calc(255 - (var(--tint-40) * (255 - b))));
  --colour-white-50: rgb(from var(--colour-white) calc(255 - (var(--tint-50) * (255 - r))) calc(255 - (var(--tint-50) * (255 - g))) calc(255 - (var(--tint-50) * (255 - b))));
  --colour-grey-05: rgb(from var(--colour-grey) calc(255 - (var(--tint-05) * (255 - r))) calc(255 - (var(--tint-05) * (255 - g))) calc(255 - (var(--tint-05) * (255 - b))));
  --colour-grey-10: rgb(from var(--colour-grey) calc(255 - (var(--tint-10) * (255 - r))) calc(255 - (var(--tint-10) * (255 - g))) calc(255 - (var(--tint-10) * (255 - b))));
  --colour-grey-20: rgb(from var(--colour-grey) calc(255 - (var(--tint-20) * (255 - r))) calc(255 - (var(--tint-20) * (255 - g))) calc(255 - (var(--tint-20) * (255 - b))));
  --colour-grey-30: rgb(from var(--colour-grey) calc(255 - (var(--tint-30) * (255 - r))) calc(255 - (var(--tint-30) * (255 - g))) calc(255 - (var(--tint-30) * (255 - b))));
  --colour-grey-40: rgb(from var(--colour-grey) calc(255 - (var(--tint-40) * (255 - r))) calc(255 - (var(--tint-40) * (255 - g))) calc(255 - (var(--tint-40) * (255 - b))));
  --colour-grey-50: rgb(from var(--colour-grey) calc(255 - (var(--tint-50) * (255 - r))) calc(255 - (var(--tint-50) * (255 - g))) calc(255 - (var(--tint-50) * (255 - b))));
  --colour-black-05: rgb(from var(--colour-black) calc(255 - (var(--tint-05) * (255 - r))) calc(255 - (var(--tint-05) * (255 - g))) calc(255 - (var(--tint-05) * (255 - b))));
  --colour-black-10: rgb(from var(--colour-black) calc(255 - (var(--tint-10) * (255 - r))) calc(255 - (var(--tint-10) * (255 - g))) calc(255 - (var(--tint-10) * (255 - b))));
  --colour-black-20: rgb(from var(--colour-black) calc(255 - (var(--tint-20) * (255 - r))) calc(255 - (var(--tint-20) * (255 - g))) calc(255 - (var(--tint-20) * (255 - b))));
  --colour-black-30: rgb(from var(--colour-black) calc(255 - (var(--tint-30) * (255 - r))) calc(255 - (var(--tint-30) * (255 - g))) calc(255 - (var(--tint-30) * (255 - b))));
  --colour-black-40: rgb(from var(--colour-black) calc(255 - (var(--tint-40) * (255 - r))) calc(255 - (var(--tint-40) * (255 - g))) calc(255 - (var(--tint-40) * (255 - b))));
  --colour-black-50: rgb(from var(--colour-black) calc(255 - (var(--tint-50) * (255 - r))) calc(255 - (var(--tint-50) * (255 - g))) calc(255 - (var(--tint-50) * (255 - b))));
  /* Text on Tints */
  --colour-on-navy-05: var(--colour-navy);
  --colour-on-navy-10: var(--colour-navy);
  --colour-on-navy-20: var(--colour-white);
  --colour-on-navy-30: var(--colour-white);
  --colour-on-navy-40: var(--colour-white);
  --colour-on-navy-50: var(--colour-white);
  --colour-on-purple-05: var(--colour-navy);
  --colour-on-purple-10: var(--colour-navy);
  --colour-on-purple-20: var(--colour-navy);
  --colour-on-purple-30: var(--colour-navy);
  --colour-on-purple-40: var(--colour-white);
  --colour-on-purple-50: var(--colour-white);
  --colour-on-blue-05: var(--colour-navy);
  --colour-on-blue-10: var(--colour-navy);
  --colour-on-blue-20: var(--colour-navy);
  --colour-on-blue-30: var(--colour-navy);
  --colour-on-blue-40: var(--colour-navy);
  --colour-on-blue-50: var(--colour-navy);
  --colour-on-jordan-05: var(--colour-navy);
  --colour-on-jordan-10: var(--colour-navy);
  --colour-on-jordan-20: var(--colour-navy);
  --colour-on-jordan-30: var(--colour-navy);
  --colour-on-jordan-40: var(--colour-white);
  --colour-on-jordan-50: var(--colour-white);
  --colour-on-yellow-05: var(--colour-navy);
  --colour-on-yellow-10: var(--colour-navy);
  --colour-on-yellow-20: var(--colour-navy);
  --colour-on-yellow-30: var(--colour-navy);
  --colour-on-yellow-40: var(--colour-navy);
  --colour-on-yellow-50: var(--colour-navy);
  --colour-on-pink-05: var(--colour-navy);
  --colour-on-pink-10: var(--colour-navy);
  --colour-on-pink-20: var(--colour-navy);
  --colour-on-pink-30: var(--colour-white);
  --colour-on-pink-40: var(--colour-white);
  --colour-on-pink-50: var(--colour-white);
  --colour-on-orange-05: var(--colour-navy);
  --colour-on-orange-10: var(--colour-navy);
  --colour-on-orange-20: var(--colour-navy);
  --colour-on-orange-30: var(--colour-navy);
  --colour-on-orange-40: var(--colour-navy);
  --colour-on-orange-50: var(--colour-navy);
  --colour-on-teal-05: var(--colour-navy);
  --colour-on-teal-10: var(--colour-navy);
  --colour-on-teal-20: var(--colour-navy);
  --colour-on-teal-30: var(--colour-navy);
  --colour-on-teal-40: var(--colour-navy);
  --colour-on-teal-50: var(--colour-navy);
  /* Brand colours */
  --colour-primary: var(--colour-navy);
  --colour-secondary: var(--colour-blue);
  --colour-tertiary: var(--colour-jordan-20);
  --colour-on-primary: var(--colour-on-navy);
  --colour-on-secondary: var(--colour-on-blue);
  --colour-on-tertiary: var(--colour-on-jordan-20);
  /* Gradients */
  --gradient-angle: 0deg;
  --gradient-primary-from: var(--colour-purple);
  --gradient-primary-to: var(--colour-navy);
  --gradient-secondary-from: var(--colour-purple-10);
  --gradient-secondary-to: var(--colour-jordan-10);
  --on-gradient-primary: var(--colour-on-navy);
  --on-gradient-secondary: var(--colour-on-jordan-10);
}

.colour-navy {
  --tint-value: 1;
  --base-colour: var(--colour-navy);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
}

.bg-navy {
  --bg-tint-value: 1;
  --bg-base-colour: var(--colour-navy);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  --foreground-colour: var(--colour-on-navy);
  background-color: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
}

.b--navy {
  --border-tint-value: 1;
  --border-base-colour: var(--colour-navy);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  --border-color: var(--border-colour);
  border-color: var(--border-colour);
}

.colour-navy-05 {
  --tint-value: var(--tint-05);
  --base-colour: var(--colour-navy);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-navy-05 {
  --bg-tint-value: var(--tint-05);
  --bg-base-colour: var(--colour-navy);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-navy-05);
}

.b--navy-05 {
  --border-tint-value: var(--tint-05);
  --border-base-colour: var(--colour-navy);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-navy.bg-tint-05 {
  --foreground-colour: var(--colour-on-navy-05);
}

.colour-navy-10 {
  --tint-value: var(--tint-10);
  --base-colour: var(--colour-navy);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-navy-10 {
  --bg-tint-value: var(--tint-10);
  --bg-base-colour: var(--colour-navy);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-navy-10);
}

.b--navy-10 {
  --border-tint-value: var(--tint-10);
  --border-base-colour: var(--colour-navy);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-navy.bg-tint-10 {
  --foreground-colour: var(--colour-on-navy-10);
}

.colour-navy-20 {
  --tint-value: var(--tint-20);
  --base-colour: var(--colour-navy);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-navy-20 {
  --bg-tint-value: var(--tint-20);
  --bg-base-colour: var(--colour-navy);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-navy-20);
}

.b--navy-20 {
  --border-tint-value: var(--tint-20);
  --border-base-colour: var(--colour-navy);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-navy.bg-tint-20 {
  --foreground-colour: var(--colour-on-navy-20);
}

.colour-navy-30 {
  --tint-value: var(--tint-30);
  --base-colour: var(--colour-navy);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-navy-30 {
  --bg-tint-value: var(--tint-30);
  --bg-base-colour: var(--colour-navy);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-navy-30);
}

.b--navy-30 {
  --border-tint-value: var(--tint-30);
  --border-base-colour: var(--colour-navy);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-navy.bg-tint-30 {
  --foreground-colour: var(--colour-on-navy-30);
}

.colour-navy-40 {
  --tint-value: var(--tint-40);
  --base-colour: var(--colour-navy);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-navy-40 {
  --bg-tint-value: var(--tint-40);
  --bg-base-colour: var(--colour-navy);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-navy-40);
}

.b--navy-40 {
  --border-tint-value: var(--tint-40);
  --border-base-colour: var(--colour-navy);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-navy.bg-tint-40 {
  --foreground-colour: var(--colour-on-navy-40);
}

.colour-navy-50 {
  --tint-value: var(--tint-50);
  --base-colour: var(--colour-navy);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-navy-50 {
  --bg-tint-value: var(--tint-50);
  --bg-base-colour: var(--colour-navy);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-navy-50);
}

.b--navy-50 {
  --border-tint-value: var(--tint-50);
  --border-base-colour: var(--colour-navy);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-navy.bg-tint-50 {
  --foreground-colour: var(--colour-on-navy-50);
}

.colour-purple {
  --tint-value: 1;
  --base-colour: var(--colour-purple);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
}

.bg-purple {
  --bg-tint-value: 1;
  --bg-base-colour: var(--colour-purple);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  --foreground-colour: var(--colour-on-purple);
  background-color: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
}

.b--purple {
  --border-tint-value: 1;
  --border-base-colour: var(--colour-purple);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  --border-color: var(--border-colour);
  border-color: var(--border-colour);
}

.colour-purple-05 {
  --tint-value: var(--tint-05);
  --base-colour: var(--colour-purple);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-purple-05 {
  --bg-tint-value: var(--tint-05);
  --bg-base-colour: var(--colour-purple);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-purple-05);
}

.b--purple-05 {
  --border-tint-value: var(--tint-05);
  --border-base-colour: var(--colour-purple);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-purple.bg-tint-05 {
  --foreground-colour: var(--colour-on-purple-05);
}

.colour-purple-10 {
  --tint-value: var(--tint-10);
  --base-colour: var(--colour-purple);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-purple-10 {
  --bg-tint-value: var(--tint-10);
  --bg-base-colour: var(--colour-purple);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-purple-10);
}

.b--purple-10 {
  --border-tint-value: var(--tint-10);
  --border-base-colour: var(--colour-purple);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-purple.bg-tint-10 {
  --foreground-colour: var(--colour-on-purple-10);
}

.colour-purple-20 {
  --tint-value: var(--tint-20);
  --base-colour: var(--colour-purple);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-purple-20 {
  --bg-tint-value: var(--tint-20);
  --bg-base-colour: var(--colour-purple);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-purple-20);
}

.b--purple-20 {
  --border-tint-value: var(--tint-20);
  --border-base-colour: var(--colour-purple);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-purple.bg-tint-20 {
  --foreground-colour: var(--colour-on-purple-20);
}

.colour-purple-30 {
  --tint-value: var(--tint-30);
  --base-colour: var(--colour-purple);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-purple-30 {
  --bg-tint-value: var(--tint-30);
  --bg-base-colour: var(--colour-purple);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-purple-30);
}

.b--purple-30 {
  --border-tint-value: var(--tint-30);
  --border-base-colour: var(--colour-purple);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-purple.bg-tint-30 {
  --foreground-colour: var(--colour-on-purple-30);
}

.colour-purple-40 {
  --tint-value: var(--tint-40);
  --base-colour: var(--colour-purple);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-purple-40 {
  --bg-tint-value: var(--tint-40);
  --bg-base-colour: var(--colour-purple);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-purple-40);
}

.b--purple-40 {
  --border-tint-value: var(--tint-40);
  --border-base-colour: var(--colour-purple);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-purple.bg-tint-40 {
  --foreground-colour: var(--colour-on-purple-40);
}

.colour-purple-50 {
  --tint-value: var(--tint-50);
  --base-colour: var(--colour-purple);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-purple-50 {
  --bg-tint-value: var(--tint-50);
  --bg-base-colour: var(--colour-purple);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-purple-50);
}

.b--purple-50 {
  --border-tint-value: var(--tint-50);
  --border-base-colour: var(--colour-purple);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-purple.bg-tint-50 {
  --foreground-colour: var(--colour-on-purple-50);
}

.colour-blue {
  --tint-value: 1;
  --base-colour: var(--colour-blue);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
}

.bg-blue {
  --bg-tint-value: 1;
  --bg-base-colour: var(--colour-blue);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  --foreground-colour: var(--colour-on-blue);
  background-color: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
}

.b--blue {
  --border-tint-value: 1;
  --border-base-colour: var(--colour-blue);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  --border-color: var(--border-colour);
  border-color: var(--border-colour);
}

.colour-blue-05 {
  --tint-value: var(--tint-05);
  --base-colour: var(--colour-blue);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-blue-05 {
  --bg-tint-value: var(--tint-05);
  --bg-base-colour: var(--colour-blue);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-blue-05);
}

.b--blue-05 {
  --border-tint-value: var(--tint-05);
  --border-base-colour: var(--colour-blue);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-blue.bg-tint-05 {
  --foreground-colour: var(--colour-on-blue-05);
}

.colour-blue-10 {
  --tint-value: var(--tint-10);
  --base-colour: var(--colour-blue);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-blue-10 {
  --bg-tint-value: var(--tint-10);
  --bg-base-colour: var(--colour-blue);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-blue-10);
}

.b--blue-10 {
  --border-tint-value: var(--tint-10);
  --border-base-colour: var(--colour-blue);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-blue.bg-tint-10 {
  --foreground-colour: var(--colour-on-blue-10);
}

.colour-blue-20 {
  --tint-value: var(--tint-20);
  --base-colour: var(--colour-blue);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-blue-20 {
  --bg-tint-value: var(--tint-20);
  --bg-base-colour: var(--colour-blue);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-blue-20);
}

.b--blue-20 {
  --border-tint-value: var(--tint-20);
  --border-base-colour: var(--colour-blue);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-blue.bg-tint-20 {
  --foreground-colour: var(--colour-on-blue-20);
}

.colour-blue-30 {
  --tint-value: var(--tint-30);
  --base-colour: var(--colour-blue);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-blue-30 {
  --bg-tint-value: var(--tint-30);
  --bg-base-colour: var(--colour-blue);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-blue-30);
}

.b--blue-30 {
  --border-tint-value: var(--tint-30);
  --border-base-colour: var(--colour-blue);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-blue.bg-tint-30 {
  --foreground-colour: var(--colour-on-blue-30);
}

.colour-blue-40 {
  --tint-value: var(--tint-40);
  --base-colour: var(--colour-blue);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-blue-40 {
  --bg-tint-value: var(--tint-40);
  --bg-base-colour: var(--colour-blue);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-blue-40);
}

.b--blue-40 {
  --border-tint-value: var(--tint-40);
  --border-base-colour: var(--colour-blue);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-blue.bg-tint-40 {
  --foreground-colour: var(--colour-on-blue-40);
}

.colour-blue-50 {
  --tint-value: var(--tint-50);
  --base-colour: var(--colour-blue);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-blue-50 {
  --bg-tint-value: var(--tint-50);
  --bg-base-colour: var(--colour-blue);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-blue-50);
}

.b--blue-50 {
  --border-tint-value: var(--tint-50);
  --border-base-colour: var(--colour-blue);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-blue.bg-tint-50 {
  --foreground-colour: var(--colour-on-blue-50);
}

.colour-jordan {
  --tint-value: 1;
  --base-colour: var(--colour-jordan);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
}

.bg-jordan {
  --bg-tint-value: 1;
  --bg-base-colour: var(--colour-jordan);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  --foreground-colour: var(--colour-on-jordan);
  background-color: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
}

.b--jordan {
  --border-tint-value: 1;
  --border-base-colour: var(--colour-jordan);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  --border-color: var(--border-colour);
  border-color: var(--border-colour);
}

.colour-jordan-05 {
  --tint-value: var(--tint-05);
  --base-colour: var(--colour-jordan);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-jordan-05 {
  --bg-tint-value: var(--tint-05);
  --bg-base-colour: var(--colour-jordan);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-jordan-05);
}

.b--jordan-05 {
  --border-tint-value: var(--tint-05);
  --border-base-colour: var(--colour-jordan);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-jordan.bg-tint-05 {
  --foreground-colour: var(--colour-on-jordan-05);
}

.colour-jordan-10 {
  --tint-value: var(--tint-10);
  --base-colour: var(--colour-jordan);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-jordan-10 {
  --bg-tint-value: var(--tint-10);
  --bg-base-colour: var(--colour-jordan);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-jordan-10);
}

.b--jordan-10 {
  --border-tint-value: var(--tint-10);
  --border-base-colour: var(--colour-jordan);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-jordan.bg-tint-10 {
  --foreground-colour: var(--colour-on-jordan-10);
}

.colour-jordan-20 {
  --tint-value: var(--tint-20);
  --base-colour: var(--colour-jordan);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-jordan-20 {
  --bg-tint-value: var(--tint-20);
  --bg-base-colour: var(--colour-jordan);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-jordan-20);
}

.b--jordan-20 {
  --border-tint-value: var(--tint-20);
  --border-base-colour: var(--colour-jordan);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-jordan.bg-tint-20 {
  --foreground-colour: var(--colour-on-jordan-20);
}

.colour-jordan-30 {
  --tint-value: var(--tint-30);
  --base-colour: var(--colour-jordan);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-jordan-30 {
  --bg-tint-value: var(--tint-30);
  --bg-base-colour: var(--colour-jordan);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-jordan-30);
}

.b--jordan-30 {
  --border-tint-value: var(--tint-30);
  --border-base-colour: var(--colour-jordan);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-jordan.bg-tint-30 {
  --foreground-colour: var(--colour-on-jordan-30);
}

.colour-jordan-40 {
  --tint-value: var(--tint-40);
  --base-colour: var(--colour-jordan);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-jordan-40 {
  --bg-tint-value: var(--tint-40);
  --bg-base-colour: var(--colour-jordan);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-jordan-40);
}

.b--jordan-40 {
  --border-tint-value: var(--tint-40);
  --border-base-colour: var(--colour-jordan);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-jordan.bg-tint-40 {
  --foreground-colour: var(--colour-on-jordan-40);
}

.colour-jordan-50 {
  --tint-value: var(--tint-50);
  --base-colour: var(--colour-jordan);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-jordan-50 {
  --bg-tint-value: var(--tint-50);
  --bg-base-colour: var(--colour-jordan);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-jordan-50);
}

.b--jordan-50 {
  --border-tint-value: var(--tint-50);
  --border-base-colour: var(--colour-jordan);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-jordan.bg-tint-50 {
  --foreground-colour: var(--colour-on-jordan-50);
}

.colour-yellow {
  --tint-value: 1;
  --base-colour: var(--colour-yellow);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
}

.bg-yellow {
  --bg-tint-value: 1;
  --bg-base-colour: var(--colour-yellow);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  --foreground-colour: var(--colour-on-yellow);
  background-color: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
}

.b--yellow {
  --border-tint-value: 1;
  --border-base-colour: var(--colour-yellow);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  --border-color: var(--border-colour);
  border-color: var(--border-colour);
}

.colour-yellow-05 {
  --tint-value: var(--tint-05);
  --base-colour: var(--colour-yellow);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-yellow-05 {
  --bg-tint-value: var(--tint-05);
  --bg-base-colour: var(--colour-yellow);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-yellow-05);
}

.b--yellow-05 {
  --border-tint-value: var(--tint-05);
  --border-base-colour: var(--colour-yellow);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-yellow.bg-tint-05 {
  --foreground-colour: var(--colour-on-yellow-05);
}

.colour-yellow-10 {
  --tint-value: var(--tint-10);
  --base-colour: var(--colour-yellow);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-yellow-10 {
  --bg-tint-value: var(--tint-10);
  --bg-base-colour: var(--colour-yellow);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-yellow-10);
}

.b--yellow-10 {
  --border-tint-value: var(--tint-10);
  --border-base-colour: var(--colour-yellow);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-yellow.bg-tint-10 {
  --foreground-colour: var(--colour-on-yellow-10);
}

.colour-yellow-20 {
  --tint-value: var(--tint-20);
  --base-colour: var(--colour-yellow);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-yellow-20 {
  --bg-tint-value: var(--tint-20);
  --bg-base-colour: var(--colour-yellow);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-yellow-20);
}

.b--yellow-20 {
  --border-tint-value: var(--tint-20);
  --border-base-colour: var(--colour-yellow);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-yellow.bg-tint-20 {
  --foreground-colour: var(--colour-on-yellow-20);
}

.colour-yellow-30 {
  --tint-value: var(--tint-30);
  --base-colour: var(--colour-yellow);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-yellow-30 {
  --bg-tint-value: var(--tint-30);
  --bg-base-colour: var(--colour-yellow);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-yellow-30);
}

.b--yellow-30 {
  --border-tint-value: var(--tint-30);
  --border-base-colour: var(--colour-yellow);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-yellow.bg-tint-30 {
  --foreground-colour: var(--colour-on-yellow-30);
}

.colour-yellow-40 {
  --tint-value: var(--tint-40);
  --base-colour: var(--colour-yellow);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-yellow-40 {
  --bg-tint-value: var(--tint-40);
  --bg-base-colour: var(--colour-yellow);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-yellow-40);
}

.b--yellow-40 {
  --border-tint-value: var(--tint-40);
  --border-base-colour: var(--colour-yellow);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-yellow.bg-tint-40 {
  --foreground-colour: var(--colour-on-yellow-40);
}

.colour-yellow-50 {
  --tint-value: var(--tint-50);
  --base-colour: var(--colour-yellow);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-yellow-50 {
  --bg-tint-value: var(--tint-50);
  --bg-base-colour: var(--colour-yellow);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-yellow-50);
}

.b--yellow-50 {
  --border-tint-value: var(--tint-50);
  --border-base-colour: var(--colour-yellow);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-yellow.bg-tint-50 {
  --foreground-colour: var(--colour-on-yellow-50);
}

.colour-pink {
  --tint-value: 1;
  --base-colour: var(--colour-pink);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
}

.bg-pink {
  --bg-tint-value: 1;
  --bg-base-colour: var(--colour-pink);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  --foreground-colour: var(--colour-on-pink);
  background-color: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
}

.b--pink {
  --border-tint-value: 1;
  --border-base-colour: var(--colour-pink);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  --border-color: var(--border-colour);
  border-color: var(--border-colour);
}

.colour-pink-05 {
  --tint-value: var(--tint-05);
  --base-colour: var(--colour-pink);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-pink-05 {
  --bg-tint-value: var(--tint-05);
  --bg-base-colour: var(--colour-pink);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-pink-05);
}

.b--pink-05 {
  --border-tint-value: var(--tint-05);
  --border-base-colour: var(--colour-pink);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-pink.bg-tint-05 {
  --foreground-colour: var(--colour-on-pink-05);
}

.colour-pink-10 {
  --tint-value: var(--tint-10);
  --base-colour: var(--colour-pink);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-pink-10 {
  --bg-tint-value: var(--tint-10);
  --bg-base-colour: var(--colour-pink);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-pink-10);
}

.b--pink-10 {
  --border-tint-value: var(--tint-10);
  --border-base-colour: var(--colour-pink);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-pink.bg-tint-10 {
  --foreground-colour: var(--colour-on-pink-10);
}

.colour-pink-20 {
  --tint-value: var(--tint-20);
  --base-colour: var(--colour-pink);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-pink-20 {
  --bg-tint-value: var(--tint-20);
  --bg-base-colour: var(--colour-pink);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-pink-20);
}

.b--pink-20 {
  --border-tint-value: var(--tint-20);
  --border-base-colour: var(--colour-pink);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-pink.bg-tint-20 {
  --foreground-colour: var(--colour-on-pink-20);
}

.colour-pink-30 {
  --tint-value: var(--tint-30);
  --base-colour: var(--colour-pink);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-pink-30 {
  --bg-tint-value: var(--tint-30);
  --bg-base-colour: var(--colour-pink);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-pink-30);
}

.b--pink-30 {
  --border-tint-value: var(--tint-30);
  --border-base-colour: var(--colour-pink);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-pink.bg-tint-30 {
  --foreground-colour: var(--colour-on-pink-30);
}

.colour-pink-40 {
  --tint-value: var(--tint-40);
  --base-colour: var(--colour-pink);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-pink-40 {
  --bg-tint-value: var(--tint-40);
  --bg-base-colour: var(--colour-pink);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-pink-40);
}

.b--pink-40 {
  --border-tint-value: var(--tint-40);
  --border-base-colour: var(--colour-pink);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-pink.bg-tint-40 {
  --foreground-colour: var(--colour-on-pink-40);
}

.colour-pink-50 {
  --tint-value: var(--tint-50);
  --base-colour: var(--colour-pink);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-pink-50 {
  --bg-tint-value: var(--tint-50);
  --bg-base-colour: var(--colour-pink);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-pink-50);
}

.b--pink-50 {
  --border-tint-value: var(--tint-50);
  --border-base-colour: var(--colour-pink);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-pink.bg-tint-50 {
  --foreground-colour: var(--colour-on-pink-50);
}

.colour-orange {
  --tint-value: 1;
  --base-colour: var(--colour-orange);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
}

.bg-orange {
  --bg-tint-value: 1;
  --bg-base-colour: var(--colour-orange);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  --foreground-colour: var(--colour-on-orange);
  background-color: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
}

.b--orange {
  --border-tint-value: 1;
  --border-base-colour: var(--colour-orange);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  --border-color: var(--border-colour);
  border-color: var(--border-colour);
}

.colour-orange-05 {
  --tint-value: var(--tint-05);
  --base-colour: var(--colour-orange);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-orange-05 {
  --bg-tint-value: var(--tint-05);
  --bg-base-colour: var(--colour-orange);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-orange-05);
}

.b--orange-05 {
  --border-tint-value: var(--tint-05);
  --border-base-colour: var(--colour-orange);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-orange.bg-tint-05 {
  --foreground-colour: var(--colour-on-orange-05);
}

.colour-orange-10 {
  --tint-value: var(--tint-10);
  --base-colour: var(--colour-orange);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-orange-10 {
  --bg-tint-value: var(--tint-10);
  --bg-base-colour: var(--colour-orange);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-orange-10);
}

.b--orange-10 {
  --border-tint-value: var(--tint-10);
  --border-base-colour: var(--colour-orange);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-orange.bg-tint-10 {
  --foreground-colour: var(--colour-on-orange-10);
}

.colour-orange-20 {
  --tint-value: var(--tint-20);
  --base-colour: var(--colour-orange);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-orange-20 {
  --bg-tint-value: var(--tint-20);
  --bg-base-colour: var(--colour-orange);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-orange-20);
}

.b--orange-20 {
  --border-tint-value: var(--tint-20);
  --border-base-colour: var(--colour-orange);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-orange.bg-tint-20 {
  --foreground-colour: var(--colour-on-orange-20);
}

.colour-orange-30 {
  --tint-value: var(--tint-30);
  --base-colour: var(--colour-orange);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-orange-30 {
  --bg-tint-value: var(--tint-30);
  --bg-base-colour: var(--colour-orange);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-orange-30);
}

.b--orange-30 {
  --border-tint-value: var(--tint-30);
  --border-base-colour: var(--colour-orange);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-orange.bg-tint-30 {
  --foreground-colour: var(--colour-on-orange-30);
}

.colour-orange-40 {
  --tint-value: var(--tint-40);
  --base-colour: var(--colour-orange);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-orange-40 {
  --bg-tint-value: var(--tint-40);
  --bg-base-colour: var(--colour-orange);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-orange-40);
}

.b--orange-40 {
  --border-tint-value: var(--tint-40);
  --border-base-colour: var(--colour-orange);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-orange.bg-tint-40 {
  --foreground-colour: var(--colour-on-orange-40);
}

.colour-orange-50 {
  --tint-value: var(--tint-50);
  --base-colour: var(--colour-orange);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-orange-50 {
  --bg-tint-value: var(--tint-50);
  --bg-base-colour: var(--colour-orange);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-orange-50);
}

.b--orange-50 {
  --border-tint-value: var(--tint-50);
  --border-base-colour: var(--colour-orange);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-orange.bg-tint-50 {
  --foreground-colour: var(--colour-on-orange-50);
}

.colour-teal {
  --tint-value: 1;
  --base-colour: var(--colour-teal);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
}

.bg-teal {
  --bg-tint-value: 1;
  --bg-base-colour: var(--colour-teal);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  --foreground-colour: var(--colour-on-teal);
  background-color: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
}

.b--teal {
  --border-tint-value: 1;
  --border-base-colour: var(--colour-teal);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  --border-color: var(--border-colour);
  border-color: var(--border-colour);
}

.colour-teal-05 {
  --tint-value: var(--tint-05);
  --base-colour: var(--colour-teal);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-teal-05 {
  --bg-tint-value: var(--tint-05);
  --bg-base-colour: var(--colour-teal);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-teal-05);
}

.b--teal-05 {
  --border-tint-value: var(--tint-05);
  --border-base-colour: var(--colour-teal);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-teal.bg-tint-05 {
  --foreground-colour: var(--colour-on-teal-05);
}

.colour-teal-10 {
  --tint-value: var(--tint-10);
  --base-colour: var(--colour-teal);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-teal-10 {
  --bg-tint-value: var(--tint-10);
  --bg-base-colour: var(--colour-teal);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-teal-10);
}

.b--teal-10 {
  --border-tint-value: var(--tint-10);
  --border-base-colour: var(--colour-teal);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-teal.bg-tint-10 {
  --foreground-colour: var(--colour-on-teal-10);
}

.colour-teal-20 {
  --tint-value: var(--tint-20);
  --base-colour: var(--colour-teal);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-teal-20 {
  --bg-tint-value: var(--tint-20);
  --bg-base-colour: var(--colour-teal);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-teal-20);
}

.b--teal-20 {
  --border-tint-value: var(--tint-20);
  --border-base-colour: var(--colour-teal);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-teal.bg-tint-20 {
  --foreground-colour: var(--colour-on-teal-20);
}

.colour-teal-30 {
  --tint-value: var(--tint-30);
  --base-colour: var(--colour-teal);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-teal-30 {
  --bg-tint-value: var(--tint-30);
  --bg-base-colour: var(--colour-teal);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-teal-30);
}

.b--teal-30 {
  --border-tint-value: var(--tint-30);
  --border-base-colour: var(--colour-teal);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-teal.bg-tint-30 {
  --foreground-colour: var(--colour-on-teal-30);
}

.colour-teal-40 {
  --tint-value: var(--tint-40);
  --base-colour: var(--colour-teal);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-teal-40 {
  --bg-tint-value: var(--tint-40);
  --bg-base-colour: var(--colour-teal);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-teal-40);
}

.b--teal-40 {
  --border-tint-value: var(--tint-40);
  --border-base-colour: var(--colour-teal);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-teal.bg-tint-40 {
  --foreground-colour: var(--colour-on-teal-40);
}

.colour-teal-50 {
  --tint-value: var(--tint-50);
  --base-colour: var(--colour-teal);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-teal-50 {
  --bg-tint-value: var(--tint-50);
  --bg-base-colour: var(--colour-teal);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-teal-50);
}

.b--teal-50 {
  --border-tint-value: var(--tint-50);
  --border-base-colour: var(--colour-teal);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-teal.bg-tint-50 {
  --foreground-colour: var(--colour-on-teal-50);
}

.colour-white {
  --tint-value: 1;
  --base-colour: var(--colour-white);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
}

.bg-white {
  --bg-tint-value: 1;
  --bg-base-colour: var(--colour-white);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  --foreground-colour: var(--colour-on-white);
  background-color: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
}

.b--white {
  --border-tint-value: 1;
  --border-base-colour: var(--colour-white);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  --border-color: var(--border-colour);
  border-color: var(--border-colour);
}

.colour-white-05 {
  --tint-value: var(--tint-05);
  --base-colour: var(--colour-white);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-white-05 {
  --bg-tint-value: var(--tint-05);
  --bg-base-colour: var(--colour-white);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-white-05);
}

.b--white-05 {
  --border-tint-value: var(--tint-05);
  --border-base-colour: var(--colour-white);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-white.bg-tint-05 {
  --foreground-colour: var(--colour-on-white-05);
}

.colour-white-10 {
  --tint-value: var(--tint-10);
  --base-colour: var(--colour-white);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-white-10 {
  --bg-tint-value: var(--tint-10);
  --bg-base-colour: var(--colour-white);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-white-10);
}

.b--white-10 {
  --border-tint-value: var(--tint-10);
  --border-base-colour: var(--colour-white);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-white.bg-tint-10 {
  --foreground-colour: var(--colour-on-white-10);
}

.colour-white-20 {
  --tint-value: var(--tint-20);
  --base-colour: var(--colour-white);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-white-20 {
  --bg-tint-value: var(--tint-20);
  --bg-base-colour: var(--colour-white);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-white-20);
}

.b--white-20 {
  --border-tint-value: var(--tint-20);
  --border-base-colour: var(--colour-white);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-white.bg-tint-20 {
  --foreground-colour: var(--colour-on-white-20);
}

.colour-white-30 {
  --tint-value: var(--tint-30);
  --base-colour: var(--colour-white);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-white-30 {
  --bg-tint-value: var(--tint-30);
  --bg-base-colour: var(--colour-white);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-white-30);
}

.b--white-30 {
  --border-tint-value: var(--tint-30);
  --border-base-colour: var(--colour-white);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-white.bg-tint-30 {
  --foreground-colour: var(--colour-on-white-30);
}

.colour-white-40 {
  --tint-value: var(--tint-40);
  --base-colour: var(--colour-white);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-white-40 {
  --bg-tint-value: var(--tint-40);
  --bg-base-colour: var(--colour-white);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-white-40);
}

.b--white-40 {
  --border-tint-value: var(--tint-40);
  --border-base-colour: var(--colour-white);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-white.bg-tint-40 {
  --foreground-colour: var(--colour-on-white-40);
}

.colour-white-50 {
  --tint-value: var(--tint-50);
  --base-colour: var(--colour-white);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-white-50 {
  --bg-tint-value: var(--tint-50);
  --bg-base-colour: var(--colour-white);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-white-50);
}

.b--white-50 {
  --border-tint-value: var(--tint-50);
  --border-base-colour: var(--colour-white);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-white.bg-tint-50 {
  --foreground-colour: var(--colour-on-white-50);
}

.colour-grey {
  --tint-value: 1;
  --base-colour: var(--colour-grey);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
}

.bg-grey {
  --bg-tint-value: 1;
  --bg-base-colour: var(--colour-grey);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  --foreground-colour: var(--colour-on-grey);
  background-color: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
}

.b--grey {
  --border-tint-value: 1;
  --border-base-colour: var(--colour-grey);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  --border-color: var(--border-colour);
  border-color: var(--border-colour);
}

.colour-grey-05 {
  --tint-value: var(--tint-05);
  --base-colour: var(--colour-grey);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-grey-05 {
  --bg-tint-value: var(--tint-05);
  --bg-base-colour: var(--colour-grey);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-grey-05);
}

.b--grey-05 {
  --border-tint-value: var(--tint-05);
  --border-base-colour: var(--colour-grey);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-grey.bg-tint-05 {
  --foreground-colour: var(--colour-on-grey-05);
}

.colour-grey-10 {
  --tint-value: var(--tint-10);
  --base-colour: var(--colour-grey);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-grey-10 {
  --bg-tint-value: var(--tint-10);
  --bg-base-colour: var(--colour-grey);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-grey-10);
}

.b--grey-10 {
  --border-tint-value: var(--tint-10);
  --border-base-colour: var(--colour-grey);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-grey.bg-tint-10 {
  --foreground-colour: var(--colour-on-grey-10);
}

.colour-grey-20 {
  --tint-value: var(--tint-20);
  --base-colour: var(--colour-grey);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-grey-20 {
  --bg-tint-value: var(--tint-20);
  --bg-base-colour: var(--colour-grey);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-grey-20);
}

.b--grey-20 {
  --border-tint-value: var(--tint-20);
  --border-base-colour: var(--colour-grey);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-grey.bg-tint-20 {
  --foreground-colour: var(--colour-on-grey-20);
}

.colour-grey-30 {
  --tint-value: var(--tint-30);
  --base-colour: var(--colour-grey);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-grey-30 {
  --bg-tint-value: var(--tint-30);
  --bg-base-colour: var(--colour-grey);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-grey-30);
}

.b--grey-30 {
  --border-tint-value: var(--tint-30);
  --border-base-colour: var(--colour-grey);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-grey.bg-tint-30 {
  --foreground-colour: var(--colour-on-grey-30);
}

.colour-grey-40 {
  --tint-value: var(--tint-40);
  --base-colour: var(--colour-grey);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-grey-40 {
  --bg-tint-value: var(--tint-40);
  --bg-base-colour: var(--colour-grey);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-grey-40);
}

.b--grey-40 {
  --border-tint-value: var(--tint-40);
  --border-base-colour: var(--colour-grey);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-grey.bg-tint-40 {
  --foreground-colour: var(--colour-on-grey-40);
}

.colour-grey-50 {
  --tint-value: var(--tint-50);
  --base-colour: var(--colour-grey);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-grey-50 {
  --bg-tint-value: var(--tint-50);
  --bg-base-colour: var(--colour-grey);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-grey-50);
}

.b--grey-50 {
  --border-tint-value: var(--tint-50);
  --border-base-colour: var(--colour-grey);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-grey.bg-tint-50 {
  --foreground-colour: var(--colour-on-grey-50);
}

.colour-black {
  --tint-value: 1;
  --base-colour: var(--colour-black);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
}

.bg-black {
  --bg-tint-value: 1;
  --bg-base-colour: var(--colour-black);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  --foreground-colour: var(--colour-on-black);
  background-color: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
}

.b--black {
  --border-tint-value: 1;
  --border-base-colour: var(--colour-black);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  --border-color: var(--border-colour);
  border-color: var(--border-colour);
}

.colour-black-05 {
  --tint-value: var(--tint-05);
  --base-colour: var(--colour-black);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-black-05 {
  --bg-tint-value: var(--tint-05);
  --bg-base-colour: var(--colour-black);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-black-05);
}

.b--black-05 {
  --border-tint-value: var(--tint-05);
  --border-base-colour: var(--colour-black);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-black.bg-tint-05 {
  --foreground-colour: var(--colour-on-black-05);
}

.colour-black-10 {
  --tint-value: var(--tint-10);
  --base-colour: var(--colour-black);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-black-10 {
  --bg-tint-value: var(--tint-10);
  --bg-base-colour: var(--colour-black);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-black-10);
}

.b--black-10 {
  --border-tint-value: var(--tint-10);
  --border-base-colour: var(--colour-black);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-black.bg-tint-10 {
  --foreground-colour: var(--colour-on-black-10);
}

.colour-black-20 {
  --tint-value: var(--tint-20);
  --base-colour: var(--colour-black);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-black-20 {
  --bg-tint-value: var(--tint-20);
  --bg-base-colour: var(--colour-black);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-black-20);
}

.b--black-20 {
  --border-tint-value: var(--tint-20);
  --border-base-colour: var(--colour-black);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-black.bg-tint-20 {
  --foreground-colour: var(--colour-on-black-20);
}

.colour-black-30 {
  --tint-value: var(--tint-30);
  --base-colour: var(--colour-black);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-black-30 {
  --bg-tint-value: var(--tint-30);
  --bg-base-colour: var(--colour-black);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-black-30);
}

.b--black-30 {
  --border-tint-value: var(--tint-30);
  --border-base-colour: var(--colour-black);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-black.bg-tint-30 {
  --foreground-colour: var(--colour-on-black-30);
}

.colour-black-40 {
  --tint-value: var(--tint-40);
  --base-colour: var(--colour-black);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-black-40 {
  --bg-tint-value: var(--tint-40);
  --bg-base-colour: var(--colour-black);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-black-40);
}

.b--black-40 {
  --border-tint-value: var(--tint-40);
  --border-base-colour: var(--colour-black);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-black.bg-tint-40 {
  --foreground-colour: var(--colour-on-black-40);
}

.colour-black-50 {
  --tint-value: var(--tint-50);
  --base-colour: var(--colour-black);
  --foreground-colour: RGB(from var(--base-colour) calc(255 - (var(--tint-value) * (255 - r))) calc(255 - (var(--tint-value) * (255 - g))) calc(255 - (var(--tint-value) * (255 - b))));
  color: RGB(from var(--base-colour) calc(255 - var(--tint-value) * (255 - r)) calc(255 - var(--tint-value) * (255 - g)) calc(255 - var(--tint-value) * (255 - b)));
}

.bg-black-50 {
  --bg-tint-value: var(--tint-50);
  --bg-base-colour: var(--colour-black);
  --background-colour: RGB(from var(--bg-base-colour) calc(255 - (var(--bg-tint-value) * (255 - r))) calc(255 - (var(--bg-tint-value) * (255 - g))) calc(255 - (var(--bg-tint-value) * (255 - b))));
  background-color: RGB(from var(--bg-base-colour) calc(255 - var(--bg-tint-value) * (255 - r)) calc(255 - var(--bg-tint-value) * (255 - g)) calc(255 - var(--bg-tint-value) * (255 - b)));
  --foreground-colour: var(--colour-on-black-50);
}

.b--black-50 {
  --border-tint-value: var(--tint-50);
  --border-base-colour: var(--colour-black);
  --border-colour: RGB(from var(--border-base-colour) calc(255 - (var(--border-tint-value) * (255 - r))) calc(255 - (var(--border-tint-value) * (255 - g))) calc(255 - (var(--border-tint-value) * (255 - b))));
  border-color: RGB(from var(--border-base-colour) calc(255 - var(--border-tint-value) * (255 - r)) calc(255 - var(--border-tint-value) * (255 - g)) calc(255 - var(--border-tint-value) * (255 - b)));
}

.bg-black.bg-tint-50 {
  --foreground-colour: var(--colour-on-black-50);
}

.tint-05 {
  --tint-value: var(--tint-05);
}

.bg-tint-05 {
  --bg-tint-value: var(--tint-05);
}

.tint-10 {
  --tint-value: var(--tint-10);
}

.bg-tint-10 {
  --bg-tint-value: var(--tint-10);
}

.tint-20 {
  --tint-value: var(--tint-20);
}

.bg-tint-20 {
  --bg-tint-value: var(--tint-20);
}

.tint-30 {
  --tint-value: var(--tint-30);
}

.bg-tint-30 {
  --bg-tint-value: var(--tint-30);
}

.tint-40 {
  --tint-value: var(--tint-40);
}

.bg-tint-40 {
  --bg-tint-value: var(--tint-40);
}

.tint-50 {
  --tint-value: var(--tint-50);
}

.bg-tint-50 {
  --bg-tint-value: var(--tint-50);
}

.colour-complement {
  color: var(--foreground-colour);
}

.border-complement {
  border-color: var(--foreground-colour);
}

.gradient-primary {
  background: linear-gradient(var(--gradient-angle), var(--gradient-primary-from), var(--gradient-primary-to), var(--gradient-primary-to));
  --foreground-colour: var(--on-gradient-primary);
}

.gradient-secondary {
  background: linear-gradient(var(--gradient-angle), var(--gradient-secondary-from), var(--gradient-secondary-to));
  --foreground-colour: var(--on-gradient-secondary);
}

.gradient-primary-0 {
  --gradient-angle: 0deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-primary-from), var(--gradient-primary-to), var(--gradient-primary-to));
  --foreground-colour: var(--on-gradient-primary);
}

.gradient-secondary-0 {
  --gradient-angle: 0deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-secondary-from), var(--gradient-secondary-to));
  --foreground-colour: var(--on-gradient-secondary);
}

.gradient-primary-45 {
  --gradient-angle: 45deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-primary-from), var(--gradient-primary-to), var(--gradient-primary-to));
  --foreground-colour: var(--on-gradient-primary);
}

.gradient-secondary-45 {
  --gradient-angle: 45deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-secondary-from), var(--gradient-secondary-to));
  --foreground-colour: var(--on-gradient-secondary);
}

.gradient-primary-90 {
  --gradient-angle: 90deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-primary-from), var(--gradient-primary-to), var(--gradient-primary-to));
  --foreground-colour: var(--on-gradient-primary);
}

.gradient-secondary-90 {
  --gradient-angle: 90deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-secondary-from), var(--gradient-secondary-to));
  --foreground-colour: var(--on-gradient-secondary);
}

.gradient-primary-135 {
  --gradient-angle: 135deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-primary-from), var(--gradient-primary-to), var(--gradient-primary-to));
  --foreground-colour: var(--on-gradient-primary);
}

.gradient-secondary-135 {
  --gradient-angle: 135deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-secondary-from), var(--gradient-secondary-to));
  --foreground-colour: var(--on-gradient-secondary);
}

.gradient-primary-180 {
  --gradient-angle: 180deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-primary-from), var(--gradient-primary-to), var(--gradient-primary-to));
  --foreground-colour: var(--on-gradient-primary);
}

.gradient-secondary-180 {
  --gradient-angle: 180deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-secondary-from), var(--gradient-secondary-to));
  --foreground-colour: var(--on-gradient-secondary);
}

.gradient-primary-225 {
  --gradient-angle: 225deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-primary-from), var(--gradient-primary-to), var(--gradient-primary-to));
  --foreground-colour: var(--on-gradient-primary);
}

.gradient-secondary-225 {
  --gradient-angle: 225deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-secondary-from), var(--gradient-secondary-to));
  --foreground-colour: var(--on-gradient-secondary);
}

.gradient-primary-270 {
  --gradient-angle: 270deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-primary-from), var(--gradient-primary-to), var(--gradient-primary-to));
  --foreground-colour: var(--on-gradient-primary);
}

.gradient-secondary-270 {
  --gradient-angle: 270deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-secondary-from), var(--gradient-secondary-to));
  --foreground-colour: var(--on-gradient-secondary);
}

.gradient-primary-315 {
  --gradient-angle: 315deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-primary-from), var(--gradient-primary-to), var(--gradient-primary-to));
  --foreground-colour: var(--on-gradient-primary);
}

.gradient-secondary-315 {
  --gradient-angle: 315deg;
  background: linear-gradient(var(--gradient-angle), var(--gradient-secondary-from), var(--gradient-secondary-to));
  --foreground-colour: var(--on-gradient-secondary);
}

@font-face {
  font-family: "GT Walsheim";
  font-weight: 700;
  font-style: normal;
  src: url(/static/fonts/gt-walsheim/GTWalsheim-Bold.eot?5f7c98922244dc7fe2a4161f58339ad9);
  src: url(/static/fonts/gt-walsheim/GTWalsheim-Bold.eot?5f7c98922244dc7fe2a4161f58339ad9) format("embedded-opentype"), url(/static/fonts/gt-walsheim/GTWalsheim-Bold.woff2?52a47f4b5cf7e5e9a7d8829822e9fa12) format("woff2"), url(/static/fonts/gt-walsheim/GTWalsheim-Bold.woff?bd38f30faa5d450859cafaf7115e53b5) format("woff"), url(/static/fonts/gt-walsheim/GTWalsheim-Bold.ttf?11f14a963526f2157cc51b9dfcb55c50) format("truetype"), url(/static/fonts/gt-walsheim/GTWalsheim-Bold.svg?14227b0b40d402e71d6d2d55d6904173) format("svg");
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim";
  font-weight: 400;
  font-style: normal;
  src: url(/static/fonts/gt-walsheim/GTWalsheim.eot?b60c68723a2a2f0730a5c8d3a18bd8a4);
  src: url(/static/fonts/gt-walsheim/GTWalsheim.eot?b60c68723a2a2f0730a5c8d3a18bd8a4) format("embedded-opentype"), url(/static/fonts/gt-walsheim/GTWalsheim.woff2?983e399f05edfcf5a57ebfd08b35c378) format("woff2"), url(/static/fonts/gt-walsheim/GTWalsheim.woff?7574645cc3733c1f3dd0c17f230d4b5c) format("woff"), url(/static/fonts/gt-walsheim/GTWalsheim.ttf?d0f19696d0fb316cf04c0affeb524757) format("truetype"), url(/static/fonts/gt-walsheim/GTWalsheim.svg?dd90ef788deb99b3b40a8dad4d9713f2) format("svg");
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim";
  font-weight: 300;
  font-style: normal;
  src: url(/static/fonts/gt-walsheim/GT-Walsheim-Light.woff2) format("woff2"), url(/static/fonts/gt-walsheim/GT-Walsheim-Light.woff) format("woff"), url(/static/fonts/gt-walsheim/GT-Walsheim-Light.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim";
  font-weight: 300;
  font-style: italic;
  src: url(/static/fonts/gt-walsheim/GT-Walsheim-Light-Oblique.woff2) format("woff2"), url(/static/fonts/gt-walsheim/GT-Walsheim-Light-Oblique.woff) format("woff"), url(/static/fonts/gt-walsheim/GT-Walsheim-Light-Oblique.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Ranille";
  font-display: swap;
  src: url(/static/fonts/ranille/Ranille.ttf) format("truetype");
}
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(/static/fonts/material-icons/MaterialIconsRound-Regular.otf) format("opentype");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
}

:root {
  --body-font: "GT Walsheim", sans-serif;
  --heading-font: "Ranille", serif;
  font-size: 12px;
}

html,
body,
.body-font {
  font-family: var(--body-font);
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--colour-navy);
}

h1,
h2,
.h1,
.h2,
.heading-font {
  font-family: var(--heading-font);
  font-size: var(--font-size);
  font-variant: none;
  text-wrap: balance;
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures no-contextual;
}
h1.fancy,
h2.fancy,
.h1.fancy,
.h2.fancy,
.heading-font.fancy {
  font-variant-ligatures: normal;
}
h1.no-ligatures,
h2.no-ligatures,
.h1.no-ligatures,
.h2.no-ligatures,
.heading-font.no-ligatures {
  font-variant-ligatures: none;
}
h1.fancy-first-letter::first-letter,
h2.fancy-first-letter::first-letter,
.h1.fancy-first-letter::first-letter,
.h2.fancy-first-letter::first-letter,
.heading-font.fancy-first-letter::first-letter {
  font-variant: normal;
}

h1.big,
h2.big,
h3.big,
h4.big,
h5.big,
h6.big,
.h1.big,
.h2.big,
.h3.big,
.h4.big,
.h5.big,
.h6.big,
.heading-font.big {
  font-size: calc(var(--font-size) * 1.5);
}
h1.bigger,
h2.bigger,
h3.bigger,
h4.bigger,
h5.bigger,
h6.bigger,
.h1.bigger,
.h2.bigger,
.h3.bigger,
.h4.bigger,
.h5.bigger,
.h6.bigger,
.heading-font.bigger {
  font-size: calc(var(--font-size) * 1.8);
}

h1,
.h1 {
  --font-size: 3.25rem;
  line-height: 1.45;
  font-weight: 500;
}

h2,
.h2 {
  --font-size: 1.9rem;
  line-height: 1.45;
  font-weight: 500;
}

h3,
.h3 {
  --font-size: 1.75rem;
  line-height: 1.54;
  font-weight: 400;
}

h4,
.h4 {
  --font-size: 1.56rem;
  line-height: 1.52;
  font-weight: 300;
}

small,
.small {
  font-size: 1.2rem;
}

.author {
  font-weight: bold;
}

.lead {
  font-size: 1.75rem;
}

.f1 {
  font-size: 2rem;
  --font-size: 2rem;
}

.f2 {
  font-size: 1.5rem;
  --font-size: 1.5rem;
}

.f3 {
  font-size: 1.125rem;
  --font-size: 1.125rem;
}

.f4 {
  font-size: 1rem;
  --font-size: 1rem;
}

.f5 {
  font-size: 0.875rem;
  --font-size: 0.875rem;
}

.f6 {
  font-size: 0.8125rem;
  --font-size: 0.8125rem;
}

.f7 {
  font-size: 0.625rem;
  --font-size: 0.625rem;
}

.icon.circle {
  border-radius: 50%;
}

.no-underline {
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

.measure {
  max-width: 50rem;
}

.shadow {
  box-shadow: 0px 4px 50px rgba(228, 228, 237, 0.5);
  border-radius: 1.25rem;
}

a.shadow:hover {
  box-shadow: 0px 4px 50px rgb(228, 228, 237);
}

.bg-swoosh {
  background-image: url("/static/images/backgrounds/swoosh.svg");
  background-size: auto 80rem;
  background-repeat: no-repeat;
  background-position: center;
}
.bg-swoosh.offset {
  background-image: url("/static/images/backgrounds/swoosh-offset.svg");
  background-position: 25% center;
}

.bg-quote {
  background-image: url("/static/images/backgrounds/quote.svg");
  background-size: auto 60rem;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-circles {
  background-image: url("/static/images/backgrounds/circles.svg");
  background-size: auto 60rem;
  background-repeat: no-repeat;
  background-position: right center;
}

.bg-circle {
  background-image: url("/static/images/backgrounds/circle.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
}

.brain-mask,
.bg-brain,
.ring-mask,
.bg-ring {
  position: relative;
  z-index: 1;
  padding: 0;
  --mask-position: center;
  --mask-size: cover;
}
.brain-mask.top,
.bg-brain.top,
.ring-mask.top,
.bg-ring.top {
  --mask-position: top;
}
.brain-mask::before,
.bg-brain::before,
.ring-mask::before,
.bg-ring::before {
  content: "";
  position: absolute;
  padding: 2rem;
  -webkit-mask-size: var(--mask-size);
  mask-size: var(--mask-size);
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
  mask-origin: content-box;
  mask-repeat: no-repeat;
  mask-position: var(--mask-position);
  background-color: var(--mask-colour);
  width: 100%;
  height: 100%;
  z-index: 2;
}
.brain-mask > *,
.bg-brain > *,
.ring-mask > *,
.bg-ring > * {
  z-index: 5;
  position: relative;
}

.brain-mask,
.bg-brain {
  --mask-image: url("/static/images/logo/brand-brain.svg");
}
.brain-mask.left,
.bg-brain.left {
  --mask-position: 130%;
  --mask-size: 200%;
}

.ring-mask,
.bg-ring {
  --mask-image: url("/static/images/logo/brand-circle-full.svg");
  --mask-size: 300%;
  --mask-position: 5% 70%;
}

.border {
  border-width: 1px;
  border-style: solid;
}

.border-top {
  border-top-width: 1px;
  border-top-style: solid;
}

.border-right {
  border-right-width: 1px;
  border-right-style: solid;
}

.border-bottom {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-left {
  border-left-width: 1px;
  border-left-style: solid;
}

.border-none {
  border-width: 0;
  border-style: none;
}

.bw-0 {
  border-width: 0;
}

.breadcrumbs {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.breadcrumbs > li {
  display: inline;
}
.breadcrumbs > li::after {
  content: "/";
  margin: 0 0.5rem;
}
.breadcrumbs > li:last-child:after {
  content: "";
  margin: 0;
}

.btn {
  --padding-base: 11px;
  --padding-base-small: calc(var(--padding-base) / 2.5);
  --border-radius-multiple: 3;
  display: inline-flex;
  text-align: center;
  padding: var(--padding-base-small) calc(var(--padding-base) * 3);
  min-height: calc(var(--padding-base) * 2.9 + var(--padding-base-small) * 2);
  border-radius: calc(var(--padding-base) * var(--border-radius-multiple));
  text-decoration: none;
  border: 0;
  cursor: pointer;
  gap: var(--padding-base);
  align-items: center;
  position: relative;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn.f1, .btn.f2, .btn.f3, .btn.f4, .btn.f5, .btn.f6, .btn.f7 {
  --padding-base: calc(var(--font-size) * 0.65);
}
.btn.btn-small, .btn.small {
  --padding-base: 8px;
}
.btn.btn-med, .btn.med, .btn.btn-medium, .btn.medium {
  --padding-base: 11px;
}
.btn.btn-large, .btn.large {
  --padding-base: 14px;
}
.btn.no-cursor {
  cursor: default;
}
.btn:has(.just-icon.circle), .btn:has(.icon.circle) {
  gap: calc(var(--padding-base) * 2);
}
.btn:has(.just-icon), .btn:has(.icon) {
  padding-right: calc(var(--padding-base) * 1.3);
  padding-bottom: var(--padding-base-small);
  padding-top: var(--padding-base-small);
  padding-left: calc(var(--padding-base) * 1.3);
}
.btn > .just-icon,
.btn > .icon {
  font-size: calc(var(--padding-base) * 2);
  line-height: 1;
  height: calc(var(--padding-base) * 2.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn > .just-icon.circle,
.btn > .icon.circle {
  border-radius: 50%;
  width: calc(var(--padding-base) * 2.9);
  height: calc(var(--padding-base) * 2.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--padding-base) * 2);
  margin-left: calc(-0.8 * var(--padding-base));
  margin-right: calc(-0.8 * var(--padding-base));
}
.btn > .just-icon.circle > img,
.btn > .icon.circle > img {
  clip-path: circle(calc(var(--padding-base) * 3.7 / 2) at center);
}
.btn.just-icon, .btn.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: calc(var(--padding-base) * 2.5);
}
.btn.just-icon.circle > img, .btn.icon.circle > img {
  clip-path: circle(calc(var(--padding-base) * 3.7 / 2) at center);
}
.btn.icon {
  width: calc(var(--padding-base) * 3.7);
  height: calc(var(--padding-base) * 3.7);
}
.btn.just-icon {
  width: calc(var(--padding-base) * 2.5);
  height: calc(var(--padding-base) * 2.5);
}
.btn.border {
  border: 0.5px solid var(--border-color);
}
.btn.square {
  border-radius: 8px;
}
.btn:hover {
  opacity: 0.8;
}
.btn::after {
  content: "";
  box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.2);
  border-radius: inherit;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn:hover::after, .btn:focus::after {
  opacity: 1;
}
.btn.no-hover:hover::after, .btn.no-hover:focus::after {
  opacity: 0;
}
.btn.no-hover:hover {
  opacity: 1;
}
.btn.btn-link, .btn.link {
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-decoration: underline;
  border: 0;
}
.btn.btn-link:hover::after, .btn.btn-link:focus::after, .btn.link:hover::after, .btn.link:focus::after {
  opacity: 0;
}
.btn.btn-dot, .btn.dot {
  width: calc(var(--padding-base) * 3.7);
  height: calc(var(--padding-base) * 3.7);
  overflow: hidden;
  padding: 0;
  color: transparent;
  white-space: nowrap;
}

.btn-dropdown .dropdown {
  min-width: 160px;
  position: absolute;
  z-index: 50000;
  display: none;
}
.btn-dropdown .dropdown.show {
  display: block;
}

.button-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: stretch;
  gap: 10px;
  height: 100%;
}
.button-bar .btn {
  display: inline-flex;
  flex-direction: column;
  place-content: center;
  max-width: 134px;
  padding: var(--padding-base) calc(1.5 * var(--padding-base));
  margin: 0;
  height: 100%;
}

.table .button-bar {
  --padding-base: 8px;
  gap: 4px;
}
.table .button-bar .btn {
  border: 0px;
  display: inline-block;
  padding: 2px 6px;
}
.table .button-bar .btn .just-icon,
.table .button-bar .btn .icon {
  margin-left: 0;
}
.table .button-bar .btn .button-text {
  display: none;
}

img.rectangle-background {
  background-image: url("/static/images/Placeholders/background-rectangle.svg");
  padding: 2.5rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
img.rectangle-background.left {
  background-position: left;
}
img.rectangle-background.right {
  background-position: right;
}
img.rectangle-background.narrow {
  padding: 1.25rem;
}

.pill {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0rem;
  width: 100%;
  align-items: center;
}
.pill > img {
  grid-column: 1/2;
  grid-row: 1/3;
  display: block;
  border-radius: 50%;
  max-height: 4.5rem;
  aspect-ratio: 1/1;
  margin-right: 0.5rem;
}

nav.tabs ul {
  list-style-type: none;
  display: flex;
  gap: 1.5rem;
  --padding-base: 11px;
  --padding-base-small: calc(var(--padding-base) / 2.5);
  --border-radius-multiple: 3;
  display: inline-flex;
  text-align: center;
  padding: var(--padding-base-small) calc(var(--padding-base) * 3);
  min-height: calc(var(--padding-base) * 2.9 + var(--padding-base-small) * 2);
  border-radius: calc(var(--padding-base) * var(--border-radius-multiple));
  text-decoration: none;
  border: 0;
  cursor: pointer;
  gap: var(--padding-base);
  align-items: center;
  position: relative;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  --padding-base: 8px;
  padding: var(--padding-base-small) var(--padding-base-small);
}
nav.tabs ul.no-cursor {
  cursor: default;
}
nav.tabs ul:has(.just-icon.circle), nav.tabs ul:has(.icon.circle) {
  gap: calc(var(--padding-base) * 2);
}
nav.tabs ul:has(.just-icon), nav.tabs ul:has(.icon) {
  padding-right: calc(var(--padding-base) * 1.3);
  padding-bottom: var(--padding-base-small);
  padding-top: var(--padding-base-small);
  padding-left: calc(var(--padding-base) * 1.3);
}
nav.tabs ul > .just-icon,
nav.tabs ul > .icon {
  font-size: calc(var(--padding-base) * 2);
  line-height: 1;
  height: calc(var(--padding-base) * 2.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
nav.tabs ul > .just-icon.circle,
nav.tabs ul > .icon.circle {
  border-radius: 50%;
  width: calc(var(--padding-base) * 2.9);
  height: calc(var(--padding-base) * 2.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--padding-base) * 2);
  margin-left: calc(-0.8 * var(--padding-base));
  margin-right: calc(-0.8 * var(--padding-base));
}
nav.tabs ul > .just-icon.circle > img,
nav.tabs ul > .icon.circle > img {
  clip-path: circle(calc(var(--padding-base) * 3.7 / 2) at center);
}
nav.tabs ul.just-icon, nav.tabs ul.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: calc(var(--padding-base) * 2.5);
}
nav.tabs ul.just-icon.circle > img, nav.tabs ul.icon.circle > img {
  clip-path: circle(calc(var(--padding-base) * 3.7 / 2) at center);
}
nav.tabs ul.icon {
  width: calc(var(--padding-base) * 3.7);
  height: calc(var(--padding-base) * 3.7);
}
nav.tabs ul.just-icon {
  width: calc(var(--padding-base) * 2.5);
  height: calc(var(--padding-base) * 2.5);
}
nav.tabs ul.border {
  border: 0.5px solid var(--border-color);
}
nav.tabs ul.square {
  border-radius: 8px;
}
nav.tabs ul:hover {
  opacity: 0.8;
}
nav.tabs ul::after {
  content: "";
  box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.2);
  border-radius: inherit;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
nav.tabs ul:hover::after, nav.tabs ul:focus::after {
  opacity: 1;
}
nav.tabs ul.no-hover:hover::after, nav.tabs ul.no-hover:focus::after {
  opacity: 0;
}
nav.tabs ul.no-hover:hover {
  opacity: 1;
}
nav.tabs ul.btn-link, nav.tabs ul.link {
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-decoration: underline;
  border: 0;
}
nav.tabs ul.btn-link:hover::after, nav.tabs ul.btn-link:focus::after, nav.tabs ul.link:hover::after, nav.tabs ul.link:focus::after {
  opacity: 0;
}
nav.tabs ul.btn-dot, nav.tabs ul.dot {
  width: calc(var(--padding-base) * 3.7);
  height: calc(var(--padding-base) * 3.7);
  overflow: hidden;
  padding: 0;
  color: transparent;
  white-space: nowrap;
}
nav.tabs ul > li {
  --padding-base: 11px;
  --padding-base-small: calc(var(--padding-base) / 2.5);
  --border-radius-multiple: 3;
  display: inline-flex;
  text-align: center;
  padding: var(--padding-base-small) calc(var(--padding-base) * 3);
  min-height: calc(var(--padding-base) * 2.9 + var(--padding-base-small) * 2);
  border-radius: calc(var(--padding-base) * var(--border-radius-multiple));
  text-decoration: none;
  border: 0;
  cursor: pointer;
  gap: var(--padding-base);
  align-items: center;
  position: relative;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  --padding-base: 8px;
}
nav.tabs ul > li.no-cursor {
  cursor: default;
}
nav.tabs ul > li:has(.just-icon.circle), nav.tabs ul > li:has(.icon.circle) {
  gap: calc(var(--padding-base) * 2);
}
nav.tabs ul > li:has(.just-icon), nav.tabs ul > li:has(.icon) {
  padding-right: calc(var(--padding-base) * 1.3);
  padding-bottom: var(--padding-base-small);
  padding-top: var(--padding-base-small);
  padding-left: calc(var(--padding-base) * 1.3);
}
nav.tabs ul > li > .just-icon,
nav.tabs ul > li > .icon {
  font-size: calc(var(--padding-base) * 2);
  line-height: 1;
  height: calc(var(--padding-base) * 2.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
nav.tabs ul > li > .just-icon.circle,
nav.tabs ul > li > .icon.circle {
  border-radius: 50%;
  width: calc(var(--padding-base) * 2.9);
  height: calc(var(--padding-base) * 2.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--padding-base) * 2);
  margin-left: calc(-0.8 * var(--padding-base));
  margin-right: calc(-0.8 * var(--padding-base));
}
nav.tabs ul > li > .just-icon.circle > img,
nav.tabs ul > li > .icon.circle > img {
  clip-path: circle(calc(var(--padding-base) * 3.7 / 2) at center);
}
nav.tabs ul > li.just-icon, nav.tabs ul > li.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: calc(var(--padding-base) * 2.5);
}
nav.tabs ul > li.just-icon.circle > img, nav.tabs ul > li.icon.circle > img {
  clip-path: circle(calc(var(--padding-base) * 3.7 / 2) at center);
}
nav.tabs ul > li.icon {
  width: calc(var(--padding-base) * 3.7);
  height: calc(var(--padding-base) * 3.7);
}
nav.tabs ul > li.just-icon {
  width: calc(var(--padding-base) * 2.5);
  height: calc(var(--padding-base) * 2.5);
}
nav.tabs ul > li.border {
  border: 0.5px solid var(--border-color);
}
nav.tabs ul > li.square {
  border-radius: 8px;
}
nav.tabs ul > li:hover {
  opacity: 0.8;
}
nav.tabs ul > li::after {
  content: "";
  box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.2);
  border-radius: inherit;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
nav.tabs ul > li:hover::after, nav.tabs ul > li:focus::after {
  opacity: 1;
}
nav.tabs ul > li.no-hover:hover::after, nav.tabs ul > li.no-hover:focus::after {
  opacity: 0;
}
nav.tabs ul > li.no-hover:hover {
  opacity: 1;
}
nav.tabs ul > li.btn-link, nav.tabs ul > li.link {
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-decoration: underline;
  border: 0;
}
nav.tabs ul > li.btn-link:hover::after, nav.tabs ul > li.btn-link:focus::after, nav.tabs ul > li.link:hover::after, nav.tabs ul > li.link:focus::after {
  opacity: 0;
}
nav.tabs ul > li.btn-dot, nav.tabs ul > li.dot {
  width: calc(var(--padding-base) * 3.7);
  height: calc(var(--padding-base) * 3.7);
  overflow: hidden;
  padding: 0;
  color: transparent;
  white-space: nowrap;
}
nav.tabs ul > li > a {
  color: inherit;
  text-decoration: none;
}

.accordian {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 0;
  width: 100%;
}
.accordian > li {
  display: block;
}
.accordian details > * {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.accordian details > summary {
  cursor: pointer;
  font-weight: 700;
}

.banner {
  width: 100%;
}
.banner > a {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 1.1rem;
}

ul.big-numbers {
  padding-left: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  justify-items: stretch;
  gap: 1px;
  width: 100%;
  max-width: 80rem;
}
ul.big-numbers > li {
  border-left: 2px solid var(--colour-navy);
  display: flex;
  justify-content: center;
  width: 100%;
}
ul.big-numbers > li:first-of-type {
  border-left: none;
}
ul.big-numbers > li > div {
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: 20rem;
  text-wrap: balance;
}
ul.big-numbers > li > div > .number {
  display: block;
  font-size: 6rem;
  font-weight: 700;
  line-height: 7rem;
  margin-bottom: 0.5rem;
  font-family: var(--heading-font);
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures no-contextual;
}
ul.big-numbers > li > div > .number::first-letter {
  font-variant: normal;
}

ul.box-list {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 120rem;
  overflow-x: hidden;
}
ul.box-list > li {
  width: 20rem;
  height: 9rem;
  display: flex;
  place-content: center;
  padding: 2rem;
}
ul.box-list > li > img {
  object-fit: contain;
}

.box-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(min-content, 37.5rem));
  grid-template-rows: masonry;
  gap: 1.5rem;
  justify-content: center;
}
.box-grid.quotes {
  grid-template-columns: repeat(2, minmax(min-content, 26.5rem));
}

.box {
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  color: inherit;
  text-decoration: none;
}
.box > header {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr min-content;
  gap: 0.5rem;
}
.box > header > * {
  grid-column: 1/2;
}
.box > header > time {
  color: #2E353B;
  font-weight: 300;
}
.box > header > cite {
  color: #2E353B;
  font-weight: 600;
  font-style: normal;
}
.box > header > .icon.right {
  grid-column: 2/3;
  text-align: right;
  grid-row-start: 1;
  grid-row-end: span 2;
}
.box > header > h3 {
  font-size: 1.8rem;
  font-weight: 700;
}
.box > header > img.icon {
  max-width: 3.5rem;
  max-height: 3.5rem;
}
.box h3 {
  font-size: 2.5rem;
}
.box > details {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.box > img.icon {
  max-width: 10rem;
  max-height: 7.25rem;
  min-height: 90px;
  align-self: start;
}
.box > img.icon.right {
  margin-left: auto;
}
.box > cite {
  font-size: 1.3rem;
  font-style: normal;
}
.box.person {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-rows: min-content 1fr;
  gap: 2.2rem;
  width: 100%;
}
.box.person > img {
  grid-column: 1/2;
  grid-row: 1/3;
  display: block;
}
.box.person > header {
  grid-column: 2/3;
  grid-row: 1/2;
  display: block;
  text-align: right;
}
.box.person > header > a {
  float: left;
}
.box.person > ul.accordian {
  grid-column: 2/3;
  grid-row: 2/3;
}
.box.resource {
  padding: 0;
}
.box.resource header {
  height: 14rem;
  overflow: hidden;
  display: block;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}
.box.resource header img {
  grid-column: 1/3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}
.box.resource > h3 {
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.375rem;
}
.box.resource > p {
  padding-left: 2rem;
  padding-right: 2rem;
}
.box.resource > footer {
  padding: 2rem;
}
.box.resource > footer > img {
  max-width: 3.5rem;
  max-height: 3.5rem;
  border-radius: 50%;
}
.box.info {
  padding: 2.25rem;
  gap: 1.5rem;
}
.box.info .flex-row {
  gap: 1.125rem;
}
.box.info .icon.icon-spin {
  transform: rotate(-15deg);
}
.box.brain-mask, .box.ring-mask {
  padding: 0;
  height: 100%;
  z-index: 2;
}
.box.brain-mask > h4, .box.ring-mask > h4 {
  max-width: 10ch;
  line-height: 0.95;
  font-weight: normal;
}
.box.brain-mask > *, .box.ring-mask > * {
  margin-left: 3.5rem;
  margin-right: 3.5rem;
}
.box.brain-mask > :first-child, .box.ring-mask > :first-child {
  margin-top: 3.5rem;
}
.box.brain-mask > :last-child, .box.ring-mask > :last-child {
  margin-bottom: 3.5rem;
}

@media (max-width: 768px) {
  ul.box-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  ul.box-list > li {
    width: 100%;
  }
  .box-grid {
    grid-template-columns: 1fr;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .box-grid.quotes {
    grid-template-columns: 1fr;
  }
  .box.person {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .box.person > img {
    grid-column: 1/2;
    grid-row: auto;
  }
  .box.person > header {
    grid-column: 1/2;
    grid-row: auto;
  }
  .box.person > ul.accordian {
    grid-column: 1/2;
    grid-row: auto;
  }
}
.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  width: 100%;
  max-width: 80rem;
  gap: 1rem;
  justify-items: center;
}
.figure-grid > figure {
  position: relative;
  aspect-ratio: 1/1;
}
.figure-grid > figure > img {
  aspect-ratio: 1/1;
  object-fit: cover;
  height: 100%;
}
.figure-grid > figure > figcaption {
  position: absolute;
  bottom: 1rem;
  left: 0;
  background-color: var(--colour-white);
  color: var(--colour-navy);
  min-width: 11.5rem;
  padding: 0.5rem 1.5rem;
  border-top-right-radius: 4rem;
  border-bottom-right-radius: 4rem;
}
.figure-grid > figure > figcaption > h3 {
  font-size: 1.4rem;
  font-weight: 600;
  font-style: normal;
}
.figure-grid > figure > figcaption > cite {
  font-size: 1.4rem;
  font-weight: normal;
  font-style: normal;
}

footer {
  padding-top: 4rem;
  padding-bottom: 3rem;
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
footer > * {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
}
footer > hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: none;
  border-top: 1px solid var(--colour-navy);
}
footer p {
  max-width: 40ch;
  font-size: 1.4rem;
}
footer nav.navbar {
  margin: 0;
  padding: 0;
}
footer nav.navbar > ul {
  gap: 1rem;
}
footer img.icon {
  max-width: 4.5rem;
}

input::placeholder {
  font-style: italic;
  color: #94979A;
}

textarea,
select,
input[type=text],
input[type=search],
input[type=number],
input[type=password],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=file],
input[type=month],
input[type=tel],
input[type=time],
input[type=url] {
  border: 0.5px solid var(--washed-grey-color);
  border-radius: 2.2em;
  background-color: var(--background-color);
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

select[multiple],
textarea {
  border-radius: 1em;
}

input[type=color] {
  border: 0.5px solid var(--washed-grey-color);
  border-radius: 5px;
  background-color: var(--background-color);
  padding: 5px;
}

input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time],
input[type=search],
input[type=email],
input[type=url] {
  background-size: 2.6em 2.6em;
  background-repeat: no-repeat;
  background-position: center left 0.3em;
  padding-left: 3.75em;
  padding-right: 1.5em;
  background-image: var(--input-icon), radial-gradient(circle at center, var(--input-icon-color) 0, var(--input-icon-color) 1.2em, transparent 1.25em, transparent 100%);
}

input.icon-right {
  background-position: center right 0.3em;
  padding-left: 1.5em;
  padding-right: 3.75em;
}

input[type=search] {
  --input-icon: url(/static/images/icons/search.svg);
}

input[type=email] {
  --input-icon: url(/static/images/icons/mail.svg);
}

input[type=url] {
  --input-icon: url(/static/images/icons/language.svg);
}

input[type=time] {
  --input-icon: url(/static/images/icons/schedule.svg);
}

input[type=date],
input[type=datetime-local],
input[type=month] {
  --input-icon: url(/static/images/icons/event.svg);
}

input[aria-invalid=true] {
  border-color: var(--negative-color);
  --input-icon-color: var(--negative-color);
}
input[aria-invalid=true]:focus {
  outline: 1px solid var(--negative-color);
}

form.form {
  display: grid;
  grid-template-columns: 1fr;
  --background-color: var(--white-color);
  --input-icon-color: var(--governance-color);
}
form.form label {
  font-weight: 600;
  margin-bottom: 9px;
  margin-top: 30px;
}
form.form ul.errorlist {
  list-style-type: none;
  padding: 0;
  margin: 0;
  color: var(--negative-color);
  font-weight: 600;
}
form.form fieldset {
  --border-color: var(--washed-grey-color);
  border: 0;
  padding: 0;
  margin-top: 30px;
}
form.form fieldset.border {
  border: 0.5px solid var(--border-color);
}
form.form fieldset.input-group {
  margin-top: 0;
}
form.form fieldset > legend {
  font-weight: 600;
  margin-bottom: 9px;
  grid-column: 1/-1;
}
form.form fieldset.horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 20px;
  row-gap: 10px;
}
form.form .note {
  margin-top: 9px;
  margin-bottom: 9px;
  font-weight: 300;
}

label.radio {
  display: flex;
  padding: 12px;
  border: 1px solid var(--washed-grey-color);
  border-radius: 20px;
  cursor: pointer;
  margin-top: 5px;
}
label.radio.custom {
  padding: 4px;
}
label.radio.custom > input[type=radio],
label.radio.custom > input[type=checkbox] {
  margin-top: 8px;
  margin-left: 8px;
  margin-bottom: 8px;
  margin-right: 4px;
}
label.radio.custom > input {
  padding: 8px;
  border: 0;
  border-radius: 0;
}
label.radio > input[type=radio],
label.radio > input[type=checkbox] {
  margin-right: 10px;
}
label.radio:has(input[type=radio]) > input[type=radio],
label.radio:has(input[type=radio]) > input[type=checkbox], label.radio:has(input[type=checkbox]) > input[type=radio],
label.radio:has(input[type=checkbox]) > input[type=checkbox] {
  display: none;
}
label.radio:has(input[type=radio]:is(:checked)), label.radio:has(input[type=checkbox]:is(:checked)) {
  border-color: var(--purple-color);
  border-width: 3px;
  padding: 10px;
}

input[type=button],
input[type=submit],
button {
  margin-bottom: 9px;
  margin-top: 30px;
  justify-self: end;
}
input[type=button].mv0,
input[type=submit].mv0,
button.mv0 {
  margin-bottom: 0;
  margin-top: 0;
}

.input-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: 0.5px solid var(--border-color);
  border-radius: 2.2em;
  padding: 0;
  margin: 0;
}
.input-group.flat {
  border: 0;
  border-radius: 0;
}
.input-group.flat textarea,
.input-group.flat select,
.input-group.flat input[type=text],
.input-group.flat input[type=search],
.input-group.flat input[type=number],
.input-group.flat input[type=password],
.input-group.flat input[type=date],
.input-group.flat input[type=datetime-local],
.input-group.flat input[type=email],
.input-group.flat input[type=file],
.input-group.flat input[type=month],
.input-group.flat input[type=tel],
.input-group.flat input[type=time],
.input-group.flat input[type=url] {
  border-bottom: 1px solid var(--document-color);
  border-radius: 0;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  background-color: transparent;
  flex-grow: 2;
  background-image: none;
}
.input-group input:first-child {
  border-radius: 2.2em 0 0 2.2em;
}
.input-group textarea,
.input-group select,
.input-group input[type=text],
.input-group input[type=search],
.input-group input[type=number],
.input-group input[type=password],
.input-group input[type=date],
.input-group input[type=datetime-local],
.input-group input[type=email],
.input-group input[type=file],
.input-group input[type=month],
.input-group input[type=tel],
.input-group input[type=time],
.input-group input[type=url] {
  border: 0;
  border-radius: 0;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  margin: 0;
  background-color: transparent;
  flex-grow: 2;
  background-image: none;
}
.input-group input[type=button],
.input-group input[type=submit],
.input-group button,
.input-group .btn {
  margin: 0.3em;
  --padding-base: 0.5em;
}
.input-group input:focus {
  outline: none;
}
.input-group:focus-within {
  outline: 5px auto #254deb;
}

main {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
}
.flex-row.left {
  justify-content: left;
}
.flex-row.center {
  justify-content: center;
}
.flex-row.right {
  justify-content: right;
}

.flex-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: space-between;
}
.flex-column.center {
  align-items: center;
}

@media (max-width: 768px) {
  .flex-column-sm {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-between;
  }
}
.center,
.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

.tl {
  text-align: left;
}

.article {
  width: 100%;
}
.article .prose {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}
.article .prose > p {
  margin-top: 0;
  margin-bottom: 0;
}
.article .prose blockquote {
  border-left: 4px solid #ccc;
  padding-left: 1.5em;
  font-style: italic;
}
.article .prose a:not(.btn),
.article .prose a:not(.btn):visited {
  color: var(--colour-jordan);
  --bg-tint-value: 2;
  text-decoration: underline;
}
.article .prose > * {
  width: 100%;
  max-width: 50rem;
}
.article .prose > .full-width,
.article .prose > .flourish-embed,
.article .prose > figure:has(img) {
  max-width: 100%;
}
.article > header {
  width: 100%;
}

nav.navbar {
  max-width: 120rem;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  padding-left: 2rem;
  padding-right: 2rem;
  gap: 2rem;
}
nav.navbar > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.4rem;
  flex-wrap: wrap;
}
nav.navbar > ul.buttons {
  gap: 1rem;
}
nav.navbar > ul > li {
  position: relative;
}
nav.navbar > ul > li.logo {
  width: 20rem;
}
nav.navbar > ul > li a:not(.btn) {
  text-decoration: none;
  color: var(--colour-navy-40);
}
nav.navbar > ul > li:has(> ul)::after {
  content: "∨";
  transform: rotate(180deg);
  font-weight: bold;
}
nav.navbar > ul > li > ul {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  right: -0.5rem;
  background-color: var(--colour-white);
  padding: 0;
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  z-index: 1;
  text-shadow: none;
  text-align: right;
  min-width: 12rem;
}
nav.navbar > ul > li > ul > li {
  display: block;
  padding: 0;
  margin: 0;
  transition: background-color 0.2s;
  border-bottom: var(--colour-navy-10);
}
nav.navbar > ul > li > ul > li > a {
  display: block;
  padding: 0.5rem 1rem;
  width: 100%;
}
nav.navbar > ul > li > ul > li:hover {
  background-color: var(--colour-navy-10);
  text-shadow: 0 0 0.65px #333, 0 0 0.65px #333;
}
nav.navbar > ul > li:hover {
  text-shadow: 0 0 0.65px #333, 0 0 0.65px #333;
}
nav.navbar > ul > li:hover > ul {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  z-index: 10;
}
.container > h1 {
  font-size: 7.5rem;
  line-height: 1;
  max-width: 12ch;
  text-align: center;
  text-wrap: balance;
}
.container > h2 {
  font-size: 6.25rem;
  line-height: 1;
  max-width: 12ch;
  text-align: center;
  text-wrap: balance;
}
.container > p {
  font-size: 1.5rem;
  line-height: 1.6;
  max-width: 36ch;
  text-align: center;
}
.container.grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(10rem, 1fr));
  gap: 4.5rem;
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  align-items: start;
}
.container.grid.grid-small {
  gap: 1.5rem;
}
.container.grid .col-span-3 {
  grid-column: span 6;
}
.container.grid .col-span-2 {
  grid-column: span 4;
}
.container.grid .col-span-1 {
  grid-column: span 2;
}
.container.grid .col-span-half {
  grid-column: span 3;
}
.container.grid .center {
  justify-self: center;
}
.container.grid > h2 {
  font-size: 3.75rem;
}
.container.grid > h1,
.container.grid > h2,
.container.grid > p {
  max-width: 100%;
  text-align: left;
}
.container.big-margin {
  margin-top: 8rem;
  margin-bottom: 4rem;
}
.container > iframe,
.container > video {
  max-width: 80rem;
  width: 100%;
  aspect-ratio: 16/9;
}
.container.hero {
  padding-top: 8.5rem;
  padding-bottom: 8.5rem;
  align-items: center;
}
.container.hero.bg-brain::before {
  padding: 6rem;
}
.container.hero > * {
  max-width: 68rem;
}
.container.hero > h1 {
  text-align: left;
  font-size: 6.25rem;
  font-weight: 400;
  line-height: 1.1;
  max-width: 68rem;
}
.container.header {
  text-align: left;
  align-items: start;
  font-size: 1.875rem;
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
  gap: 4.5rem;
}
.container.header > * {
  max-width: 68rem;
}
.container.header > h1 {
  font-size: 4.25rem;
  text-align: left;
}
.container.header > h2 {
  font-size: 3.75rem;
  line-height: 4.75rem;
  text-align: left;
}
.container.header > p {
  text-align: left;
}

@media (max-width: 768px) {
  .container {
    padding-left: 1.3rem;
    padding-right: 1.3rem;
  }
  .container > h1 {
    font-size: 5.5rem;
  }
  .container > h2 {
    font-size: 3.25rem;
  }
  .container.grid {
    grid-template-columns: 1fr;
  }
  .container.grid .col-span-3 {
    grid-column: span 1;
  }
  .container.grid .col-span-2 {
    grid-column: span 1;
  }
  .container.grid .col-span-1 {
    grid-column: span 1;
  }
  .container.grid .col-span-half {
    grid-column: span 1;
  }
}
.steps > .step {
  box-shadow: none;
  border: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
  max-width: 120rem;
}
.steps > .step > figure {
  grid-column: 1/2;
  grid-row: 1/2;
  justify-self: center;
  align-self: center;
  height: auto;
  margin-left: 0;
  margin-right: 0;
  padding-left: 4rem;
  padding-right: 4rem;
}
.steps > .step > div {
  grid-column: 2/3;
  grid-row: 1/2;
  align-self: center;
  padding: 5rem 8rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.steps > .step > div > h3 {
  font-size: 2.5rem;
}
.steps > .step.full {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}
.steps > .step.full > figure {
  grid-column: 1/2;
  grid-row: 2/3;
}
.steps > .step.full > div {
  grid-column: 1/2;
  grid-row: 1/2;
}
.steps > .step.full > div > * {
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.steps > .step:not(.full):nth-of-type(even) > figure {
  grid-column: 2/3;
}
.steps > .step:not(.full):nth-of-type(even) > div {
  grid-column: 1/2;
}

@media (max-width: 768px) {
  .steps .step {
    display: block;
  }
}