/* ==========================================================================
   Projects page — Projects frame.
   ========================================================================== */

html,
body {
  background: #ffffff;
}

body {
  color: rgba(0, 0, 0, 0.84);
}

.projects-root {
  display: contents;
}

.projects-page {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100svh;
  padding: 166px 24px 160px;
  overflow-x: clip;
  background: #ffffff;
  font-weight: 400;

  --projects-lift: 640px;
  --projects-shrink: 0.05;
  --projects-radius: 28px;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--projects-reveal, 0) * var(--projects-lift) * -1))
    scale(calc(1 - var(--projects-reveal, 0) * var(--projects-shrink)));
  border-bottom-left-radius: calc(var(--projects-reveal, 0) * var(--projects-radius));
  border-bottom-right-radius: calc(var(--projects-reveal, 0) * var(--projects-radius));
  box-shadow: 0 calc(var(--projects-reveal, 0) * 8px) calc(var(--projects-reveal, 0) * 64px)
    rgba(0, 0, 0, calc(var(--projects-reveal, 0) * 0.06));
}

.projects-footer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #04122a;
  pointer-events: none;
}

.projects-footer-inner {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 488px;
  max-width: calc(100% - 48px);
  padding-bottom: 44px;
  text-align: center;
  color: #171717;
  pointer-events: auto;
}

.projects-footer-cta {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.4px;
}

.projects-footer-cta a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

.projects-footer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: rgba(23, 23, 23, 0.7);
}

.projects-footer-meta > span {
  white-space: nowrap;
}

.projects-footer-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.projects-footer-nav a {
  color: inherit;
  text-decoration: none;
}

.projects-footer-nav a:hover {
  color: #171717;
  text-decoration: underline;
  text-underline-position: from-font;
}

.projects-back-pill {
  position: fixed;
  top: calc(48px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 30;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 10px 16px;
  border-radius: 56px;
  border: 0;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--site-shadow);
  color: #000000;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transform: translateX(-50%);
}

.projects-back-pill.reveal-on-scroll {
  transform: translate(-50%, 12px);
}

.projects-back-pill.reveal-on-scroll.is-revealed {
  transform: translate(-50%, 0);
}

.projects-back-pill.reveal-on-scroll.is-settled {
  filter: none;
  transform: translateX(-50%);
  will-change: auto;
}

.projects-case-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--site-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  color: #000000;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.2px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--projects-cursor-x, -120px), var(--projects-cursor-y, -120px), 0)
    translate(-50%, -50%) scale(var(--projects-cursor-scale, 0.78));
  transform-origin: 50% 50%;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  will-change: opacity, transform;
}

.projects-case-cursor.is-visible {
  --projects-cursor-scale: 1;
  opacity: 1;
}

.projects-content {
  width: 1032px;
  max-width: 100%;
  margin: 0 auto;
}

.projects-content .reveal-on-scroll.is-settled {
  filter: none;
  transform: none;
  will-change: auto;
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.work-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 312px) minmax(0, 680px);
  gap: 40px;
  align-items: start;
  width: 100%;
  padding-bottom: 48px;
  border-bottom: 0;
}

.work-card:last-child {
  border-bottom: 0;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
  padding-bottom: 48px;
  border-bottom: 0;
}

.work-card--tile {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 0;
  border-bottom: 0;
}

.work-link {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: 16px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .work-link {
    cursor: none;
  }
}

.work-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

.work-meta-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.work-title {
  width: 100%;
  margin: 0;
  color: #000000;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.4px;
}

.work-tags {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  pointer-events: none;
}

.work-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 26.264px;
  background: #e3e3e3;
  color: #000000;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: -0.1876px;
  white-space: nowrap;
}

.work-tags span:first-child {
  padding-right: 12px;
  padding-left: 12px;
}

.work-thumb {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
  background: #d9d9d9;
}

.work-card--tile .work-thumb {
  height: 580px;
}

.work-thumb-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  user-select: none;
  -webkit-user-drag: none;
}

video.work-thumb-media {
  background: #d9d9d9;
}

