@charset "UTF-8";
/**
 * MASTER.SCSS
 *
 * @Project     : Project Name
 * @Author      : AuthorName [author.name@makecollective.co.nz]
 *
 */
@-ms-viewport {
  width: device-width;
  zoom: 1;
}
@-o-viewport {
  width: device-width;
  zoom: 1;
}
@viewport {
  width: device-width;
  zoom: 1;
}
/**
 * 1. SETTINGS
 */
/**
 * SETTINGS.ANIMATIONS
 *
 * @description : Keyframe animations for this site
 *
 */
@-webkit-keyframes blob-wiggle {
  0% {
    -webkit-transform: scaleX(0.95) scaleY(1.05) rotate(45deg);
    transform: scaleX(0.95) scaleY(1.05) rotate(45deg);
  }
  30% {
    -webkit-transform: scaleX(1.05) scaleY(0.95) rotate(135deg);
    transform: scaleX(1.05) scaleY(0.95) rotate(135deg);
  }
  60% {
    -webkit-transform: scaleX(0.95) scaleY(0.92) rotate(210deg);
    transform: scaleX(0.95) scaleY(0.92) rotate(210deg);
  }
  90% {
    -webkit-transform: scaleX(1.05) scaleY(0.95) rotate(290deg);
    transform: scaleX(1.05) scaleY(0.95) rotate(290deg);
  }
  100% {
    -webkit-transform: scaleX(0.95) scaleY(1.05) rotate(45deg);
    transform: scaleX(0.95) scaleY(1.05) rotate(45deg);
  }
}
@keyframes blob-wiggle {
  0% {
    -webkit-transform: scaleX(0.95) scaleY(1.05) rotate(45deg);
    transform: scaleX(0.95) scaleY(1.05) rotate(45deg);
  }
  30% {
    -webkit-transform: scaleX(1.05) scaleY(0.95) rotate(135deg);
    transform: scaleX(1.05) scaleY(0.95) rotate(135deg);
  }
  60% {
    -webkit-transform: scaleX(0.95) scaleY(0.92) rotate(210deg);
    transform: scaleX(0.95) scaleY(0.92) rotate(210deg);
  }
  90% {
    -webkit-transform: scaleX(1.05) scaleY(0.95) rotate(290deg);
    transform: scaleX(1.05) scaleY(0.95) rotate(290deg);
  }
  100% {
    -webkit-transform: scaleX(0.95) scaleY(1.05) rotate(45deg);
    transform: scaleX(0.95) scaleY(1.05) rotate(45deg);
  }
}
/**
 * SETTINGS.BASE
 *
 * @description : Key application variables and settings
 *
 */
/**
 * SETTINGS.BREAKPOINTS
 *
 * @description : Define major breakpoints
 *
 */
/**
    e.g.
    .thing {
        background: green;

        @include breakpoint($md){
            background: blue;
        }
    }
*/
/**
 * SETTINGS.COLORS
 *
 * @description : Color variable definitions
 *
 */
/**
 * Main Colours
 */
/**
 * Greys
 */
/**
 * Dark mode colors - DEFAULT
 */
/**
 * Light mode colors
 */
:root {
  --bg-color: #F4F3F1;
  --bg-color-03: rgba(244, 243, 241, 0.03);
  --bg-color-10: rgba(244, 243, 241, 0.1);
  --bg-color-20: rgba(244, 243, 241, 0.2);
  --bg-color-30: rgba(244, 243, 241, 0.3);
  --bg-color-50: rgba(244, 243, 241, 0.5);
  --bg-color-95: rgba(244, 243, 241, 0.95);
  --text-color: #191919;
  --text-color-10: rgba(25, 25, 25, 0.1);
  --text-color-20: rgba(25, 25, 25, 0.2);
  --text-color-30: rgba(25, 25, 25, 0.3);
  --text-color-60: rgba(25, 25, 25, 0.6);
  --text-color-90: rgba(25, 25, 25, 0.9);
  --nav-bg: #f2f2f2;
  --category-human: #EE6968;
  --category-technology: #4747AA;
  --category-business: #FBC345;
}

/**
 * UX/Validation colors
 */
/**
 * SETTINGS.EASING
 *
 * @description : Custom easing functions
 *
 */
/**
 * SETTINGS.GRID
 *
 * @description : Settings used in grid calculations
 *
 */
/**
 * SETTINGS.SPACING
 *
 * @description : Settings for controlling global spacing
 *
 */
:root {
  --vp-buffer: 16px;
  --header-offset: 80px;
  --header-height: 80px;
}
@media (min-width: 768px) {
  :root {
    --vp-buffer: 48px;
  }
}

/**
 * GENERIC.FONT.OPENSANS
 *
 * @description : A default font included for demonstration
 *                Remove this if you're not using it…
 *
 */
@font-face {
  font-family: "Suisse Intl";
  font-display: swap;
  src: url("../fonts/suisse-intl/SuisseIntl-Book-WebM.76e05da9310e.woff2") format("woff2"), url("../fonts/suisse-intl/SuisseIntl-Book-WebM.c20b7d1194be.woff") format("woff"), url("../fonts/suisse-intl/SuisseIntl-Book-WebM.5f777e79ca58.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/**
 *  2. TOOLS
 */
/**
 * TOOLS.ACCESSIBILITY
 *
 * @description :  Sets the style for the focus ring
 *                 Make sure that everything that needs to be focusable has an obvioud focus state.
 *
 */
/**
 * TOOLS.FUNCTIONS
 *
 * @description : Common functions
 *
 */
/**
 * Strip Unit
 *  @desc       : Strips the unit from a value to we can use it for calculations
 *  @source     : https://css-tricks.com/snippets/sass/strip-unit-function/
 *  @param      : $num - Number to remove unit from
 *  @return     : Unitless value
 */
/**
 *  REM Calc
 *  @desc      : Converts px values to REMs
 *  @param     : $val - The value to convert (usually passed in px but unit may be omitted)
 *  @param     : $base – Optional parameter, passed if you'd like to calculate with a different base font size
 *  @param     : $base-font-size – The default font size (defined in _settings.base.scss)
 *  @return    : $rems - rem-converted value
 */
/**
 *  Decimal-Round
 *  @desc      : Rounds a floating point number to the nearest whole number
 *  @param     : $number - The number to be rounded. must be unitless.
 */
/**
 *  Decimal-Floor
 *  @desc      : Rounds a floating point number down to the nearest whole number
 */
/**
 * Spacer
 * @desc     : Returns a simple multipled value, converted to rem
 */
/**
 * TOOLS.INCREMENTOR
 *
 * @description : Javascript-powered ticker that increments a number from zero
 *
 */
[data-incrementor].-will-increment {
  -webkit-transition-duration: 0;
  transition-duration: 0;
  opacity: 0;
}
[data-incrementor].-is-incrementing {
  -webkit-transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
}

/**
 * TOOLS.MIXIN.POSITION
 *
 * @description :  Sets the position type along with top, right, bottom and left values for an element
 * @note: Pass 'null' as an argument to ensure that value isn't set
 *
 */
/**
 * TOOLS.MIXIN.CLEARFIX
 *
 * @description : Force an element to self-clear floated children
 *
 */
/**
 * TOOLS.MIXIN.BASELINE_GRID
 *
 * @description :  Adds a baseline grid for setting type.
 *                 Used in development only.
 *
 */
/**
 * @param $spacing            Set the desired line height of the grid. Defaults to 20px
 */
/**
 * TOOLS.TEXT-OUTLINE
 *
 * @description : 
 *
 */
/**
 * 3. GENERIC
 */
/**
 * GNENERIC.ANIMATIONS
 *
 * @description : Avoids a flicker on initial render for elements that are transitioned with js
 *
 */
[data-will-animate] {
  visibility: hidden !important;
}

/**
 * GENERIC.ANTIALIASING
 *
 * @description : Sets the default text antialiasing
 *
 */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * GENERIC.RESET
 *
 * @description :  Include your desired reset here.
 *                 Default is Eric Meyer's reset
 *
 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
picture,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

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

figure {
  margin: 0;
  padding: 0;
}

/**
 * GENERIC.BOXSIZING
 *
 * @description : Sets global box-sizing
 * @reference   : https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 *
 */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*, *::before, *::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

/**
 * GENERIC.FOCUS_RING.
 *
 * @description : Hides the focus ring unless the UA determines it should be visbile
 * e.g. during keyboard navigation
 *
 */
:focus:not(:focus-visible) {
  outline: none;
}

/**
 * GENERIC.RECAPTCHA
 *
 * @description : HIDE THE GOOGLE RECAPTCH BADGE
 *
 */
.grecaptcha-badge {
  visibility: hidden;
}

/**
 * GENERIC.SELECTION
 *
 * @description : Style text highlighting
 *
 */
::-moz-selection {
  background: var(--text-color-10);
  /* WebKit/Blink Browsers */
}
::selection {
  background: var(--text-color-10);
  /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: var(--text-color-10);
  /* Gecko Browsers */
}

/**
 *  4. ELEMENTS
 *  Basic styles for raw HTML elements
 *  No classes here
 */
/**
* ELEMENTS.BASE
*
* @description : Base element styles
*
*/
html {
  height: 100%;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  min-height: 100%;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease;
}
body.dev_type {
  background-image: linear-gradient(to bottom, #0ff 0, rgba(255, 255, 255, 0) 1px);
  background-repeat: repeat-y;
  background-size: 100% 24px;
}
@media (prefers-color-scheme: dark) {
  body {
    --bg-color: #191919;
    --bg-color-03: rgba(25, 25, 25, 0.03);
    --bg-color-10: rgba(25, 25, 25, 0.1);
    --bg-color-20: rgba(25, 25, 25, 0.2);
    --bg-color-30: rgba(25, 25, 25, 0.3);
    --bg-color-50: rgba(25, 25, 25, 0.5);
    --bg-color-95: rgba(25, 25, 25, 0.95);
    --text-color: #ffffff;
    --text-color-10: rgba(255, 255, 255, 0.1);
    --text-color-20: rgba(255, 255, 255, 0.2);
    --text-color-30: rgba(255, 255, 255, 0.3);
    --text-color-60: rgba(255, 255, 255, 0.6);
    --text-color-90: rgba(255, 255, 255, 0.9);
    --nav-bg: #000000;
  }
}

figure {
  margin: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--text-color);
  margin: 3em 0;
}

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

/**
 * ELEMENTS.DISABLED
 *
 * @description : Default styles for disabled elements
 *
 */
.disabled,
*:disabled,
[disabled] {
  cursor: default;
  opacity: 0.35;
  pointer-events: none;
}

/**
 * ELEMENTS.FORMS
 *
 * @description : Core form styles
 *
 */
form {
  width: 100%;
}

label {
  display: inline-block;
}
label.aligned {
  padding: 1.2em 0;
  border-top: 1px solid transparent;
}

textarea, input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=search],
input[type=url] {
  background: transparent;
  border-radius: 0;
  border: 1px solid var(--text-color);
  -webkit-box-shadow: transparent 0 0 0 4px;
  box-shadow: transparent 0 0 0 4px;
  color: var(--text-color);
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  padding: 1.2em 1.5em;
  -webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
  transition: -webkit-box-shadow 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  width: 100%;
}
textarea:hover, input[type=text]:hover,
input[type=email]:hover,
input[type=password]:hover,
input[type=tel]:hover,
input[type=search]:hover,
input[type=url]:hover {
  -webkit-box-shadow: var(--text-color-30) 0 0 0 2px;
  box-shadow: var(--text-color-30) 0 0 0 2px;
}
textarea:focus, input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=url]:focus {
  border-color: var(--text-color);
  -webkit-box-shadow: var(--text-color-30) 0 0 0 4px;
  box-shadow: var(--text-color-30) 0 0 0 4px;
  outline: none;
}
textarea::-webkit-input-placeholder, input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=search]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder {
  opacity: 0.65;
}
textarea::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=url]::-moz-placeholder {
  opacity: 0.65;
}
textarea:-ms-input-placeholder, input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=search]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder {
  opacity: 0.65;
}
textarea::-ms-input-placeholder, input[type=text]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder, input[type=tel]::-ms-input-placeholder, input[type=search]::-ms-input-placeholder, input[type=url]::-ms-input-placeholder {
  opacity: 0.65;
}
textarea::placeholder, input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=tel]::placeholder,
input[type=search]::placeholder,
input[type=url]::placeholder {
  opacity: 0.65;
}

