@charset "UTF-8";
/* The very latest clearfix needed: http://cssmojo.com/the-very-latest-clearfix-reloaded/ */
.clearfix:after {
  content: " ";
  display: block;
  clear: both; }

/* for supporting browsers, this is the standard way to clear floats in an element */
/* Some good discussion here: https://rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/ (see comments) */
.clearfix {
  display: flow-root; }

[hidden] {
  display: none !important; }

.highlight {
  background-color: var(--yellow-highlight); }

.small {
  font-size: .75em; }

.normal {
  font-weight: 400; }

.center {
  text-align: center; }

.smaller {
  font-size: .5em; }

.size-2x {
  font-size: calc(1em + .5vw);
  margin-bottom: 1.5rem;
  font-weight: 300; }

.x-large {
  font-size: 10vw;
  margin: 25vh 0; }

.mt0 {
  margin-top: 0 !important; }

.mb0 {
  margin-bottom: 0 !important; }

.uppercase {
  text-transform: uppercase; }

.clear--left {
  clear: left; }

@media all and (max-width: 768px) {
  .desktop-only {
    display: none; } }

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden; }

/* Visually hide any element (mostly text) accessibly. 
   Support includes IE9+ */
.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px; }

[hidden] {
  display: none; }

button {
  outline: 2px solid transparent; }

button:focus,
a:focus {
  outline: 2px solid orange; }

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  /* undo all the above focused button styles
       if the button has focus but the browser wouldn't normally
       show default focus styles */
  outline: 2px solid transparent; }

pre {
  white-space: pre-wrap;
  /* Overflow by default is bad. */ }

img {
  border-style: none;
  /* Remove the border on images inside links in IE 10 and earlier. */
  vertical-align: bottom;
  /* Fix problem with images having a tiny gap for a descender under them. */
  display: block;
  /* Switch display mode to block, since that's what we usually want for images. */
  max-width: 100%;
  /* Make images flexible by default. */
  height: auto;
  /* Ensure images maintain their aspect ratio when max-width comes into play. */ }