.work-logo,
.work-logo-lockup img,
.team-logo,
.team-logo-lockup img {
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.work-logo--hilbert {
  width: 74.667px;
  height: 20px;
}

.work-logo--drop {
  width: 44px;
  height: 18px;
  object-fit: contain;
}

.work-logo--denario {
  width: 68px;
  height: 20px;
}

.work-logo-text {
  display: block;
  color: #000000;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.work-logo-lockup {
  position: relative;
  display: block;
  height: 22px;
}

.work-logo-lockup--emeris {
  width: 78.222px;
}

.work-logo-lockup--emeris img:first-child {
  position: absolute;
  left: 0;
  top: 2.458px;
  width: 16.99px;
  height: 18.333px;
}

.work-logo-lockup--emeris img:last-child {
  position: absolute;
  left: 22.662px;
  top: 6.282px;
  width: 55.57px;
  height: 9.549px;
}

.work-logo-lockup--bibliu {
  width: 68px;
  height: 20px;
}

.work-logo-lockup--bibliu img:first-child {
  position: absolute;
  left: 0;
  top: 0.556px;
  width: 23.447px;
  height: 19.444px;
}

.work-logo-lockup--bibliu img:last-child {
  position: absolute;
  left: 25.793px;
  top: 0;
  width: 42.207px;
  height: 20px;
}

.work-logo-lockup--tapcart {
  width: 84px;
  height: 20px;
  overflow: hidden;
}

.work-logo-lockup--tapcart img:first-child {
  position: absolute;
  left: 0.596px;
  top: 1.43px;
  width: 18.396px;
  height: 16.614px;
}

.work-logo-lockup--tapcart img:last-child {
  position: absolute;
  left: 22px;
  top: 3px;
  width: 61.101px;
  height: 13.996px;
}

.live-projects-section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  margin-top: 80px;
  padding: 64px 32px 80px;
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: var(--site-shadow);
}

.live-projects-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.live-projects-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 26.264px;
  background: #f2f2f2;
  color: #797979;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: -0.1876px;
}

.live-projects-title {
  margin: 0;
  color: #000000;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.4px;
  text-align: center;
}

.live-projects-deck {
  position: relative;
  width: min(887.784px, 100%);
  aspect-ratio: 887.784 / 273.529;
  overflow: visible;
  isolation: isolate;
}

.live-project-card {
  position: absolute;
  left: var(--live-card-left);
  top: var(--live-card-top);
  z-index: var(--live-card-z);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.2752%;
  height: 90.6668%;
  padding: 24px;
  border: 0;
  border-radius: 28px;
  background: var(--live-card-bg);
  color: inherit;
  text-decoration: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--site-shadow);
  transform: rotate(var(--live-card-rotation));
  transform-origin: center center;
  transition:
    transform 0.34s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.34s cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 0.24s var(--ease-out);
  will-change: transform, box-shadow;
}

.live-project-card:hover,
.live-project-card:focus-visible {
  z-index: 20;
  transform: translate3d(0, -14px, 0) rotate(var(--live-card-rotation)) scale(1.035);
  box-shadow: var(--site-shadow);
}

.live-project-card:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.42);
  outline-offset: 4px;
}

.live-project-card img {
  display: block;
  max-width: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.live-project-card--livepeer {
  --live-card-left: 0%;
  --live-card-top: 3.2903%;
  --live-card-z: 1;
  --live-card-bg: #00eb88;
  --live-card-rotation: -2.47deg;
}

.live-project-card--ornn {
  --live-card-left: 9.7467%;
  --live-card-top: 0.7604%;
  --live-card-z: 2;
  --live-card-bg: #000000;
  --live-card-rotation: 7.5deg;
}

.live-project-card--liquid {
  --live-card-left: 22.5381%;
  --live-card-top: 3.6815%;
  --live-card-z: 3;
  --live-card-bg: #131318;
  --live-card-rotation: -1.75deg;
}

.live-project-card--first-digital {
  --live-card-left: 32.4414%;
  --live-card-top: 1.5611%;
  --live-card-z: 4;
  --live-card-bg: #6c777f;
  --live-card-rotation: 5.83deg;
}

.live-project-card--tapcart {
  --live-card-left: 43.6097%;
  --live-card-top: 3.634%;
  --live-card-z: 5;
  --live-card-bg: #f2fc54;
  --live-card-rotation: -1.84deg;
}

.live-project-card--pragma {
  --live-card-left: 54.1145%;
  --live-card-top: 1.9779%;
  --live-card-z: 6;
  --live-card-bg: #1548ff;
  --live-card-rotation: 4.99deg;
}

.live-project-card--patterns {
  --live-card-left: 66.595%;
  --live-card-top: 4.0142%;
  --live-card-z: 7;
  --live-card-bg: #e32d55;
  --live-card-rotation: 1.15deg;
}

.live-project-card--bibliu {
  --live-card-left: 76.3598%;
  --live-card-top: 0.8738%;
  --live-card-z: 8;
  --live-card-bg: #604dad;
  --live-card-rotation: 7.26deg;
}

.live-project-card--livepeer > img {
  width: 31.263px;
  height: 31.263px;
}

.live-project-card--first-digital > img {
  width: 108px;
  height: 20.048px;
  filter: invert(1);
}

.live-project-card--tapcart > img {
  width: 27.231px;
  height: 24.108px;
}

.live-project-card--patterns > img {
  width: 23.447px;
  height: 23.447px;
}

.live-project-card--bibliu > img {
  width: 33.868px;
  height: 29.96px;
}

.live-project-logo--liquid {
  position: relative;
  display: block;
  width: 64px;
  height: 18.618px;
}

.live-project-logo--liquid img {
  width: 100%;
  height: 100%;
  filter: invert(1);
}

.live-project-logo-lockup--ornn {
  position: relative;
  display: block;
  width: 72px;
  height: 15.746px;
  filter: invert(1);
}

.live-project-logo-lockup--ornn img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 18.058px;
  height: 15.746px;
}