textarea {
  min-height: 10em;
  resize: vertical;
}

input[type=submit],
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  display: inline-block;
  padding: 0;
}

/**
 * ELEMENTS.IMAGES
 *
 * @description : Basic image styles
 *
 */
/**
 *  Set images for responsive sizing
 */
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/**
 * ELEMENTS.TYPE
 *
 * @description : Basic typographical styles
 *
 */
body {
  font-family: "Suisse Intl", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

p {
  margin: 0 0 1.4em 0;
}
p:last-child {
  margin-bottom: 0;
}

a {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

sup {
  position: relative;
  line-height: 0;
  font-size: 0.6em;
  top: -0.5em;
}

/**
 *  5. OBJECTS
 *  These are repeating visual/structural patterns with no 'design' added
 *  Used on their own, or across components. Must be built with classes only
 */
/**
 * OBJECTS.ARTICLE-BLOCK
 *
 * @description : Provides an indented block of article content within the 12 column grid
 *
 */
.o-article_block {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .o-article_block {
    grid-column: 5/-1;
  }
}

/**
 * OBJECTS.BLOCK-HEADER
 *
 * @description : 
 *
 */
.o-block_header {
  grid-column: 1/-1;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .o-block_header {
    margin-bottom: 3.75rem;
  }
}
@media (min-width: 1024px) {
  .o-block_header {
    margin-bottom: 5rem;
  }
}

.o-block_header__title {
  margin-bottom: 2em;
}

.o-block_header__intro {
  max-width: 60ch;
}

/**
 * OBJECTS.GRID
 *
 * @description : CSS Grid with 12 Columns
 *
 */
.o-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1680px;
}

.o-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  -webkit-column-gap: 0.5rem;
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
}
@media (min-width: 480px) {
  .o-grid {
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
  }
}
@media (min-width: 768px) {
  .o-grid {
    -webkit-column-gap: 1.75rem;
    -moz-column-gap: 1.75rem;
    column-gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .o-grid {
    -webkit-column-gap: 2.5rem;
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem;
  }
}
.o-grid.-collapse {
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

.o-grid__full {
  grid-column: 1/-1;
}

.o-grid__md_6 {
  grid-column: span 12;
}
@media (min-width: 768px) {
  .o-grid__md_6 {
    grid-column: span 6;
  }
}

/**
 * OBJECTS.HEADER-OFFSET
 *
 * @description : 
 *
 */
.o-header_offset {
  padding-top: var(--header-offset);
}

.o-header_offset--md {
  padding-top: calc(var(--header-offset) + 80px);
}

.o-header_offset--halfvp {
  padding-top: calc(50vh - var(--header-offset));
}

/**
 * OBJECTS.MAIN
 *
 * @description : 
 *
 */
.o-main {
  -webkit-transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1), -webkit-filter 0.2s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1), -webkit-filter 0.2s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1), filter 0.2s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1), filter 0.2s cubic-bezier(0.74, 0, 0, 1), -webkit-filter 0.2s cubic-bezier(0.74, 0, 0, 1);
}
@media (min-width: 0) {
  .-nav-open .o-main {
    opacity: 0.2;
    -webkit-filter: blur(5px);
    filter: blur(5px);
  }
}

/**
 * OBJECTS.MODULES
 *
 * @description : 
 *
 */
.o-modules {
  --module-space: 5rem;
}
@media (min-width: 1024px) {
  .o-modules {
    --module-space: 7.5rem;
  }
}

.o-module:not(:last-child) {
  margin-bottom: var(--module-space);
}
.o-module.o-module--collapse {
  margin-bottom: 0;
}

/**
 * OBJECTS.RESPONSIVE-VIDEO
 *
 * @description : Container that allows an iframe video embed to be responsive.
 *                Assumes 16:9 aspect ratio
 *
 */
.o-responsive_video {
  position: relative;
  padding-top: 56.25%;
  width: 100%;
}

.o-responsive_video__frame {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/**
 * OBJECTS.SLIDER
 *
 * @description : 
 *
 */
.o-slider .flickity-viewport {
  overflow: visible;
}

.o-slider__slide {
  cursor: -webkit-grab;
  cursor: grab;
}
.o-slider__slide:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

@media (min-width: 768px) {
  .o-slider__slide--peek {
    width: 75%;
  }
}

.o-slider__slider_nav_wrapper {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .o-slider__slider_nav_wrapper {
    margin: 5rem 0;
  }
}

.o-slider__slider_nav {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}
@media (min-width: 1024px) {
  .o-slider__slider_nav::before {
    border-radius: 50%;
    border: 1px solid var(--text-color);
    content: "";
    display: block;
    left: 50%;
    padding-top: 120%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 120%;
    pointer-events: none;
  }
}

.o-slider__slider_nav_btn {
  background: transparent;
  color: var(--text-color);
  padding: 1rem;
  cursor: pointer;
}

.o-slider__slider_nav_cur {
  display: inline-block;
  padding: 1rem 0;
  min-width: 2em;
  text-align: center;
}

.o-slider__slider_nav_tot {
  display: inline-block;
  padding: 1rem 0;
  min-width: 2em;
  text-align: center;
}

/**
 * OBJECTS.TOP-CAP
 *
 * @description : Adds and animated line to a content block
 *
 */
.o-top_cap {
  position: relative;
  padding-top: 1.5em;
}
.o-top_cap::before {
  background-color: var(--text-color);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.74, 0, 0, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.74, 0, 0, 1);
  transition: transform 0.8s cubic-bezier(0.74, 0, 0, 1);
  transition: transform 0.8s cubic-bezier(0.74, 0, 0, 1), -webkit-transform 0.8s cubic-bezier(0.74, 0, 0, 1);
  opacity: 0.4;
}
.-is-visible .o-top_cap::before, .o-top_cap.-is-visible::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/**
 * OBJECTS.PAGE
 *
 * @description : Core layout objects used in addition to the grid
 *
 */
.o-wrapper {
  padding-left: var(--vp-buffer);
  padding-right: var(--vp-buffer);
}

/**
 *  6. TYPOGRAPHY
 *  All styles on top of resets that affect typography, including titles, paragraphs, lists, links etc.
 *  Prefer classes where possible
 */