/*------------------------------------*    #BUTTONS
\*------------------------------------*/
button,
input[type="submit"],
button[type="submit"],
.btn,
.button {
  background: none;
  border: 2px solid transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  display: inline-block;
  padding: .75em 2em;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  font-weight: normal;
  font-size: 1em;
  transition: all .1s linear;
  position: relative; }
  button[disabled], button.button--disabled,
  input[type="submit"][disabled],
  input[type="submit"].button--disabled,
  button[type="submit"][disabled],
  button[type="submit"].button--disabled,
  .btn[disabled],
  .btn.button--disabled,
  .button[disabled],
  .button.button--disabled {
    background-color: #dedede;
    color: #ababab; }
    button[disabled]:hover, button[disabled]:focus, button.button--disabled:hover, button.button--disabled:focus,
    input[type="submit"][disabled]:hover,
    input[type="submit"][disabled]:focus,
    input[type="submit"].button--disabled:hover,
    input[type="submit"].button--disabled:focus,
    button[type="submit"][disabled]:hover,
    button[type="submit"][disabled]:focus,
    button[type="submit"].button--disabled:hover,
    button[type="submit"].button--disabled:focus,
    .btn[disabled]:hover,
    .btn[disabled]:focus,
    .btn.button--disabled:hover,
    .btn.button--disabled:focus,
    .button[disabled]:hover,
    .button[disabled]:focus,
    .button.button--disabled:hover,
    .button.button--disabled:focus {
      background-color: #dedede;
      color: #ababab; }
  button svg,
  input[type="submit"] svg,
  button[type="submit"] svg,
  .btn svg,
  .button svg {
    color: inherit; }
  button.is-centered,
  input[type="submit"].is-centered,
  button[type="submit"].is-centered,
  .btn.is-centered,
  .button.is-centered {
    display: block;
    margin: 2em auto; }
  button:focus,
  input[type="submit"]:focus,
  button[type="submit"]:focus,
  .btn:focus,
  .button:focus {
    outline: 3px solid orange;
    outline-offset: 3px; }

button,
input[type="submit"],
button[type="submit"],
.button,
.button--primary {
  background: linear-gradient(var(--color--primary), var(--color--primary));
  color: #fff; }

.button--secondary,
a.button {
  border-radius: 0;
  background: none;
  font-weight: bold;
  font-size: 1.2em;
  border: 2px solid;
  color: inherit; }
  .button--secondary:hover, .button--secondary:focus,
  a.button:hover,
  a.button:focus {
    background: #111;
    color: #fff;
    border: 2px solid #111; }
    [data-theme="dark"] .button--secondary:hover, [data-theme="dark"] .button--secondary:focus, [data-theme="dark"]
    a.button:hover, [data-theme="dark"]
    a.button:focus {
      background: #fff;
      border: 2px solid #fff;
      color: #111; }
  .article .button--secondary, .article
  a.button {
    display: inline-block; }

.article-buttons {
  display: flex; }

.button--full {
  font-size: 1.1em;
  width: 100%;
  margin: 1em 0;
  display: block; }

.button-wrapper {
  text-align: center; }
  .button-wrapper small {
    display: block; }
    .button-wrapper small a {
      border: none; }

p {
  margin-bottom: 1.5em; }

strong {
  font-weight: 600; }

/*------------------------------------*    #HEADINGS
\*------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2.5em;
  margin-bottom: 1em; }
  .article h1, .article
  h2, .article
  h3, .article
  h4, .article
  h5, .article
  h6, .article
  .h1, .article
  .h2, .article
  .h3, .article
  .h4, .article
  .h5, .article
  .h6 {
    margin-top: 6rem; }

h1,
h2,
h3,
h4,
.h1,
.h2 {
  letter-spacing: -.75px; }

.descriptor {
  font-size: 1rem;
  font-weight: 400;
  color: #888;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2rem; }

.h0 {
  font-size: 2.986rem;
  margin-top: 0; }

h1,
.h1 {
  font-size: 2.488rem;
  margin-top: 0;
  line-height: 1.3; }
  .article-wrapper h1, .article-wrapper
  .h1 {
    font-size: 3em; }

h2,
.h2 {
  font-size: 2.074rem;
  line-height: 1.3; }
  h2 code,
  .h2 code {
    text-transform: none; }

h3,
.h3 {
  font-size: 1.728rem; }
  h3 code,
  .h3 code {
    text-transform: none; }

h4,
.h4 {
  font-size: 1.44rem; }

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

h6 {
  font-size: 1rem; }

h1:target,
h2:target,
h3:target,
h4:target,
h5:target,
h6:target {
  background: var(--yellow-highlight);
  padding: 0.2em 0.5em; }

code {
  background-color: rgba(0, 0, 0, 0.05);
  color: inherit;
  padding: 0.1em 0.2em;
  font-family: Consolas, Monaco, Lucida Console, monospace;
  font-size: 0.85em;
  font-weight: bold; }

kbd {
  font-family: monospace;
  background-color: #222;
  color: #fff;
  border-radius: 3px;
  padding: 2px 4px; }

/**
 * Including the at-only style with the dialog CSS as it is required
 * to visually hide a dialog's heading if desired.
 */
.at-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px; }

/**
 * Trigger styling
 */
[data-modal-open][hidden] {
  display: none; }

/**
 * When a modal dialog is open, don't allow scrolling of content
 * beneath (on desktop). Also useful in negating instances of
 * double scroll bars.
 * (browser window + dialog if long enough content)
 */
body.modal-open {
  overflow: hidden; }

/**
 * Modal Dialog base styling
 */
.js [data-modal],
.a11y-modal {
  -webkit-overflow-scrolling: touch;
  background: #fafafa;
  color: #111;
  bottom: 0;
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.75), 0 0 100px 50px rgba(0, 0, 0, 0.1), 0 0 50px 10px rgba(0, 0, 0, 0.4);
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 450px;
  opacity: 1;
  overflow: auto;
  padding: 2em;
  position: fixed;
  right: 0;
  top: 50vh;
  transform: translateY(0%);
  visibility: visible;
  width: 100%;
  z-index: 10;
  /* this should be more than enough... */
  border-radius: 10px;
  opacity: 1;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsPSIjZWVlIiBkPSJtMS43NSw3Ljc1bDYuNjgwMzYsMGMwLjMzNTU3LDEuMjk1MjMgMS41MDM5MSwyLjI1ODc5IDIuOTAyNjUsMi4yNTg3OXMyLjU2NzA4LC0wLjk2MzU2IDIuOTAyNjUsLTIuMjU4NzlsMTAuMDE0MzQsMGMwLjQxNDA2LDAgMC43NSwtMC4zMzU5NCAwLjc1LC0wLjc1cy0wLjMzNTk0LC0wLjc1IC0wLjc1LC0wLjc1bC0xMC4wMTQzNCwwYy0wLjMzNTU3LC0xLjI5NTIzIC0xLjUwMzkxLC0yLjI1ODc5IC0yLjkwMjY1LC0yLjI1ODc5cy0yLjU2NzA4LDAuOTYzNTYgLTIuOTAyNjUsMi4yNTg3OWwtNi42ODAzNiwwYy0wLjQxNDA2LDAgLTAuNzUsMC4zMzU5NCAtMC43NSwwLjc1czAuMzM1OTQsMC43NSAwLjc1LDAuNzV6bTkuNTgzMDEsLTIuMjU4NzljMC44MzIwMywwIDEuNTA4NzksMC42NzY3NiAxLjUwODc5LDEuNTA4NzlzLTAuNjc2NzYsMS41MDg3OSAtMS41MDg3OSwxLjUwODc5cy0xLjUwODc5LC0wLjY3Njc2IC0xLjUwODc5LC0xLjUwODc5czAuNjc2NzYsLTEuNTA4NzkgMS41MDg3OSwtMS41MDg3OXoiLz4KICA8cGF0aCBmaWxsPSIjZWVlIiBkPSJtMjQuMjUsMTIuMjVsLTEuNjA2MTQsMGMtMC4zMzU1NywtMS4yOTUyMyAtMS41MDM5MSwtMi4yNTg3OSAtMi45MDI2NSwtMi4yNTg3OXMtMi41NjcwOCwwLjk2MzU2IC0yLjkwMjY1LDIuMjU4NzlsLTE1LjA4ODU2LDBjLTAuNDE0MDYsMCAtMC43NSwwLjMzNTk0IC0wLjc1LDAuNzVzMC4zMzU5NCwwLjc1IDAuNzUsMC43NWwxNS4wODg1NiwwYzAuMzM1NTcsMS4yOTUyMyAxLjUwMzkxLDIuMjU4NzkgMi45MDI2NSwyLjI1ODc5czIuNTY3MDgsLTAuOTYzNTYgMi45MDI2NSwtMi4yNTg3OWwxLjYwNjE0LDBjMC40MTQwNiwwIDAuNzUsLTAuMzM1OTQgMC43NSwtMC43NXMtMC4zMzU5NCwtMC43NSAtMC43NSwtMC43NXptLTQuNTA4NzksMi4yNTg3OWMtMC44MzIwMywwIC0xLjUwODc5LC0wLjY3Njc2IC0xLjUwODc5LC0xLjUwODc5czAuNjc2NzYsLTEuNTA4NzkgMS41MDg3OSwtMS41MDg3OXMxLjUwODc5LDAuNjc2NzYgMS41MDg3OSwxLjUwODc5cy0wLjY3Njc2LDEuNTA4NzkgLTEuNTA4NzksMS41MDg3OXoiLz4KICA8cGF0aCBmaWxsPSIjZWVlIiBkPSJtMjQuMjUsMTguMjVsLTE0LjUzMTg2LDBjLTAuMzM1NTEsLTEuMjk1MjMgLTEuNTAzNzgsLTIuMjU4NzkgLTIuOTAxNzMsLTIuMjU4NzljLTEuMzk4NzUsMCAtMi41NjcwOCwwLjk2MzU2IC0yLjkwMjY1LDIuMjU4NzlsLTIuMTYzNzYsMGMtMC40MTQwNiwwIC0wLjc1LDAuMzM1OTQgLTAuNzUsMC43NXMwLjMzNTk0LDAuNzUgMC43NSwwLjc1bDIuMTYzNzYsMGMwLjMzNTU3LDEuMjk1MjMgMS41MDM5LDIuMjU4NzkgMi45MDI2NSwyLjI1ODc5YzEuMzk3OTUsMCAyLjU2NjIyLC0wLjk2MzU2IDIuOTAxNzMsLTIuMjU4NzlsMTQuNTMxODYsMGMwLjQxNDA2LDAgMC43NSwtMC4zMzU5NCAwLjc1LC0wLjc1cy0wLjMzNTk0LC0wLjc1IC0wLjc1LC0wLjc1em0tMTcuNDMzNTksMi4yNTg3OWMtMC44MzIwMywwIC0xLjUwODc5LC0wLjY3Njc2IC0xLjUwODc5LC0xLjUwODc5czAuNjc2NzYsLTEuNTA4NzkgMS41MDg3OSwtMS41MDg3OWMwLjgzMTA1LDAgMS41MDc4MSwwLjY3Njc2IDEuNTA3ODEsMS41MDg3OXMtMC42NzY3NiwxLjUwODc5IC0xLjUwNzgxLDEuNTA4Nzl6Ii8+Cjwvc3ZnPg==");
  background-position: left 0 top 0;
  background-repeat: no-repeat;
  background-size: auto 150px; }
  [data-theme="dark"] .js [data-modal], [data-theme="dark"]
  .a11y-modal {
    background: var(--purple--darker);
    color: #eee; }
  .js [data-modal]:focus,
  .a11y-modal:focus {
    outline: none; }

@keyframes fadeIn {
  to { } }

@media screen and (min-height: 440px) and (min-width: 500px) {
  .js [data-modal],
  .a11y-modal {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .2s ease-in-out, transform .2s ease-in-out; } }

/**
 * To allow for CSS animations, hidden modal dialogs are
 * not set to display: none, but rather the following rule
 * set, in combination with the dialog's default
 * position: fixed, will keep dialogs hidden from
 * all users until opened.
 *
 * This also solves an issue with iOS VO + Safari not allowing
 * modal dialogs to be focused, if the dialog is initially
 * set to "display: none".
 */
.js [data-modal][hidden]
.a11y-modal[hidden] {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15vh);
  visibility: hidden; }

.a11y-modal__close-btn {
  border: none; }

.is-icon-btn {
  background: none;
  border: 2px solid currentColor;
  color: inherit;
  height: 2em;
  padding: 0;
  position: absolute;
  right: 1.5em;
  top: 1.5em;
  width: 2em;
  border-radius: 5px;
  height: 40px;
  width: 40px;
  text-align: center;
  border-radius: 50%;
  line-height: 1;
  transition: all .15s linear; }
  .is-icon-btn:focus, .is-icon-btn:hover {
    outline: none; }

[data-modal-x]:after {
  content: "×";
  font-size: 2em; }

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

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

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Fira Sans", arial, sans-serif;
  font-size: calc(15px + 0.25vw);
  --newspaper: #f2f0f4;
  background-color: var(--newspaper); }

html[data-hook="press-kit"],
html[data-hook="uses"],
html[data-hook="about"] {
  background-color: var(--newspaper); }

html[data-hook="smth"] {
  background-color: #532d53; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative; }

hr {
  width: 70%;
  height: 3rem;
  background: url(../../images/hr.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin: 5rem auto;
  border: none; }

body {
  line-height: 1.5;
  font-size: 1rem;
  position: relative;
  overflow-x: hidden;
  margin: 0 auto;
  font-weight: 300; }
  @media all and (max-width: 1024px) {
    body {
      padding: 0 1em;
      max-width: 100%; } }

main {
  padding: 10vw 0;
  margin: 0 auto; }
  [data-hook="homepage"] main {
    padding-top: 2vw; }
  main:focus {
    outline: none; }

section {
  margin-bottom: 10vw; }
  section:last-of-type {
    margin-bottom: 0; }

.awards {
  display: flex;
  justify-content: end; }
  [data-hook="homepage"] .awards {
    padding: 1rem; }
  .awards img {
    display: inline-block;
    max-width: 120px;
    max-height: 180px;
    margin-right: 2rem; }
    .awards img:last-of-type {
      margin-right: 0; }
    @media all and (max-width: 768px) {
      .awards img {
        max-width: 80px; } }

video {
  margin: 1em 0 0;
  width: 100%; }

audio {
  margin: 30px 0;
  display: block; }

img {
  max-width: 100%; }

input,
select,
button {
  font-family: inherit; }

/*------------------------------------*    links / anchors
\*------------------------------------*/
a {
  color: inherit;
  outline: 2px solid transparent;
  background-size: 100% 0.3em;
  background-repeat: no-repeat;
  background-position: left 0 bottom -40%;
  font-weight: 500; }
  a.img-link {
    border: none !important; }

.anchorjs-link {
  border: none;
  color: var(--pink);
  font-size: 1em;
  padding-top: 5px;
  font-weight: bold;
  background: none;
  position: relative !important; }
  .anchorjs-link:hover, .anchorjs-link:focus {
    border: none; }

.note {
  background: rgba(0, 0, 0, 0.05);
  margin: 1em 0;
  padding: 2em 1.5em;
  font-size: 1em;
  font-size: .95em; }
  .note.warning {
    color: var(--red); }
    .note.warning::before {
      content: "⚠️ Note: ";
      font-weight: bold; }
  .note ul {
    font-size: inherit; }

/*------------------------------------*    #PULL-QUOTES
\*------------------------------------*/
.pull-quote {
  font-size: 1.6em;
  font-style: italic;
  font-family: "Fira Sans", arial, sans-serif;
  padding: 1.25em 0;
  text-align: center;
  margin: 2em 0;
  position: static;
  color: #878787;
  border-left: none; }
  .pull-quote code {
    text-transform: none; }

@media screen and (max-width: 34.375em) {
  /*550*/
  .pull-quote {
    display: none; } }

.signature {
  max-width: 500px; }

.signature__image {
  margin-left: -20px;
  width: 100%; }

.signature__text {
  margin-top: -1em; }

/*------------------------------------*    #FIGURES
\*------------------------------------*/
figure {
  margin: 2rem 0; }
  figure > a {
    border: none;
    display: block;
    width: 100%; }
    figure > a:hover, figure > a:focus {
      border: none; }
    figure > a img {
      display: block;
      margin: 0; }
  figure img {
    display: block;
    width: auto;
    max-width: 100%; }
  figure.double img {
    display: inline-block;
    max-width: 48%; }
  figure figcaption {
    padding: 1em;
    font-size: 0.8em; }

@media (min-width: 1024px) {
  figure.wider {
    position: relative;
    width: 125%;
    left: -25%; } }

.not-found {
  grid-column: 2 / 12; }

.blog__intro {
  grid-column: 2 / 10;
  grid-row: 1; }

.blog__tags {
  color: #777;
  font-size: .8em;
  margin-bottom: 2em; }
  .blog__tags a {
    text-decoration: none; }

.blog__tag-cloud {
  grid-column: 9 / 12;
  grid-row: 2;
  justify-self: end; }
  @media all and (max-width: 768px) {
    .blog__tag-cloud {
      margin-top: 3rem; } }
  .blog__tag-cloud a {
    text-decoration: none; }
  .blog__tag-cloud ul {
    margin-top: 0;
    list-style: none; }
  .blog__tag-cloud li {
    text-transform: uppercase;
    letter-spacing: .5px;
    font-family: "Fira Sans", arial, sans-serif;
    font-weight: 400;
    font-size: .8em;
    margin-bottom: .75em; }
    .blog__tag-cloud li::before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      width: 1em;
      height: 1em;
      background-image: url("../../images/icons/hashtag.svg");
      background-size: 100% 100%;
      background-color: inherit;
      position: static; }

.blog__pagination {
  padding: 0 1em;
  margin-bottom: 1em;
  grid-column: 2 / 12;
  justify-self: center; }

.blog__articles-list {
  list-style: none;
  grid-column: 2 / 10;
  grid-row: 2;
  padding: 0; }
  .tag .blog__articles-list {
    grid-column: 3 / 9;
    grid-row: 2; }
  .blog__articles-list li::before {
    display: none; }

.tag .blog__title {
  grid-row: 2;
  margin-bottom: 0;
  margin-top: .5em; }

.blog__post {
  padding: 0;
  margin-bottom: 4rem;
  position: relative; }
  .blog__post:first-of-type {
    grid-column: 1 / 3; }
    .blog__post:first-of-type .post-summary {
      display: block; }

.blog__post-title {
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -.5px;
  margin-bottom: .5em; }
  .blog__post-title a {
    font-weight: 600;
    text-decoration-color: #bbb; }
  .blog__post-title:hover, .blog__post-title:focus {
    border-width: .1em; }
  .blog__post-title code {
    background-color: inherit; }
  .blog__post-title.link::before {
    content: "";
    display: inline-block;
    background-image: url(../../images/icons/read.svg);
    width: 1em;
    height: 1em;
    vertical-align: middle;
    position: relative;
    top: -3px;
    margin-right: .25em; }

.blog__subtitle {
  display: block;
  font-size: .6em;
  font-weight: 400;
  margin: .5em 0 1em;
  color: #222; }

.blog__post-host {
  font-weight: bold;
  color: #000; }

.blog__post-meta {
  font-size: .8em;
  display: block;
  margin-top: 0;
  margin-bottom: 0.25em;
  color: #444;
  display: none; }

.archives-link {
  grid-row: 2;
  grid-column: 3 / 9;
  text-align: center; }

.archives__head {
  text-align: center;
  grid-column: 4 / 10;
  grid-row: 2; }

.archives__list {
  grid-row: 2;
  grid-column: 4 / 10; }

.pagination {
  font-size: 1.2rem; }

.pagination__button {
  display: inline-block;
  margin: .5em; }
  .pagination__button.button--disabled {
    color: #999; }

.l-aspect-ratio {
  width: 100%;
  height: 0;
  position: relative; }
  .l-aspect-ratio object,
  .l-aspect-ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .l-aspect-ratio.wide {
    padding-top: 55%; }

svg.icon--inline {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  margin-right: .25em; }

.clients {
  text-align: center;
  margin: 6rem 0; }

.clients__title {
  margin: 1em 0 3em;
  color: var(--grey);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.2em; }
  [data-theme="dark"] .clients__title {
    color: var(--purple--lighter); }

.clients__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 2em; }
  @media all and (min-width: 1024px) {
    .clients__list {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      grid-gap: 4em; } }
  .clients__list li::before {
    display: none; }

.clients__item {
  align-self: center; }
  .clients__item img {
    display: inline-block;
    max-width: 100%;
    max-height: 40px; }
    @media all and (min-width: 1024px) {
      .clients__item img {
        max-height: 50px; } }
  .clients__item a {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    padding: 1em; }

.main-header {
  padding: 1rem 0; }
  @media all and (min-width: 640px) {
    .main-header .content-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between; } }

.logo {
  font-size: calc(1rem + .3vw);
  letter-spacing: -1px;
  white-space: nowrap; }
  .logo a {
    border: none;
    text-decoration: none; }

/*------------------------------------*    #SITE-NAVIGATION
\*------------------------------------*/
.main-nav {
  margin-top: 1em; }
  @media all and (min-width: 640px) {
    .main-nav {
      margin-top: 0;
      margin-left: 2rem;
      flex: 1; } }

.main-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center; }
  @media all and (max-width: 640px) {
    .main-nav__list {
      justify-content: start; } }

.main-nav__item {
  margin-bottom: 0;
  position: relative;
  transition: background-color 0.1s ease-out;
  display: inline-block;
  margin-right: 1.5rem; }
  .main-nav__item:last-of-type {
    margin-right: 0; }
    .main-nav__item:last-of-type a {
      border: 2px solid #000;
      padding: .5em 1em;
      font-weight: 500;
      background-color: #000;
      color: #fff;
      white-space: nowrap;
      border-radius: 4px; }
  .main-nav__item a {
    font-size: .9em;
    display: block;
    text-decoration: none;
    font-weight: 300; }
  .main-nav__item.current a {
    font-weight: bold;
    letter-spacing: .5px; }

.settings-wrapper {
  position: relative;
  grid-column: 12 / 13;
  grid-row: 1;
  align-self: center; }

.settings-panel {
  font-size: 0.9em; }

.settings-title {
  text-align: center;
  font-family: Caveat, "Fira Sans", arial, sans-serif;
  font-size: calc(1.2em + 2vw); }

.settings-desc {
  text-align: center;
  font-weight: 300;
  font-style: italic; }

.settings-option {
  border: 1px solid #eee;
  padding: 0.5em 1em;
  border-radius: 5px;
  display: flex;
  align-items: center; }

button.settings-panel-toggle {
  width: 50px;
  height: 50px;
  padding: 10px;
  display: none;
  vertical-align: middle;
  background: none;
  color: inherit; }
  button.settings-panel-toggle svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(90deg); }

.theme-toggler__checkbox {
  opacity: 0;
  position: absolute;
  right: 30px;
  top: 25%;
  z-index: 1; }

.theme-toggler__label {
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
  flex: 1;
  margin-right: 2em; }

.theme-toggler__switch {
  width: 50px;
  height: 25px;
  border-radius: 1em;
  position: relative;
  cursor: pointer;
  background: #eee;
  border: 2px solid #ddd;
  transition: all 0.1s linear;
  display: inline-block;
  vertical-align: middle; }

.theme-toggler__switch::after {
  content: "";
  position: absolute;
  width: 21px;
  height: 21px;
  margin-top: 0px;
  margin-left: 1px;
  border-radius: 1em;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 2px 5px 10px -2px rgba(0, 0, 0, 0.2);
  transition: all 0.1s linear; }

.theme-toggler__checkbox:focus + .theme-toggler__switch {
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px orange;
  outline: 3px solid transparent; }

.theme-toggler__checkbox:focus:not(:focus-visible) + .theme-toggler__switch {
  box-shadow: none; }

.theme-toggler__checkbox:checked + .theme-toggler__switch {
  background: #76d672;
  border-color: #76d672; }

.theme-toggler__checkbox:checked + .theme-toggler__switch::after {
  transform: translatex(22px);
  transition: transform 0.1s linear;
  border-color: #fff; }

.work__list {
  list-style: none;
  margin: 0;
  padding: 0; }

.work__item {
  position: relative;
  margin-top: 4rem;
  padding: 4rem 2rem; }
  .work__item.codrops {
    background-color: #4651ff;
    color: #fff; }
  .work__item.khan-academy {
    background-color: #00d19d; }
  .work__item.smashing-magazine {
    background-color: #cc3427;
    background-color: #fff; }

.work__item > a {
  display: block;
  text-decoration: none;
  font-weight: 500; }
  @media all and (min-width: 1024px) {
    .work__item > a {
      display: grid;
      grid-gap: 2vw 5vw;
      grid-template-columns: auto 1fr; } }

.work__item__client-name {
  margin: 0;
  grid-column: 1 / 2;
  font-weight: 600; }

.work__item__description {
  grid-column: 2 / 3;
  grid-row: 1; }

.work__item__preview {
  grid-column: 1 / 3; }

.work__logos {
  margin: 4rem auto; }

/*------------------------------------*    #CASE-STUDY SINGLE.HTML
\*------------------------------------*/
.case-study figure img {
  display: block;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.125); }

.case-study__client-name {
  text-align: center; }
  .case-study__client-name img {
    display: inline-block;
    border: none;
    margin-top: 0.5em;
    max-width: 260px; }
    [data-theme="dark"] .case-study__client-name img {
      -webkit-filter: invert(100%) grayscale(100%) brightness(120%);
      filter: invert(100%) grayscale(100%) brightness(120%); }

.case-study__client-tagline {
  text-align: center; }

.case-study__client-description {
  font-size: 1.2em;
  text-align: center; }

.case-study__ {
  grid-column: var(--grid-column);
  grid-row: var(--grid-row); }

.case-study__preview {
  text-align: center;
  max-height: 100vmin;
  overflow: hidden; }
  .case-study__preview > img {
    box-shadow: none !important; }

.case-study__image {
  margin: 0; }

.case-study__testimonial {
  font-size: 1.2em;
  border: none;
  font-style: italic;
  padding-left: 1.5em;
  margin-bottom: 4em; }
  .case-study__testimonial cite {
    display: block;
    color: #000;
    margin-left: 1em;
    text-align: right; }

.case-study__testimonial__client-name {
  display: block;
  margin-left: -2em;
  margin-bottom: 1em;
  font-style: normal;
  font-weight: bold;
  font-size: 1.2em; }
  @media all and (max-width: 900px) {
    .case-study__testimonial__client-name {
      margin-left: 0; } }
  .cobi .case-study__testimonial__client-name {
    color: #59c6e4; }
  .smashing-magazine .case-study__testimonial__client-name {
    color: #bc4132; }
  .khan-academy .case-study__testimonial__client-name {
    color: #21d09e; }

.podcasts {
  margin-top: 5vw; }
  @media all and (max-width: 1024px) {
    .podcasts {
      padding: 0 1em; } }

.podcasts__heading {
  border-bottom: 1px solid #ccc;
  padding: .25em 0; }

.podcasts__list {
  margin: 0;
  padding: 0;
  list-style: none; }

.podcasts__item {
  margin: 0;
  margin-bottom: 1em; }
  .podcasts__item a {
    font-weight: 500;
    font-size: 1.15rem; }

.homepage__photo {
  position: relative;
  grid-column: 1 / 13;
  grid-row: 1;
  background-color: #483F58; }
  .homepage__photo > img {
    display: block;
    mix-blend-mode: luminosity;
    max-height: 100vh;
    width: 100%;
    object-fit: cover;
    -webkit-filter: brightness(40%);
    filter: brightness(40%); }

[data-hook="homepage"] .awards {
  position: absolute;
  bottom: 1rem;
  right: 1rem; }

@media all and (min-width: 768px) {
  .homepage__work-intro {
    color: #fff; } }

.homepage__work__title {
  font-weight: 400;
  margin-top: 1.5em; }
  @media all and (min-width: 768px) {
    .homepage__work__title {
      padding-left: 2rem; } }
  .homepage__work__title span {
    background-color: #f8f8f8;
    padding: .25em;
    box-decoration-break: clone; }
    [data-theme="dark"] .homepage__work__title span {
      background-color: var(--purple--darkest); }

/* 
 * <section class="homepage__speaking">
 * contains speaking feature — image and text + upcoming conferences
 */
@media all and (min-width: 900px) {
  .homepage__speaking-intro {
    grid-column: 2 / 7;
    grid-row: 3; } }

.homepage__speaking-intro ul {
  font-size: .8em; }

.homepage__speaking__title {
  font-size: 1.75em; }

.homepage__speaking-photo figure {
  margin: 0; }

[data-theme="dark"] .homepage__speaking-photo img {
  mix-blend-mode: luminosity; }

@media all and (min-width: 900px) {
  .homepage__speaking-photo {
    grid-column: 8 / 13;
    grid-row: 3;
    margin-right: 2em; } }

.main-footer {
  padding: 0;
  background-color: #111;
  color: #eee; }
  .main-footer h3 {
    margin-top: 0; }

.footer__more {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: 1fr; }
  .footer__more ul {
    list-style: none;
    padding: 0; }

.secondary-nav {
  margin: 2em 0;
  padding: 0; }
  .secondary-nav ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 2em; }
    @media all and (min-width: 900px) {
      .secondary-nav ul {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
  .secondary-nav li::before {
    display: none; }
  .secondary-nav li a {
    display: block;
    text-decoration: none;
    font-family: "Fira Sans", arial, sans-serif;
    font-weight: 600;
    font-size: 1.3em;
    background: none; }
  .secondary-nav li span {
    display: block;
    font-size: 0.9em;
    color: var(--gray--light);
    line-height: 1.5; }

.footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
  margin: 1em 0; }
  .footer__links li {
    font-size: 0.9em;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2em;
    padding: 1em 0; }
    .footer__links li::before {
      display: none; }
    .footer__links li a {
      display: block;
      width: 100%; }
  @media all and (min-width: 640px) {
    .footer__links {
      padding: 0 2em; } }

.footer__notes {
  grid-column: 2 / 12;
  text-align: center;
  padding: 4em 0;
  font-size: 0.9em; }

table {
  width: 100%;
  max-width: 100%; }
  table tbody {
    display: block;
    width: 100%; }

table.main {
  width: 100%;
  padding: 0;
  font-size: .9em;
  color: #111; }
  table.main td {
    padding: .75em 1em; }
    table.main td:first-of-type, table.main td:first-of-type a {
      font-weight: bold; }
  table.main tr:nth-of-type(odd) {
    background-color: #fff; }
  table.main tr:nth-of-type(even) {
    background-color: #eee; }
  table.main tr:first-of-type {
    background-color: #333;
    color: #fff; }

table.minimal {
  display: block;
  width: 100%;
  border-collapse: collapse; }
  table.minimal td {
    padding: .5em .75em;
    border: 1px solid #ddd; }
    table.minimal td:first-of-type {
      font-weight: bold; }

table.hints {
  margin-top: 30px;
  font-size: 14px; }
  table.hints td:first-of-type {
    width: 20px;
    height: 20px; }
  table.hints td:last-of-type {
    padding-left: 5px; }

table.cagematch {
  border: 1px solid #eee;
  table-layout: fixed;
  margin: 1.5em 0; }
  table.cagematch td {
    padding: 1em;
    width: 50%;
    color: white; }

.th {
  background-color: #222;
  font-weight: bold; }

td.win {
  background-color: var(--green--dark);
  font-weight: 400; }

td.lose {
  background-color: tomato;
  font-weight: 400; }

td.average {
  background-color: #FCA602;
  font-weight: 400; }

td.win code, td.lose code, td.average code {
  color: #222; }

.desk__intro {
  grid-row: 2;
  grid-column: 8 / 12;
  margin-bottom: 3em; }
  @media all and (max-width: 1024px) {
    .desk__intro {
      padding: 0 1em; } }

.desk-photo {
  grid-row: 2;
  grid-column: 2 / 7;
  margin-bottom: 3em; }

.desk__list {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-column: 3 / 7; }

.desk__item {
  margin-bottom: 5em;
  position: relative;
  transition: background-color .2s ease-out;
  border-top: 1px solid var(--purple--lightest);
  padding-top: 1em; }
  [data-theme="dark"] .desk__item {
    border-top: 1px solid var(--purple--darker); }
  .desk__item::before {
    display: none; }
  .desk__item a {
    display: block;
    width: 100%;
    height: 100%;
    transition: all .2s ease-out;
    text-decoration: none;
    background: none; }
    .desk__item a:hover {
      color: inherit;
      background: none;
      border-bottom: none; }

.desk__item__title {
  font-size: 2em;
  margin-top: 0; }
  .desk__item__title span {
    display: block;
    font-weight: normal;
    margin-top: .5em;
    color: var(--grey); }

.desk__item__meta {
  color: var(--grey);
  font-size: .75em;
  margin-top: -1em;
  font-weight: 300;
  display: block; }

.desk__item__desc {
  font-size: .8em;
  font-weight: 300;
  display: none; }

.desk__wrapper {
  grid-row: 2;
  grid-column: 2 / 8; }

.footnotes {
  border-top: 1px solid #ddd;
  padding: 1em;
  margin-top: 5em;
  color: #444;
  font-size: .75em; }
  .footnotes :target {
    background: var(--yellow-highlight);
    padding: 1em; }

/**
 * Initialiazing a `footnotes` counter on the wrapper
 */
.article {
  counter-reset: footnotes; }

.footnotes__list {
  list-style-type: decimal;
  padding: 0; }

/**
 * SOURCE: https://www.sitepoint.com/accessible-footnotes-css/
 *
 * Inline footnotes references
 * 1. Increment the counter at each new reference
 * 2. Reset link styles to make it appear like regular text
 */
a[aria-describedby="footnote-label"] {
  counter-increment: footnotes;
  /* 1 */
  text-decoration: none;
  /* 2 */
  color: inherit;
  /* 2 */
  cursor: default;
  /* 2 */
  outline: none;
  /* 2 */
  border: none; }
  a[aria-describedby="footnote-label"]:hover {
    background: none; }

/**
 * Actual numbered references
 * 1. Display the current state of the counter (e.g. `[1]`)
 * 2. Align text as superscript
 * 3. Make the number smaller (since it's superscript)
 * 4. Slightly offset the number from the text
 * 5. Reset link styles on the number to show it's usable
 */
a[aria-describedby="footnote-label"]::after {
  content: "[" counter(footnotes) "]";
  /* 1 */
  vertical-align: super;
  /* 2 */
  font-size: 0.8em;
  /* 3 */
  margin-left: 2px;
  /* 4 */
  color: var(--pink);
  /* 5 */
  text-decoration: underline;
  /* 5 */
  cursor: pointer;
  /* 5 */ }

/**
 * Resetting the default focused styles on the number
 */
a[aria-describedby="footnote-label"]:focus::after {
  outline: thin dotted;
  outline-offset: 2px; }

[aria-label="Back to content"] {
  font-size: 1;
  color: var(--pink);
  border-bottom: none; }
  [aria-label="Back to content"]:hover {
    background: none; }

blockquote {
  margin: 5vw 0;
  left: 0;
  font-weight: 500; }
  blockquote.testimonial {
    border-left: 2px solid rgba(0, 0, 0, 0.2);
    padding-left: 1.5rem; }
  .article__content blockquote {
    padding-left: 1rem;
    border-left: 5px solid rgba(0, 0, 0, 0.35);
    position: relative; }
    @media all and (min-width: 768px) {
      .article__content blockquote {
        left: -1rem; } }
  blockquote cite {
    margin-top: 1rem;
    font-style: normal;
    display: block;
    font-weight: normal;
    font-size: 0.8em; }
    blockquote cite span {
      display: block; }

q {
  font-style: italic; }

a.skip-link {
  position: fixed;
  top: -30em;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--purple);
  color: #fff;
  padding: .5em 1em;
  font-size: 1em;
  text-align: center;
  transition: top .1s linear; }
  a.skip-link:focus, a.skip-link:focus-visible {
    top: 0;
    color: #fff;
    box-shadow: inset 0 0 0 5px var(--purple), inset 0 0 0 6px #fff; }

.request__head {
  grid-column: 4 / 10; }

.request__content {
  grid-column: 4 / 10; }

.hire-page__title {
  grid-column: 2 / 7;
  grid-row: 2; }
  @media all and (max-width: 1024px) {
    .hire-page__title {
      padding: 0 20px 1em; } }

.hire-page__testimonial {
  grid-column: 8 / 12;
  grid-row: 3; }
  .hire-page__testimonial blockquote {
    margin: 0; }
  @media all and (max-width: 1024px) {
    .hire-page__testimonial {
      margin: 5em 1em; } }

.hire-page__testimonials {
  grid-row: 4;
  grid-column: 2 / 12; }
  @media all and (max-width: 1024px) {
    .hire-page__testimonials {
      padding: 0 1em; } }
  @media all and (min-width: 1024px) {
    .hire-page__testimonials .testimonials-list {
      grid-template-columns: repeat(2, 1fr); } }

.hire-page__text {
  grid-column: 2 / 7; }
  @media all and (max-width: 1024px) {
    .hire-page__text {
      padding: 0 1em; } }

.hire-page__availability-calendar {
  grid-column: 2 / 12; }
  @media all and (max-width: 1024px) {
    .hire-page__availability-calendar {
      padding: 0 1em; } }

.hire-page__contact-notes {
  grid-column: 2 / 8; }
  @media all and (max-width: 1024px) {
    .hire-page__contact-notes {
      padding: 0 1em; } }

.hire-page__cta {
  grid-column: 4 / 10; }
  @media all and (max-width: 1024px) {
    .hire-page__cta {
      padding: 0 1em; } }

.contact__notes {
  grid-column: 9 / 12;
  grid-row: 1;
  font-weight: 300;
  font-size: .9em;
  padding: 2em 0; }

.article__head {
  grid-column: 2 / 12; }

.article__content {
  grid-column: 2 / 10;
  max-width: 80ch; }

.deck {
  font-size: 1.2em;
  margin-top: 2em;
  font-weight: 300;
  margin-bottom: 5vw; }

.article__title {
  position: relative; }
  .article__title h1 {
    margin-top: 0;
    margin-bottom: 1rem; }
  .article__title.link h2::before {
    content: "";
    display: inline-block;
    background-image: url(../../images/icons/read.svg);
    width: 1em;
    height: 1em;
    vertical-align: middle;
    position: relative;
    top: -3px;
    margin-right: 0.25em; }

.article__subtitle {
  display: block;
  font-size: 0.4em;
  font-weight: 400;
  margin: 1em 0 1em 0;
  line-height: 1.6;
  letter-spacing: 0px; }

.article__meta {
  font-size: 0.75em;
  color: #444; }
  .article__meta p {
    line-height: 3; }
  .article__meta button {
    padding: 0;
    margin: 0;
    background: none;
    color: #000;
    border: 1px solid #888;
    border-radius: 2px;
    padding: .3em 1em; }
    .article__meta button[disabled] {
      color: #000;
      background: none;
      font-weight: bold; }
      .article__meta button[disabled]:hover {
        color: #000;
        background: none;
        text-decoration: none; }
    .article__meta button:hover {
      color: #000;
      text-decoration: underline;
      background: none; }

.article-buttons {
  margin-bottom: 2rem; }

.article-sidebar {
  font-size: 1em;
  border-top: 2px solid #eee;
  padding-top: 2em;
  font-weight: normal; }

.external-link-button {
  margin-top: 3em; }

/* Links to previous and next articles */
.article__pagination ul {
  list-style: none;
  margin: 2em 0;
  padding: 0; }

@media all and (min-width: 800px) {
  .article__pagination {
    display: flex; } }

.article__pagination ul {
  width: 100%;
  padding: 0; }

.article__pagination li {
  margin: 1em 0;
  flex: 1; }
  .article__pagination li::before {
    display: none; }
  .article__pagination li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.5em 0.5em;
    background: none;
    position: relative;
    transition: all 0.2s linear;
    text-decoration: none; }
  .article__pagination li.article__pagination__previous a {
    padding-right: 1em;
    padding-left: 2.5em; }
    .article__pagination li.article__pagination__previous a::before {
      content: "\00AB";
      position: absolute;
      left: 0.5em;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.5em; }
  .article__pagination li.article__pagination__next a {
    padding-left: 1em;
    padding-right: 2.5em; }
    .article__pagination li.article__pagination__next a::after {
      content: "\00BB";
      position: absolute;
      right: 0.5em;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.5em; }

.article__related {
  color: var(--grey);
  margin: 2em 0 0; }
  .article__related .blog__tags {
    font-size: 1.2em; }

pre[class*="language-"] {
  max-height: 1000px;
  overflow: auto; }

.speaking__heading {
  margin-top: 2.5em; }

.l-conferences {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 4rem 2rem; }
  @media all and (max-width: 640px) {
    .l-conferences {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      grid-gap: 2em 2em;
      font-size: .9em; } }

.c-conference {
  text-align: left;
  margin: 1em 0;
  font-size: .9em; }

.c-conference__name {
  display: block;
  font-weight: 600;
  font-size: 1.25rem;
  background: none;
  border: none; }

.c-conference__location,
.c-conference__date,
.c-conference__video {
  display: block;
  font-size: .9em;
  color: #444;
  padding-left: 1.75em;
  background-repeat: no-repeat;
  background-size: 1em 1em;
  margin: .5em 0 0;
  background-position: left center; }

.c-conference__location {
  background-image: url(../../images/icons/location.svg); }

.c-conference__date {
  background-image: url(../../images/icons/calendar.svg); }

.c-conference__video {
  color: #000;
  font-weight: bold; }
  .c-conference__video[href=""] {
    display: none; }

.c-conference__type {
  font-weight: 400;
  font-size: .6em;
  display: none; }

/* VIDOE PLAYER */
.ps-video-player--dark {
  background-color: black;
  color: #fff; }

.c-video-player {
  display: flex;
  flex-direction: column-reverse; }
  @media all and (min-width: 50em) {
    .c-video-player {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-column-gap: var(--h-padding); } }

.c-video-player__playlist__list {
  margin: 0;
  padding: 0;
  list-style: none; }

.c-video-container {
  height: 0;
  width: 100%;
  padding-top: 56.2%;
  position: relative;
  margin-bottom: 2rem;
  grid-column: 1 / 8;
  grid-row: 1; }
  @media all and (min-width: 50em) {
    .c-video-container {
      margin-bottom: 0; } }
  .c-video-container:focus {
    outline-color: var(--color-text-grey); }
  .c-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .c-video-container iframe:focus {
      outline-color: var(--color-text-grey); }

.c-video-player__playlist {
  grid-column: 9 / 13; }

.c-video-player__playlist__item {
  border-top: 1px solid #e5e5e5;
  margin-bottom: 0; }
  .c-video-player__playlist__item:last-of-type {
    border-bottom: 1px solid #e5e5e5; }
  @media all and (max-width: 50em) {
    .c-video-player__playlist__item:first-of-type {
      border-top: none; } }

.c-video-player__playlist__link {
  position: relative;
  z-index: 1;
  display: block;
  cursor: pointer;
  font-weight: normal;
  color: inherit;
  font-size: .85em;
  text-align: left;
  text-decoration: none;
  /* Required for text-overflow to do anything */
  padding: .5rem;
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: right center; }
  .js-video-player .c-video-player__playlist__link {
    background-image: url("../img/video-play-icon--grey.svg"); }
  .c-video-player__playlist__link:hover {
    color: inherit; }
  .ps-video-player--dark .c-video-player__playlist__link {
    color: var(--color-text-grey); }
    .ps-video-player--dark .c-video-player__playlist__link:visited {
      color: var(--color-text-grey); }
  .c-video-player__playlist__link[aria-selected="true"] {
    font-weight: bold; }
  .ps-video-player--dark .c-video-player__playlist__link[aria-selected="true"] {
    color: #fff;
    font-weight: normal; }
  .c-video-player__playlist__link[href]:focus {
    background-repeat: no-repeat;
    outline-color: var(--color-text-grey);
    outline-offset: 5px; }
  .c-video-player__playlist__link:visited {
    color: inherit; }

.press-kit__head {
  text-align: center; }

.press-kit__summary dl {
  display: grid;
  grid-template-columns: auto 1fr; }

.photo-grid {
  list-style: none;
  margin: 0;
  padding: 0; }
  @media all and (min-width: 640px) {
    .photo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-rows: 400px;
      grid-gap: 1em;
      grid-auto-flow: dense; } }
  .photo-grid li::before {
    display: none; }
  .photo-grid li a {
    background: none; }
  .photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #000; }
    .photo-grid img:hover {
      object-fit: contain; }

form {
  padding: 2em 0; }

input[type="text"],
input[type="email"],
textarea,
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--grey--light);
  border-radius: 5px;
  padding: 0.7em 1em;
  width: 100%;
  transition: all 0.1s ease-out;
  background-color: inherit;
  color: inherit;
  font-family: inherit;
  font-size: 1em; }
  input[type="text"]:active, input[type="text"]:focus,
  input[type="email"]:active,
  input[type="email"]:focus,
  textarea:active,
  textarea:focus,
  select:active,
  select:focus {
    outline: none;
    box-shadow: 0 0 0 2px green; }
  input[type="text"]::placeholder,
  input[type="email"]::placeholder,
  textarea::placeholder,
  select::placeholder {
    color: var(--grey);
    font-style: italic; }

textarea {
  resize: none;
  width: 100%;
  overflow-y: auto;
  min-height: 200px;
  padding: 1em; }

label {
  font-weight: bold;
  cursor: pointer; }

.label-input-combo {
  display: block;
  margin-bottom: 3em; }

.label-text {
  display: block;
  margin-bottom: 0.4em; }

.form-success {
  grid-column: 2 / 12;
  text-align: center;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center; }

/**
 * custom <select> styles, 2019 Edition 
 * https://www.filamentgroup.com/lab/select-css.html
 *
 */
.custom-select {
  display: block;
  padding: 0.7em 1.4em 0.7em 0.8em;
  width: 100%;
  color: #000 !important;
  max-width: 100%;
  background-color: inherit;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cpath%20fill%3D%22%23777%22%20d%3D%22M9.914%2011.086l-2.829%202.829%208.914%208.914%208.914-8.914-2.828-2.828-6.086%206.086z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A"), linear-gradient(to bottom, inherit 0%, inherit 100%);
  background-repeat: no-repeat, repeat;
  background-position: right 1em top 50%, 0 0;
  background-size: 1.2em auto, 100%; }

.custom-select::-ms-expand {
  display: none; }

.offline-wrapper {
  grid-column: 2 / 12; }

.offline__title {
  text-align: center; }

.TIL__title {
  padding: 0 0 0.5em 0; }

.TIL__list {
  list-style: none;
  margin: 0;
  padding: 0; }

.TIL__item {
  font-weight: 400;
  margin: 3em 0;
  background-color: #fff;
  padding: 3em 2em;
  margin-top: 0; }

.TIL__item__date {
  display: block;
  font-size: .8rem;
  margin-top: 1rem; }

.TIL__item__link {
  display: inline-block;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  background-color: #eee;
  transition: all .1s linear;
  padding: 0.35em 1em; }
  .TIL__item__link:hover, .TIL__item__link:focus {
    background-color: #000;
    color: #fff; }

.TIL__item__content-wrapper {
  max-width: 80ch;
  margin: 0 auto; }

.TIL__item__source {
  display: block;
  margin-top: 3em;
  font-size: .9em;
  font-style: italic; }

.link__item {
  margin-bottom: 3em; }

.link__item__title {
  font-weight: normal;
  font-size: 1.25em; }

.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0;
  -webkit-border-radius: 0 0 0 0;
  overflow-x: auto;
  vertical-align: baseline;
  font-family: Consolas, Monaco, Lucida Console, monospace;
  font-weight: 400;
  font-style: normal;
  padding: 0;
  border: none;
  width: 100% !important; }

.syntaxhighlighter .container {
  margin: 0 !important; }

.syntaxhighlighter.source {
  overflow: hidden; }

.syntaxhighlighter .bold {
  font-weight: bold; }

.syntaxhighlighter .italic {
  font-style: italic; }

.syntaxhighlighter .line {
  white-space: prewrap; }

.syntaxhighlighter table caption {
  text-align: left;
  padding: .5em 0; }

.syntaxhighlighter table td.code {
  width: 100%; }

.syntaxhighlighter table td.code .container {
  position: relative; }

.syntaxhighlighter table td.code .container textarea {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: white;
  padding-left: 1em;
  overflow: hidden;
  white-space: pre; }

.syntaxhighlighter table td.gutter .line {
  text-align: right;
  padding: 0 .5em; }

.syntaxhighlighter table td.code .line {
  padding: 0 1em; }

.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
  padding-left: 0; }

.syntaxhighlighter.show {
  display: block; }

.syntaxhighlighter.collapsed table {
  display: none; }

.syntaxhighlighter.collapsed .toolbar {
  padding: .1em .8em 0 0;
  position: static;
  width: auto;
  height: auto; }

.syntaxhighlighter.collapsed .toolbar span {
  display: inline;
  margin-right: 1em; }

.syntaxhighlighter.collapsed .toolbar span a {
  padding: 0;
  display: none; }

.syntaxhighlighter.collapsed .toolbar span a.expandSource {
  display: inline; }

.syntaxhighlighter .toolbar {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 11px;
  height: 11px;
  z-index: 10; }

.syntaxhighlighter .toolbar span.title {
  display: inline; }

.syntaxhighlighter .toolbar a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding-top: 1px; }

.syntaxhighlighter .toolbar a.expandSource {
  display: none; }

.syntaxhighlighter.ie .toolbar {
  line-height: 8px; }

.syntaxhighlighter.ie .toolbar a {
  padding-top: 0; }

.syntaxhighlighter {
  font-weight: bold;
  background-color: #fff;
  width: 100%;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap; }

.syntaxhighlighter .line.highlighted.number {
  color: black; }

.syntaxhighlighter table caption {
  color: black; }

.syntaxhighlighter .gutter {
  color: #afafaf;
  display: none; }

.syntaxhighlighter .gutter .line {
  border-right: 3px solid #bbb;
  height: 30px;
  line-height: 30px; }

.syntaxhighlighter.printing .line .content {
  border: none; }

.syntaxhighlighter.collapsed {
  overflow: visible; }

.syntaxhighlighter.collapsed .toolbar {
  color: #3498DB;
  background: white;
  border: 1px solid #6ce26c; }

.syntaxhighlighter.collapsed .toolbar a {
  color: #3498DB; }

.syntaxhighlighter.collapsed .toolbar a:hover {
  color: red; }

.syntaxhighlighter .toolbar {
  color: white;
  border: none; }

.syntaxhighlighter .toolbar a {
  color: white;
  border: none !important; }

.syntaxhighlighter .toolbar a:hover {
  color: black; }

.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
  color: #333; }

.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
  color: #5C9238;
  font-style: italic; }

.syntaxhighlighter .string, .syntaxhighlighter .string a {
  color: #3498ff; }

.syntaxhighlighter .keyword {
  color: deepPink; }

.syntaxhighlighter .preprocessor {
  color: gray; }

.syntaxhighlighter .variable {
  color: #a70; }

.syntaxhighlighter .value {
  color: RGB(27, 107, 240); }

.syntaxhighlighter .functions {
  color: #ff1493; }

.syntaxhighlighter .constants {
  color: #06c; }

.syntaxhighlighter .script {
  font-weight: bold;
  color: #3498DB;
  background-color: none; }

.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
  color: #333; }

.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
  color: #ff1493; }

.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
  color: red; }

.syntaxhighlighter {
  display: block;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: .95em;
  padding: 1em 0;
  background-color: #fafafa;
  margin: 2em 0 !important;
  max-height: 1000px;
  overflow: auto; }
  @media all and (max-width: 800px) {
    .syntaxhighlighter {
      max-height: 500px; } }

.syntaxhighlighter code {
  background: none;
  bckground-color: transparent;
  padding: 0 !important; }

/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism-funky&languages=markup+css+clike+javascript+markdown+scss&plugins=line-highlight+line-numbers */
/**
 * prism.js Funky theme
 * Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/
 * @author Lea Verou
 */
code[class*="language-"],
pre[class*="language-"] {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none; }

/* Code blocks */
pre[class*="language-"] {
  padding: 1em .8em 3em;
  margin: 2rem 0;
  overflow: auto;
  background: #000;
  background-size: 1em 1em; }
  figure pre[class*="language-"] {
    margin-bottom: 0; }

code[class*="language-"] {
  background: black;
  color: white;
  box-shadow: -.3em 0 0 .3em black, .3em 0 0 .3em black; }

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .2em;
  border-radius: .3em;
  box-shadow: none;
  white-space: normal; }

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #aaa; }

.token.punctuation {
  color: #999; }

.namespace {
  opacity: .7; }

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
  color: #0cf; }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: yellow; }

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.toke.variable,
.token.inserted {
  color: yellowgreen; }

.token.atrule,
.token.attr-value,
.token.keyword {
  color: deeppink; }

.token.regex,
.token.important {
  color: orange; }

.token.important,
.token.bold {
  font-weight: bold; }

.token.italic {
  font-style: italic; }

.token.entity {
  cursor: help; }

.token.deleted {
  color: red; }

pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em; }

.line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  /* Same as .prism’s padding-top */
  background: rgba(153, 122, 102, 0.08);
  background: linear-gradient(to right, rgba(153, 122, 102, 0.1) 70%, rgba(153, 122, 102, 0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre; }

.line-highlight:before,
.line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: rgba(153, 122, 102, 0.4);
  color: #f5f2f0;
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white; }

.line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em; }

.line-numbers .line-highlight:before,
.line-numbers .line-highlight:after {
  content: none; }

pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber; }

pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit; }

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em;
  /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber; }

.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right; }

.content-wrapper {
  margin: 0 auto;
  max-width: 90vw; }

@media all and (min-width: 768px) {
  .content-wrapper,
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1.5rem; } }

/*  Component Styles */
ol,
ul {
  padding-left: 2em;
  margin: 2rem 0; }
  @media all and (max-width: 768px) {
    ol,
    ul {
      padding-left: 1.5em; } }
  ol li,
  ul li {
    margin-bottom: .6rem; }
  ol ::marker,
  ul ::marker {
    font-weight: bold; }

ol {
  list-style-type: decimal; }

ul {
  padding: 0 1.1rem 1rem;
  margin-top: 0; }

ul.table-list {
  list-style: none;
  padding: 0; }
  ul.table-list li {
    padding: .5em 1em;
    margin: 0; }
  ul.table-list li:nth-of-type(odd) {
    background-color: #ededed; }
  ul.table-list li:nth-of-type(even) {
    background-color: white; }

dt {
  font-weight: 600;
  margin: .5em 0 1em; }

dd {
  padding-left: 2em;
  margin: 0; }

html {
  --color--primary: #714fb0;
  --color--dark-purple: #483F58;
  --color--dark-purple--bg: #160d26;
  transition: all 0.1s linear;
  --purple: #714fb0;
  --grey: #777;
  --grey--light: #999;
  --grey--lighter: #bbb;
  --grey--lightest: #ddd;
  --red: #973420;
  --green: #37af2c;
  --green--dark: #256020;
  --purple-gradient: linear-gradient(45deg, #4a4499, #827ad9);
  --yellow-highlight: rgba(236, 188, 46, 0.75); }

.c-slider[data-slider] {
  position: relative;
  background-color: #fff;
  padding: 3rem 2rem 2rem;
  font-size: 1.2rem; }

.c-slider__paddleNav {
  width: 100%;
  text-align: center;
  margin-top: 2em; }
  @media all and (max-width: 1024px) {
    .c-slider__paddleNav {
      position: static; } }
  .c-slider__paddleNav button.c-slider__paddleNav__prev {
    text-align: right; }
  .c-slider__paddleNav button.c-slider__paddleNav__next {
    text-align: left; }
  .c-slider__paddleNav button.c-slider__paddleNav__prev,
  .c-slider__paddleNav button.c-slider__paddleNav__next {
    color: inherit;
    font-size: .75em;
    background: none;
    padding: .5em; }
    .c-slider__paddleNav button.c-slider__paddleNav__prev[aria-disabled="true"],
    .c-slider__paddleNav button.c-slider__paddleNav__next[aria-disabled="true"] {
      color: #888; }
    .c-slider__paddleNav button.c-slider__paddleNav__prev[aria-disabled="true"]:hover,
    .c-slider__paddleNav button.c-slider__paddleNav__next[aria-disabled="true"]:hover {
      color: #888; }
    .c-slider__paddleNav button.c-slider__paddleNav__prev:focus:not(:focus-visible),
    .c-slider__paddleNav button.c-slider__paddleNav__next:focus:not(:focus-visible) {
      outline: none; }
    .js-focus-visible .c-slider__paddleNav button.c-slider__paddleNav__prev:focus:not(.focus-visible), .js-focus-visible
    .c-slider__paddleNav button.c-slider__paddleNav__next:focus:not(.focus-visible) {
      outline: none; }

.c-slider__dotNav {
  text-align: center;
  display: flex;
  padding: 1rem 0;
  align-items: center;
  justify-content: center; }
  .c-slider__dotNav:focus, .c-slider__dotNav.focus-visible {
    outline: 2px dotted #888;
    outline-offset: 5px; }

.c-slider__dotNav__dot {
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  line-height: 0;
  border-radius: 50%;
  background: none;
  color: #000;
  border: 2px dotted transparent; }
  .c-slider__dotNav__dot[aria-selected="true"] {
    color: var(--color--primary); }
  @media screen and (-ms-high-contrast: active) {
    .c-slider__dotNav__dot {
      /* All high contrast styling rules */
      color: windowText; }
      .c-slider__dotNav__dot[aria-selected="true"] {
        color: highlight; } }
  .c-slider__dotNav__dot:focus, .c-slider__dotNav__dot.focus-visible {
    outline: none;
    border-color: var(--color--primary); }
  .c-slider__dotNav__dot:focus:not(:focus-visible) {
    border-color: transparent; }
  .js-focus-visible .c-slider__dotNav__dot:focus:not(.focus-visible) {
    border-color: transparent; }

/* styles for visible labels for the dotnav for voice dictation users */
.c-slider__dotNav__dot {
  position: relative; }
  .c-slider__dotNav__dot .dot-label {
    font-size: .8em;
    display: block;
    line-height: 1.5;
    position: absolute;
    left: 1.25rem;
    transform: translateX(-50%);
    bottom: -2.75rem;
    z-index: 1;
    background-color: #eee;
    padding: .5em 1em;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s linear;
    width: 15rem; }
    .c-slider__dotNav__dot .dot-label::after {
      /* up arrow */
      content: "";
      position: absolute;
      left: 50%;
      margin-left: -1rem;
      top: -.5rem;
      width: 0;
      height: 0;
      border-left: 1rem solid transparent;
      border-right: 1rem solid transparent;
      border-bottom: 1rem solid #eee; }
  .c-slider__dotNav__dot:focus .dot-label, .c-slider__dotNav__dot:hover .dot-label {
    opacity: 1; }
  .c-slider__dotNav__dot:focus:not(:focus-visible) .dot-label {
    opacity: 0; }
  .js-focus-visible .c-slider__dotNav__dot:focus:not(.focus-visible) .dot-label {
    opacity: 0; }

.c-slider__slides-container {
  display: flex; }
  .ps-slider--images .c-slider__slides-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; }

.c-slider__slides-wrapper {
  width: 80%;
  display: flex;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.39, 0.03, 0.56, 0.57); }

.c-slider__slide {
  width: 100%;
  flex-shrink: 0;
  text-align: center;
  margin-bottom: 2rem;
  margin-right: 2rem;
  transition: opacity 0.5s cubic-bezier(0.39, 0.03, 0.56, 0.57), visibility 1s cubic-bezier(0.39, 0.03, 0.56, 0.57); }
  .c-slider__slide[data-hidden="true"] {
    visibility: hidden;
    opacity: 0; }
  .c-slider__slide[data-hidden="false"] {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s cubic-bezier(0.39, 0.03, 0.56, 0.57), visibility 0.2s cubic-bezier(0.39, 0.03, 0.56, 0.57); }
  .c-slider__slide:focus {
    outline: 1px dotted #888;
    outline-offset: -10px; }

.js-slider .c-slider__slides-container {
  overflow: hidden; }

.js-slider .c-slider__slides-wrapper {
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.39, 0.03, 0.56, 0.57); }

.js-slider .c-slider__slide {
  margin: 0;
  flex-shrink: 0; }

/*  slider testimonials styles */
.c-slider__testimonial {
  border: none;
  margin: 0 auto;
  max-width: 45rem;
  font-weight: 400;
  text-align: left; }