/* Keep the original 21st project reveal, timeline, and stacked-image motion. */
#portfolio {
  background: #c8f0dd !important;
  border: 0 !important;
}
#portfolio::before,
#portfolio::after {
  content: none !important;
  display: none !important;
}
#portfolio .circle-clip {
  display: block !important;
  background: #c8f0dd !important;
  box-shadow: none !important;
}
#portfolio > .portfolio-sticky-container {
  background: linear-gradient(180deg, #c8f0dd 0%, #bcebd6 55%, #a9e2cb 100%) !important;
  padding-top: clamp(74px, 5.5vw, 106px) !important;
}
#portfolio .w-px:not(.origin-top) {
  opacity: 1 !important;
  background: rgba(13, 92, 70, .35) !important;
}
#portfolio .w-px.origin-top {
  background: #edfff5 !important;
  box-shadow: 0 0 9px rgba(4, 90, 57, .35) !important;
  transform-origin: top center;
}
#portfolio .portfolio-sticky-container > div:nth-child(2) > div:last-child {
  border: 0 !important;
  box-shadow: 0 22px 50px rgba(12, 63, 47, .18) !important;
  border-radius: 14px !important;
}
#portfolio .portfolio-card-yellow {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #07171a !important;
  box-shadow: none !important;
  backface-visibility: hidden;
}
#portfolio .portfolio-gallery-card > img,
#portfolio .portfolio-sticky-container .portfolio-card-yellow > img {
  object-fit: cover !important;
  background: #07171a !important;
  border-radius: inherit !important;
}
#portfolio .portfolio-sticky-container h2,
#portfolio .portfolio-sticky-container h3 {
  color: #073b32 !important;
}

/* The green gallery resolves gradually into the reference's dark lower pages. */
#work-with-me {
  padding-top: clamp(130px, 14vw, 260px) !important;
  background: linear-gradient(180deg,
    #a9e2cb 0%,
    #75b99a 11%,
    #347b59 23%,
    #17412e 38%,
    #091b14 56%,
    #070907 76%,
    #070707 100%) !important;
}
#work-with-me::before {
  content: none !important;
  display: none !important;
}
#work-with-me > div:first-child h2,
#work-with-me > div:first-child p {
  color: #fff !important;
}
#work-with-me .work-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#work-with-me .work-card svg {
  stroke: #73d8ac !important;
}
#work-with-me .work-card .absolute.inset-0.h-px {
  background: rgba(136, 225, 185, .7) !important;
}
@media (min-width: 701px) and (max-width: 1025px) {
  #portfolio > .portfolio-sticky-container {
    padding-top: 80px !important;
  }
}
@media (max-width: 700px) {
  #portfolio > .portfolio-sticky-container {
    padding-top: 15px !important;
  }
  #portfolio .portfolio-gallery-card > img {
    object-fit: contain !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #portfolio .circle-clip,
  #portfolio .portfolio-card-yellow {
    transition: none !important;
  }
}