.live-project-logo-lockup--ornn img:last-child {
  position: absolute;
  left: 24.761px;
  top: 0;
  width: 47.239px;
  height: 15.746px;
}

.live-project-logo-lockup--pragma {
  display: inline-flex;
  align-items: center;
  gap: 5.2px;
  filter: invert(1);
}

.live-project-logo-lockup--pragma img:first-child {
  width: 11.437px;
  height: 18.975px;
}

.live-project-logo-lockup--pragma img:last-child {
  width: 75.363px;
  height: 16.343px;
}

.teams-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  margin-top: 48px;
}

.teams-title {
  width: 100%;
  margin: 0;
  color: #000000;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.4px;
}

.teams-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.team-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 119.508px;
  overflow: hidden;
  border-radius: 6px;
  background: #f7f6f6;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
}

.team-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #eeeeee;
  opacity: 0;
  transition: opacity 0.18s var(--ease-out);
  z-index: 0;
}

.team-tile:hover::before,
.team-tile:focus-visible::before {
  opacity: 1;
}

.team-tile:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.42);
  outline-offset: 3px;
}

.team-tile > * {
  position: relative;
  z-index: 1;
}

.team-logo {
  object-fit: contain;
}

.team-logo--haptic {
  width: 252px;
  height: 119.508px;
}

.team-logo--liquid {
  position: relative;
  display: block;
  width: 64px;
  height: 18.618px;
  -webkit-mask: url("./assets/logo-assets/teams/liquid-mask.svg") center / contain no-repeat;
  mask: url("./assets/logo-assets/teams/liquid-mask.svg") center / contain no-repeat;
}

.team-logo--liquid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-logo-lockup--ornn {
  position: relative;
  display: block;
  width: 72px;
  height: 15.746px;
}

.team-logo-lockup--ornn img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 18.058px;
  height: 15.746px;
}

.team-logo-lockup--ornn img:last-child {
  position: absolute;
  left: 24.761px;
  top: 0;
  width: 47.239px;
  height: 15.746px;
}

.team-logo--cosmos {
  width: 86px;
  height: 15.636px;
}

.team-logo--symbol {
  width: 31.263px;
  height: 31.263px;
}

.team-logo--bibliu-symbol {
  width: 33.868px;
  height: 29.96px;
}

.team-logo--heartbeat {
  width: 20.098px;
  height: 31.086px;
}

.team-logo--wide-symbol {
  width: 59.906px;
  height: 27px;
}

.team-logo--small-symbol {
  width: 23.447px;
  height: 23.447px;
}

.team-logo--denario-symbol {
  width: 20.775px;
  height: 31.073px;
}

.team-logo--first-digital {
  width: 108px;
  height: 20.048px;
}

