@charset "UTF-8";
:root {
  --white: #fff;
  --teal: #268383;
  --teal-light: #53b0b0;
  --yellow: #fbc46e;
  --yellow-light: #fbca7d;
  --red: #cd4b37;
  --red-light: #e47867;
  --grey: #dadad9;
  --charcoal: #434342;
  --charcoal-light: #606060;
  --pink: #ff38a5;
  --blue: #0033cc;
  --spacer: 1rem;
  --spacer-neg: -1rem;
  --spacer-xxs: 0.125rem;
  --spacer-neg-xxs: -0.125rem;
  --spacer-xs: 0.25rem;
  --spacer-neg-xs: -0.25rem;
  --spacer-sm: 0.5rem;
  --spacer-neg-sm: -0.5rem;
  --spacer-md: var(--spacer);
  --spacer-neg-md: var(--spacer-neg);
  --spacer-lg: 1.5rem;
  --spacer-neg-lg: -1.5rem;
  --spacer-lgr: 2rem;
  --spacer-neg-lgr: -2rem;
  --spacer-xl: 2.5rem;
  --spacer-neg-xl: -2.5rem;
  --spacer-xxl: 4rem;
  --spacer-neg-xxl: -4rem;
  --spacer-huge: 6rem;
  --spacer-neg-huge: -6rem;
  --container--fluid-mw: clamp(20rem, 100vw, 90rem);
}

/*------------------------------------*\
    $RESET
\*------------------------------------*/
*, *:before, *:after {
  box-sizing: border-box;
}

/**
 * The usual...
 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dd,
ol,
ul,
form,
fieldset,
legend,
table,
th,
td,
caption,
hr {
  margin: 0;
  padding: 0;
}

/**
 * Give a help cursor to elements that give extra info on `:hover`.
 */
abbr[title],
dfn[title] {
  cursor: help;
}

/**
 * Remove underlines from potentially troublesome elements.
 */
u,
ins {
  text-decoration: none;
}

/**
 * Apply faux underline via `border-bottom`.
 */
ins {
  border-bottom: 1px solid;
}

/**
 * So that `alt` text is visually offset if images don’t load.
 */
img {
  font-style: italic;
}

/**
 * Give form elements some cursor interactions...
 */
label,
input,
textarea,
button,
select,
option {
  cursor: pointer;
}

.text-input:active,
.text-input:focus,
textarea:active,
textarea:focus {
  cursor: text;
  outline: none;
}

@font-face {
  font-family: "Geomanist";
  src: url("/fonts/geomanist-regular-webfont.eot");
  src: url("/fonts/geomanist-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/geomanist-regular-webfont.woff2") format("woff2"), url("/fonts/geomanist-regular-webfont.woff") format("woff"), url("/fonts/geomanist-regular-webfont.ttf") format("truetype"), url("/fonts/geomanist-regular-webfont.svg#geomanistregular") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Geomanist";
  src: url("/fonts/geomanist-regular-italic-webfont.eot");
  src: url("/fonts/geomanist-regular-italic-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/geomanist-regular-italic-webfont.woff2") format("woff2"), url("/fonts/geomanist-regular-italic-webfont.woff") format("woff"), url("/fonts/geomanist-regular-italic-webfont.ttf") format("truetype"), url("/fonts/geomanist-regular-italic-webfont.svg#geomanistitalic") format("svg");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Geomanist";
  src: url("/fonts/geomanist-bold-webfont.eot");
  src: url("/fonts/geomanist-bold-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/geomanist-bold-webfont.woff2") format("woff2"), url("/fonts/geomanist-bold-webfont.woff") format("woff"), url("/fonts/geomanist-bold-webfont.ttf") format("truetype"), url("/fonts/geomanist-bold-webfont.svg#geomanistregular") format("svg");
  font-weight: bold;
  font-style: normal;
}
html {
  font-family: "Geomanist", Helvetica, Arial, sans-serif;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  font-family: "Geomanist", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  background-color: var(--white);
  color: var(--charcoal);
  position: relative;
  margin: 0;
}

a {
  color: var(--charcoal);
  text-decoration: underline;
}
a:hover {
  color: var(--charcoal-light);
  text-decoration: none;
}
a:focus-visible {
  outline: 0.4rem double var(--pink);
  outline-offset: 0.125rem;
}

img {
  max-width: 100%;
  height: auto;
}

ul,
ol {
  padding-left: var(--spacer-xl);
}

figure,
figcaption {
  margin: 0;
  padding: 0;
}

