@font-face {
  font-family: ABC Social;
  src: url('../fonts/ABCSocial-Medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: auto;
}

@font-face {
  font-family: ABC Social;
  src: url('../fonts/ABCSocial-Book.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: auto;
}

:root {
  --_swatches---body--background: var(--swatch--white);
  --font--family: "ABC Social", sans-serif;
  --_swatches---body--text: var(--swatch--black);
  --font--size: calc(.875 * var(--size--root));
  --font--height: calc(1.4 * var(--font--size));
  --_typography---body--weight: 500;
  --_typography---paragraph--size: calc(2.5 * var(--_typography---body--size));
  --_typography---paragraph--height: calc(1.4 * var(--_typography---paragraph--size));
  --_typography---paragraph--weight: 400;
  --_typography---underline--offset: 10%;
  --_typography---underline--thickness: var(--_spacing---border--thickness);
  --_spacing---padding--regular: calc(1 * var(--size--root));
  --_spacing---padding--small: calc(.5 * var(--size--root));
  --_swatches---select--background: var(--swatch--yellow);
  --_spacing---nav--height: 2.25rem;
  --_spacing---border--thickness: 1px;
  --_swatches---body--border: var(--_swatches---body--text);
  --_spacing---padding--large: calc(4 * var(--size--root));
  --_spacing---image--height: 65vh;
  --_typography---body--size: calc(.875 * var(--size--root));
  --_typography---body--height: calc(1.4 * var(--font--size));
  --swatch--yellow: #f6ffcc;
  --swatch--black: #1a1a1a;
  --swatch--white: #f5f5f5;
  --size--root: 1rem;
  --_swatches---body--underline: var(--_swatches---body--text);
  --_swatches---select--color: var(--_swatches---body--text);
  --border--thickness: 1px;
  --padding--small: calc(.5 * var(--font--size));
  --padding--regular: calc(1 * var(--font--size));
  --padding--large: 0px;
}

body {
  background-color: var(--_swatches---body--background);
  font-family: var(--font--family);
  color: var(--_swatches---body--text);
  font-size: var(--font--size);
  line-height: var(--font--height);
  font-weight: var(--_typography---body--weight);
  font-feature-settings: "liga" on, "ss01" off, "ss02" off, "ss03" on;
  transition-property: background-color;
  transition-duration: .2s;
  transition-timing-function: ease;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: bold;
  line-height: 36px;
}

p {
  font-size: var(--_typography---paragraph--size);
  line-height: var(--_typography---paragraph--height);
  font-weight: var(--_typography---paragraph--weight);
  margin-bottom: 0;
}

a {
  text-underline-offset: var(--_typography---underline--offset);
  text-decoration: underline;
  text-decoration-thickness: var(--_typography---underline--thickness);
  color: inherit;
  -webkit-text-decoration-color: inherit;
  text-decoration-color: inherit;
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease;
}

a:hover {
  text-underline-offset: var(--_typography---underline--offset);
  text-decoration-thickness: var(--_typography---underline--thickness);
  text-decoration-color: #0000;
}

img {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  display: inline-block;
}

.nav-bar {
  z-index: 2;
  grid-column-gap: var(--_spacing---padding--regular);
  grid-row-gap: var(--_spacing---padding--regular);
  pointer-events: auto;
  padding: var(--_spacing---padding--small) var(--_spacing---padding--regular);
  grid-template: "Logo Slogan Button"
  / 1fr 2fr 1fr;
  grid-auto-columns: 1fr;
  align-self: stretch;
  transition-property: background-color;
  transition-duration: .2s;
  transition-timing-function: ease;
  display: grid;
  position: relative;
}

.nav-bar:hover {
  background-color: var(--_swatches---select--background);
}

.main {
  flex-flow: row;
  flex: 1;
  align-self: stretch;
  width: 100vw;
  display: flex;
  overflow: scroll hidden;
}

.footer {
  z-index: 3;
  min-height: var(--_spacing---nav--height);
  grid-column-gap: var(--_spacing---padding--regular);
  grid-row-gap: var(--_spacing---padding--regular);
  border-top-style: solid;
  border-top-width: var(--_spacing---border--thickness);
  border-top-color: var(--_swatches---body--border);
  padding: var(--_spacing---padding--small) var(--_spacing---padding--regular);
  grid-template: "Client Category Button"
  / 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-self: stretch;
  display: grid;
  position: relative;
}

.page {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: var(--_swatches---body--background);
  flex-flow: column;
  grid-template-rows: max-content 1fr;
  grid-template-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 100dvh;
  display: grid;
  overflow: clip;
}

.nav-logo {
  cursor: wait;
}

.nav-button {
  background-color: unset;
  padding: unset;
}

.nav-button:hover {
  text-decoration-color: #1a1a1a00;
}

.nav {
  z-index: 100;
  min-height: var(--_spacing---nav--height);
  border-bottom: var(--_spacing---border--thickness) solid var(--_swatches---body--border);
  pointer-events: none;
  position: static;
  inset: 0% 0% auto;
}

.about {
  z-index: 1;
  padding-right: var(--_spacing---padding--regular);
  padding-bottom: var(--_spacing---padding--regular);
  padding-left: var(--_spacing---padding--regular);
  grid-column-gap: var(--_spacing---padding--large);
  grid-row-gap: var(--_spacing---padding--large);
  background-color: var(--_swatches---select--background);
  pointer-events: auto;
  padding-top: calc(var(--_spacing---padding--regular)  + var(--_spacing---nav--height));
  flex-flow: column;
  align-self: stretch;
  height: 100dvh;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: hidden scroll;
}

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

.about-details {
  grid-column-gap: var(--_spacing---padding--large);
  grid-row-gap: var(--_spacing---padding--large);
  grid-template: "footer content"
  / 1fr 1fr;
  display: grid;
}

.about-details__content {
  grid-column-gap: var(--_spacing---padding--large);
  grid-row-gap: var(--_spacing---padding--large);
  flex-flow: column;
  display: flex;
}

.about-details__grid {
  grid-column-gap: var(--_spacing---padding--regular);
  grid-row-gap: var(--_spacing---padding--regular);
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.about-details__figure {
  grid-column-gap: var(--_spacing---padding--small);
  grid-row-gap: var(--_spacing---padding--small);
  background-color: var(--_swatches---select--background);
  flex-flow: column;
  margin-bottom: 0;
  display: flex;
}

.about-details__image {
  mix-blend-mode: multiply;
  width: 100%;
}

.about-details__caption {
  text-align: left;
  margin-top: 0;
  margin-bottom: -.45cap;
}

.table {
  flex: 1;
  align-self: start;
  width: 100%;
}

.table-head {
  text-align: left;
  text-transform: uppercase;
}

.table-body {
  justify-content: flex-start;
  align-items: flex-start;
}

.table-alignment--right {
  text-align: right;
  font-feature-settings: "liga" on, "ss01" off, "ss02" off, "ss03" on;
}

.about-details__footer {
  margin-bottom: -.45cap;
}

.table-row--collaborator {
  grid-column-gap: var(--_spacing---padding--regular);
  grid-row-gap: var(--_spacing---padding--regular);
  grid-template: "Name Name Name Name Industry Country"
  / 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.project {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-right: var(--_spacing---border--thickness) solid var(--_swatches---body--border);
  flex-flow: column;
  flex: none;
  grid-template-rows: 1fr max-content;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: flex;
  position: relative;
}

.project:last-child {
  border-right-style: none;
  border-right-color: #000;
}

.slider {
  height: var(--_spacing---image--height);
  background-color: var(--_swatches---select--background);
}

.slider.is--horizontal {
  width: calc((var(--_spacing---image--height) / 10) * 16);
}

.slider.is--vertical {
  width: calc((var(--_spacing---image--height) / 5) * 4);
}

.slider-arrow {
  width: 50%;
}

.slider-arrow.is--left {
  cursor: w-resize;
  inset: 0% auto 0% 0%;
}

.slider-arrow.is--right {
  cursor: e-resize;
  inset: 0% 0% 0% auto;
}

.slider-nav {
  display: none;
}

.projects {
  display: flex;
}

.content {
  display: none;
}

.slide-content {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.slide-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.slider-wrapper {
  z-index: 1;
  padding: var(--_spacing---padding--large);
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.info {
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: var(--_spacing---nav--height);
  z-index: 2;
  grid-column-gap: var(--_spacing---padding--large);
  grid-row-gap: var(--_spacing---padding--large);
  background-color: var(--_swatches---body--background);
  padding: var(--_spacing---padding--regular);
  flex-flow: column;
  justify-content: space-between;
  display: none;
  position: absolute;
  overflow: hidden scroll;
}

.info-blurb {
  margin-top: -1cap;
}

.info-blurb p {
  margin-bottom: 3.0625rem;
}

.info-details {
  grid-column-gap: 0px;
  grid-row-gap: var(--_spacing---padding--large);
  grid-template: ". Details"
  / 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 30ch;
  margin-bottom: -.45cap;
}

.info-details p {
  font-size: var(--_typography---body--size);
  line-height: var(--_typography---body--height);
  font-weight: var(--_typography---body--weight);
}

.info-details h2 {
  font-size: var(--_typography---body--size);
  line-height: var(--_typography---body--height);
  font-weight: var(--_typography---body--weight);
  text-transform: uppercase;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.row-text p {
  font-size: var(--_typography---body--size);
  line-height: var(--_typography---body--height);
  font-weight: var(--_typography---body--weight);
}

.nav-button-text {
  text-underline-offset: var(--_typography---underline--offset);
  -webkit-text-decoration: underline #1a1a1a00;
  text-decoration: underline #1a1a1a00;
  text-decoration-thickness: var(--_typography---underline--thickness);
  transition: all .2s;
}

@media screen and (max-width: 991px) {
  .main {
    overflow: visible auto;
  }

  .nav-button {
    position: relative;
  }

  .about-details {
    grid-template: "content"
                   "footer"
                   / 1fr;
  }

  .project {
    border-bottom-style: none;
    border-right-style: none;
    border-bottom-width: var(--_spacing---border--thickness);
    border-bottom-color: var(--_swatches---body--border);
    height: calc(100dvh - var(--_spacing---nav--height));
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100vw;
  }

  .project:last-child {
    border-bottom-style: none;
  }

  .slider {
    height: 100%;
  }

  .slider.is--horizontal {
    aspect-ratio: 16 / 10;
    width: 100%;
    height: auto;
  }

  .slider.is--vertical {
    aspect-ratio: 4 / 5;
    align-self: center;
    width: 100%;
    height: auto;
  }

  .projects {
    scroll-snap-type: y mandatory;
    height: calc(100dvh - var(--_spacing---nav--height)  + var(--_spacing---border--thickness));
    flex-flow: column;
    overflow: hidden scroll;
  }
}

@media screen and (max-width: 767px) {
  body {
    --_typography---body--weight: 500;
    --_typography---paragraph--size: calc(1.35 * var(--_typography---body--size));
    --_typography---paragraph--height: calc(1.4 * var(--_typography---paragraph--size));
    --_typography---paragraph--weight: 400;
    --_typography---underline--offset: 10%;
    --_typography---underline--thickness: var(--_spacing---border--thickness);
    --_typography---body--size: calc(.875 * var(--size--root));
    --_typography---body--height: calc(1.4 * var(--font--size));
  }

  .nav-bar {
    grid-row-gap: 0rem;
    grid-template-columns: max-content 2fr max-content;
    grid-template-areas: "Logo Logo Button";
  }

  .footer {
    grid-row-gap: 0px;
    grid-template-columns: max-content 1fr max-content;
    grid-template-areas: "Client Category Button";
  }

  .nav-slogan {
    display: none;
  }

  .background--yellow {
    background-color: var(--_swatches---select--background) !important;
  }

  .about-details__grid {
    grid-column-gap: calc(.5 * var(--_spacing---padding--large));
    grid-row-gap: calc(.5 * var(--_spacing---padding--large));
    grid-template-columns: 1fr;
  }

  .project {
    border-bottom-style: solid;
    height: auto;
  }

  .slider-wrapper {
    padding: var(--_spacing---padding--regular);
  }

  .info-blurb {
    margin-top: -.5cap;
  }

  .info-blurb p {
    margin-bottom: 1.53125rem;
  }
}

@media screen and (max-width: 479px) {
  .page {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: max-content 1fr;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
  }

  .table-alignment--right {
    padding-left: var(--_spacing---padding--regular);
  }

  .table-row--collaborator {
    display: table-row;
  }

  .project {
    height: calc(100dvh - var(--_spacing---nav--height));
    border-bottom-style: none;
  }

  .info-blurb {
    -webkit-text-stroke-width: .02em;
  }
}

#w-node-_96a6f9ad-94f3-2636-9906-58f5052c6603-052c6602 {
  grid-area: Client;
  justify-self: start;
}

#w-node-_96a6f9ad-94f3-2636-9906-58f5052c6605-052c6602 {
  grid-area: Category;
  justify-self: center;
}

#w-node-_34416f21-e27a-cea4-006c-837fffcc00aa-052c6602 {
  grid-area: Button;
  justify-self: end;
}

#w-node-e445f517-4325-3e85-ca2f-a911ec84d0b9-ec84d0b8 {
  grid-area: Name;
}

#w-node-e445f517-4325-3e85-ca2f-a911ec84d0bc-ec84d0b8 {
  grid-area: Industry;
}

#w-node-e6b68dfd-8018-ea53-51cc-f4ecc0b3b878-ec84d0b8 {
  grid-area: Country;
}

#w-node-_37581550-0ca3-f3c1-e837-540ca95f5956-a95f5954 {
  grid-area: Logo;
  justify-self: start;
}