@media (max-width: 900px) {
  .projects-page {
    padding: 166px 16px 112px;
    --projects-lift: 120px;
  }

  .work-card,
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .projects-grid {
    gap: 48px;
  }

  .work-meta {
    gap: 24px;
  }

  .work-thumb,
  .work-card--tile .work-thumb {
    height: auto;
    aspect-ratio: 368 / 495;
  }

  .teams-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-projects-section {
    padding: 56px 24px 64px;
  }

  .projects-footer-inner {
    gap: 12px;
    padding-bottom: 32px;
  }

  .projects-footer-cta {
    font-size: 16px;
    line-height: 22px;
  }

  .projects-footer-meta {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 720px) {
  .live-projects-section {
    align-items: center;
    gap: 32px;
    padding: 56px 24px 64px;
    overflow: hidden;
  }

  .live-projects-heading {
    width: 100%;
  }

  .live-projects-deck {
    width: min(100%, 260px);
    aspect-ratio: 180 / 248;
    overflow: visible;
    touch-action: pan-y;
    cursor: grab;
  }

  .live-projects-deck.is-dragging {
    cursor: grabbing;
  }

  .live-project-card {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: var(--live-stack-opacity, 1);
    pointer-events: none;
    transform:
      translate3d(var(--live-stack-x, 0px), var(--live-stack-y, 0px), 0)
      rotate(var(--live-stack-rotation, var(--live-card-rotation)))
      scale(var(--live-stack-scale, 1));
    transition:
      transform 0.34s cubic-bezier(0.165, 0.84, 0.44, 1),
      opacity 0.24s var(--ease-out),
      box-shadow 0.34s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .live-project-card.is-active {
    pointer-events: auto;
  }

  .live-project-card:hover,
  .live-project-card:focus-visible {
    transform:
      translate3d(var(--live-stack-x, 0px), calc(var(--live-stack-y, 0px) - 10px), 0)
      rotate(var(--live-stack-rotation, var(--live-card-rotation)))
      scale(var(--live-stack-scale, 1));
  }
}

@media (max-width: 520px) {
  .projects-page {
    padding-top: 166px;
  }

  .projects-back-pill {
    max-width: calc(100% - 32px);
  }

  .work-title {
    font-size: 16px;
    line-height: 22px;
  }

  .teams-title {
    font-size: 22px;
    line-height: 28px;
  }

  .teams-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Current Projects layout (formerly projects-experiment.css).
   Merged in and de-modifier-ed: selectors key off `body.projects-body`.
   Kept AFTER the base rules above so the cascade order is preserved.
   ========================================================================== */

/* ==========================================================================
   Projects page — current Projects layout.

   Loaded AFTER styles.css + projects.css. Contains the overrides that turn
   the legacy white Projects frame into:
     1. a full-viewport calm neutral gradient background rendered by the WebGL
        displacement engine, and
     2. the Figma Projects card system: white elevated cards, tight grey media
        placeholders, and a denser 2-column grid.

   ========================================================================== */

/* ---- 1. Gradient background ---------------------------------------------- */

/* First paint matches the calm resting base, before WebGL/JS has initialized. */
html,
body.projects-body {
  background-color: #919191;

  /* Home button tuning:
     - side values control the fixed side button on wide screens;
     - adaptive values control the pill above content between 821px and 1280px;
     - footer values control the contact/footer layout. */
  --projects-home-side-left-offset: 626px;
  --projects-home-side-top: 80px;
  --projects-home-adaptive-top: 18px;
  --projects-home-adaptive-left-safe: 24px;
  --projects-home-adaptive-content-half: 516px;
  --projects-footer-top-gap: 180px;
  --projects-footer-meta-gap: 180px;
  --projects-footer-home-gap: 32px;
  --projects-toolbar-bottom: 32px;
  --projects-toolbar-item-size: 56px;
  --projects-toolbar-icon-size: 24px;

  --index-chevron-left-offset: var(--projects-home-side-left-offset);
  --index-chevron-top: var(--projects-home-side-top);
}

.projects-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #919191 0%, #dcdcdc 41%, #f4f4f4 100%);
}

.projects-bg .displacement-map-canvas {
  position: absolute;
  top: 0;
  left: 0;
}

/* The content surface no longer lifts to reveal a footer — it just floats,
   transparent, over the fixed gradient. */
body.projects-body .projects-page {
  z-index: auto;
  background: transparent;
  transform: none;
  box-shadow: none;
  border-radius: 0;
  padding-top: 80px;
  padding-bottom: 16px;
}

body.projects-body .projects-content {
  width: 1032px;
}

body.projects-body .index-chevron {
  transition:
    opacity 0.08s var(--ease-out),
    transform 0.08s var(--ease-out);
}

body.projects-body.projects-contact-active .index-chevron {
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
  transform-origin: 50% 50%;
}

body.projects-body .projects-list {
  gap: 24px;
}

body.projects-body .projects-featured-projects {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* ---- 2. Figma Projects cards --------------------------------------------- */

body.projects-body .work-card {
  box-sizing: border-box;
  border-radius: 28px;
  overflow: hidden;
  background-color: #ffffff;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--site-shadow);
}

body.projects-body .work-card--clickable {
  cursor: pointer;
}

body.projects-body .work-card:not(.work-card--tile) {
  display: flex;
  flex-direction: column;
  height: auto;
  aspect-ratio: auto;
  padding: 32px 8px 8px;
  gap: 24px;
}

body.projects-body .work-card:not(.work-card--tile) .work-meta {
  position: relative;
  box-sizing: border-box;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  width: auto;
  padding: 0 24px;
  gap: 24px;
}

body.projects-body .work-card:not(.work-card--tile) .work-meta-main {
  flex: 0 0 384px;
  width: 384px;
  gap: 8px;
}

body.projects-body .work-card:not(.work-card--tile) .work-title {
  width: 384px;
  max-width: 100%;
}

body.projects-body .work-card:not(.work-card--tile) .work-tags {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  width: auto;
}

body.projects-body .work-card:not(.work-card--tile) .work-thumb {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1016 / 616;
  border-radius: 24px;
}

body.projects-body .projects-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
  border-bottom: 0;
  padding-bottom: 0;
}

body.projects-body .work-card--tile {
  height: auto;
  padding: 8px 8px 32px;
  gap: 24px;
}

body.projects-body .work-card--tile .work-thumb {
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 1;
  border-radius: 24px;
}

body.projects-body .work-card--tile .work-meta {
  gap: 24px;
  padding: 0 24px;
}

body.projects-body .work-card--tile .work-meta-main {
  gap: 16px;
}

body.projects-body .work-thumb {
  background-color: #ececec;
}

body.projects-body .work-card:nth-of-type(odd) .work-thumb {
  background-color: #e8e8e8;
}

body.projects-body .work-card:nth-of-type(even) .work-thumb {
  background-color: #f0f0f0;
}

body.projects-body .work-thumb-media {
  --work-thumb-parallax: 0px;
  --work-thumb-parallax-range: 16;
  --work-thumb-scale: 1.04;
  --work-thumb-transform-duration: 0s;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--work-thumb-parallax), 0) scale(var(--work-thumb-scale));
  transform-origin: center center;
  transition: transform var(--work-thumb-transform-duration) var(--site-toolbar-motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

body.projects-body.projects-thumb-parallax-ready .work-thumb-media {
  --work-thumb-transform-duration: 0.36s;
}

body.projects-body.projects-thumb-parallax-active .work-thumb-media {
  --work-thumb-transform-duration: 0.16s;
  will-change: transform;
}

body.projects-body .work-card--clickable:hover .work-thumb-media,
body.projects-body .work-card--clickable:focus-within .work-thumb-media {
  --work-thumb-transform-duration: 0.42s;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  body.projects-body .work-card--clickable:hover .work-thumb-media,
  body.projects-body .work-card--clickable:focus-within .work-thumb-media {
    --work-thumb-scale: 1.06;
  }
}

body.projects-body .work-thumb-media--tapcart {
  object-position: 70% 25%;
}

body.projects-body .work-link {
  border-radius: 28px;
}

body.projects-body .work-logo-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 4px 12px;
  border-radius: 26.264px;
  background-color: #f2f2f2;
  color: #797979;
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
  letter-spacing: -0.1876px;
}

body.projects-body .work-tags span {
  min-height: 24px;
  background-color: #f2f2f2;
  border: 0;
  color: #797979;
}

/* ---- Live projects card --------------------------------------------------- */

body.projects-body .live-projects-section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  margin-top: 80px;
  padding: 64px 32px 80px;
  overflow: hidden;
  border-radius: 28px;
  background-color: #ffffff;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--site-shadow);
}

