:root {
  --white: white;
  --logowrap: #f0f0f0;
  --black: black;
}

.w-layout-layout {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-auto-columns: 1fr;
  justify-content: center;
  padding: 20px;
}

.w-layout-cell {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

body {
  color: #333;
  font-family: Inter, sans-serif;
  font-feature-settings: "calt" 1;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
}

p {
  color: #666;
  margin-bottom: 10px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

a, a:visited {
  color: #666;
}

li {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 256px;
  height: 32px;
  margin-bottom: 14px;
  padding-left: 14px;
  padding-right: 14px;
  display: flex;
}

.hero-section {
  background-color: #fff;
  height: 100svh;
  position: relative;
  overflow: clip visible;
}

.nav {
  z-index: 3;
  margin-left: 42px;
  margin-right: 42px;
  padding-top: max(60px, 5.37vh);
  display: flex;
  position: relative;
}

.nav-l {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex: 1;
  align-items: center;
  display: flex;
}

.nav-divider {
  color: #e6e6e6;
}

.nav-divider.pwba-item.pt {
  display: none;
}

.nav-divider.work-sl, .nav-divider.about-sl, .nav-divider.journal-sl, .nav-divider.sf-sl {
  will-change: transform;
}

.nav-m {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav-r {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.nav-link-2 {
  color: #999;
}

.nav-link-2.anywhere, .nav-link-2.inde, .nav-link.work, .nav-link.about, .nav-link.journal, .nav-link.contact, .nav-link.sf {
  will-change: transform;
}

.body {
  color: #666;
  letter-spacing: -.009em;
  scroll-behavior: smooth;
  font-family: Inter, sans-serif;
}

.body.scroll-container {
  scroll-behavior: smooth;
}

.dash-1o {
  will-change: transform;
}

.backing {
  background-color: #9797970d;
  border-radius: 20px;
  width: 568.85px;
  height: 600px;
  display: none;
  position: absolute;
  inset: auto 42px -50px auto;
}

.client-grid {
  position: relative;
}

.client-grid.transition {
  z-index: 9999;
  outline-offset: 0px;
  opacity: 0;
  will-change: transform, opacity;
  outline: 3px #666;
  height: 100svh;
  margin-top: -60vh;
  display: flex;
  overflow: auto;
}

.client-grid.conetoinoeint {
  outline-offset: 0px;
  will-change: transform, opacity;
  outline-offset: 0px;
  will-change: transform, opacity;
  outline: 3px #666;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  display: flex;
  overflow: auto;
}

.heading {
  z-index: 2;
  will-change: transform;
  filter: invert();
  mix-blend-mode: exclusion;
  max-width: 770px;
  margin-top: 0;
  margin-left: 42px;
  padding-bottom: 1%;
  position: relative;
  top: 140px;
  overflow: visible;
}

.hero-img {
  z-index: 0;
  mix-blend-mode: darken;
  will-change: transform;
  background-color: #fbfbfb;
  width: 48vw;
  min-width: 520px;
  position: absolute;
  bottom: calc(22.6vw - 383.7px);
  right: calc(727.676px - 64.4vw);
  overflow: visible;
}

.hero-img-backing {
  position: absolute;
  background-color: #fbfbfb;
  z-index: 0;
  pointer-events: none;
  width: 48vw;
  min-width: 520px;
  height: 60vh;
  bottom: calc(22.6vw - 383.7px);
  right: calc(727.676px - 64.4vw);
}

.hero-img-backing-cover {
  position: absolute;
  background-color: #fff;
  z-index: 0;
  pointer-events: none;
  width: 48vw;
  min-width: 520px;
  height: 60vh;
  bottom: calc(22.6vw - 383.7px);
  right: calc(727.676px - 64.4vw);
  transform-origin: bottom;
  transform: scaleY(0);
  will-change: transform;
}

@media screen and (min-width: 1201px) {
  .hero-img-backing,
  .hero-img-backing-cover {
    width: 642px;
    height: 88.93vh;
    right: 80px;
    bottom: -60px;
    min-width: 0;
  }
}

@media screen and (min-width: 1920px) {
  .hero-img-backing,
  .hero-img-backing-cover {
    width: 33.44vw;
    right: 4.17vw;
    bottom: -3.125vw;
  }
}

.responsive-body-text {
  color: #333;
  will-change: transform;
}

.quick-stack {
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  flex: 1;
  height: 300vh;
  padding: 78px 42px 42px;
  overflow: auto;
}

.cell {
  justify-content: center;
  align-items: center;
  height: auto;
  min-height: 148px;
}

.oscilar-logo {
  width: 85px;
}

.literati-logo {
  width: 60px;
}

.midjourney-logo {
  width: 121px;
}

.popl-logo {
  width: 39px;
}

.turntable-logo {
  width: 102px;
}

.poseidon-logo {
  width: 76px;
}

.refractal-logo {
  width: 94px;
}

.primer-logo {
  width: 96px;
}

.list {
  width: 100%;
  padding-left: 26px;
  position: absolute;
  inset: 100px auto auto 0%;
}

.list-2 {
  padding-top: 0;
  padding-left: 26px;
  position: absolute;
  inset: auto auto 10px 0%;
}

.content-section {
  background-color: #fff;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: -40vh;
  display: flex;
  position: relative;
}

.content-section.transition {
  z-index: 4;
  max-height: 100svh;
  margin-top: -40vh;
  overflow: hidden;
}

.sidebar {
  z-index: 10;
  background-color: #fff;
  border-right: .5px solid #fff0;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 300px;
  height: 100vh;
  display: flex;
  position: absolute;
  overflow: visible;
}

.sidebar:hover {
  border-right: .5px solid #ededed;
}

.sidebar-expanded-child {
  flex: 1;
  height: 100vh;
  min-height: 875px;
  position: relative;
}

.case-study-1 {
  flex: 1;
  padding-top: 42px;
  padding-left: 42px;
  padding-right: 42px;
}

.image-13 {
  z-index: 1;
  border-radius: 2px;
  width: 100%;
}

.paragraph {
  color: #404040;
  width: 100%;
  max-width: 710px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
}

.heading-2 {
  color: #333;
  width: 100%;
  max-width: 710px;
  margin-left: auto;
  margin-right: auto;
}

.sidebar-collapsed {
  background-color: var(--white);
  border-right: 1px solid #f7f7f7;
  flex-flow: column;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 60px;
  min-width: 60px;
  height: 100vh;
  display: flex;
}

.collapse-sidebar-top {
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 30px;
  padding-bottom: 30px;
  display: flex;
}

.text-block-7 {
  text-align: right;
  writing-mode: sideways-lr;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-block-7-copy {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  text-align: right;
  writing-mode: sideways-lr;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.pwba-sticky-child {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  mix-blend-mode: exclusion;
  filter: invert();
  flex-flow: row;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: 310px;
  margin-top: -60px;
  margin-bottom: -140px;
  margin-left: 42px;
  display: flex;
  position: sticky;
  top: 60px;
}

.pbwa-sticky {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  height: 0;
  margin-bottom: 60px;
  display: block;
  position: relative;
}

.pwba-static {
  z-index: 99;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: row;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  margin-left: 42px;
  display: flex;
  position: absolute;
  top: 60px;
}

.sidenav-links {
  justify-content: flex-start;
  align-items: center;
  height: 32px;
  padding-left: 14px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.primary-list {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  width: 100%;
  padding-left: 26px;
  padding-right: 26px;
  display: flex;
  position: absolute;
  inset: 150px auto auto 0%;
}

.secondary-list {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  width: 100%;
  padding-top: 0;
  padding-left: 26px;
  padding-right: 26px;
  display: flex;
  position: absolute;
  inset: auto auto 34px 0%;
}

.text-block-8 {
  flex: 1;
}

.image-15 {
  opacity: .5;
  height: 18px;
}

.about-section {
  display: block;
  overflow: hidden;
}

.about-img-2 {
  width: 33%;
  position: absolute;
  bottom: -9vw;
}

.div-block-8 {
  width: 600px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: 42px;
}

.contact-content {
  margin-top: 200px;
  margin-left: 42px;
  margin-right: 42px;
}

.contact-items {
  grid-column-gap: 72px;
  grid-row-gap: 72px;
  margin-top: 40px;
  display: flex;
  width: max-content;
}

.contact-item2 {
  width: 260px;
}

.contact-item-label {
  color: #999;
  margin-bottom: 5px;
}

.paragraph-2 {
  margin-bottom: 0;
}

.link {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex: 0 auto;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.div-block-11 {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  display: flex;
}

.text-block-9 {
  margin-bottom: 10px;
  font-size: 40px;
  line-height: 40px;
}

.post-transition-content {
  height: 100vh;
  padding-top: 42px;
  overflow: hidden;
}

.logo-cell-link {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.contact-headline {
  color: #333;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.logo-container {
  background-color: #fcfcfc;
  border: 1px solid #fafafa;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.logo {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.logo-background {
  opacity: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.logo-background.clay-bg, .logo-background.od-bg {
  z-index: 0;
  background-color: #f7f7f7;
}

.logo-background.pb-bg, .logo-background.ib-bg, .logo-background.pow-bg, .logo-background.literati-bg, .logo-background.oscilar-bg, .logo-background.ttfm-bg, .logo-background.popl-bg, .logo-background.primer-bg, .logo-background.refractal-bg, .logo-background.mj-bg, .logo-background.pr-bg {
  background-color: #f7f7f7;
}

.clay-logo {
  z-index: 0;
  width: 60px;
  position: absolute;
}

.logo-grey {
  position: absolute;
}

.logo-color {
  opacity: 0;
}

.od-logo {
  width: 182px;
}

.pb-logo {
  width: 133px;
}

.ib-logo {
  width: 118px;
}

.pow-logo {
  width: 73px;
}

.pwba-item {
  font-size: 14px;
}

.hero-wfa {
  position: absolute;
  bottom: calc(max(60px, 5.37vh) - 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
}

.hero-wfa-wf {
  margin-right: 20px;
  display: flex;
  column-gap: 20px;
  align-items: center;
  white-space: nowrap;
  color: #999;
}

.hero-wfa-pa {
  background-color: #fff;
  padding: 10px 14px;
  display: flex;
  column-gap: 20px;
  align-items: center;
}

.llm-overlay {
  position: fixed;
  inset: 0;
  background-color: #fff;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.llm-overlay-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

body.llm-hover-active .llm-overlay {
  opacity: 1;
}

html:has(body.llm-hover-active),
body.llm-hover-active {
  overflow: hidden;
}

.llm-overlay .hero-wfa-pa {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.llm-overlay .hero-wfa-wf {
  visibility: hidden;
}

.hero-line {
  position: absolute;
  left: calc(max(42px, 2.19vw) + 310px + 45px);
  right: calc(50% + 170px);
  bottom: calc(max(60px, 5.37vh) + 9px);
  height: 1px;
  background-color: #E5E5E5;
  opacity: 0.6;
  pointer-events: none;
  z-index: 9;
}

.hero-row {
  display: contents;
}

@media (min-width: 992px) {
  .hero-row {
    display: flex;
    align-items: center;
    position: absolute;
    left: max(42px, 2.19vw);
    right: calc(50% - 112px);
    bottom: calc(max(60px, 5.37vh) - 10px);
    z-index: 10;
  }

  .hero-row > .pwba-gsapvariant {
    position: static;
    margin-left: 0;
    bottom: auto;
    flex: 0 0 max-content;
  }

  .hero-row > .hero-line {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 1;
    margin: 0 45px;
  }

  .hero-row > .hero-wfa {
    position: static;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .llm-overlay .hero-wfa {
    left: auto;
    right: calc(50% - 112px);
    transform: none;
  }
}

.hero-line::before,
.hero-line::after {
  content: "";
  position: absolute;
  right: 0;
  width: clamp(4px, 0.35vw, 10px);
  height: 1px;
  background: linear-gradient(to right, #E5E5E5, #D1D1D1);
  transform-origin: right center;
}

.hero-line::before {
  transform: rotate(-45deg);
}

.hero-line::after {
  transform: rotate(45deg);
}

@media screen and (max-width: 991px) {
  .hero-line { display: none; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-row {
    display: flex;
    align-items: center;
    position: absolute;
    left: max(42px, 2.19vw);
    bottom: calc(max(60px, 5.37vh) - 10px);
    width: max-content;
    z-index: 10;
  }
  .hero-row > .pwba-gsapvariant {
    position: static;
    margin-left: 0;
    bottom: auto;
    flex: 0 0 max-content;
  }
  .hero-row > .hero-wfa {
    position: static;
    bottom: auto;
    left: auto;
    transform: none;
    margin-left: 32px;
  }
  .nav-divider.pwba-item.pt { display: none; }
}


.pwba-item.anything {
  color: #999;
}

.pwba-item.sf {
  display: none;
}

.pwba-item.anywhere {
  color: #999;
  display: none;
}

.journal-div {
  position: relative;
}

.tooltip-wrapper {
  opacity: 0;
  background-color: #fafbfe;
  border-radius: 4px;
  display: block;
  position: absolute;
  top: 34px;
  left: -19px;
}

.journal-div:hover .tooltip-wrapper.about-tooltip {
  opacity: 1;
}

.text {
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  width: 66px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  position: relative;
}

.tooltip-container {
  z-index: 3;
  background-color: #3d3d3d;
  border-radius: 2px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 14px;
  position: relative;
}

.tooltip-diamond {
  z-index: 2;
  background-color: #3d3d3d;
  border-radius: 2px;
  width: 16px;
  height: 16px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: -4px 0% auto;
  transform: rotate(45deg);
  box-shadow: 0 -3px 8px #2d3e500f;
}

.link-tp {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex: 0 auto;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.sidebars-container {
  z-index: 2;
  height: 100vh;
  position: sticky;
  top: 0;
}

.content-darken {
  z-index: 3;
  opacity: 0;
  background-color: #1113;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
}

.div-block-13 {
  background-color: #fafafa;
  height: 100%;
  margin-top: 42px;
}

.sidebar-toggle {
  z-index: 10;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  opacity: .09;
  background-color: #768bad47;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: .5px;
  display: block;
  position: absolute;
  top: 0%;
  bottom: 0%;
  right: 0;
}

.sidebar-collapsed-copy {
  background-color: var(--white);
  border-right: 1px solid #f7f7f7;
  flex-flow: column;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 60px;
  min-width: 60px;
  height: 100vh;
  display: flex;
}

.sidebars-container-1280plus {
  z-index: 10;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 300px;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
}

.sidebar-tip {
  z-index: 10;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: none;
  position: absolute;
  top: 200px;
  left: 320px;
}

.sidebar-tip-content {
  letter-spacing: 0;
  white-space: nowrap;
  flex: 1;
  font-size: 12px;
  line-height: 12px;
}

.sidebar-expanded-wrap {
  width: 300px;
  height: 100vh;
  display: flex;
}

.text-tip {
  z-index: 10;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: var(--white);
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  height: 26px;
  padding: 6px 8.5px 6px 9px;
  display: flex;
  box-shadow: 0 2px 5px #00000005;
}

.mac-hotkey-tip {
  z-index: 10;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: var(--white);
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 26px;
  padding: 6px;
  display: flex;
  box-shadow: 0 2px 5px #00000005;
}

.image-16 {
  flex: 0 auto;
  width: 19px;
  height: 10px;
}

.hero-img-cover {
  z-index: 1;
  opacity: 1;
  will-change: transform;
  transform-origin: bottom;
  background-color: #fff;
  width: 48vw;
  min-width: 520px;
  height: 100%;
  position: absolute;
  bottom: calc(22.6vw - 383.7px);
  right: calc(727.676px - 64.4vw);
  overflow: visible;
  transform: scaleY(0);
}

.steph-zhao, .independent-designer {
  display: flex;
}

.independent-designer.has-words {
  margin-right: 105px;
}

.heading-text {
  z-index: 2;
  color: #333;
  letter-spacing: -.042em;
  will-change: transform;
  font-size: 60px;
  font-weight: 400;
  line-height: 100%;
}

.heading-cover {
  will-change: transform;
  transform-origin: bottom;
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  transform: scaleY(0);
}

.pwba-gsapvariant {
  z-index: 10;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: row;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: 310px;
  margin-left: max(42px, 2.19vw);
  display: flex;
  position: absolute;
  bottom: max(60px, 5.37vh);
}

.pwba-clientgrid {
  z-index: 10;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: row;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: 310px;
  display: flex;
  position: sticky;
  top: max(85px, 7.61vh);
}

.image-13-cover2 {
  z-index: 2;
  will-change: transform;
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.image-13-wrapper {
  width: 100%;
  margin-bottom: 120px;
  position: relative;
}

.mobile-work-list {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  margin-bottom: 100px;
  margin-left: 42px;
  margin-right: 42px;
  padding-top: 40px;
  display: flex;
  position: relative;
}

.m-client-list-blurb {
  grid-column-gap: 130px;
  grid-row-gap: 130px;
  flex-flow: column;
  max-width: 600px;
  display: flex;
}

.m-head {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex: 1;
  align-items: center;
  display: flex;
}

.m-clinet1 {
  margin-top: 36px;
}

.divier {
  opacity: .17;
  background-color: #000;
  width: 100%;
  height: 1px;
  margin-bottom: 6px;
}

.divier.i {
  width: 100%;
}

.mclientlist-logo {
  margin-top: 40px;
  margin-bottom: 10px;
}

.text-span {
  letter-spacing: 0;
}

.div-block-21 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}

.co-bio {
  margin-bottom: 20px;
}

.mobilework {
  min-height: 100vh;
  display: none;
}

.titl-copy {
  width: 50%;
  min-width: 300px;
  max-width: 540px;
}

.div-block-24 {
  width: 100%;
  height: 100%;
}

.div-block-25 {
  display: none;
}

.nav-r-copy {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  display: none;
}

.div-block-28 {
  display: none;
}

.claycasestudy {
  padding-bottom: 0;
}

.content-transition {
  margin-top: -375px;
}

.content-transition.scrollup {
  height: 375px;
  margin-top: 0;
}

.writing {
  padding-bottom: 375px;
}

.writing.scrollup {
  padding-bottom: 0;
}

.blue {
  background-color: #0048ff;
  height: 100vh;
}

.anotherone {
  padding-bottom: 300px;
}

.next-project {
  margin-right: 42px;
}

.next-and-scrollbar {
  display: flex;
}

.scroll-progress-section {
  flex: 1;
  display: block;
}

.scroll-progress-wrapper {
  background-color: #ececec;
  border-radius: 20px;
  width: 300px;
  height: 6px;
  overflow: hidden;
}

.scroll-progress-bar {
  background-color: #666;
  border-radius: 20px;
  width: 0%;
  height: 100%;
}

.red {
  background-color: #eb5b5b;
  height: 100vh;
}

.yellow {
  background-color: #ebd05b;
  height: 100vh;
}

.green {
  background-color: #2cac5f;
  height: 100vh;
}

.sidebar-spacer {
  flex-shrink: 0;
  width: 300px;
  height: 100vh;
  position: sticky;
  top: 0;
}

.div-block-29 {
  width: 20px;
  height: 20px;
  margin-top: 60px;
  margin-left: 42px;
}

.div-block-29 img {
  width: 100%;
  height: auto;
  display: block;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 0.25s ease;
}

.div-block-29:hover img {
  clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%);
}

.sky {
  background-color: #81cce5;
  height: auto;
  width: 100%;
  display: block;
}

.newwww {
  will-change: opacity;
  background-color: #ffb9b9;
  justify-content: flex-start;
  align-items: flex-end;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.case-study-1transition {
  flex: 1;
  padding-top: 42px;
  padding-left: 42px;
  padding-right: 42px;
  position: relative;
}

.div-block-9 {
  width: 600px;
  margin-top: 60px;
  margin-left: auto;
  margin-right: 42px;
}

.new-experiment {
  position: relative;
}

.new-experiment.transition {
  z-index: 9999;
  outline-offset: 0px;
  opacity: 0;
  will-change: transform, opacity;
  outline: 3px #666;
  height: 100svh;
  margin-top: -60vh;
  display: block;
  overflow: auto;
}

.new-experiment.bottom-aligned {
  outline-offset: 0px;
  will-change: transform, opacity;
  outline: 3px #666;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.gallery-section {
  flex-flow: column;
  padding-left: 42px;
  padding-right: 42px;
  display: flex;
}

.galleryintro {
  max-width: 617px;
  margin-top: 304px;
}

.galleryintro.offset {
  transform: none;
}

.gallerylist {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  flex-flow: column;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  max-width: 1134px;
  margin-top: 70px;
  margin-bottom: 40px;
  display: flex;
}

.galleryheading {
  color: #333;
  letter-spacing: -.08px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 120%;
}

.gallerydesript {
  color: #666;
  letter-spacing: -.18px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 136%;
}

.galleryintro-meta {
  color: #999;
  letter-spacing: -.18px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 136%;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 1.36em;
  display: flex;
}

.text-block-19 {
  letter-spacing: -.18px;
  font-size: 14px;
  line-height: 136%;
}

.text-block-19 strong {
  color: #333;
  font-weight: 500;
}

.clay-case-copy {
  flex-direction: column;
  gap: 28px;
  display: flex;
}

.clay-post-copy {
  width: 100%;
  max-width: 681px;
  margin-left: auto;
  margin-right: auto;
  align-items: flex-start;
  gap: 0;
}

.heading-2.clay-post-heading {
  width: 100%;
  max-width: 681px;
  margin-left: auto;
  margin-right: auto;
}

.clay-case-copy p {
  margin: 0;
}

.clay-post-copy .paragraph {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-bottom: 0;
  font-size: 14px;
  line-height: 1.32;
}

.clay-post-copy .paragraph + .paragraph {
  margin-top: 28px;
}

.clay-case-asset {
  width: 100%;
  margin-top: 52px;
  margin-bottom: 0;
}

.clay-case-asset img {
  width: 100%;
  height: auto;
  display: block;
}

.clay-case-use-cases {
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

.clay-case-caption {
  color: #9a9a9a;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 0;
  font-kerning: normal;
  font-size: 12px;
  line-height: 1.35;
}

.clay-case-caption + .paragraph {
  margin-top: 52px;
}

.clay-case-tweet {
  width: calc(100% - 148px);
  max-width: 530px;
  margin-left: auto;
  margin-right: auto;
}

.clay-case-tweet + .paragraph {
  margin-top: 52px;
}

.clay-case-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.galleryitemtext {
  flex: 1;
  justify-content: flex-start;
  align-items: flex-end;
  min-width: 314px;
  max-width: 516px;
  display: flex;
}

.galleryitem {
  grid-column-gap: 16px;
  grid-row-gap: 40px;
  flex-flow: wrap;
  display: flex;
}

.galleryitemimage {
  max-width: 780px;
  margin-right: 24px;
  overflow: hidden;
}

.contact, .contact-copy {
  color: #666;
  letter-spacing: -.18px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 136%;
}

.new-exp-nav-l {
  z-index: 10;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  z-index: 10;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: row;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: 310px;
  display: flex;
  position: sticky;
  top: max(60px, 5.37vh);
}

@media screen and (min-width: 1280px) {
  a {
    text-decoration: none;
  }

  .nav {
    justify-content: flex-start;
    align-items: stretch;
    display: flex;
  }

  .nav-l {
    order: 0;
  }

  .nav-m {
    order: 0;
    justify-content: center;
    align-items: center;
  }

  .nav-r {
    flex: 1;
    order: 0;
    justify-content: flex-end;
    align-items: center;
    display: flex;
  }

  .nav-link-2 {
    color: #a1a1a1;
  }

  .backing {
    width: 642px;
    height: 956px;
    position: absolute;
    bottom: -480px;
  }

  .heading {
    letter-spacing: -3.05px;
    width: 1068px;
    max-width: none;
    font-size: 85px;
    position: absolute;
    top: 50%;
    overflow: visible;
  }

  .hero-img {
    background-color: #fbfbfb;
    border-radius: 20px;
    width: 614px;
    max-width: 614px;
    position: absolute;
    bottom: -7.4vw;
    left: 59.5%;
    right: auto;
  }

  .quick-stack {
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
  }

  .clearcell {
    background-color: #fff;
  }

  .literati-logo {
    width: 60px;
  }

  .turntable-logo {
    width: 102px;
  }

  .refractal-logo {
    width: 88px;
  }

  .list-2 {
    margin-bottom: 0;
    bottom: 30px;
  }

  .sidebar {
    flex: none;
    margin-right: 0;
    display: flex;
    left: 0;
  }

  .text-block-7-copy {
    flex: 0 auto;
  }

  .pwba-sticky-child {
    order: 0;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-top: -74px;
    margin-bottom: -156px;
    top: 60px;
  }

  .pbwa-sticky {
    margin-bottom: 74px;
  }

  .pwba-static {
    order: 0;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .secondary-list {
    margin-bottom: 0;
  }

  .div-block-8 {
    margin-right: 10vw;
  }

  .contact-item-label {
    color: #a1a1a1;
  }

  .link, .link-tp {
    order: 0;
  }

  .sidebars-container {
    justify-content: flex-start;
    align-items: center;
    width: 300px;
    display: flex;
    overflow: visible;
  }

  .sidebar-toggle {
    background-color: #768bad47;
    width: 2px;
    right: -1px;
  }

  .sidebar-collapsed-copy {
    display: flex;
  }

  .sidebars-container-1280plus {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    display: flex;
  }

  .sidebar-tip-content {
    color: #4d4d4d;
    letter-spacing: 0;
    font-size: 12px;
  }

  .hero-img-cover {
    width: 614px;
    max-width: 614px;
    position: absolute;
    bottom: -7.4vw;
    left: 59.5%;
    right: auto;
  }

  .heading-text {
    letter-spacing: -3.05px;
    max-width: none;
    font-size: 85px;
    overflow: visible;
  }

  .pwba-gsapvariant {
    order: 0;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .pwba-clientgrid {
    flex: 0 auto;
    order: 0;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    position: absolute;
  }

  .m-head {
    order: 0;
  }

  .nav-r-copy {
    flex: 1;
    order: 0;
    justify-content: flex-end;
    align-items: center;
  }

  .div-block-9 {
    margin-right: 10vw;
  }

  .new-experiment.transition {
    will-change: opacity;
  }

  .gallery-section {
    flex-flow: row;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }

  .galleryintro {
    flex-flow: column;
    flex: 0 auto;
    justify-content: flex-end;
    align-items: flex-start;
    width: 455px;
    max-width: none;
    height: 100vh;
    margin-top: 0;
    padding-bottom: 40px;
    padding-left: 42px;
    padding-right: 42px;
    display: flex;
  }

  .galleryintro.clay {
    position: fixed;
  }

  .galleryintro.offset {
    transform: translateY(-20vh);
  }

  .gallerylist {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
    flex: 1;
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
    padding: 60px 5% 40px;
  }

  .gallerylist.clay {
    margin-left: 455px;
  }

  .galleryheading {
    font-weight: 400;
  }

  .galleryitem {
    width: 100%;
  }

  .galleryitemimage {
    width: 100%;
    max-width: none;
    margin-right: 0;
  }

  .image-24 {
    width: 100%;
    height: auto;
  }

  .contact-copy {
    display: none;
  }

  .new-exp-nav-l {
    flex: 0 auto;
    order: 0;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    position: absolute;
    top: max(60px, 5.37vh);
  }
}

@media screen and (min-width: 1440px) {
  .hero-section {
    background-color: #fff;
    order: 1;
  }

  .backing {
    z-index: 0;
  }

  .hero-img {
    width: 39vw;
    min-width: 614px;
    max-width: 640px;
    top: auto;
    left: auto;
    right: calc(22.3vw - 351.12px);
  }

  .quick-stack {
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
  }

  .oscilar-logo {
    width: 24%;
  }

  .literati-logo {
    width: 18%;
  }

  .midjourney-logo {
    width: 33%;
  }

  .popl-logo {
    width: 11%;
  }

  .turntable-logo {
    width: 28%;
  }

  .poseidon-logo {
    width: 24%;
  }

  .refractal-logo {
    width: 26%;
  }

  .primer-logo {
    width: 27%;
  }

  .list-2 {
    bottom: 17px;
  }

  .image-13 {
    border-radius: 2px;
  }

  .pwba-static {
    margin-left: max(42px, 3.876vh);
  }

  .text-block-8 {
    flex: 1;
  }

  .about-section {
    order: 1;
  }

  .clay-logo {
    width: 16%;
  }

  .hero-img-cover {
    width: 39vw;
    min-width: 614px;
    max-width: 640px;
    top: auto;
    left: auto;
    right: calc(22.3vw - 351.12px);
  }

  .image-13-cover2 {
    border-radius: 2px;
  }

  .gallery-section {
    flex: 1;
  }

  .gallerylist {
    align-items: center;
    padding-left: 0%;
    padding-right: 4%;
  }

  .text-block-19, .galleryitemtext {
    flex: 1;
  }

  .galleryitem {
    gap: clamp(38px, 10.47vw - 143px, 58px);
    width: calc(43.98vw + 306px);
  }

  .galleryitemimage {
    flex: 2;
    min-width: 640px;
  }

  .responsive-body-text,
  .nav-link-2.inde {
    line-height: 20px;
  }
}

@media screen and (min-width: 1440px) and (max-width: 1559px) {
  .gallerylist {
    align-items: stretch;
    padding-left: 5%;
    padding-right: 5%;
  }

  .galleryitem {
    width: 100%;
  }
}

@media screen and (min-width: 1920px) {
  li {
    max-width: 13.35vw;
    height: 2.63vh;
    margin-bottom: .73vw;
    padding-left: .73vw;
    padding-right: .73vw;
  }

  .nav {
    margin-left: max(42px, 2.19vw);
    margin-right: max(42px, 2.19vw);
    padding-top: max(60px, 5.37vh);
  }

  .nav-l {
    grid-column-gap: .42vw;
    grid-row-gap: .42vw;
  }

  .nav-m {
    grid-column-gap: 1.042vw;
    grid-row-gap: 1.042vw;
  }

  .nav-r {
    grid-column-gap: .9375vw;
    grid-row-gap: .9375vw;
  }

  .nav-link {
    font-size: clamp(14px, .729vw, 999px);
  }

  .nav-link.sf, .body {
    font-size: clamp(14px, .729vw, 999px);
    line-height: clamp(18px, .937vw, 999px);
  }

  .dash-1o {
    font-size: 1.1vw;
  }

  .heading {
    z-index: 10;
    letter-spacing: -.159vw;
    width: 60vw;
    margin-left: max(42px, 2.1875vw);
    font-size: 4.427vw;
  }

  .hero-img {
    width: 33.3vw;
    min-width: 640px;
    max-width: none;
    right: 4vw;
  }

  .quick-stack {
    margin-left: max(42px, 2.19vw);
    margin-right: max(42px, 2.19vw);
    padding-top: max(78px, 6.98vh);
    padding-bottom: max(42px, 3.77vh);
  }

  .popl-logo {
    width: 49px;
  }

  .turntable-logo {
    width: 124px;
  }

  .poseidon-logo {
    width: 107px;
  }

  .refractal-logo {
    width: 116px;
  }

  .primer-logo {
    width: 120px;
  }

  .list {
    padding-left: 1.35vw;
    top: 8.2vh;
  }

  .list-2 {
    width: 100%;
    padding-left: 1.35vw;
    bottom: 2.46vh;
  }

  .content-section {
    justify-content: flex-start;
  }

  .sidebar {
    width: 15.64vw;
  }

  .case-study-1 {
    padding-top: max(42px, 3.77vh);
    padding-left: 2.19vw;
    padding-right: 2.19vw;
  }

  .image-13 {
    vertical-align: baseline;
    flex-flow: row;
    width: 100%;
    display: inline-flex;
  }

  .paragraph {
    width: 31.2vw;
    max-width: none;
    margin-bottom: .82vh;
    padding-bottom: 3.28vh;
    font-size: clamp(14px, .729vw, 999px);
    line-height: max(20px, 1.04vw);
  }

  .heading-2 {
    width: 31.2vw;
    max-width: none;
    margin-top: 1.64vh;
    margin-bottom: .82vh;
    font-size: max(24px, 1.25vw);
    line-height: max(30px, 1.56vw);
  }

  .clay-post-copy,
  .heading-2.clay-post-heading {
    width: 35.469vw;
    max-width: none;
  }

  .clay-post-copy .paragraph {
    font-size: clamp(14px, .729vw, 999px);
    line-height: max(18.5px, .963vw);
  }

  .clay-post-copy .paragraph + .paragraph {
    margin-top: 1.458vw;
  }

  .clay-case-asset {
    margin-top: 2.708vw;
  }

  .clay-case-use-cases {
    margin-bottom: .521vw;
  }

  .clay-case-caption {
    font-size: clamp(12px, .625vw, 999px);
    line-height: max(16.2px, .844vw);
  }

  .clay-case-caption + .paragraph,
  .clay-case-tweet + .paragraph {
    margin-top: 2.708vw;
  }

  .clay-case-tweet {
    width: calc(100% - 7.708vw);
    max-width: 27.604vw;
  }

  .sidebar-collapsed {
    width: 3.125vw;
  }

  .collapse-sidebar-top {
    margin-top: 1.5625vw;
    padding-bottom: 1.5625vw;
  }

  .pwba-sticky-child {
    margin-top: min(-78px, -6.98vh);
    margin-bottom: min(-156px, -13.96vh);
    margin-left: max(42px, 2.19vw);
    top: max(60px, 5.37vh);
  }

  .pbwa-sticky {
    margin-bottom: max(78px, 6.98vh);
  }

  .pwba-static {
    grid-column-gap: 1.04vw;
    grid-row-gap: 1.04vw;
    height: 1.61vh;
    margin-left: max(42px, 2.19vw);
    line-height: clamp(18px, 1.61vh, 999px);
    top: max(60px, 5.37vh);
  }

  .sidenav-links {
    height: 1.67vw;
    padding-left: .73vw;
  }

  .div-block-29 {
    width: 1.04vw;
    height: 1.04vw;
    margin-top: 3.125vw;
    margin-left: 2.19vw;
  }

  .primary-list {
    grid-column-gap: .63vw;
    grid-row-gap: .63vw;
    padding-left: 1.35vw;
    padding-right: 1.35vw;
    top: 7.81vw;
  }

  .secondary-list {
    grid-column-gap: .63vw;
    grid-row-gap: .63vw;
    width: 100%;
    padding-left: 1.35vw;
    bottom: 1.77vw;
  }

  .image-15 {
    height: .94vw;
  }

  .about-section {
    overflow: hidden;
  }

  .div-block-8 {
    margin-right: 10vw;
  }

  .contact-items {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }

  .link {
    grid-column-gap: .3125vw;
    grid-row-gap: .3125vw;
  }

  .logo-background.ttfm-bg {
    background-color: #62cafa;
  }

  .logo-background.popl-bg {
    background-color: #3c158a;
  }

  .logo-background.primer-bg {
    background-color: #b79ee7;
  }

  .logo-background.refractal-bg {
    background-color: #cec2e6;
  }

  .logo-background.mj-bg {
    background-color: #14da8b;
  }

  .logo-background.pr-bg {
    background-color: #c3c4ec;
  }

  .pwba-item {
    font-size: clamp(14px, .729vw, 999px);
  }

  .hero-wfa-wf {
    column-gap: 1.04vw;
    margin-right: 1.04vw;
  }

  .hero-wfa-pa {
    column-gap: 1.04vw;
    padding: .521vw .729vw;
  }

  .link-tp {
    grid-column-gap: .42vw;
    grid-row-gap: .42vw;
  }

  .sidebar-collapsed-copy {
    width: 3.125vw;
  }

  .sidebars-container-1280plus, .sidebar-expanded-wrap {
    width: 15.64vw;
  }

  .hero-img-cover {
    width: 33.3vw;
    min-width: 640px;
    max-width: none;
    right: 4vw;
  }

  .independent-designer.has-words {
    margin-right: 50px;
  }

  .heading-text {
    z-index: 10;
    letter-spacing: -.159vw;
    font-size: 4.427vw;
  }

  .pwba-gsapvariant {
    grid-column-gap: 1.042vw;
    grid-row-gap: 1.042vw;
  }

  .pwba-clientgrid {
    grid-column-gap: 1.04vw;
    grid-row-gap: 1.04vw;
    height: 1.61vh;
  }

  .image-13-cover2 {
    vertical-align: baseline;
    flex-flow: row;
  }

  .image-13-wrapper {
    margin-bottom: 5.208vw;
  }

  .m-head {
    grid-column-gap: .42vw;
    grid-row-gap: .42vw;
  }

  .nav-r-copy {
    grid-column-gap: .78vw;
    grid-row-gap: .78vw;
    inset: auto;
  }

  .sidebar-spacer {
    width: 15.64vw;
  }

  .case-study-1transition {
    padding-top: max(42px, 3.77vh);
    padding-left: 2.19vw;
    padding-right: 2.19vw;
  }

  .div-block-9 {
    margin-right: 10vw;
  }

  .galleryintro {
    width: 23.698vw;
    padding-bottom: 2.083vw;
    padding-left: 2.19vw;
    padding-right: 2.19vw;
  }

  .galleryintro.offset {
    width: 23.698vw;
  }

  .gallerylist {
    gap: 5.208vw;
    padding-top: 3.125vw;
    padding-bottom: 2.0833vw;
  }

  .gallerylist.clay {
    margin-left: 23.698vw;
  }

  .galleryheading {
    letter-spacing: -.00417vw;
    margin-bottom: .521vw;
    font-size: .833vw;
  }

  .gallerydesript {
    letter-spacing: -.009375vw;
    font-size: clamp(14px, .729vw, 999px);
  }

  .text-block-19 {
    letter-spacing: -.009375vw;
    gap: 3.021vw;
    font-size: clamp(14px, .729vw, 999px);
  }

  .galleryitemtext {
    min-width: 16.354vw;
    max-width: 16.354vw;
  }

  .galleryitem {
    gap: 3.021vw;
    width: 59.918vw;
  }

  .galleryintro-meta,
  .contact-copy {
    letter-spacing: -.009375vw;
    font-size: clamp(14px, .729vw, 999px);
  }

  .new-exp-nav-l {
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
    height: 1.61vh;
  }
}

@media screen and (max-width: 991px) {
  .hero-section {
    height: 100svh;
    min-height: 820px;
  }

  .nav-divider.pwba-item.pt, .nav-divider.pwba-item.sf {
    display: none;
  }

  .nav-m {
    justify-content: flex-end;
    align-items: flex-start;
  }

  .nav-r {
    display: none;
  }

  .body {
    letter-spacing: -.006em;
  }

  .heading {
    width: 88vw;
    max-width: 675.836px;
    margin-right: 60px;
    font-size: 54px;
    top: 140px;
  }

  .hero-img {
    width: 53vw;
    min-width: 450px;
    bottom: -17vw;
    right: 9vw;
  }

  .quick-stack {
    min-height: 1360px;
  }

  .cell {
    height: auto;
    min-height: 108px;
  }

  .clearcell {
    display: none;
  }

  .primer-logo {
    width: 94px;
  }

  .case-study-1 {
    flex: 1;
    display: block;
  }

  .pwba-static {
    display: none;
  }

  .about-section {
    min-height: 820px;
  }

  .about-img-2 {
    width: 327px;
  }

  .div-block-8 {
    z-index: 1;
    width: 78%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .pwba-item.sf, .pwba-item.anywhere {
    display: none;
  }

  .link-tp {
    display: block;
  }

  .hero-img-cover {
    width: 53vw;
    min-width: 450px;
    bottom: -17vw;
    right: 9vw;
  }

  .heading-text {
    font-size: 54px;
    top: 12vw;
  }

  .mclientlist-logo {
    margin-top: 40px;
    margin-bottom: 10px;
  }

  .nav-r-copy {
    display: none;
  }

  .case-study-1transition {
    flex: 1;
    display: block;
  }

  .div-block-9 {
    z-index: 1;
    width: 78%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .text-block-19 {
    min-width: 314px;
  }

  .galleryitemimage {
    height: auto;
    margin-right: 0;
  }

}

@media screen and (min-width: 992px) and (max-width: 1279px) {
  .heading {
    width: clamp(675.836px, 76vw, 770px);
    max-width: none;
  }

  .heading-text {
    font-size: clamp(54px, 5.55vw, 60px);
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .gallery-section {
    --intro-left: calc(47.65625vw - 235px);
    --intro-top: calc(6.25vw + 187px);
    --intro-width: calc(26.5625vw + 216px);
    --intro-font: calc(1.5625vw + 2px);
    --intro-track: calc(-.017578125vw - .045px);
    --intro-gap: calc(var(--intro-top) - 101px);
    --gallery-left: 40px;
    --gallery-width: calc(100vw - 80px);
    --caption-left: 0px;
    padding-left: 0;
    padding-right: 0;
  }

  .galleryintro,
  .galleryintro.offset {
    width: 100%;
    max-width: none;
    height: auto;
    margin-top: 0;
    margin-left: 0;
    padding-top: var(--intro-top);
    padding-bottom: var(--intro-gap);
    position: relative;
    transform: none;
  }

  .galleryintro .new-exp-nav-l,
  .galleryintro .pwba-clientgrid {
    position: absolute;
  }

  .galleryintro .new-exp-nav-l {
    width: 242px;
    margin-left: 0;
    left: 40px;
    top: 60px;
  }

  .galleryintro .pwba-clientgrid {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    width: 275px;
    margin-top: 0;
    margin-left: 0;
    left: 40px;
    top: 84px;
  }

  .galleryintro .galleryheading {
    display: none;
  }

  .galleryintro .galleryintro-copy {
    width: var(--intro-width);
    margin-top: 0;
    margin-left: var(--intro-left);
  }

  .galleryintro .gallerydesript {
    width: 100%;
    margin-top: 0;
    opacity: .6;
    letter-spacing: -.18px;
    font-size: 14px;
    line-height: 136%;
  }

  .galleryintro .galleryintro-meta {
    color: #999;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    display: flex;
    width: max-content;
    margin-top: 1.36em;
    opacity: 1;
    letter-spacing: -.18px;
    font-size: 14px;
    line-height: 136%;
  }

  .galleryintro .written-by {
    color: inherit;
    white-space: normal;
    max-width: var(--intro-width);
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  .galleryintro .written-by-click {
    white-space: nowrap;
  }

  .galleryintro .written-by-expand {
    white-space: normal;
  }

  .galleryintro .contact-copy {
    color: inherit;
    display: block;
    position: static;
    opacity: 1;
    letter-spacing: inherit;
    font-size: inherit;
    line-height: 120%;
  }

  .gallerylist {
    grid-column-gap: 128px;
    grid-row-gap: 128px;
    width: var(--gallery-width);
    max-width: none;
    margin-top: 0;
    margin-left: var(--gallery-left);
    padding: 0;
  }

  .galleryitem {
    grid-column-gap: 0;
    grid-row-gap: 30px;
    width: var(--gallery-width);
  }

  .galleryitemimage {
    width: var(--gallery-width);
    height: calc(60.610465vw - 48.488372px);
    max-width: none;
    margin-right: 0;
  }

  .image-24 {
    width: 100%;
    height: auto;
  }

  .galleryitemimage > iframe.image-24 {
    height: 100% !important;
    aspect-ratio: auto !important;
  }

  .galleryitemtext {
    flex: none;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    width: min(520px, var(--gallery-width));
    min-width: 0;
    max-width: none;
    margin-left: var(--caption-left);
  }

  .galleryitemtext .text-block-19 {
    min-width: 0;
    letter-spacing: -.18px;
    font-size: 14px;
    line-height: 1.36;
    text-align: left;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .gallery-section {
    --intro-left: calc(56.07843137vw - 321.243137px);
    --intro-top: 251px;
    --intro-width: 488px;
    --intro-font: 18px;
    --intro-track: -.225px;
    --intro-gap: 150px;
    --gallery-left: calc(50vw - 472px);
    --gallery-width: 944px;
    --caption-left: 0px;
  }

  .galleryitemimage {
    height: 572.163px;
  }
}

@media screen and (max-width: 767px) {
  .hero-section {
    max-width: 480px;
    height: 800px;
    min-height: auto;
    margin-inline: auto;
    padding-bottom: 20px;
    position: relative;
  }

  .nav {
    letter-spacing: -.18px;
    margin-left: 0;
    margin-right: 0;
    padding-top: 28px;
    padding-left: 28px;
    padding-right: 28px;
    font-size: 16px;
    display: block;
  }

  .nav-divider.pwba-item {
    letter-spacing: 0;
  }

  .nav-divider.pwba-item.pt {
    color: #a1a1a1;
    padding-right: 1px;
    font-size: 13px;
    display: block;
  }

  .nav-divider.pwba-item.sf {
    display: block;
  }

  .nav-m {
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 36px;
    display: none;
  }

  .body.scroll-container {
    background-color: #202020;
  }

  .dash-1o {
    display: none;
  }

  .dash-1o.inmob {
    opacity: .2;
    display: block;
  }

  .client-grid {
    z-index: 1;
  }

  .client-grid.transition, .client-grid.conetoinoeint {
    display: none;
  }

  .heading {
    letter-spacing: -.79px;
    width: 374px;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0;
    position: relative;
    top: 50px;
    left: 28px;
  }

  .hero-img {
    z-index: 1;
    object-fit: cover;
    object-position: top;
    width: auto;
    min-width: auto;
    max-width: 252px;
    height: auto;
    margin: auto;
    display: block;
    position: relative;
    bottom: -149px;
    right: auto;
    overflow: clip;
  }

  .content-section {
    display: flex;
  }

  .image-13 {
    margin-bottom: 20px;
    display: block;
  }

  .paragraph {
    width: 87%;
    max-width: 600px;
  }

  .heading-2 {
    width: 87%;
    max-width: 600px;
    font-size: 16px;
    line-height: 17.5px;
  }

  .pwba-sticky-child {
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
    position: relative;
    top: 0;
  }

  .pbwa-sticky {
    display: none;
  }

  .pwba-static {
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    top: 0;
  }

  .about-section {
    min-height: 790px;
  }

  .contact-content {
    margin-top: 100px;
  }

  .contact-items {
    flex-flow: column;
  }

  .link {
    display: block;
  }

  .pwba-item {
    font-size: 16px;
  }

  .pwba-item.sf, .pwba-item.anywhere {
    display: block;
  }

  .hero-img-cover {
    z-index: 0;
    background-color: #f5f5f5;
    border-radius: 1px;
    width: auto;
    min-width: 420px;
    height: 310px;
    margin-left: clamp(12px, 50vw - 210px, 30px);
    margin-right: clamp(12px, 50vw - 210px, 30px);
    bottom: 20px;
    right: auto;
    transform: none;
  }

  .heading-text {
    letter-spacing: -.05em;
    max-width: 300px;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Inter, sans-serif;
    font-size: 36px;
    line-height: 120%;
  }

  .pwba-gsapvariant {
    grid-column-gap: 14px;
    grid-row-gap: 3px;
    letter-spacing: -.018px;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 246px;
    margin-left: 28px;
    font-size: 16px;
    display: flex;
    position: relative;
    top: 120px;
    bottom: auto;
  }

  .pwba-clientgrid {
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
    position: relative;
    top: 0;
  }

  .image-13-cover2 {
    margin-bottom: 20px;
    display: block;
  }

  .m-w-bio {
    color: #666;
    text-align: left;
    letter-spacing: -.18px;
    font-size: 16px;
    line-height: calc(var(--fontSize) * 1.5);
    margin: auto;
    position: relative;
  }

  .itnro {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    letter-spacing: -.47px;
    flex-flow: column;
    width: 340px;
    margin-left: 28px;
    display: flex;
  }

  .m-client-list-blurb {
    grid-row-gap: 12px;
    width: 344px;
    margin-left: 28px;
  }

  .m-head {
    margin-bottom: 40px;
  }

  .m-clinet1 {
    margin-top: 24px;
    margin-bottom: 76px;
  }

  .text-block-14 {
    color: #111;
    letter-spacing: 0;
    flex: 1;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
  }

  .text-block-14.rmore {
    color: #333;
    margin-top: 30px;
    font-weight: 400;
  }

  .text-block-14.ee {
    text-align: left;
    letter-spacing: .2px;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 500;
  }

  .text-block-14.about {
    color: #333;
    letter-spacing: -.18px;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 400;
  }

  .div-block-21 {
    flex-flow: row;
    display: flex;
  }

  .mlogo {
    position: absolute;
  }

  .co-bio {
    font-size: 14px;
    line-height: 20px;
  }

  .mobilework {
    z-index: 5;
    background-color: #fff;
    max-width: 480px;
    margin: auto;
    padding-top: 118px;
    display: block;
    position: relative;
  }

  .titl {
    color: #333;
    letter-spacing: -.47px;
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 120%;
  }

  .titl-copy {
    color: #000;
    text-align: left;
    letter-spacing: -.56px;
    width: auto;
    min-width: auto;
    max-width: none;
    margin-bottom: 30px;
    font-family: Inter Tight, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
  }

  .logo-wrap {
    background-color: #111010;
    border-radius: 2px;
    justify-content: center;
    align-items: center;
    height: 220px;
    margin-bottom: 32px;
    display: flex;
  }

  .logo-wrap.pr {
    background-color: #03091d;
    background-image: none;
  }

  .logo-wrap.clay {
    background-image: url('../images/claybg-1.png');
    background-position: 0 0;
    background-size: contain;
    margin-bottom: 0;
  }

  .logo-wrap.od {
    background-color: #1143dd;
  }

  .logo-wrap.pb {
    background-color: #f9f9fa;
    border: 1px solid #eeeef1;
  }

  .logo-wrap.mj {
    background-color: #fff;
    background-image: none;
    border: 1px solid #e6e6e6;
  }

  .logo-wrap.ib {
    background-color: #343434;
  }

  .logo-wrap.r {
    background-color: #fafdff;
    border: 1px solid #e1f3ff;
  }

  .logo-wrap.pw {
    background-color: #181818;
  }

  .logo-wrap.lit {
    background-image: url('../images/litbg.png');
    background-position: 0 0;
    background-size: cover;
  }

  .logo-wrap.o {
    background-color: #ff928a;
  }

  .logo-wrap.ttfm {
    background-image: linear-gradient(117deg, #351140, #120616);
  }

  .logo-wrap.pmr {
    background-color: #fff;
    border: 1px solid #ececec;
  }

  .m-w-bio-copy {
    color: #666;
    letter-spacing: -.18px;
    max-width: 340px;
    font-size: 16px;
    line-height: 120%;
  }

  .div-block-23 {
    margin-bottom: 8px;
    display: flex;
  }

  .text-block-14-copy {
    text-align: right;
    letter-spacing: -.13px;
    flex: 1;
    display: none;
  }

  .text-span-2 {
    letter-spacing: 0;
  }

  .image-18 {
    width: 160px;
  }

  .image-21 {
    width: 120px;
  }

  .div-block-25 {
    background-color: #fff;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    max-width: 480px;
    height: 100vh;
    display: flex;
  }

  .text-block-16-copy {
    color: #5f5f5f;
  }

  .titl-copy {
    color: #4b4b4b;
    letter-spacing: -.59px;
    width: fit-content;
    margin-bottom: 0;
    font-family: Inter, sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
  }

  .div-block-26 {
    margin-top: 20px;
  }

  .text-span-3 {
    color: #c2c2c2;
  }

  .div-block-27 {
    margin-inline: auto;
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .nav-r-copy {
    justify-content: flex-start;
    align-items: center;
    display: none;
    position: absolute;
    bottom: 147px;
    left: clamp(12px, 50vw - 210px, 30px);
  }

  .div-block-28 {
    margin-bottom: auto;
    margin-left: auto;
    display: block;
  }

  .new-experiment {
    z-index: 1;
  }

  .new-experiment.transition, .new-experiment.bottom-aligned {
    display: none;
  }

  .gallery-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .new-exp-nav-l {
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
    position: relative;
    top: 0;
  }
}

@media screen and (max-width: 479px) {
  .hero-section {
    min-width: 400px;
  }

  .nav-m {
    grid-column-gap: 4.175vw;
    grid-row-gap: 4.175vw;
    margin-top: 7.516vw;
  }

  .body.scroll-container {
    background-color: #fff;
  }

  .backing {
    background-color: #00000005;
  }

  .quick-stack {
    margin-left: 4.175vw;
    margin-right: 4.175vw;
    padding-top: 26vw;
    padding-bottom: 5vw;
  }

  .cell {
    min-height: 64px;
  }

  .oscilar-logo {
    width: 40%;
  }

  .literati-logo {
    width: 28%;
  }

  .midjourney-logo {
    width: 57%;
  }

  .popl-logo {
    width: 18%;
  }

  .turntable-logo {
    width: 48%;
  }

  .poseidon-logo {
    width: 39%;
  }

  .refractal-logo {
    width: 43%;
  }

  .primer-logo {
    width: 45%;
  }

  .case-study-1 {
    padding-top: 4.175vw;
    padding-left: 4.175vw;
    padding-right: 4.175vw;
  }

  .sidebar-collapsed {
    width: 12.53vw;
    min-width: 12.53vw;
  }

  .pwba-sticky-child {
    grid-column-gap: 4.175vw;
    grid-row-gap: 4.175vw;
    margin-left: 4.175vw;
  }

  .pbwa-sticky {
    display: none;
  }

  .pwba-static {
    grid-column-gap: 4.175vw;
    grid-row-gap: 4.175vw;
    margin-left: 4.175vw;
  }

  .about-section {
    min-height: auto;
  }

  .contact-content {
    margin-top: 100px;
    margin-left: 4.175vw;
    margin-right: 4.175vw;
  }

  .clay-logo {
    width: 28%;
  }

  .sidebar-collapsed-copy {
    width: 12.53vw;
    min-width: 12.53vw;
  }

  .hero-img-cover {
    min-width: 0;
    left: 0;
    right: 0;
  }

  .pwba-clientgrid {
    grid-column-gap: 4.175vw;
    grid-row-gap: 4.175vw;
    margin-left: 4.175vw;
  }

  .mobile-work-list {
    margin-top: 0;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 20px;
  }

  .divier {
    background-color: #000;
    width: 100%;
    height: 1px;
    margin-bottom: 10px;
  }

  .text-block-14 {
    letter-spacing: .3px;
    margin-bottom: 30px;
    font-weight: 400;
  }

  .mclientlist-logo {
    height: 25px;
    margin-top: 40px;
    margin-bottom: 10px;
  }

  .text-span {
    letter-spacing: 0;
  }

  .mlogo {
    max-width: 70%;
    margin: 0 auto;
  }

  .co-bio {
    color: #444;
    font-size: 16px;
    line-height: 136%;
  }

  .mobilework {
    min-width: 400px;
  }

  .titl {
    left: clamp(50px, 296.667px - 55.5556vw, 30px);
  }

  .titl-copy {
    width: auto;
    min-width: auto;
    max-width: none;
  }

  .logo-wrap {
    height: 220px;
  }

  .m-w-bio-copy {
    text-align: left;
  }

  .text-span-2 {
    letter-spacing: 0;
  }

  .titl-copy {
    width: auto;
    min-width: auto;
    max-width: none;
    margin-bottom: 32px;
  }

  .clientnam {
    font-weight: 500;
  }

  .case-study-1transition {
    padding-top: 4.175vw;
    padding-left: 4.175vw;
    padding-right: 4.175vw;
  }

  .new-exp-nav-l {
    grid-column-gap: 4.175vw;
    grid-row-gap: 4.175vw;
    margin-left: 4.175vw;
  }
}

#w-node-_948210a7-6e37-971c-5ceb-c924bd4b18b0-24a56f64, #w-node-ffac2522-b339-e516-65de-762c26dfef72-8f0fd400, #w-node-ad68876c-43e4-b1cf-1d89-214e8d885dfb-73c03022, #w-node-_2c0ea0ce-1da6-715b-1b97-aa7212f3ad20-34f32f44, #w-node-_4c6d80dc-764f-ffb4-4cd4-c416d697c0f1-e88b8b15, #w-node-_153d8347-7715-5680-c3c8-31fd85982f63-6dd4251d, #w-node-c39cd928-526d-de75-062c-fe8b05546721-e5439255, #w-node-_7907703d-c248-6aae-d0c4-ca80f9888e66-48887108, #w-node-_225881de-25f9-93f4-3aac-a10e44d75e70-d7214e6b, #w-node-_83556d56-2057-7a41-95bb-4e6d7d744ad0-9d35e595, #w-node-_9d14b349-64d6-47ac-3ce5-74a7674ff43c-edaf7c6f, #w-node-ddb7d95b-8da9-e871-21ef-2648e85e3284-340b0b79, #w-node-_8cec9e82-0448-1022-553e-d3941f473b59-b43c614a, #w-node-_77c17aba-58de-e7b9-e24b-0af47cfc7617-73c29689 {
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (min-width: 1920px) {
  #w-node-_948210a7-6e37-971c-5ceb-c924bd4b18b0-24a56f64 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_948210a7-6e37-971c-5ceb-c924bd4b18b1-24a56f64 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-ffac2522-b339-e516-65de-762c26dfef72-8f0fd400 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-ffac2522-b339-e516-65de-762c26dfef73-8f0fd400 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-ad68876c-43e4-b1cf-1d89-214e8d885dfb-73c03022 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-ad68876c-43e4-b1cf-1d89-214e8d885dfc-73c03022 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-_2c0ea0ce-1da6-715b-1b97-aa7212f3ad20-34f32f44 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_2c0ea0ce-1da6-715b-1b97-aa7212f3ad21-34f32f44 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-_4c6d80dc-764f-ffb4-4cd4-c416d697c0f1-e88b8b15 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_4c6d80dc-764f-ffb4-4cd4-c416d697c0f2-e88b8b15 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-_153d8347-7715-5680-c3c8-31fd85982f63-6dd4251d {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_153d8347-7715-5680-c3c8-31fd85982f64-6dd4251d {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-c39cd928-526d-de75-062c-fe8b05546721-e5439255 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-c39cd928-526d-de75-062c-fe8b05546722-e5439255 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-_7907703d-c248-6aae-d0c4-ca80f9888e66-48887108 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_7907703d-c248-6aae-d0c4-ca80f9888e67-48887108 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-_225881de-25f9-93f4-3aac-a10e44d75e70-d7214e6b {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_225881de-25f9-93f4-3aac-a10e44d75e71-d7214e6b {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-_83556d56-2057-7a41-95bb-4e6d7d744ad0-9d35e595 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_83556d56-2057-7a41-95bb-4e6d7d744ad1-9d35e595 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-_9d14b349-64d6-47ac-3ce5-74a7674ff43c-edaf7c6f {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_9d14b349-64d6-47ac-3ce5-74a7674ff43d-edaf7c6f {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-ddb7d95b-8da9-e871-21ef-2648e85e3284-340b0b79 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-ddb7d95b-8da9-e871-21ef-2648e85e3285-340b0b79 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-_8cec9e82-0448-1022-553e-d3941f473b59-b43c614a {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_8cec9e82-0448-1022-553e-d3941f473b5a-b43c614a {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-_77c17aba-58de-e7b9-e24b-0af47cfc7617-73c29689 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_77c17aba-58de-e7b9-e24b-0af47cfc7618-73c29689 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }
}

@media screen and (min-width: 1440px) {
  #w-node-_948210a7-6e37-971c-5ceb-c924bd4b18b1-24a56f64, #w-node-ffac2522-b339-e516-65de-762c26dfef73-8f0fd400, #w-node-ad68876c-43e4-b1cf-1d89-214e8d885dfc-73c03022, #w-node-_2c0ea0ce-1da6-715b-1b97-aa7212f3ad21-34f32f44, #w-node-_4c6d80dc-764f-ffb4-4cd4-c416d697c0f2-e88b8b15, #w-node-_153d8347-7715-5680-c3c8-31fd85982f64-6dd4251d, #w-node-c39cd928-526d-de75-062c-fe8b05546722-e5439255, #w-node-_7907703d-c248-6aae-d0c4-ca80f9888e67-48887108, #w-node-_225881de-25f9-93f4-3aac-a10e44d75e71-d7214e6b, #w-node-_83556d56-2057-7a41-95bb-4e6d7d744ad1-9d35e595, #w-node-_9d14b349-64d6-47ac-3ce5-74a7674ff43d-edaf7c6f, #w-node-ddb7d95b-8da9-e871-21ef-2648e85e3285-340b0b79, #w-node-_8cec9e82-0448-1022-553e-d3941f473b5a-b43c614a, #w-node-_77c17aba-58de-e7b9-e24b-0af47cfc7618-73c29689 {
    grid-row: span 2 / span 2;
  }
}

@media screen and (min-width: 1280px) {
  #w-node-_948210a7-6e37-971c-5ceb-c924bd4b18b0-24a56f64 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_948210a7-6e37-971c-5ceb-c924bd4b18b1-24a56f64 {
    grid-row: span 2 / span 2;
  }

  #w-node-ffac2522-b339-e516-65de-762c26dfef72-8f0fd400 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-ffac2522-b339-e516-65de-762c26dfef73-8f0fd400 {
    grid-row: span 2 / span 2;
  }

  #w-node-ad68876c-43e4-b1cf-1d89-214e8d885dfb-73c03022 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-ad68876c-43e4-b1cf-1d89-214e8d885dfc-73c03022 {
    grid-row: span 2 / span 2;
  }

  #w-node-_2c0ea0ce-1da6-715b-1b97-aa7212f3ad20-34f32f44 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_2c0ea0ce-1da6-715b-1b97-aa7212f3ad21-34f32f44 {
    grid-row: span 2 / span 2;
  }

  #w-node-_4c6d80dc-764f-ffb4-4cd4-c416d697c0f1-e88b8b15 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_4c6d80dc-764f-ffb4-4cd4-c416d697c0f2-e88b8b15 {
    grid-row: span 2 / span 2;
  }

  #w-node-_153d8347-7715-5680-c3c8-31fd85982f63-6dd4251d {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_153d8347-7715-5680-c3c8-31fd85982f64-6dd4251d {
    grid-row: span 2 / span 2;
  }

  #w-node-c39cd928-526d-de75-062c-fe8b05546721-e5439255 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-c39cd928-526d-de75-062c-fe8b05546722-e5439255 {
    grid-row: span 2 / span 2;
  }

  #w-node-_7907703d-c248-6aae-d0c4-ca80f9888e66-48887108 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_7907703d-c248-6aae-d0c4-ca80f9888e67-48887108 {
    grid-row: span 2 / span 2;
  }

  #w-node-_225881de-25f9-93f4-3aac-a10e44d75e70-d7214e6b {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_225881de-25f9-93f4-3aac-a10e44d75e71-d7214e6b {
    grid-row: span 2 / span 2;
  }

  #w-node-_83556d56-2057-7a41-95bb-4e6d7d744ad0-9d35e595 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_83556d56-2057-7a41-95bb-4e6d7d744ad1-9d35e595 {
    grid-row: span 2 / span 2;
  }

  #w-node-_9d14b349-64d6-47ac-3ce5-74a7674ff43c-edaf7c6f {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_9d14b349-64d6-47ac-3ce5-74a7674ff43d-edaf7c6f {
    grid-row: span 2 / span 2;
  }

  #w-node-ddb7d95b-8da9-e871-21ef-2648e85e3284-340b0b79 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-ddb7d95b-8da9-e871-21ef-2648e85e3285-340b0b79 {
    grid-row: span 2 / span 2;
  }

  #w-node-_8cec9e82-0448-1022-553e-d3941f473b59-b43c614a {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_8cec9e82-0448-1022-553e-d3941f473b5a-b43c614a {
    grid-row: span 2 / span 2;
  }

  #w-node-_77c17aba-58de-e7b9-e24b-0af47cfc7617-73c29689 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #w-node-_77c17aba-58de-e7b9-e24b-0af47cfc7618-73c29689 {
    grid-row: span 2 / span 2;
  }
}

@media screen and (max-width: 991px) {
  #w-node-_948210a7-6e37-971c-5ceb-c924bd4b18b0-24a56f64, #w-node-ffac2522-b339-e516-65de-762c26dfef72-8f0fd400, #w-node-ad68876c-43e4-b1cf-1d89-214e8d885dfb-73c03022, #w-node-_2c0ea0ce-1da6-715b-1b97-aa7212f3ad20-34f32f44, #w-node-_4c6d80dc-764f-ffb4-4cd4-c416d697c0f1-e88b8b15, #w-node-_153d8347-7715-5680-c3c8-31fd85982f63-6dd4251d, #w-node-c39cd928-526d-de75-062c-fe8b05546721-e5439255, #w-node-_7907703d-c248-6aae-d0c4-ca80f9888e66-48887108, #w-node-_225881de-25f9-93f4-3aac-a10e44d75e70-d7214e6b, #w-node-_83556d56-2057-7a41-95bb-4e6d7d744ad0-9d35e595, #w-node-_9d14b349-64d6-47ac-3ce5-74a7674ff43c-edaf7c6f, #w-node-ddb7d95b-8da9-e871-21ef-2648e85e3284-340b0b79, #w-node-_8cec9e82-0448-1022-553e-d3941f473b59-b43c614a, #w-node-_77c17aba-58de-e7b9-e24b-0af47cfc7617-73c29689 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr;
  }
}

/* Hero backing plate: late override to avoid jumps between legacy breakpoint rules. */
.hero-img-backing,
.hero-img-backing-cover {
  left: auto;
  min-width: 0;
}

@media screen and (max-width: 991px) {
  .hero-img-backing,
  .hero-img-backing-cover {
    width: clamp(450px, 53vw, 520px);
    height: clamp(560px, 72vh, 740px);
    right: 28px;
    bottom: -17vw;
  }
}

@media screen and (min-width: 992px) and (max-width: 1279px) {
  .hero-img-backing,
  .hero-img-backing-cover {
    width: calc(525.76px + (100vw - 992px) * .306);
    height: clamp(560px, 72vh, 820px);
    right: 42px;
    bottom: calc(-168.64px + (100vw - 992px) * .378);
  }
}

@media screen and (min-width: 1280px) {
  .hero-img-backing,
  .hero-img-backing-cover {
    width: clamp(614px, 33.44vw, 642px);
    height: clamp(700px, 88.93vh, 900px);
    right: max(42px, 2.19vw);
    bottom: -60px;
  }
}

/* --- Case study grid system --- */
.clay-post-copy {
  --w-narrow: 520px;
  --w-text:   724px;
  --w-wide:   940px;

  display: grid;
  justify-items: center;
  row-gap: 28px;

  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
}

/* Default tier: text width */
.clay-post-copy > * {
  width: min(var(--w-text), 100%);
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Wide assets */
.clay-post-copy > .clay-case-asset.wide {
  width: min(var(--w-wide), 100%);
}

/* Lede paragraph: narrow width, left-aligned with text column's left edge */
.clay-post-copy > .lede {
  width: min(var(--w-narrow), 100%);
  justify-self: start;
  margin-inline-start: max(0px, (100% - var(--w-text)) / 2);
}

/* asset styling: border + radius */
.clay-post-copy .clay-case-asset img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

/* consecutive assets: tighter gap */
.clay-post-copy > .clay-case-asset + .clay-case-asset {
  margin-top: -28px;
}

/* DEBUG (disabled)
.content-section { outline: 2px solid red; outline-offset: -2px; }
.writing { outline: 2px solid blue; outline-offset: -2px; background: rgba(0,0,255,0.04); }
.anotherone { outline: 2px solid green; outline-offset: -4px; background: rgba(0,255,0,0.04); }
.content-transition { outline: 2px solid orange; outline-offset: -2px; background: rgba(255,165,0,0.06); }
.post-transition-content { outline: 2px solid purple; outline-offset: -2px; background: rgba(128,0,128,0.05); }
.clay-post-copy { outline: 1px dashed magenta; }
.clay-case-asset { outline: 1px dashed teal; }
*/

/* Win over Webflow's media-query width overrides on these classes */
@media (min-width: 1280px) {
  .clay-case-copy.clay-post-copy {
    width: 100%;
    max-width: var(--w-wide);
  }
  .clay-case-copy.clay-post-copy > * {
    width: min(var(--w-text), 100%);
    max-width: none;
  }
  .clay-case-copy.clay-post-copy > .clay-case-asset.wide {
    width: min(var(--w-wide), 100%);
  }
  .clay-case-copy.clay-post-copy > .lede {
    width: min(var(--w-narrow), 100%);
  }
}

/* Case study grid — scale widths with viewport at 1920+ */
@media (min-width: 1920px) {
  .clay-post-copy {
    --w-narrow: 27.083vw;  /* 520/1920 */
    --w-text:   37.708vw;  /* 724/1920 */
    --w-wide:   48.958vw;  /* 940/1920 */
    row-gap: 1.458vw;      /* 28/1920 */
  }
  .clay-case-copy.clay-post-copy {
    width: 100%;
    max-width: var(--w-wide);
  }
  .clay-case-copy.clay-post-copy > * {
    width: min(var(--w-text), 100%);
  }
  .clay-case-copy.clay-post-copy > .clay-case-asset.wide {
    width: min(var(--w-wide), 100%);
  }
  .clay-case-copy.clay-post-copy > .lede {
    width: min(var(--w-narrow), 100%);
  }
  .clay-post-copy > .clay-case-asset + .clay-case-asset {
    margin-top: -1.458vw;
  }
}

/* Case study spacing rhythm */
.clay-post-copy {
  row-gap: 0;
}
.clay-post-copy > .clay-post-heading + .paragraph {
  margin-top: 16px;
}
.clay-post-copy > .paragraph + .paragraph {
  margin-top: 48px;
}
.clay-post-copy > .paragraph + .clay-case-asset,
.clay-post-copy > .clay-case-asset + .paragraph {
  margin-top: 60px;
}
.clay-post-copy > .clay-case-asset + .clay-case-asset {
  margin-top: 30px;
}
@media (min-width: 1920px) {
  .clay-post-copy > .clay-post-heading + .paragraph {
    margin-top: 0.833vw;
  }
  .clay-post-copy > .paragraph + .paragraph {
    margin-top: 2.5vw;
  }
  .clay-post-copy > .paragraph + .clay-case-asset,
  .clay-post-copy > .clay-case-asset + .paragraph {
    margin-top: 3.125vw;
  }
  .clay-post-copy > .clay-case-asset + .clay-case-asset {
    margin-top: 1.563vw;
  }
}

.clay-post-copy > .clay-post-heading {
  margin-top: 0;
  margin-bottom: 0;
}

.clay-post-copy > .clay-post-heading {
  font-weight: 500;
  font-size: 20px;
}