abbr[title] {
  border: none;
  cursor: help;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

.text-xxl {
  font-size: 4rem;
  line-height: 1.2;
}
.text-xxl.fluid-type, .fluid-type .text-xxl {
  font-size: clamp(2.33rem, 2.4783rem + 1.7391vw, 4rem);
}

.text-xl {
  font-size: 2.25rem;
  line-height: 1.25;
}
.text-xl.fluid-type, .fluid-type .text-xl {
  font-size: clamp(1.625rem, 1.2989rem + 1.087vw, 2.25rem);
}

.text-lg {
  font-size: 1.625rem;
  line-height: 1.33;
}
.text-lg.fluid-type, .fluid-type .text-lg {
  font-size: clamp(1.3125rem, 1.1495rem + 0.5435vw, 1.625rem);
}

.text-md {
  font-size: 1.3125rem;
  line-height: 1.6;
}
.text-md.fluid-type, .fluid-type .text-md {
  font-size: clamp(1.125rem, 1.0272rem + 0.3261vw, 1.3125rem);
}

.text-sm {
  font-size: 1.125rem;
  line-height: 1.5;
}
.text-sm.fluid-type, .fluid-type .text-sm {
  font-size: clamp(1rem, 0.9348rem + 0.2174vw, 1.125rem);
}

.text-xs {
  font-size: 1rem;
  line-height: 1.33;
}
.text-xs.fluid-type, .fluid-type .text-xs {
  font-size: clamp(0.9375rem, 0.9049rem + 0.1087vw, 1rem);
}

p,
.p {
  font-size: 1rem;
  line-height: 1.6;
}
p.fluid-type, .fluid-type p,
.p.fluid-type,
.fluid-type .p {
  font-size: clamp(1.125rem, 1.0272rem + 0.3261vw, 1.3125rem);
}

small {
  font-size: 1rem;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: inherit;
  gap: var(--vertical-gap);
}
@media only screen and (min-width: 1024px) {
  .grid {
    gap: 5rem;
  }
}
.grid__col {
  width: 100%;
  flex: 1;
  flex-shrink: 0;
}
@media only screen and (min-width: 1024px) {
  .grid__col.lg\:grid__col--50 {
    max-width: calc(50% - 2.5rem);
    flex-basis: calc(50% - 2.5rem);
  }
}
.grid--reverse {
  flex-direction: row-reverse;
}
@media only screen and (min-width: 1024px) {
  .grid.lg\:grid--reverse {
    flex-direction: row-reverse;
  }
}
.grid--forward {
  flex-direction: row;
}
@media only screen and (min-width: 1024px) {
  .grid.lg\:grid--forward {
    flex-direction: row;
  }
}
.grid--stackable {
  flex-direction: column;
}
.grid--stackable:not(.grid--reverse):not(.lg\:grid--reverse) > * + * {
  margin-block-start: var(--spacer-lg);
}
@media only screen and (min-width: 1024px) {
  .grid--stackable:not(.grid--reverse):not(.lg\:grid--reverse) > * + * {
    margin-block-start: 0;
  }
}
.grid--stackable > .grid__col {
  max-width: 100%;
  flex-basis: 100%;
}
@media only screen and (min-width: 1024px) {
  .grid--stackable > .grid__col {
    max-width: calc(50% - 2.5rem);
    flex-basis: calc(50% - 2.5rem);
  }
}
@media only screen and (min-width: 1024px) {
  .grid--stackable {
    flex-direction: row;
  }
}
.grid--stackable.grid--reverse {
  flex-direction: column-reverse;
}
@media only screen and (min-width: 1024px) {
  .grid--stackable.grid--reverse {
    flex-direction: row-reverse;
  }
}

.stack > * + * {
  margin-block-start: var(--vertical-gap, 1.25em);
}

.stack--gap-sm > * + * {
  --vertical-gap: var(--spacer-sm);
}

.stack--gap-md > * + * {
  --vertical-gap: var(--spacer-md);
}

.stack--gap-lg > * + * {
  --vertical-gap: var(--spacer-lg);
}

.stack--gap-xl > * + * {
  --vertical-gap: var(--spacer-xl);
}

.stack--gap-xxl > * + * {
  --vertical-gap: var(--spacer-xxl);
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--spacer);
}
@media only screen and (min-width: 768px) {
  .container {
    padding: 0 var(--spacer-xl);
  }
}
.container--full {
  max-width: 100%;
}
.container--fluid {
  max-width: 1100px;
  max-width: var(--container--fluid-mw);
}

.header {
  padding: var(--spacer) 0 var(--spacer-lg);
}
@media only screen and (min-width: 768px) {
  .header {
    padding: 0;
  }
}

.footer {
  color: var(--charcoal);
  padding: 3rem 0;
}