body.projects-body .live-projects-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

body.projects-body .live-projects-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 8px 12px;
  border-radius: 26.264px;
  background-color: #f2f2f2;
  color: #797979;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: -0.1876px;
}

body.projects-body .live-projects-title {
  margin: 0;
  color: #000000;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.4px;
  text-align: center;
}

body.projects-body .live-projects-deck {
  position: relative;
  width: min(920px, 100%);
  aspect-ratio: 920 / 248;
  overflow: visible;
}

body.projects-body .live-project-card {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19.565%;
  height: 100%;
  padding: 24px;
  border: 0;
  border-radius: 28px;
  background-color: #ffffff;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--site-shadow);
  transform: rotate(var(--live-card-rotation, 0deg));
  transform-origin: center center;
  transition:
    transform 0.34s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.34s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform, box-shadow;
}

body.projects-body .live-project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  border: 4px solid #ffffff;
  border-radius: inherit;
  pointer-events: none;
}

body.projects-body .live-project-card:hover {
  z-index: 20;
  transform: translate3d(0, -14px, 0) rotate(var(--live-card-rotation, 0deg)) scale(1.035);
  box-shadow: var(--site-shadow);
}

body.projects-body .live-project-card:focus-visible {
  z-index: 20;
  outline: 2px solid rgba(0, 0, 0, 0.42);
  outline-offset: 4px;
  transform: translate3d(0, -14px, 0) rotate(var(--live-card-rotation, 0deg)) scale(1.035);
  box-shadow: var(--site-shadow);
}

body.projects-body .live-project-card img {
  display: block;
  object-fit: contain;
}

body.projects-body .live-project-card--livepeer {
  left: -0.57%;
  z-index: 1;
  background-color: #00eb88;
  --live-card-rotation: -2.47deg;
}

body.projects-body .live-project-card--livepeer > img {
  width: 31.263px;
  height: 31.263px;
}

body.projects-body .live-project-card--ornn {
  left: 14.41%;
  z-index: 2;
  background-color: #000000;
  --live-card-rotation: 7.5deg;
}

body.projects-body .live-project-card--liquid {
  left: 31.03%;
  z-index: 3;
  background-color: #131318;
  --live-card-rotation: -5.01deg;
}

body.projects-body .live-project-card--first-digital {
  left: 47.19%;
  z-index: 4;
  background-color: #6c777f;
  --live-card-rotation: 4.68deg;
}

body.projects-body .live-project-card--first-digital > img {
  width: 108px;
  height: 20.048px;
  filter: invert(1);
}

body.projects-body .live-project-card--tapcart {
  left: 63.79%;
  z-index: 5;
  background-color: #f2fc54;
  --live-card-rotation: -2.41deg;
}

body.projects-body .live-project-card--pragma {
  left: 78.41%;
  z-index: 6;
  background-color: #1548ff;
  --live-card-rotation: 9.18deg;
}

body.projects-body .live-project-logo--liquid {
  position: relative;
  display: block;
  width: 64px;
  height: 18.618px;
}

body.projects-body .live-project-logo--liquid img {
  width: 100%;
  height: 100%;
  filter: invert(1);
}