/**
* TYPOGRAPHY.COPY
*
* @description : Main body copy styles
*
*/
.t-copy_sm {
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.t-copy_reg {
  font-size: 1rem;
}

.t-copy_md {
  font-size: 1.125rem;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .t-copy_md {
    font-size: 1.25rem;
  }
}

.t-copy_lg {
  font-size: 1.5rem;
  line-height: 1.25;
}
@media (min-width: 768px) {
  .t-copy_lg {
    font-size: 1.875rem;
  }
}

/**
 * TYPOGRAPHY.DISPLAY
 *
 * @description : Display Text
 *
 */
.t-display_1 {
  font-size: 3.75rem;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .t-display_1 {
    font-size: 5.625rem;
  }
}
@media (min-width: 1440px) {
  .t-display_1 {
    font-size: 7.5rem;
  }
}

.t-display_2 {
  font-size: 2.5rem;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .t-display_2 {
    font-size: 3.75rem;
  }
}
@media (min-width: 1440px) {
  .t-display_2 {
    font-size: 5rem;
  }
}

.t-display_3 {
  font-size: 2.125rem;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .t-display_3 {
    font-size: 3rem;
  }
}
@media (min-width: 1440px) {
  .t-display_3 {
    font-size: 3.75rem;
  }
}

/**
 * Modifiers
 */
.t-display--col_align {
  position: relative;
  left: -0.05em;
}

.t-display--row_align {
  margin-top: -0.15em;
}

/**
* TYPOGRAPHY.HEADINGS
*
* @description : Main body level headings styles
*
*/
.t-heading_6, .t-heading_5, .t-heading_4, .rich-text h4,
.t-richtext h4, .t-heading_3, .rich-text h3,
.t-richtext h3, .t-heading_2, .rich-text h2,
.t-richtext h2, .t-heading_1 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.t-heading_1 {
  font-size: 2.75rem;
  line-height: 1.1;
}
@media (min-width: 1024px) {
  .t-heading_1 {
    font-size: 3.75rem;
  }
}

.t-heading_2, .rich-text h2,
.t-richtext h2 {
  font-size: 2.25rem;
  line-height: 1.1;
}
@media (min-width: 1024px) {
  .t-heading_2, .rich-text h2,
.t-richtext h2 {
    font-size: 3rem;
  }
}

.t-heading_3, .rich-text h3,
.t-richtext h3 {
  font-size: 1.75rem;
  line-height: 1.1;
}
@media (min-width: 1024px) {
  .t-heading_3, .rich-text h3,
.t-richtext h3 {
    font-size: 2.25rem;
  }
}

.t-heading_4, .rich-text h4,
.t-richtext h4 {
  font-size: 1.5rem;
  line-height: 1.25;
}
@media (min-width: 1024px) {
  .t-heading_4, .rich-text h4,
.t-richtext h4 {
    font-size: 1.75rem;
  }
}

.t-heading_5 {
  font-size: 1.25rem;
  line-height: 1.25;
}
@media (min-width: 1024px) {
  .t-heading_5 {
    font-size: 1.5rem;
  }
}

.t-heading_6 {
  font-size: 1.25rem;
  line-height: 1.25;
}
@media (min-width: 1024px) {
  .t-heading_6 {
    font-size: 1.25rem;
  }
}

/**
 * TYPOGRAPHY.LINKS
 *
 * @description : 
 *
 */
.t-link {
  display: inline-block;
  color: black;
}
.t-link:hover {
  color: black;
}
@media (prefers-color-scheme: dark) {
  .t-link {
    color: #ffffff;
  }
  .t-link:hover {
    color: #e6e6e6;
  }
}

/**
* TYPOGRAPHY.LISTS
*
* @description : List styles
*
*/
/* e.g.
    .t-ulist {
        li  {
            margin-bottom: 1em;
        }
    }

    .t-olist {
        li  {
            margin-bottom: 1em;
        }
    }
*/
/**
 * TYPOGRAPHY.META
 *
 * @description : Meta data for case studies etc (client name, year, services...)
 *
 */
.t-meta_label {
  font-size: 0.875rem;
  opacity: 50%;
  margin-bottom: 0.5em;
}

.t-meta_value {
  font-size: 1rem;
  color: var(--text-color);
}

/**
 * TYPOGRAPHY.RICHTEXT
 *
 * @description : Bulk apply styles for rich text - usually CMS content.
 *
 */
.rich-text ol,
.t-richtext ol, .rich-text ul,
.t-richtext ul {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

.rich-text ol li,
.t-richtext ol li, .rich-text ul li,
.t-richtext ul li {
  position: relative;
}
.rich-text ol li:not(:last-child),
.t-richtext ol li:not(:last-child), .rich-text ul li:not(:last-child),
.t-richtext ul li:not(:last-child) {
  margin-bottom: 0.5em;
}
.rich-text ol li::before,
.t-richtext ol li::before, .rich-text ul li::before,
.t-richtext ul li::before {
  display: inline-block;
  content: "–";
  position: absolute;
  top: 0;
  left: -1.5em;
}

.rich-text h2,
.t-richtext h2 {
  margin-bottom: 0.5em;
}
.rich-text h3,
.t-richtext h3 {
  margin-bottom: 0.75em;
}
.rich-text h4,
.t-richtext h4 {
  font-family: "Suisse Intl", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  margin-bottom: 0.75em;
}
.rich-text p + h2, .rich-text p + h3, .rich-text p + h4, .rich-text ul + h2, .rich-text ul + h3, .rich-text ul + h4, .rich-text ol + h2, .rich-text ol + h3, .rich-text ol + h4, .rich-text blockquote + h2, .rich-text blockquote + h3, .rich-text blockquote + h4, .rich-text img + h2, .rich-text img + h3, .rich-text img + h4,
.t-richtext p + h2,
.t-richtext p + h3,
.t-richtext p + h4,
.t-richtext ul + h2,
.t-richtext ul + h3,
.t-richtext ul + h4,
.t-richtext ol + h2,
.t-richtext ol + h3,
.t-richtext ol + h4,
.t-richtext blockquote + h2,
.t-richtext blockquote + h3,
.t-richtext blockquote + h4,
.t-richtext img + h2,
.t-richtext img + h3,
.t-richtext img + h4 {
  margin-top: 1em;
}
.rich-text p a, .rich-text li a,
.t-richtext p a,
.t-richtext li a {
  border-bottom: 2px solid var(--text-color-30);
  -webkit-transition: border-bottom 0.2s cubic-bezier(0.74, 0, 0, 1), color 0.2s cubic-bezier(0.74, 0, 0, 1);
  transition: border-bottom 0.2s cubic-bezier(0.74, 0, 0, 1), color 0.2s cubic-bezier(0.74, 0, 0, 1);
}
.rich-text p a:hover, .rich-text p a:focus, .rich-text li a:hover, .rich-text li a:focus,
.t-richtext p a:hover,
.t-richtext p a:focus,
.t-richtext li a:hover,
.t-richtext li a:focus {
  border-bottom: 2px solid var(--text-color-90);
  color: var(--text-color-90);
}
.rich-text p a:hover::after, .rich-text p a:focus::after, .rich-text li a:hover::after, .rich-text li a:focus::after,
.t-richtext p a:hover::after,
.t-richtext p a:focus::after,
.t-richtext li a:hover::after,
.t-richtext li a:focus::after {
  opacity: 0.5;
}
.rich-text p a[target=_blank], .rich-text li a[target=_blank],
.t-richtext p a[target=_blank],
.t-richtext li a[target=_blank] {
  margin: 0 0.25em 0 0;
}
.rich-text p a[target=_blank]::after, .rich-text li a[target=_blank]::after,
.t-richtext p a[target=_blank]::after,
.t-richtext li a[target=_blank]::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  background-size: 100% auto;
  vertical-align: baseline;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 11.75V23H1V3H12.25' stroke='%23ffffff' vector-effect='non-scaling-stroke' stroke-width='2'/%3E%3Cpath d='M14 1H23V10' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M23 1L8 16' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E%0A");
  margin: 0 0 0 0.35em;
  -webkit-transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1);
}
@media not all and (prefers-color-scheme: dark) {
  .rich-text p a[target=_blank]::after, .rich-text li a[target=_blank]::after,
.t-richtext p a[target=_blank]::after,
.t-richtext li a[target=_blank]::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 11.75V23H1V3H12.25' stroke='%23191919' vector-effect='non-scaling-stroke' stroke-width='2'/%3E%3Cpath d='M14 1H23V10' stroke='%23191919' stroke-width='2'/%3E%3Cpath d='M23 1L8 16' stroke='%23191919' stroke-width='2'/%3E%3C/svg%3E%0A");
  }
}
.-light_mode .rich-text p a[target=_blank]::after, .-light_mode .rich-text li a[target=_blank]::after,
.-light_mode .t-richtext p a[target=_blank]::after,
.-light_mode .t-richtext li a[target=_blank]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 11.75V23H1V3H12.25' stroke='%23191919' vector-effect='non-scaling-stroke' stroke-width='2'/%3E%3Cpath d='M14 1H23V10' stroke='%23191919' stroke-width='2'/%3E%3Cpath d='M23 1L8 16' stroke='%23191919' stroke-width='2'/%3E%3C/svg%3E%0A");
}
.rich-text .t-leader,
.t-richtext .t-leader {
  margin: 1.5em 0;
  line-height: 1.4;
  font-size: 1.375rem;
}
@media (min-width: 1024px) {
  .rich-text .t-leader,
.t-richtext .t-leader {
    font-size: 1.875rem;
  }
}
.rich-text ul li::before,
.t-richtext ul li::before {
  content: "–";
}
.rich-text ol,
.t-richtext ol {
  counter-reset: list;
}
.rich-text ol li::before,
.t-richtext ol li::before {
  counter-increment: list;
  content: counter(list) ".";
}
.rich-text b,
.t-richtext b {
  font-weight: bold;
}
.rich-text *:first-child,
.t-richtext *:first-child {
  margin-top: 0;
}
.rich-text *:last-child,
.t-richtext *:last-child {
  margin-bottom: 0;
}
.rich-text p:first-child:empty,
.rich-text p:last-child:empty,
.t-richtext p:first-child:empty,
.t-richtext p:last-child:empty {
  display: none;
}
.rich-text p:first-child:empty + *,
.rich-text p:last-child:empty + *,
.t-richtext p:first-child:empty + *,
.t-richtext p:last-child:empty + * {
  margin-top: 0 !important;
}

/**
 *  7. COMPONENTS
 *  A component is a reusable chunk of UI that is clearly designed, as opposed to an object.
 *  Clearly refers to a block of UI: pagination, buttons, modals, icons... etc
 *  You should be able to take a component and paste it anywhere in the app
 *  Must be built with classes only
 */
/**
 * COMPONENTS.APPROACH-ARTICLE-HERO
 *
 * @description : 
 *
 */