.logo {
  z-index: 100;
  max-width: 200px;
  width: 100%;
  display: block;
}
@media only screen and (min-width: 768px) {
  .logo {
    max-width: 100px;
    position: fixed;
    top: 2rem;
    left: 2rem;
  }
}
@media only screen and (min-width: 1400px) {
  .logo {
    max-width: 200px;
  }
}
.logo > * {
  width: 100%;
  display: block;
}

.section {
  position: relative;
  color: var(--white);
  padding: var(--spacer-xl) 0;
}
@media only screen and (min-width: 768px) {
  .section {
    min-height: calc(var(--vh, 1vh) * 100);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: calc(3rem + 100px + 2rem);
    padding-right: 3rem;
  }
}
@media only screen and (min-width: 1400px) {
  .section {
    padding-left: calc(3rem + 200px + 2rem);
    padding-right: calc(3rem + 200px + 2rem);
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.section__inner {
  padding: 0 var(--spacer);
  z-index: 1000;
  max-width: var(--container--fluid-mw);
}
@media only screen and (min-width: 768px) {
  .section__inner {
    padding: 0;
  }
}
@media only screen and (min-width: 768px) {
  .section__inner--narrow {
    max-width: 65ch;
  }
}
.section__jump {
  display: none;
}
@media only screen and (min-width: 768px) {
  .section__jump {
    display: block;
    position: absolute;
    width: 30px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40px;
  }
}
.section__letter {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .section__letter {
    opacity: 0;
    display: block;
    z-index: 10;
    position: absolute;
    max-height: 90%;
    max-width: 90%;
  }
}
.section--intro {
  color: var(--teal);
  padding-top: 0;
}
.section--about {
  background-color: var(--teal);
}
.section--work {
  background-color: var(--yellow);
  color: var(--charcoal);
}
.section--clients {
  background-color: var(--red);
}
.section--contact {
  background-color: var(--charcoal);
  background-image: url("../images/dots-horizontal.png");
  background-image: image-set(url("../images/dots-horizontal.webp") type("image/webp"));
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: auto 2.5rem;
  padding-bottom: calc(var(--spacer-xl) + 2.5rem);
}

.bullet-list {
  display: flex;
  flex-direction: column;
  gap: 0.33rem;
  list-style: none outside none;
  padding-left: var(--spacer-xs);
}
.bullet-list > * {
  display: flex;
  flex-shrink: 0;
  gap: var(--spacer-sm);
}
.bullet-list > *::before {
  content: "";
  display: block;
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: 0 0.35rem;
  min-width: 1.2rem;
  min-height: 1.2rem;
}
.bullet-list--teal > *::before {
  background-image: url(../images/dot-teal.svg);
}
.bullet-list--yellow > *::before {
  background-image: url(../images/dot-yellow.svg);
}
.bullet-list--red > *::before {
  background-image: url(../images/dot-red.svg);
}
.bullet-list--grey > *::before {
  background-image: url(../images/dot-grey.svg);
}
.bullet-list--charcoal > *::before {
  background-image: url(../images/dot-charcoal.svg);
}

.clients {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 100%;
  grid-gap: var(--spacer);
  list-style: none outside none;
  padding: 0;
}
@media only screen and (min-width: 540px) {
  .clients {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
@media only screen and (min-width: 768px) {
  .clients {
    grid-gap: var(--spacer-lg);
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
}
.clients__logo {
  object-fit: contain;
  width: 100%;
  max-width: 7.5rem;
}
@media only screen and (min-width: 768px) {
  .clients__logo {
    max-width: 9rem;
  }
}
@media only screen and (min-width: 1024px) {
  .clients__logo {
    max-width: 10rem;
  }
}

.availability {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-lgr);
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .availability {
    gap: var(--spacer-xl);
  }
}
.availability__value {
  text-transform: uppercase;
}
.availability__value--available {
  color: var(--teal-light);
}
.availability__value--partial {
  color: var(--yellow-light);
}
.availability__value--booked {
  color: var(--red-light);
}

.position:not(:last-child) {
  margin-bottom: var(--spacer-lgr);
}
.position__meta {
  margin: 0 0 var(--spacer);
  display: flex;
  align-items: center;
  gap: 0 0.75rem;
}
.position__title::after, .position__type::after {
  content: "—";
  padding-left: 0.75rem;
}

.breakout {
  display: block;
}
.breakout--sides {
  margin-left: var(--spacer-neg-md);
  margin-right: var(--spacer-neg-md);
  width: calc(100% + var(--spacer-md) + var(--spacer-md));
  max-width: none;
}
@media only screen and (min-width: 768px) {
  .breakout.md\:breakout--reset {
    margin: 0;
    width: inherit;
  }
}

.columns {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  font-size: inherit;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .columns {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: clamp(var(--spacer-lg), 4vw, var(--spacer-xxl));
  }
}

.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

.d-none {
  display: none !important;
}

@media only screen and (min-width: 768px) {
  .md\:d-inline {
    display: inline !important;
  }
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.inherit {
  color: inherit !important;
}

.fc-blue {
  color: var(--blue) !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-sm {
  margin-top: var(--spacer-sm) !important;
}

.mt-md {
  margin-top: var(--spacer-md) !important;
}

.mt-lg {
  margin-top: var(--spacer-lg) !important;
}

.mt-xl {
  margin-top: var(--spacer-xl) !important;
}

.mt-xxl {
  margin-top: var(--spacer-xxl) !important;
}

@media only screen and (min-width: 1024px) {
  .lg\:mt-0 {
    margin-top: 0 !important;
  }
}

@media only screen and (min-width: 1024px) {
  .lg\:mt-huge {
    margin-top: var(--spacer-huge) !important;
  }
}

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

.mb-xs {
  margin-bottom: 2px !important;
}

.mb-sm {
  margin-bottom: var(--spacer-sm) !important;
}

.mb-md {
  margin-bottom: var(--spacer-md) !important;
}

.mb-lg {
  margin-bottom: var(--spacer-lg) !important;
}

.mb-neg-xl {
  margin-bottom: var(--spacer-neg-xl) !important;
}

@media only screen and (min-width: 768px) {
  .md\:mb-0 {
    margin-bottom: 0 !important;
  }
}

@media only screen and (min-width: 1024px) {
  .lg\:mb-0 {
    margin-bottom: 0 !important;
  }
}

@media only screen and (min-width: 768px) {
  .md\:ml-sm {
    margin-left: var(--spacer-sm) !important;
  }
}

.p-0 {
  padding: 0 !important;
}

.py-xl {
  padding-top: var(--spacer-xl) !important;
  padding-bottom: var(--spacer-xl) !important;
}

.py-xxl {
  padding-top: var(--spacer-xxl) !important;
  padding-bottom: var(--spacer-xxl) !important;
}

.gap-sm {
  gap: var(--spacer-sm) !important;
}

.gap-md {
  gap: var(--spacer-md) !important;
}

@media only screen and (min-width: 768px) {
  .md\:gap-md {
    gap: var(--spacer-md) !important;
  }
}

.gap-lg {
  gap: var(--spacer-lg) !important;
}

.gap-lgr {
  gap: var(--spacer-lgr) !important;
}

.gap-xl {
  gap: var(--spacer-xl) !important;
}

.align-center {
  align-items: center !important;
}

.justify-center {
  justify-content: center !important;
}

.direction-column {
  flex-direction: column !important;
}

@media only screen and (min-width: 540px) {
  .sm\:direction-row {
    flex-direction: row !important;
  }
}

.text-right {
  text-align: right !important;
}

@media only screen and (min-width: 1024px) {
  .lg\:text-right {
    text-align: right !important;
  }
}

.delay-1 {
  animation-delay: 0.25s !important;
}

.delay-2 {
  animation-delay: 0.5s !important;
}

.delay-3 {
  animation-delay: 0.75s !important;
}

.delay-4 {
  animation-delay: 1s !important;
}

.fw-normal {
  font-weight: normal !important;
}

.fw-bold {
  font-weight: bold !important;
}

.mw-80 {
  max-width: 80ch !important;
}

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

.cs-list > * {
  display: inline-block;
}
.cs-list > *:not(:last-child)::after {
  content: ", ";
}

.redacted {
  background-color: var(--charcoal);
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .scroll-animate {
      animation: scroll-animate linear forwards;
      animation-timeline: view();
      animation-range-start: entry;
    }
    .scroll-scale-up {
      transform: scale(0);
      animation: scroll-scale-up linear forwards;
      animation-timeline: view();
      animation-range-start: cover 5%;
    }
    .scroll-image {
      animation: scroll-image linear backwards;
      animation-timeline: view();
      animation-range-start: entry;
    }
    .scroll-zoom {
      opacity: 0;
      animation: scroll-zoom linear forwards;
      animation-timeline: view();
      animation-range: entry 50% exit 10%;
    }
  }
}
@keyframes scroll-animate {
  0% {
    transform: translateY(4rem);
  }
  20% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll-scale-up {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scroll-image {
  0% {
    opacity: 0;
    transform: translateY(-6rem);
  }
  25% {
    opacity: 0.7;
    transform: translateY(-2rem);
  }
  50% {
    opacity: 0.8;
    transform: translateY(0);
  }
  100% {
    opacity: 0.8;
    transform: translateY(0);
  }
}
@keyframes scroll-zoom {
  0% {
    opacity: 0.33;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*# sourceMappingURL=main.css.map */