body.projects-body .live-project-logo-lockup--ornn {
  position: relative;
  display: block;
  width: 72px;
  height: 15.746px;
  filter: invert(1);
}

body.projects-body .live-project-logo-lockup--ornn img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 18.058px;
  height: 15.746px;
}

body.projects-body .live-project-logo-lockup--ornn img:last-child {
  position: absolute;
  left: 24.761px;
  top: 0;
  width: 47.239px;
  height: 15.746px;
}

body.projects-body .live-project-logo-lockup--pragma {
  display: inline-flex;
  align-items: center;
  gap: 5.2px;
  filter: invert(1);
}

body.projects-body .live-project-logo-lockup--pragma img:first-child {
  width: 11.437px;
  height: 18.975px;
}

body.projects-body .live-project-logo-lockup--pragma img:last-child {
  width: 75.363px;
  height: 16.343px;
}

body.projects-body .live-project-logo-lockup--tapcart {
  position: relative;
  display: block;
  width: 84px;
  height: 20px;
  overflow: hidden;
}

body.projects-body .live-project-logo-lockup--tapcart img:first-child {
  position: absolute;
  left: 0.596px;
  top: 1.43px;
  width: 18.396px;
  height: 16.614px;
}

body.projects-body .live-project-logo-lockup--tapcart img:last-child {
  position: absolute;
  left: 22px;
  top: 3px;
  width: 61.101px;
  height: 13.996px;
}

body.projects-body .live-projects-deck {
  width: min(887.784px, 100%);
  aspect-ratio: 887.784 / 273.529;
  overflow: visible;
  isolation: isolate;
}

body.projects-body .live-project-card {
  left: var(--live-card-left);
  top: var(--live-card-top);
  z-index: var(--live-card-z);
  width: 20.2752%;
  height: 90.6668%;
  background-color: var(--live-card-bg);
  transform: rotate(var(--live-card-rotation));
}

body.projects-body .live-project-card--livepeer {
  --live-card-left: 0%;
  --live-card-top: 3.2903%;
  --live-card-z: 1;
  --live-card-bg: #00eb88;
  --live-card-rotation: -3.25deg;
}

body.projects-body .live-project-card--ornn {
  --live-card-left: 9.7467%;
  --live-card-top: 0.7604%;
  --live-card-z: 2;
  --live-card-bg: #000000;
  --live-card-rotation: 2.8deg;
}

body.projects-body .live-project-card--liquid {
  --live-card-left: 22.5381%;
  --live-card-top: 3.6815%;
  --live-card-z: 3;
  --live-card-bg: #131318;
  --live-card-rotation: -2.15deg;
}

body.projects-body .live-project-card--first-digital {
  --live-card-left: 32.4414%;
  --live-card-top: 1.5611%;
  --live-card-z: 4;
  --live-card-bg: #6c777f;
  --live-card-rotation: 2.35deg;
}

body.projects-body .live-project-card--tapcart {
  --live-card-left: 43.6097%;
  --live-card-top: 3.634%;
  --live-card-z: 5;
  --live-card-bg: #f2fc54;
  --live-card-rotation: -1.55deg;
}

body.projects-body .live-project-card--pragma {
  --live-card-left: 54.1145%;
  --live-card-top: 1.9779%;
  --live-card-z: 6;
  --live-card-bg: #1548ff;
  --live-card-rotation: 2.15deg;
}

body.projects-body .live-project-card--patterns {
  --live-card-left: 66.595%;
  --live-card-top: 4.0142%;
  --live-card-z: 7;
  --live-card-bg: #e32d55;
  --live-card-rotation: -2.65deg;
}

body.projects-body .live-project-card--bibliu {
  --live-card-left: 76.3598%;
  --live-card-top: 0.8738%;
  --live-card-z: 8;
  --live-card-bg: #604dad;
  --live-card-rotation: 3.2deg;
}

body.projects-body .live-project-card:nth-child(odd) {
  --live-card-rotation: 2.4deg;
}

body.projects-body .live-project-card:nth-child(even) {
  --live-card-rotation: -3.4deg;
}

body.projects-body .live-project-card--tapcart > img {
  width: 27.231px;
  height: 24.108px;
}

body.projects-body .live-project-card--patterns > img {
  width: 23.447px;
  height: 23.447px;
}

body.projects-body .live-project-card--bibliu > img {
  width: 33.868px;
  height: 29.96px;
}

/* ---- Team card ------------------------------------------------------------ */

body.projects-body .teams-section[hidden] {
  display: none;
}

body.projects-body .teams-section {
  box-sizing: border-box;
  gap: 24px;
  margin-top: 80px;
  padding: 32px;
  border-radius: 28px;
  background-color: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--site-shadow);
}

body.projects-body .teams-title {
  color: #000000;
}

body.projects-body .teams-grid {
  gap: 8px;
  margin-top: 0;
}

body.projects-body .team-tile {
  min-height: 119.5px;
  border-radius: 16px;
  background-color: #f7f6f6;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.projects-body .team-tile::before {
  background-color: #eeeeee;
}