.c-approach_article_hero {
  display: grid;
  grid-template-rows: 1fr -webkit-min-content 0.5fr;
  grid-template-rows: 1fr min-content 0.5fr;
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content;
  min-height: 100vh;
  padding-top: var(--header-height);
}

.c-approach_article_hero__image_wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  grid-column: 1/-1;
  grid-row: 1/-1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: -1;
}

.c-approach_article_hero__image {
  max-height: 95vh;
  -webkit-transition: opacity 1s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 1s cubic-bezier(0.74, 0, 0, 1);
}
.c-approach_article_hero__image.-is-dimmed {
  opacity: 0.4;
}
.c-approach_article_hero__image.-is-hidden {
  opacity: 0;
}

.c-approach_article_hero__copy {
  grid-column: 1/-1;
  grid-row: 2;
  display: grid;
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 2;
}
@media (min-width: 1024px) {
  .c-approach_article_hero__copy {
    grid-column: 1/-5;
  }
}

/**
 * COMPONENTS.APPROACH-ARTICLE-BODY
 *
 * @description : 
 *
 */
.c-approach_article_body {
  row-gap: 2rem;
}

.c-approach_article_body__back {
  grid-column: 1/-1;
  grid-row: 1;
}
@media (min-width: 768px) {
  .c-approach_article_body__back {
    grid-row: 1;
    grid-column: 1/5;
  }
}

.c-approach_article_body__content {
  grid-column: 1/-1;
  grid-row: 2;
}
@media (min-width: 768px) {
  .c-approach_article_body__content {
    grid-row: 1;
    grid-column: 5/-1;
  }
}

/**
 * OBJECTS.APPROACH-ARTICLES
 *
 * @description : 
 *
 */
.c-approach_articles {
  border-top: 1px solid var(--text-color-30);
  padding-top: 2rem;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .c-approach_articles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 2rem;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
  }
}

.c-approach_articles_nav {
  display: none;
}
@media (min-width: 768px) {
  .c-approach_articles_nav {
    display: block;
    grid-column: 1/3;
    position: relative;
    z-index: 100;
  }
}

.c-approach_articles_nav__list {
  display: none;
}
@media (min-width: 1024px) {
  .c-approach_articles_nav__list {
    display: block;
    grid-column: 1/3;
    position: -webkit-sticky;
    position: sticky;
    top: calc(50vh - 7%);
  }
}

.c-approach_articles__category_details {
  grid-column: 1/2;
  grid-row: 1;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .c-approach_articles__category_details {
    margin-bottom: 0;
    grid-column: 1/2;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .c-approach_articles__category_inner {
    position: -webkit-sticky;
    position: sticky;
    top: calc(50vh - 7%);
  }
}

.c-approach_articles__category_count {
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.6s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.6s cubic-bezier(0.74, 0, 0, 1);
}
@media (min-width: 768px) {
  .c-approach_articles__category_count {
    display: block;
  }
}
.c-approach_articles__category_count.-is-active {
  opacity: 1;
}

.c-approach_articles_wrapper {
  grid-column: 1/-1;
  grid-row: 2;
}
@media (min-width: 768px) {
  .c-approach_articles_wrapper {
    grid-row: 1;
  }
}
@media (min-width: 1440px) {
  .c-approach_articles_wrapper {
    grid-column: 3/-3;
    grid-row: 1;
  }
}
@media (min-width: 768px) {
  .c-approach_articles_wrapper--no_nav {
    grid-column: 1/-1;
  }
}
@media (min-width: 1440px) {
  .c-approach_articles_wrapper--no_nav {
    grid-column: 1/-3;
  }
}

.c-approach_articles_list__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.c-approach_articles_list__meta .c-btn {
  margin-right: 2em;
}

.c-approach_articles_list__item_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.c-approach_articles_list__blob {
  margin-right: 1em;
}

.c-approach_articles_list__read_marker {
  display: none;
}
.-is_read .c-approach_articles_list__read_marker {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c-approach_articles_list__read_check {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 1.5em;
  flex: 0 0 1.5em;
  margin-right: 0.5em;
  position: relative;
  top: -0.05em;
}

.-is_read .c-approach_articles_list__duration {
  display: none;
}

.c-approach_articles_nav__blob {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-right: 1em;
}

.c-approach_articles_list__blob--approach {
  position: relative;
  top: 0.25em;
}

.c-approach_articles_nav__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.c-approach_articles_nav__link:hover .c-approach_articles_nav__text {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.c-approach_articles_nav__link:hover .c-approach_articles_nav__blob {
  -webkit-filter: url("#blobdistortionfilter");
  filter: url("#blobdistortionfilter");
}
.c-approach_articles_nav__link.-is-active {
  pointer-events: none;
}
.c-approach_articles_nav__link.-is-active .c-approach_articles_nav__text {
  opacity: 0.7;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.c-approach_articles_nav__text {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(1em);
  transform: translateX(1em);
  -webkit-transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1), -webkit-transform 0.2s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1), -webkit-transform 0.2s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1), transform 0.2s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1), transform 0.2s cubic-bezier(0.74, 0, 0, 1), -webkit-transform 0.2s cubic-bezier(0.74, 0, 0, 1);
}

/**
 * COMPONENTS.APPROACH-CATEGORY-LABEL
 *
 * @description : 
 *
 */
.c-approach_category_label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.c-approach_category_label svg {
  width: 1.25em;
  margin-right: 0.75em;
  position: relative;
  top: -0.05em;
}
.c-approach_category_label[data-category=human] path {
  fill: var(--category-human);
}
.c-approach_category_label[data-category=technology] path {
  fill: var(--category-technology);
}
.c-approach_category_label[data-category=business] path {
  fill: var(--category-business);
}

/**
 * COMPONENTS.APPROACH-INDEX-BG
 *
 * @description : The background images for the approach index page
 *
 */
.c-approach_index_bg {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  padding: 0 10%;
  z-index: -1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-items: center;
  height: -webkit-fill-available;
}

.c-approach_index_bg__canvas {
  background-color: transparent;
  max-height: 90vh;
  max-width: 90vw;
  height: auto;
  width: auto;
}

.c-approach_index_bg__img {
  display: none;
}

/**
 * COMPONENTS.AWARDS-LIST
 *
 * @description : 
 *
 */
.c-awards_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c-awards_list__item {
  margin: 0 1em 0.5em 0;
  max-width: 2.25rem;
}
@media (min-width: 1024px) {
  .c-awards_list__item {
    max-width: 2.75rem;
  }
}

/**
 * COMPONENTS.BLOB
 *
 * @description : The Smudge blob with color variations
 *
 */
.c-blob path {
  fill: var(--text-color);
}
.c-blob[data-category=human] path {
  fill: var(--category-human);
}
.c-blob[data-category=business] path {
  fill: var(--category-business);
}
.c-blob[data-category=technology] path {
  fill: var(--category-technology);
}

/**
 * COMPONENTS.BLOB-LINK
 *
 * @description : 
 *
 */
.c-blob_link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.c-blob_link:hover .c-blob_link__blob {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.c-blob_link:hover .c-blob_link__blob .c-btn__blob--plain path {
  fill: var(--text-color);
}

.c-blob_link__blob {
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition: -webkit-filter 0.2s ease, -webkit-transform 0.2s ease;
  transition: -webkit-filter 0.2s ease, -webkit-transform 0.2s ease;
  transition: filter 0.2s ease, transform 0.2s ease;
  transition: filter 0.2s ease, transform 0.2s ease, -webkit-filter 0.2s ease, -webkit-transform 0.2s ease;
  position: relative;
  top: 0.2em;
}

.c-blob_link__text {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

/**
 * COMPONENTS.BUTTONS
 *
 * @description : Main buttons
 *
 */
.c-btn {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  vertical-align: middle;
}

.c-btn--pri {
  background: transparent;
  border-radius: 10em;
  border: 1px solid var(--text-color);
  -webkit-box-shadow: transparent 0 0 0 4px;
  box-shadow: transparent 0 0 0 4px;
  color: var(--text-color);
  font-size: 1rem;
  padding: 1em 1.5em;
  -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}
.c-btn--pri:focus, .c-btn--pri:hover {
  background: var(--text-color);
  color: var(--bg-color);
}

.c-btn__blob {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  height: 0.85em;
  margin-right: 1em;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  width: auto;
}
.c-btn__blob svg {
  height: 100%;
}

.c-btn--sm {
  font-size: 0.75rem;
  letter-spacing: 0.025em;
}

.c-btn--md {
  font-size: 0.875rem;
}

.c-btn--slim {
  padding: 0.75em 1em;
}

.c-btn--fat {
  padding: 1.5em 2em;
}

/**
 * Buttons with icons
 */
.c-btn--icon {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.c-btn--icon svg {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.c-btn--icon svg:first-child {
  margin-right: 0.5em;
}
.c-btn--icon svg:last-child {
  margin-left: 0.5em;
}

/**
 * COMPONENTS.CASE-STUDIES-BLOCK
 *
 * @description : 
 *
 */
.c-case_studies_block__header {
  grid-column: 1/-1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 3.75rem;
}
@media (min-width: 768px) {
  .c-case_studies_block__header {
    margin-bottom: 5.625rem;
  }
}
@media (min-width: 1024px) {
  .c-case_studies_block__header {
    margin-bottom: 7.5rem;
  }
}

.c-case_studies_block__all {
  margin-left: auto;
}

/**
 * COMPONENTS.CASE-STUDY-SYNOPSIS
 *
 * @description : 
 *
 */
.c-case_study_synopsis {
  row-gap: 2em;
}

.c-case_study_synopsis__copy {
  grid-row: 2;
  grid-column: 1/-1;
}
@media (min-width: 820px) {
  .c-case_study_synopsis__copy {
    grid-column: 7/-1;
    grid-row: 1;
  }
}
@media (min-width: 1440px) {
  .c-case_study_synopsis__copy {
    grid-column: 8/-2;
  }
}

.c-case_study_synopsis__img_link {
  display: block;
  grid-row: 1;
  grid-column: 1/-1;
  overflow: hidden;
}
@media (min-width: 820px) {
  .c-case_study_synopsis__img_link {
    grid-column: 1/7;
    grid-row: 1;
  }
}
@media (min-width: 1440px) {
  .c-case_study_synopsis__img_link {
    grid-column: 2/8;
  }
}
.c-case_study_synopsis__img_link:hover .c-case_study_synopsis__img {
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}

.c-case_study_synopsis__img_wrap {
  overflow: hidden;
}

.c-case_study_synopsis__img {
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

@media (min-width: 820px) {
  .c-case_study_synopsis__client {
    margin-top: -0.4em;
  }
}

/**
* Alternate horizontal layout orientation on desktop 
*/
@media (min-width: 820px) {
  .c-case_study_synopsis.-is_alt .c-case_study_synopsis__copy {
    grid-column: 1/7;
    grid-row: 1;
  }
}
@media (min-width: 1440px) {
  .c-case_study_synopsis.-is_alt .c-case_study_synopsis__copy {
    grid-column: 2/6;
  }
}
@media (min-width: 820px) {
  .c-case_study_synopsis.-is_alt .c-case_study_synopsis__img_link {
    grid-column: 7/-1;
    grid-row: 1;
  }
}
@media (min-width: 1440px) {
  .c-case_study_synopsis.-is_alt .c-case_study_synopsis__img_link {
    grid-column: 6/-2;
  }
}

/**
 * COMPONENTS.CASE-STUDY-HERO
 *
 * @description : 
 *
 */
.c-case_study_hero {
  background-size: cover;
  background-position: center center;
  position: relative;
  padding-top: 12.5rem;
  min-height: 31.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .c-case_study_hero {
    min-height: 43.75rem;
    padding-top: 16.25rem;
  }
}
@media (min-width: 1024px) {
  .c-case_study_hero {
    padding-top: 20rem;
  }
}
.c-case_study_hero::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--bg-color-20)), color-stop(33%, var(--bg-color-20)), to(var(--bg-color)));
  background-image: linear-gradient(var(--bg-color-20) 0%, var(--bg-color-20) 33%, var(--bg-color) 100%);
}
@media (prefers-color-scheme: dark) {
  .c-case_study_hero::after {
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--bg-color-20)), color-stop(33%, var(--bg-color-20)), to(var(--bg-color-95)));
    background-image: linear-gradient(var(--bg-color-20) 0%, var(--bg-color-20) 33%, var(--bg-color-95) 100%);
  }
}