#w-node-_37581550-0ca3-f3c1-e837-540ca95f5959-a95f5954 {
  grid-area: Slogan;
  justify-self: center;
}

#w-node-_37581550-0ca3-f3c1-e837-540ca95f595c-a95f5954 {
  grid-area: Button;
  justify-self: end;
}

#w-node-_37581550-0ca3-f3c1-e837-540ca95f596a-a95f5954 {
  grid-area: content;
}

#w-node-d763ae96-04fc-3404-c551-f1d5bb3fde76-a95f5954 {
  grid-area: footer;
  place-self: end baseline;
}

@media screen and (max-width: 767px) {
  #w-node-_96a6f9ad-94f3-2636-9906-58f5052c6603-052c6602, #w-node-_96a6f9ad-94f3-2636-9906-58f5052c6605-052c6602 {
    justify-self: start;
  }

  #w-node-_34416f21-e27a-cea4-006c-837fffcc00aa-052c6602 {
    justify-self: end;
  }

  #w-node-_37581550-0ca3-f3c1-e837-540ca95f5959-a95f5954 {
    justify-self: start;
  }
}


@font-face {
  font-family: 'ABC Social';
  src: url('../fonts/ABCSocial-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'ABC Social';
  src: url('../fonts/ABCSocial-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: auto;
}