body.projects-body .team-logo-lockup--pragma {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 5.2px;
  width: auto;
  height: auto;
}

body.projects-body .team-logo-lockup--pragma img:first-child {
  position: static;
  flex: 0 0 auto;
  width: 11.437px;
  height: 18.975px;
}

body.projects-body .team-logo-lockup--pragma img:last-child {
  position: static;
  flex: 0 0 auto;
  width: 75.363px;
  height: 16.343px;
}

/* ---- Contact section ------------------------------------------------------ */

body.projects-body .projects-contact-section {
  width: 100%;
  gap: var(--projects-footer-meta-gap);
  padding-top: var(--projects-footer-top-gap);
}

body.projects-body .projects-contact-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--projects-toolbar-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 36;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  transition:
    transform var(--site-toolbar-motion-duration) var(--site-toolbar-motion-ease),
    gap 0.08s var(--ease-out);
}

body.projects-body .projects-contact-actions > * {
  pointer-events: auto;
}

body.projects-body.projects-page-end .projects-contact-actions {
  gap: 0;
}

body.projects-body .projects-contact-actions .contact-social-pill {
  display: inline-flex;
  align-items: flex-start;
  gap: 0;
  padding: 4px;
  border: var(--site-toolbar-stroke-width) solid var(--site-toolbar-stroke-color);
  border-radius: 56px;
  background: #ffffff;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.12);
}

body.projects-body .projects-contact-actions .contact-social-pill-link {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 8px;
  border-radius: 56px;
  transform: none;
  transition: background-color 0.08s var(--ease-out);
}

body.projects-body .projects-contact-actions .contact-social-pill-link:hover,
body.projects-body .projects-contact-actions .contact-social-pill-link:focus-visible {
  background-color: #f8f8f8;
  transform: none;
}

body.projects-body .projects-contact-actions .contact-social-pill-link img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

body.projects-body .projects-contact-actions .projects-contact-chevron-button {
  position: relative;
  display: flex;
  align-items: center;
  flex-basis: auto;
  width: auto;
  padding: var(--site-toolbar-chevron-button-padding);
  overflow: visible;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transform: scale(0.5);
  transform-origin: 50% 50%;
  transition:
    background-color 0.08s var(--ease-out),
    opacity 0.2s var(--ease-out),
    transform 0.28s var(--ease-out);
}

body.projects-body .projects-contact-actions.site-toolbar--chevron-visible .projects-contact-chevron-button {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

body.projects-body .projects-contact-actions .projects-contact-chevron-button:hover,
body.projects-body .projects-contact-actions .projects-contact-chevron-button:focus-visible {
  transform: scale(1);
}

body.projects-body .projects-contact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

body.projects-body .projects-contact-social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  min-height: 358px;
}

body.projects-body .projects-contact-social-card,
body.projects-body .projects-contact-card {
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 28px;
  background-color: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--site-shadow);
}

body.projects-body .projects-contact-social-card {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  text-decoration: none;
  box-shadow: var(--site-shadow);
  transition:
    background-color 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out);
}

body.projects-body .projects-contact-social-card:hover,
body.projects-body .projects-contact-social-card:focus-visible {
  background-color: #f2f2f2;
  box-shadow: var(--site-shadow);
}

body.projects-body .projects-contact-social-card img {
  display: block;
  width: 32px;
  height: 32px;
}

body.projects-body .projects-contact-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 358px;
  padding: 40px 32px 32px;
  color: #000000;
}

body.projects-body .projects-contact-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

body.projects-body .projects-contact-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 26.264px;
  background-color: #f2f2f2;
  color: #797979;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: -0.1876px;
}

body.projects-body .projects-contact-text {
  margin: 0;
  color: #000000;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.4px;
}

body.projects-body .projects-contact-email {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 75px;
  padding: 0 16px;
  border-radius: 16px;
  background-color: #f7f6f6;
  color: rgba(0, 0, 0, 0.2);
  font-size: 34.667px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -1.0577px;
  text-decoration: none;
  white-space: nowrap;
}

body.projects-body .projects-contact-meta {
  color: rgba(0, 0, 0, 0.16);
}