.c-case_study_hero__copy {
  position: relative;
  z-index: 3;
  grid-column: 1/-1;
  margin-bottom: -2rem;
}
@media (min-width: 1024px) {
  .c-case_study_hero__copy {
    grid-column: 1/10;
  }
}

/**
 * COMPONENTS.CASE-STUDY-INTRO
 *
 * @description : Holds the intro text, meta, quote and video link for a case study
 *
 */
.c-case_study_intro {
  padding: 1.25rem 0;
}

.c-case_study_intro__leader {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .c-case_study_intro__leader {
    grid-column: 1/-5;
  }
}

.c-case_study_intro__meta {
  grid-column: 1/-1;
  grid-row: 2;
}
@media (min-width: 768px) {
  .c-case_study_intro__meta {
    grid-row: 2;
    grid-column: 5/-1;
  }
}

.c-case_study_intro__meta_item {
  grid-column: span 12;
  margin-bottom: 1rem;
}
@media (min-width: 480px) {
  .c-case_study_intro__meta_item {
    grid-column: span 5;
  }
}
@media (min-width: 1024px) {
  .c-case_study_intro__meta_item {
    grid-column: span 3;
  }
}

.c-case_study_intro__video {
  grid-column: 1/-1;
  grid-row: 3;
}
@media (min-width: 768px) {
  .c-case_study_intro__video {
    grid-row: 2;
    grid-column: 1/5;
  }
}

/**
 * COMPONENTS.ERROR-PAGE
 *
 * @description : 
 *
 */
.c-error_page {
  min-height: calc(100vh - var(--header-height));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}

.c-error_page__img_wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 0;
}

.c-error_page__content {
  position: relative;
  z-index: 1;
}

.c-error_page__img {
  width: 80vw;
  max-width: 50rem;
  opacity: 0.6;
}
@media (min-width: 768px) {
  .c-error_page__img {
    width: 60vw;
  }
}

/**
 * COMPONENTS.FOOTER
 *
 * @description : Main site footer
 *
 */
.c-footer {
  padding-bottom: 3rem;
  position: relative;
  z-index: 1;
}

.c-footer__inner {
  row-gap: 2rem;
}
@media (min-width: 768px) {
  .c-footer__inner {
    grid-template-rows: 1fr;
  }
}

.c-footer__nav {
  grid-row: 1;
  grid-column: 1/-1;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .c-footer__nav {
    margin-bottom: 0;
    grid-column: 7/-1;
    grid-row: 1/4;
  }
}

.c-footer__secondary_links {
  grid-row: 3;
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .c-footer__secondary_links {
    display: grid;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    grid-column: 1/7;
    grid-row: 2/3;
  }
}

.c-footer__legal {
  grid-row: 4;
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .c-footer__legal {
    display: grid;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    grid-column: 1/7;
    grid-row: 3/4;
  }
}

.c-footer__social {
  grid-row: 2;
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .c-footer__social {
    grid-column: 1/6;
    grid-row: 1/2;
    padding-top: 0.25em;
  }
}

.c-footer__social_text {
  max-width: 18ch;
  display: inline-block;
}

.c-footer__social_link {
  margin-left: auto;
}

.c-footer__social_cursor {
  display: block;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: opacity 0.3s cubic-bezier(0.74, 0, 0, 1), -webkit-transform 0.3s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.3s cubic-bezier(0.74, 0, 0, 1), -webkit-transform 0.3s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.3s cubic-bezier(0.74, 0, 0, 1), transform 0.3s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.3s cubic-bezier(0.74, 0, 0, 1), transform 0.3s cubic-bezier(0.74, 0, 0, 1), -webkit-transform 0.3s cubic-bezier(0.74, 0, 0, 1);
  pointer-events: none;
  width: 6.25rem;
  height: 6.25rem;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
}
.c-footer__social_cursor.-is-visible {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.c-footer__social_cursor svg {
  width: 100%;
}

/**
 * COMPONENTS.FOOTER-LINKS
 *
 * @description : 
 *
 */
.c-footer_links {
  font-size: 2.5rem;
  line-height: 1;
}
@media (min-width: 768px) {
  .c-footer_links {
    font-size: 3.125rem;
  }
}
@media (min-width: 1024px) {
  .c-footer_links {
    font-size: 4rem;
  }
}
@media (min-width: 1440px) {
  .c-footer_links {
    font-size: 5rem;
  }
}

.c-footer_links__item:not(:last-child) {
  margin-bottom: 0.25em;
}

.c-footer_links__link:hover, .c-footer_links__link:focus {
  color: var(--bg-color);
}
@supports (-webkit-text-stroke: initial) {
  .c-footer_links__link:hover, .c-footer_links__link:focus {
    -webkit-text-stroke: 1px var(--text-color);
    color: transparent;
    text-shadow: none;
  }
}
.c-footer_links__link.-is-active {
  color: var(--bg-color);
  pointer-events: none;
}
@supports (-webkit-text-stroke: initial) {
  .c-footer_links__link.-is-active {
    -webkit-text-stroke: 1px var(--text-color);
    color: transparent;
    text-shadow: none;
  }
}

/**
 * COMPONENTS.HEADER
 *
 * @description : Main site header
 *
 */
.c-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.75rem var(--vp-buffer);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: background-color 0.65s ease;
  transition: background-color 0.65s ease;
  pointer-events: none;
}
.c-header > * {
  pointer-events: all;
}
@media (min-width: 768px) {
  .c-header {
    padding: 1.75rem var(--vp-buffer);
  }
}
.c-header.-is-scrolled {
  background-color: var(--bg-color-95);
}

.c-header__logo {
  width: 6.25rem;
}
@media (min-width: 480px) {
  .c-header__logo {
    width: 7.9375rem;
  }
}
.c-header__logo path {
  fill: var(--text-color);
}
.c-header__logo .c-logo__text {
  -webkit-transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-header__logo .c-logo__blob {
  -webkit-transition: -webkit-filter 0.2s ease, -webkit-transform 0.2s ease;
  transition: -webkit-filter 0.2s ease, -webkit-transform 0.2s ease;
  transition: filter 0.2s ease, transform 0.2s ease;
  transition: filter 0.2s ease, transform 0.2s ease, -webkit-filter 0.2s ease, -webkit-transform 0.2s ease;
}
.-nav-open .c-header__logo .c-logo__text {
  opacity: 0;
}

/**
 * COMPONENTS.HOME_HERO
 *
 * @description : 
 *
 */
.c-home_hero {
  min-height: 100vh;
  padding-top: var(--header-height);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.c-home_hero__title_lede {
  margin-bottom: 0.5em;
  text-align: center;
}

.c-home_hero__title {
  -ms-flex-item-align: stretch;
  align-self: stretch;
  margin-bottom: 0.5em;
  text-align: center;
}
@media (min-width: 768px) {
  .c-home_hero__title {
    margin-bottom: 1em;
  }
}

.c-home_hero__img_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.c-home_hero__img {
  max-height: 80vh;
  width: 150%;
  max-width: unset;
}
@media (min-width: 768px) {
  .c-home_hero__img {
    max-width: 100%;
    width: 70%;
  }
}

.c-home_hero__intro_wrap {
  grid-column: 1/-1;
}
@media (min-width: 480px) {
  .c-home_hero__intro_wrap {
    text-align: center;
    grid-column: 2/-2;
  }
}
@media (min-width: 1024px) {
  .c-home_hero__intro_wrap {
    text-align: left;
    grid-column: 9/-1;
  }
}

.c-home_hero__intro {
  font-size: 1rem;
}
@media (min-width: 768px) {
  .c-home_hero__intro {
    font-size: 0.875rem;
  }
}
@media (min-width: 1440px) {
  .c-home_hero__intro {
    font-size: 1rem;
  }
}

.c-home_hero__scroller_wrapper {
  position: absolute;
  right: 0;
  bottom: 1rem;
  left: 0;
}
@media (min-width: 768px) {
  .c-home_hero__scroller_wrapper {
    bottom: 3rem;
  }
}

.c-home_hero__scroller {
  grid-column: 6/8;
}
@media (min-width: 1024px) {
  .c-home_hero__scroller {
    grid-column: 1/4;
  }
}

.c-home_hero__scroller_thumb {
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.74, 0, 0, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.74, 0, 0, 1);
  transition: transform 0.6s cubic-bezier(0.74, 0, 0, 1);
  transition: transform 0.6s cubic-bezier(0.74, 0, 0, 1), -webkit-transform 0.6s cubic-bezier(0.74, 0, 0, 1);
  display: block;
  height: 4em;
  background: var(--text-color);
  width: 1px;
}

/**
 * COMPONENTS.NAV
 *
 * @description : Like a hamburger, but more of a sandwich
 *
 */
.c-nav {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
}

.c-nav__desktop {
  display: none;
}
@media (min-width: 769px) {
  .c-nav__desktop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1rem;
  }
}

.c-nav__desktop_item {
  margin-left: 1.5em;
}

.c-nav__desktop_link {
  position: relative;
}
.c-nav__desktop_link::after {
  display: block;
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: var(--text-color);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1), -webkit-transform 0.3s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1), -webkit-transform 0.3s cubic-bezier(0.74, 0, 0, 1);
  transition: transform 0.3s cubic-bezier(0.74, 0, 0, 1), opacity 0.2s cubic-bezier(0.74, 0, 0, 1);
  transition: transform 0.3s cubic-bezier(0.74, 0, 0, 1), opacity 0.2s cubic-bezier(0.74, 0, 0, 1), -webkit-transform 0.3s cubic-bezier(0.74, 0, 0, 1);
  pointer-events: none;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  opacity: 0;
}
.c-nav__desktop_link:hover::after {
  opacity: 1;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.c-nav__desktop_link.-is-active::after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  opacity: 0.2;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

/**
 * COMPONENTS.NAV-PANEL
 *
 * @description : Navigation that appears in the slideout panel
 *
 */
.c-nav_panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  background: var(--nav-bg);
  -webkit-transform: translateX(101%);
  transform: translateX(101%);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  z-index: -1;
  width: calc(100vw - 60px);
  min-width: 17.5rem;
  max-width: 35rem;
  padding: 6.25rem 4rem 4rem 2rem;
}
.c-nav_panel.-is-active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
@media (min-width: 769px) {
  .c-nav_panel {
    display: none;
  }
}

.c-nav_panel__list--primary {
  font-size: 1.75em;
}

.c-nav_panel__link {
  display: inline-block;
}
.c-nav_panel__link.-is-active {
  opacity: 0.6;
}

/**
 * COMPONENTS.NAV-TOGGLE
 *
 * @description : Like a hamburger, but more of a sandwich
 *
 */