@media (max-width: 960px) {
  body.projects-body .projects-page {
    padding-top: 80px;
    padding-bottom: 72px;
  }

  body.projects-body .projects-list {
    gap: 56px;
  }

  body.projects-body .work-card:not(.work-card--tile),
  body.projects-body .work-card--tile {
    height: auto;
    aspect-ratio: auto;
  }

  body.projects-body .work-card:not(.work-card--tile) {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 8px 8px;
  }

  body.projects-body .work-card:not(.work-card--tile) .work-meta {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
    gap: 16px;
    padding: 0 24px;
  }

  body.projects-body .work-card:not(.work-card--tile) .work-meta-main {
    flex: 0 1 auto;
    width: 100%;
  }

  body.projects-body .work-card:not(.work-card--tile) .work-title {
    width: 100%;
    max-width: 384px;
  }

  body.projects-body .work-card:not(.work-card--tile) .work-tags {
    flex-wrap: wrap;
    width: auto;
    max-width: 100%;
  }

  body.projects-body .work-card:not(.work-card--tile) .work-thumb,
  body.projects-body .work-card--tile .work-thumb {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: auto;
  }

  body.projects-body .work-card:not(.work-card--tile) .work-thumb {
    aspect-ratio: 1016 / 616;
  }

  body.projects-body .work-card--tile {
    padding: 8px 8px 32px;
  }

  body.projects-body .work-card--tile .work-thumb {
    aspect-ratio: 1;
  }

  body.projects-body .work-thumb-media {
    --work-thumb-parallax-range: 12;
    --work-thumb-scale: 1.06;
  }

  body.projects-body .projects-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 0;
  }

  body.projects-body .teams-section {
    padding: 24px;
  }

  body.projects-body .live-projects-section {
    padding: 56px 24px 64px;
  }

}

/* Change these media numbers when the fixed Home button should stop living
   beside the content and become the pill above the content. */
@media (max-width: 1280px) and (min-width: 821px) {
  body.projects-body .index-chevron {
    top: calc(var(--projects-home-adaptive-top) + env(safe-area-inset-top, 0px));
    left: max(var(--projects-home-adaptive-left-safe), calc(50% - var(--projects-home-adaptive-content-half)));
    width: auto;
    height: 38px;
    padding: 10px 14px 10px 10px;
    gap: 8px;
    border: 4px solid rgba(255, 255, 255, 0.24);
    background: #ffffff;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    box-shadow: var(--site-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  body.projects-body .index-chevron::before {
    display: none;
  }

  body.projects-body .index-chevron-label {
    width: auto;
    margin-left: 0;
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.projects-body .index-chevron:hover .index-chevron-label,
  body.projects-body .index-chevron:focus-visible .index-chevron-label {
    margin-left: 0;
    transform: none;
  }
}

@media (max-width: 720px) {
  body.projects-body .work-title,
  body.projects-body .projects-contact-text {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  body.projects-body .work-title {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.3px;
  }

  body.projects-body .projects-contact-text .reveal-line {
    display: inline;
  }

  body.projects-body .projects-contact-text .reveal-line:not(:last-child)::after {
    content: " ";
  }

  body.projects-body .live-projects-section {
    align-items: center;
    gap: 32px;
    overflow: hidden;
  }

  body.projects-body .live-projects-heading {
    width: 100%;
  }

  body.projects-body .live-projects-deck {
    width: min(100%, 260px);
    max-width: 100%;
    aspect-ratio: 180 / 248;
    overflow: visible;
    touch-action: pan-y;
    cursor: grab;
  }

  body.projects-body .live-projects-deck.is-dragging {
    cursor: grabbing;
  }

  body.projects-body .live-project-card {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: var(--live-stack-opacity, 1);
    pointer-events: none;
    transform:
      translate3d(var(--live-stack-x, 0px), var(--live-stack-y, 0px), 0)
      rotate(var(--live-stack-rotation, var(--live-card-rotation)))
      scale(var(--live-stack-scale, 1));
    transition:
      transform 0.34s cubic-bezier(0.165, 0.84, 0.44, 1),
      opacity 0.24s var(--ease-out),
      box-shadow 0.34s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  body.projects-body .live-project-card.is-active {
    pointer-events: auto;
  }

  body.projects-body .live-project-card:hover,
  body.projects-body .live-project-card:focus-visible {
    transform:
      translate3d(var(--live-stack-x, 0px), calc(var(--live-stack-y, 0px) - 10px), 0)
      rotate(var(--live-stack-rotation, var(--live-card-rotation)))
      scale(var(--live-stack-scale, 1));
  }

  body.projects-body .projects-contact-row {
    grid-template-columns: 1fr;
  }

  body.projects-body .projects-contact-card {
    order: 1;
    min-height: 328px;
    padding: 32px;
  }

  body.projects-body .projects-contact-text {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.32px;
  }

  body.projects-body .projects-contact-social-grid {
    order: 2;
    min-height: 0;
  }

  body.projects-body .projects-contact-social-card {
    min-height: 148px;
  }
}

@media (max-width: 560px) {
  body.projects-body .projects-contact-meta {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }

  body.projects-body .projects-contact-location {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  body.projects-body .work-card--tile .work-meta,
  body.projects-body .work-card:not(.work-card--tile) .work-meta {
    padding: 0 16px;
  }

  body.projects-body .projects-contact-social-grid {
    gap: 12px;
  }

  body.projects-body .projects-contact-social-card {
    min-height: 128px;
  }

  body.projects-body .projects-contact-card {
    padding: 32px 24px 24px;
  }

  body.projects-body .projects-contact-email {
    min-height: 64px;
    font-size: clamp(24px, 8vw, 34.667px);
  }
}