.c-nav_toggle {
  background-color: transparent;
  cursor: pointer;
  display: initial;
}
@media (min-width: 769px) {
  .c-nav_toggle {
    display: none;
  }
}
.c-nav_toggle:hover .c-nav_toggle__line--1 {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
.c-nav_toggle:hover .c-nav_toggle__line--2 {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
.c-nav_toggle:focus {
  -webkit-box-shadow: var(--text-color-10) 0 0 0 4px;
  box-shadow: var(--text-color-10) 0 0 0 4px;
}
.c-nav_toggle.-is-active [data-name=default] .c-nav_toggle__line {
  opacity: 0;
}
.c-nav_toggle.-is-active [data-name=default] .c-nav_toggle__line--1 {
  -webkit-transform: translateY(7.5px);
  transform: translateY(7.5px);
}
.c-nav_toggle.-is-active [data-name=default] .c-nav_toggle__line--2 {
  -webkit-transform: translateY(-7.5px);
  transform: translateY(-7.5px);
}
.c-nav_toggle.-is-active [data-name=close] .c-nav_toggle__line {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
  opacity: 1;
}
.c-nav_toggle.-is-active [data-name=close] .c-nav_toggle__line--1 {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.c-nav_toggle.-is-active [data-name=close] .c-nav_toggle__line--2 {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.c-nav_toggle__line {
  stroke: var(--text-color);
  -webkit-transition: opacity 0.175s ease, -webkit-transform 0.175s ease;
  transition: opacity 0.175s ease, -webkit-transform 0.175s ease;
  transition: transform 0.175s ease, opacity 0.175s ease;
  transition: transform 0.175s ease, opacity 0.175s ease, -webkit-transform 0.175s ease;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

[data-name=close] .c-nav_toggle__line {
  opacity: 0;
}

/**
 * COMPONENTS.PAGE-WIPER
 *
 * @description : Wipes across the page during transitions between pages
 *
 */
.c-page_wiper {
  position: fixed;
  top: 0;
  left: -100vw;
  bottom: 0;
  width: 100vw;
  z-index: 9998;
  will-change: opacity, transform;
  background-color: rgba(255, 255, 255, 0.5);
}
@media (prefers-color-scheme: dark) {
  .c-page_wiper {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

/**
 * COMPONENTS.PROFILE
 *
 * @description : 
 *
 */
.c-profile__img_wrap {
  grid-column: 1/-1;
  margin-bottom: 2rem;
  overflow: hidden;
}
@media (min-width: 480px) {
  .c-profile__img_wrap {
    margin-bottom: 0;
    grid-column: 1/5;
  }
}

.c-profile__copy {
  grid-column: 1/-1;
}
@media (min-width: 480px) {
  .c-profile__copy {
    grid-column: 5/12;
  }
}
@media (min-width: 1024px) {
  .c-profile__copy {
    grid-column: 5/13;
  }
}

/**
 * COMPONENTS.SCROLL-ARROW
 *
 * @description : Link that scrolls a section (commonly heros)
 *
 */
.c-scroll_arrow {
  display: block;
  width: 100%;
  max-width: 8rem;
}

.c-scroll_arrow__link {
  border-radius: 50%;
  padding-top: 100%;
  width: 100%;
  border: 1px solid transparent;
  color: var(--text-color);
  display: block;
  position: relative;
  -webkit-transition: border 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease, border 0.2s ease;
  transition: box-shadow 0.2s ease, border 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.c-scroll_arrow__link:hover, .c-scroll_arrow__link:focus {
  border: 1px solid var(--text-color-60);
}
.c-scroll_arrow__link.-clicked {
  border-color: transparent;
}
.c-scroll_arrow__link.-clicked:hover, .c-scroll_arrow__link.-clicked:focus {
  border-color: var(--text-color);
}

.c-scroll_arrow__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/**
 * COMPONENTS.TOGGLE-SWITCH
 *
 * @description : 
 *
 */
.c-toggle_switch__input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.c-toggle_switch__input:checked + .c-toggle_switch__label .c-toggle_switch__switch::before {
  -webkit-transform: translateX(-0.9em);
  transform: translateX(-0.9em);
}
.c-toggle_switch__input:focus + .c-toggle_switch__label .c-toggle_switch__switch {
  -webkit-box-shadow: var(--text-color-30) 0 0 0 3px;
  box-shadow: var(--text-color-30) 0 0 0 3px;
}

.c-toggle_switch__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 0.05em;
}

.c-toggle_switch__text {
  font-size: 0.875rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: 0.5em;
}

.c-toggle_switch__switch {
  background-color: var(--text-color-10);
  border-radius: 0.5rem;
  -webkit-box-shadow: var(--text-color-30) 0 0 0 0;
  box-shadow: var(--text-color-30) 0 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  padding: 0.1em;
  position: relative;
  -webkit-transition: background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
  width: 2rem;
}
.c-toggle_switch__switch::before {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  display: block;
  content: "";
  background-color: var(--text-color);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 100%;
  -webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease-in-out;
  transition: background-color 0.2s ease, -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease, -webkit-transform 0.2s ease-in-out;
}

/**
 * COMPONENTS.TEXT-HERO
 *
 * @description : 
 *
 */
@media (min-width: 1024px) {
  .c-text_hero--full {
    min-height: 100vh;
  }
}

.c-text_hero__title {
  grid-column: 1/-1;
  grid-row: 1;
}

.c-text_hero__intro {
  grid-column: 1/-1;
  grid-row: 2;
}
@media (min-width: 1024px) {
  .c-text_hero__intro {
    grid-column: 5/-1;
  }
}

.c-text_hero__scroller {
  grid-column: 1/4;
  grid-row: 3;
}

/**
 * COMPONENTS.BLOCK.IMAGE-BLOCK
 *
 * @description : 
 *
 */
.c-image_block__img_wrap {
  overflow: hidden;
}

/**
 * COMPONENTS.BLOCK.BLOCK-QUOTE
 *
 * @description : Streamfield block for a blockquote
 *
 */
.c-quote_block__inner {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .c-quote_block__inner {
    grid-column: 5/-1;
  }
}

@media (min-width: 1024px) {
  .c-quote_block--pull_left .c-quote_block__inner {
    grid-column: 1/-5;
  }
}

.c-quote_block__quote_mark {
  display: block;
  font-size: 5em;
  line-height: 0;
  margin-bottom: 0.2em;
  position: relative;
  left: -0.05em;
}

.c-quote_block__cite {
  display: block;
}

/**
 * COMPONENTS.SLIDER-BLOCK
 *
 * @description : Streamfield block with a slider
 */
.c-slider_block__slider {
  grid-column: 1/-1;
}

@media (min-width: 1024px) {
  .c-slider_block__slider_stage {
    padding-left: 25%;
  }
}

.c-slider_block__slide {
  margin-right: 10rem;
  width: 20rem;
}
@media (min-width: 480px) {
  .c-slider_block__slide {
    margin-right: 12.5rem;
    width: 23.75rem;
  }
}
@media (min-width: 1024px) {
  .c-slider_block__slide {
    width: 27.5rem;
  }
}

@media (min-width: 480px) {
  .c-slider_block__slide_copy {
    margin-top: 1rem;
  }
}

/**
 * COMPONENTS.BLOCK.SECTION-HEADING
 *
 * @description : Section heading with a title and rule
 *
 */
.c-section_heading_block {
  margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  .c-section_heading_block {
    margin-bottom: 3.75rem;
  }
}

/**
 * COMPONENTS.BLOCKS.TEXT-GROUPS
 *
 * @description : 
 *
 */
@media (min-width: 768px) {
  .c-stats_block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1rem;
  }
}
@media (min-width: 1024px) {
  .c-stats_block {
    margin: 0 -1.5rem;
  }
}

.c-stats_block__stat {
  margin-bottom: 3rem;
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .c-stats_block__stat {
    margin-bottom: 4rem;
    padding: 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
  }
}
@media (min-width: 1024px) {
  .c-stats_block__stat {
    margin-bottom: 5rem;
    font-size: 1rem;
    padding: 0 1.5rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
}
.c-stats_block__stat p {
  opacity: 0.7;
}

.c-stats_block__value {
  font-size: 3.75rem;
  line-height: 1.1;
}
@media (min-width: 1024px) {
  .c-stats_block__value {
    font-size: 3rem;
  }
}
@media (min-width: 1440px) {
  .c-stats_block__value {
    font-size: 5rem;
  }
}

.c-stats_block__stat_inner {
  max-width: 40ch;
}

/**
 * COMPONENTS.BLOCK.TEXT-BLOCK
 *
 * @description : Generic text streamblock
 *
 */
.c-text_block__title {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .c-text_block__title {
    grid-column: 1/-4;
  }
}

/**
 * COMPONENTS.BLOCKS.TEXT-GROUPS
 *
 * @description : 
 *
 */
.c-text_groups_block {
  grid-row: 2;
  grid-column: 1/-1;
}
@media (min-width: 480px) {
  .c-text_groups_block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1rem;
  }
}
@media (min-width: 768px) {
  .c-text_groups_block {
    grid-column: 5/-1;
  }
}
@media (min-width: 1024px) {
  .c-text_groups_block {
    margin: 0 -2rem;
  }
}

.c-text_groups_block__group {
  margin-bottom: 3rem;
  font-size: 0.875rem;
}
@media (min-width: 480px) {
  .c-text_groups_block__group {
    padding: 0 1rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
}
@media (min-width: 768px) {
  .c-text_groups_block__group {
    margin-bottom: 4rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
}
@media (min-width: 1024px) {
  .c-text_groups_block__group {
    margin-bottom: 5rem;
    font-size: 1rem;
    padding: 0 2rem;
  }
}
.c-text_groups_block__group p {
  opacity: 0.7;
}

/**
 * COMPONENTS.BLOCK.VIDEO
 *
 * @description : A streamblock with video embed
 * @note : There's an overlay included over the iframe and holds a custom play button.
 *         It's included to look nice, but also allows locomotive scroll to capture scroll events
 *         that would normally be captured by the iframe an d not accessible by locomotive scroll
 *
 */
.c-video_block {
  position: relative;
}

.c-video_block__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--bg-color-50);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.c-video_block__progress {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1);
  transition: opacity 0.2s cubic-bezier(0.74, 0, 0, 1);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c-video_block__progress_track {
  border-radius: 10em;
  background: rgba(0, 0, 0, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 4px;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.c-video_block__progress_thumb {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 0%;
  flex: 0 0 0%;
  height: 5px;
  background: white;
  border-radius: 10em;
  -webkit-transition: -webkit-flex-basis 0.2s ease;
  transition: -webkit-flex-basis 0.2s ease;
  transition: flex-basis 0.2s ease;
  transition: flex-basis 0.2s ease, -webkit-flex-basis 0.2s ease, -ms-flex-preferred-size 0.2s ease;
}

.c-video_block__play {
  background-color: transparent;
  cursor: pointer;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}

.c-video_block__pause {
  background-color: transparent;
  cursor: pointer;
  margin-right: 1em;
}

.c-video_block.-is_playing .c-video_block__progress {
  opacity: 1;
  pointer-events: all;
}
.c-video_block.-is_playing .c-video_block__play {
  opacity: 0;
  pointer-events: none;
}

/*! Flickity v2.2.1
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */
.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 5px #19F;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous {
  left: 10px;
}

.flickity-prev-next-button.next {
  right: 10px;
}

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/**
 *  8. UTILITIES
 */
/**
 * UTILITIES.ALPHA
 *
 * @description : 
 *
 */
.u-alpha_10 {
  opacity: 0.1;
}

.u-alpha_20 {
  opacity: 0.2;
}

.u-alpha_30 {
  opacity: 0.3;
}

.u-alpha_40 {
  opacity: 0.4;
}

.u-alpha_50 {
  opacity: 0.5;
}

.u-alpha_60 {
  opacity: 0.6;
}

.u-alpha_70 {
  opacity: 0.7;
}

.u-alpha_80 {
  opacity: 0.8;
}

.u-alpha_90 {
  opacity: 0.9;
}

.u-alpha_95 {
  opacity: 0.95;
}

.u-alpha_98 {
  opacity: 0.98;
}

/**
 * UTILITIES.ANIMATION-BLOCKER
 *
 * @description : Applied to the body while resizing to stop animations causing jank
 *
 */
.u-animation_blocker * {
  -webkit-animation: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

/**
 * UTIITIES.OVERFLOW
 *
 * @description : 
 *
 */
.u-overflow_hide {
  overflow: hidden;
}

.u-overflow_show {
  overflow: visible;
}

/**
 * UTILTIES.SPACING
 *
 * @description : Utility classes for adding consistent margins to elements
 *
 */
.u-mb_1 {
  margin-bottom: 0.155rem;
}
@media (min-width: 768px) {
  .u-mb_1 {
    margin-bottom: 0.1875rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_1 {
    margin-bottom: 0.25rem;
  }
}

.u-mt_1 {
  margin-top: 0.155rem;
}
@media (min-width: 768px) {
  .u-mt_1 {
    margin-top: 0.1875rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_1 {
    margin-top: 0.25rem;
  }
}

.u-pb_1 {
  padding-bottom: 0.155rem;
}
@media (min-width: 768px) {
  .u-pb_1 {
    padding-bottom: 0.1875rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_1 {
    padding-bottom: 0.25rem;
  }
}

.u-pt_1 {
  padding-top: 0.155rem;
}
@media (min-width: 768px) {
  .u-pt_1 {
    padding-top: 0.1875rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_1 {
    padding-top: 0.25rem;
  }
}

.u-mb_2 {
  margin-bottom: 0.31rem;
}
@media (min-width: 768px) {
  .u-mb_2 {
    margin-bottom: 0.375rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_2 {
    margin-bottom: 0.5rem;
  }
}

.u-mt_2 {
  margin-top: 0.31rem;
}
@media (min-width: 768px) {
  .u-mt_2 {
    margin-top: 0.375rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_2 {
    margin-top: 0.5rem;
  }
}

.u-pb_2 {
  padding-bottom: 0.31rem;
}
@media (min-width: 768px) {
  .u-pb_2 {
    padding-bottom: 0.375rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_2 {
    padding-bottom: 0.5rem;
  }
}

.u-pt_2 {
  padding-top: 0.31rem;
}
@media (min-width: 768px) {
  .u-pt_2 {
    padding-top: 0.375rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_2 {
    padding-top: 0.5rem;
  }
}

.u-mb_3 {
  margin-bottom: 0.465rem;
}
@media (min-width: 768px) {
  .u-mb_3 {
    margin-bottom: 0.5625rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_3 {
    margin-bottom: 0.75rem;
  }
}

.u-mt_3 {
  margin-top: 0.465rem;
}
@media (min-width: 768px) {
  .u-mt_3 {
    margin-top: 0.5625rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_3 {
    margin-top: 0.75rem;
  }
}

.u-pb_3 {
  padding-bottom: 0.465rem;
}
@media (min-width: 768px) {
  .u-pb_3 {
    padding-bottom: 0.5625rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_3 {
    padding-bottom: 0.75rem;
  }
}

.u-pt_3 {
  padding-top: 0.465rem;
}
@media (min-width: 768px) {
  .u-pt_3 {
    padding-top: 0.5625rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_3 {
    padding-top: 0.75rem;
  }
}

.u-mb_4 {
  margin-bottom: 0.62rem;
}
@media (min-width: 768px) {
  .u-mb_4 {
    margin-bottom: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_4 {
    margin-bottom: 1rem;
  }
}

.u-mt_4 {
  margin-top: 0.62rem;
}
@media (min-width: 768px) {
  .u-mt_4 {
    margin-top: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_4 {
    margin-top: 1rem;
  }
}

.u-pb_4 {
  padding-bottom: 0.62rem;
}
@media (min-width: 768px) {
  .u-pb_4 {
    padding-bottom: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_4 {
    padding-bottom: 1rem;
  }
}

.u-pt_4 {
  padding-top: 0.62rem;
}
@media (min-width: 768px) {
  .u-pt_4 {
    padding-top: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_4 {
    padding-top: 1rem;
  }
}

.u-mb_5 {
  margin-bottom: 0.775rem;
}
@media (min-width: 768px) {
  .u-mb_5 {
    margin-bottom: 0.9375rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_5 {
    margin-bottom: 1.25rem;
  }
}

.u-mt_5 {
  margin-top: 0.775rem;
}
@media (min-width: 768px) {
  .u-mt_5 {
    margin-top: 0.9375rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_5 {
    margin-top: 1.25rem;
  }
}

.u-pb_5 {
  padding-bottom: 0.775rem;
}
@media (min-width: 768px) {
  .u-pb_5 {
    padding-bottom: 0.9375rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_5 {
    padding-bottom: 1.25rem;
  }
}

.u-pt_5 {
  padding-top: 0.775rem;
}
@media (min-width: 768px) {
  .u-pt_5 {
    padding-top: 0.9375rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_5 {
    padding-top: 1.25rem;
  }
}

.u-mb_6 {
  margin-bottom: 0.93rem;
}
@media (min-width: 768px) {
  .u-mb_6 {
    margin-bottom: 1.125rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_6 {
    margin-bottom: 1.5rem;
  }
}

.u-mt_6 {
  margin-top: 0.93rem;
}
@media (min-width: 768px) {
  .u-mt_6 {
    margin-top: 1.125rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_6 {
    margin-top: 1.5rem;
  }
}

.u-pb_6 {
  padding-bottom: 0.93rem;
}
@media (min-width: 768px) {
  .u-pb_6 {
    padding-bottom: 1.125rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_6 {
    padding-bottom: 1.5rem;
  }
}

.u-pt_6 {
  padding-top: 0.93rem;
}
@media (min-width: 768px) {
  .u-pt_6 {
    padding-top: 1.125rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_6 {
    padding-top: 1.5rem;
  }
}

.u-mb_8 {
  margin-bottom: 1.24rem;
}
@media (min-width: 768px) {
  .u-mb_8 {
    margin-bottom: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_8 {
    margin-bottom: 2rem;
  }
}

.u-mt_8 {
  margin-top: 1.24rem;
}
@media (min-width: 768px) {
  .u-mt_8 {
    margin-top: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_8 {
    margin-top: 2rem;
  }
}

.u-pb_8 {
  padding-bottom: 1.24rem;
}
@media (min-width: 768px) {
  .u-pb_8 {
    padding-bottom: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_8 {
    padding-bottom: 2rem;
  }
}

.u-pt_8 {
  padding-top: 1.24rem;
}
@media (min-width: 768px) {
  .u-pt_8 {
    padding-top: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_8 {
    padding-top: 2rem;
  }
}

.u-mb_12 {
  margin-bottom: 1.86rem;
}
@media (min-width: 768px) {
  .u-mb_12 {
    margin-bottom: 2.25rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_12 {
    margin-bottom: 3rem;
  }
}

.u-mt_12 {
  margin-top: 1.86rem;
}
@media (min-width: 768px) {
  .u-mt_12 {
    margin-top: 2.25rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_12 {
    margin-top: 3rem;
  }
}

.u-pb_12 {
  padding-bottom: 1.86rem;
}
@media (min-width: 768px) {
  .u-pb_12 {
    padding-bottom: 2.25rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_12 {
    padding-bottom: 3rem;
  }
}

.u-pt_12 {
  padding-top: 1.86rem;
}
@media (min-width: 768px) {
  .u-pt_12 {
    padding-top: 2.25rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_12 {
    padding-top: 3rem;
  }
}

.u-mb_16 {
  margin-bottom: 2.48rem;
}
@media (min-width: 768px) {
  .u-mb_16 {
    margin-bottom: 3rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_16 {
    margin-bottom: 4rem;
  }
}

.u-mt_16 {
  margin-top: 2.48rem;
}
@media (min-width: 768px) {
  .u-mt_16 {
    margin-top: 3rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_16 {
    margin-top: 4rem;
  }
}

.u-pb_16 {
  padding-bottom: 2.48rem;
}
@media (min-width: 768px) {
  .u-pb_16 {
    padding-bottom: 3rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_16 {
    padding-bottom: 4rem;
  }
}

.u-pt_16 {
  padding-top: 2.48rem;
}
@media (min-width: 768px) {
  .u-pt_16 {
    padding-top: 3rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_16 {
    padding-top: 4rem;
  }
}

.u-mb_20 {
  margin-bottom: 3.1rem;
}
@media (min-width: 768px) {
  .u-mb_20 {
    margin-bottom: 3.75rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_20 {
    margin-bottom: 5rem;
  }
}

.u-mt_20 {
  margin-top: 3.1rem;
}
@media (min-width: 768px) {
  .u-mt_20 {
    margin-top: 3.75rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_20 {
    margin-top: 5rem;
  }
}

.u-pb_20 {
  padding-bottom: 3.1rem;
}
@media (min-width: 768px) {
  .u-pb_20 {
    padding-bottom: 3.75rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_20 {
    padding-bottom: 5rem;
  }
}

.u-pt_20 {
  padding-top: 3.1rem;
}
@media (min-width: 768px) {
  .u-pt_20 {
    padding-top: 3.75rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_20 {
    padding-top: 5rem;
  }
}

.u-mb_24 {
  margin-bottom: 3.72rem;
}
@media (min-width: 768px) {
  .u-mb_24 {
    margin-bottom: 4.5rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_24 {
    margin-bottom: 6rem;
  }
}

.u-mt_24 {
  margin-top: 3.72rem;
}
@media (min-width: 768px) {
  .u-mt_24 {
    margin-top: 4.5rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_24 {
    margin-top: 6rem;
  }
}

.u-pb_24 {
  padding-bottom: 3.72rem;
}
@media (min-width: 768px) {
  .u-pb_24 {
    padding-bottom: 4.5rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_24 {
    padding-bottom: 6rem;
  }
}

.u-pt_24 {
  padding-top: 3.72rem;
}
@media (min-width: 768px) {
  .u-pt_24 {
    padding-top: 4.5rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_24 {
    padding-top: 6rem;
  }
}

.u-mb_32 {
  margin-bottom: 4.96rem;
}
@media (min-width: 768px) {
  .u-mb_32 {
    margin-bottom: 6rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_32 {
    margin-bottom: 8rem;
  }
}

.u-mt_32 {
  margin-top: 4.96rem;
}
@media (min-width: 768px) {
  .u-mt_32 {
    margin-top: 6rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_32 {
    margin-top: 8rem;
  }
}

.u-pb_32 {
  padding-bottom: 4.96rem;
}
@media (min-width: 768px) {
  .u-pb_32 {
    padding-bottom: 6rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_32 {
    padding-bottom: 8rem;
  }
}

.u-pt_32 {
  padding-top: 4.96rem;
}
@media (min-width: 768px) {
  .u-pt_32 {
    padding-top: 6rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_32 {
    padding-top: 8rem;
  }
}

.u-mb_48 {
  margin-bottom: 7.44rem;
}
@media (min-width: 768px) {
  .u-mb_48 {
    margin-bottom: 9rem;
  }
}
@media (min-width: 1024px) {
  .u-mb_48 {
    margin-bottom: 12rem;
  }
}

.u-mt_48 {
  margin-top: 7.44rem;
}
@media (min-width: 768px) {
  .u-mt_48 {
    margin-top: 9rem;
  }
}
@media (min-width: 1024px) {
  .u-mt_48 {
    margin-top: 12rem;
  }
}

.u-pb_48 {
  padding-bottom: 7.44rem;
}
@media (min-width: 768px) {
  .u-pb_48 {
    padding-bottom: 9rem;
  }
}
@media (min-width: 1024px) {
  .u-pb_48 {
    padding-bottom: 12rem;
  }
}

.u-pt_48 {
  padding-top: 7.44rem;
}
@media (min-width: 768px) {
  .u-pt_48 {
    padding-top: 9rem;
  }
}
@media (min-width: 1024px) {
  .u-pt_48 {
    padding-top: 12rem;
  }
}

/**
 * UTILITIES.TYPE
 *
 * @description : These classes trump other preceeding styles.
 *                Userful for quickly applying common adjustments.
 */
.u-tc {
  text-align: center;
}

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

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

@media (min-width: 480px) {
  .u-tc_sm {
    text-align: center;
  }

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

  .u-tl_sm {
    text-align: left;
  }
}
@media (min-width: 768px) {
  .u-tc_md {
    text-align: center;
  }

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

  .u-tl_md {
    text-align: left;
  }
}
@media (min-width: 1024px) {
  .u-tc_lg {
    text-align: center;
  }

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

  .u-tl_lg {
    text-align: left;
  }
}
@media (min-width: 1440px) {
  .u-tc_xl {
    text-align: center;
  }

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

  .u-tl_xl {
    text-align: left;
  }
}
@media (min-width: 1600px) {
  .u-tc_xxl {
    text-align: center;
  }

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

  .u-tl_xxl {
    text-align: left;
  }
}
@media (min-width: 769px) {
  .u-tc_nav {
    text-align: center;
  }

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

  .u-tl_nav {
    text-align: left;
  }
}
.u-clamp_50 {
  max-width: 50ch;
}

/**
 * COMPONENTS.VALIDATION
 *
 * @description : Validation styles for form elements
 *
 */
input[type=radio].u-error + label,
input[type=checkbox].u-error + label {
  color: #af0000;
}

.u-error input[type=text],
.u-error input[type=email],
.u-error input[type=password],
.u-error input[type=tel],
.u-error input[type=search],
.u-error input[type=url],
.u-error select,
.u-error textarea {
  border-color: #af0000;
}

.u-error_msg {
  display: block;
  font-size: 0.875em;
  padding: 0.5em 0;
  color: #af0000;
}

/**
 * UTILITIES.VISUALLY-HIDE
 *
 * @description : Hides and element but lets it remain accessible to screen readers
 *
 */
.u-cloak {
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}