/* Custom portfolio edits layered over the original Framer export. */
.wl-text-logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: #fff;
  font-family: Satoshi, Inter, Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .wl-bio-profile-photo {
    margin-left: -40px !important;
  }

  .wl-bio-profile-info {
    transform: translateX(50px) !important;
  }
}

@media (max-width: 767.98px) {
  .wl-text-logo {
    color: #131516;
    font-size: 30px;
  }

}

.wl-footer-wordmark {
  width: 100%;
  color: #f8f4f1;
  font-family: Satoshi, Inter, Arial, sans-serif;
  font-size: clamp(84px, 19vw, 250px);
  font-weight: 900;
  line-height: .72;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

.wl-footer-phone-icon {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

.wl-footer-icon-link {
  position: relative !important;
  overflow: visible !important;
}

.wl-footer-icon-link::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -7px !important;
  width: 24px !important;
  height: 2px !important;
  background: #fff !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center !important;
  transition: opacity 220ms ease, transform 220ms ease !important;
  pointer-events: none !important;
}

.wl-footer-icon-link:hover::after,
.wl-footer-icon-link:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(-50%) scaleX(1) !important;
}

.wl-contact-photo {
  object-fit: contain !important;
  object-position: center center !important;
}

.wl-contact-lanyard-holder {
  position: relative !important;
  overflow: visible !important;
}

.wl-contact-lanyard-clip-release {
  overflow: visible !important;
}

.wl-contact-photo-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.wl-contact-lanyard-mount {
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  z-index: 2 !important;
  width: 1020px !important;
  min-width: 1020px !important;
  max-width: none !important;
  height: 1020px !important;
  min-height: 1020px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  flex: 0 0 auto !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.wl-contact-lanyard-mount canvas {
  pointer-events: auto !important;
}

.framer-2cf6tu .framer-1tpxror .framer-13j37wf > .framer-pkr5gx:nth-of-type(1) > .framer-1u1ciu8 {
  display: none !important;
}

.framer-2tqzs {
  display: none !important;
}

.framer-bCfL5 .framer-cwecu6 > .framer-22jjbx:nth-of-type(1) {
  display: none !important;
}

.framer-HM8Dx .framer-12kkjpm > .framer-gdxh7h:nth-of-type(1) {
  display: none !important;
}

.framer-bCfL5 .framer-cwecu6 > .framer-jp06o5:nth-of-type(2) .framer-ke3y14-container,
.framer-bCfL5 .framer-cwecu6 > .framer-jp06o5:nth-of-type(2) .framer-nw6mae {
  display: none !important;
}

.framer-CtIe3.framer-1kteqw2,
.framer-CtIe3.framer-1kteqw2 .framer-5wkiem {
  display: none !important;
}

.framer-bCfL5 .framer-cwecu6 > .framer-jp06o5:nth-of-type(2) > .framer-1i00raz:nth-of-type(1) {
  transform: translateY(100px) !important;
}

.wl-bio-copy {
  white-space: pre-line !important;
}

.wl-bio-module {
  width: min(calc(100vw - 64px), 1838px) !important;
  max-width: none !important;
  height: 1000px !important;
  display: block !important;
  flex: 0 0 auto !important;
  position: relative !important;
  left: 0 !important;
  margin: 0 !important;
  margin-top: -150px !important;
  transform: none !important;
  text-align: center !important;
  overflow: visible !important;
  background: transparent !important;
  isolation: isolate !important;
  contain: style !important;
}

.wl-bio-profile {
  position: relative !important;
  z-index: 3 !important;
  box-sizing: border-box !important;
  --wl-bio-profile-scale: 1.4312;
  width: 627px !important;
  min-width: 627px !important;
  height: 538px !important;
  margin-left: 172px !important;
  margin-top: -240px !important;
  padding-top: 0 !important;
  color: #fff !important;
  font-family: Satoshi, Inter, Arial, sans-serif !important;
  text-align: left !important;
  transform: scale(var(--wl-bio-profile-scale)) !important;
  transform-origin: top left !important;
  backface-visibility: hidden !important;
}

.wl-bio-profile-photo {
  display: block !important;
  width: 260px !important;
  height: auto !important;
  margin: 0 0 22px 0 !important;
  object-fit: contain !important;
}

.wl-bio-profile-info {
  position: absolute !important;
  left: 290px !important;
  top: 30px !important;
  width: 260px !important;
}

.wl-bio-profile-info h3 {
  margin: 0 0 12px !important;
  color: #fff !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.wl-bio-profile-en-name {
  margin-left: 10px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: rgba(255,255,255,.72) !important;
  white-space: nowrap !important;
}

.wl-bio-profile-role {
  margin: 0 0 34px !important;
  color: #00f5ff !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.wl-bio-profile-info dl {
  display: grid !important;
  gap: 9px !important;
  margin: 0 !important;
}

.wl-bio-profile-info dl div {
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  gap: 10px !important;
  align-items: center !important;
}

.wl-bio-profile-info dt,
.wl-bio-profile-info dd {
  margin: 0 !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.wl-bio-profile-info dd {
  color: rgba(255,255,255,.62) !important;
  font-weight: 500 !important;
}

.wl-bio-profile-about {
  margin: 0 0 22px !important;
  color: #fff !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: translateY(-15px) !important;
}

.wl-bio-tool-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 54px) !important;
  gap: 14px 18px !important;
  width: max-content !important;
  margin-bottom: 22px !important;
  transform: translateY(-15px) !important;
}

.wl-bio-tool-grid img {
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
}

.wl-bio-profile-copy {
  display: grid !important;
  gap: 10px !important;
  width: min(560px, 100%) !important;
  transform: translateY(-15px) !important;
}

.wl-bio-profile-copy p {
  display: flex !important;
  gap: 14px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

.wl-bio-profile-copy strong {
  flex: 0 0 auto !important;
  color: #fff !important;
  font-weight: 800 !important;
}

.wl-bio-profile-intro p {
  display: block !important;
  max-width: 620px !important;
  color: rgba(255,255,255,.68) !important;
}

.wl-bio-copy-label {
  color: #fff !important;
  font-weight: 800 !important;
}

.wl-bio-copy-row {
  display: block !important;
}

.wl-bio-copy-text {
  color: rgba(255,255,255,.68) !important;
}

.wl-digital-strategy-cover-item img {
  object-fit: cover !important;
  object-position: center center !important;
  transition: transform 450ms cubic-bezier(.2,.85,.2,1) !important;
  transform-origin: center center !important;
}

.wl-digital-strategy-cover-item {
  transform: none !important;
  transform-origin: center center !important;
  animation: none !important;
}

.wl-digital-strategy-cover-item > div {
  transform: none !important;
  transform-origin: center center !important;
  animation: none !important;
}

.wl-digital-strategy-cover-item:hover img {
  transform: scale(1.07) !important;
}

@keyframes wl-cover-tilt-straighten {
  0% {
    opacity: 0;
    transform: translateY(110px) rotate(-8deg) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes wl-cover-inner-straighten {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.wl-lanyard-mount {
  position: absolute !important;
  left: calc(-1.2% - 200px) !important;
  top: calc(4.2% - 200px) !important;
  z-index: 3 !important;
  width: min(900px, 72vw) !important;
  aspect-ratio: 1 / 1.45 !important;
  pointer-events: auto !important;
}

.wl-lanyard-mount canvas {
  pointer-events: auto !important;
}

.wl-bio-side-video {
  position: absolute !important;
  right: 80px !important;
  top: 100px !important;
  z-index: 1 !important;
  width: min(80.65%, 870px) !important;
  height: 860px !important;
  aspect-ratio: 1014 / 1002 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 18px !important;
  background: transparent !important;
  pointer-events: none !important;
  transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  contain: paint !important;
}

.wl-intro-lock,
.wl-intro-lock body {
  overflow: hidden !important;
}

.wl-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 1;
  visibility: visible;
  transition: opacity 650ms ease, visibility 650ms ease;
}

.wl-intro.is-done {
  opacity: 0;
  visibility: hidden;
}

.wl-intro-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #000;
}

section[data-framer-name="Hero"],
.framer-105fjnj {
  background: #000 !important;
  position: relative !important;
  overflow: hidden !important;
}

.framer-105fjnj [data-framer-name="Desktop-01"],
.framer-105fjnj [data-framer-name="Tablet"],
.framer-105fjnj [data-framer-name="Phone"] {
  position: relative !important;
  overflow: hidden !important;
}

.framer-105fjnj [data-framer-name="Bg Image"] {
  opacity: 0 !important;
  visibility: hidden !important;
}

.framer-105fjnj [data-wl-cover-video="true"] > img {
  opacity: 0 !important;
}

.wl-video-hero > .wl-hero-video,
.framer-105fjnj > .wl-hero-video,
.framer-105fjnj.wl-video-hero > .wl-hero-video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

.framer-105fjnj.wl-video-hero > :not(.wl-hero-video),
.framer-105fjnj [data-framer-name="Container"] {
  position: relative !important;
  z-index: 1 !important;
}

.wl-hero-pin-stage {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 720px !important;
  margin: 0 !important;
  background: transparent !important;
  overflow: clip !important;
}

.wl-hero-pin-stage > .framer-105fjnj {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 720px !important;
}

.wl-hero-transition-spacer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  background: #131516 !important;
  pointer-events: none !important;
}

.wl-hero-black-reveal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 8 !important;
  background: #131516 !important;
  opacity: 0;
  pointer-events: none !important;
  transform: translate3d(0, calc((1 - var(--wl-hero-reveal, 0)) * 100%), 0);
  contain: paint;
  will-change: transform, opacity;
}

.wl-hero-black-reveal {
  display: none !important;
}

.wl-hero-black-reveal.is-active {
  opacity: 1;
}

[data-framer-background-image-wrapper="true"] .wl-cover-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  animation: wl-cover-fade 8s infinite;
}

[data-framer-background-image-wrapper="true"] .wl-cover-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center center;
}

[data-framer-background-image-wrapper="true"] .wl-cover-slide:nth-of-type(3) {
  animation-delay: 4s;
}

@keyframes wl-cover-fade {
  0%, 43% {
    opacity: 1;
  }

  50%, 93% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.wl-hide-section {
  display: none !important;
}

.wl-experience-title,
.wl-experience-desc,
.wl-experience-date {
  overflow-wrap: anywhere;
}

.wl-experience-title {
  max-width: none !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

.wl-experience-desc {
  white-space: pre-line !important;
  line-height: 1.45 !important;
}

.wl-experience-date {
  white-space: nowrap !important;
  font-size: clamp(18px, 2.2vw, 34px) !important;
  letter-spacing: 0 !important;
}

@media (max-width: 767.98px) {
  .wl-experience-title {
    font-size: clamp(24px, 6vw, 34px) !important;
    line-height: 1.12 !important;
  }

  .wl-experience-desc {
    line-height: 1.35 !important;
  }

  .wl-experience-date {
    font-size: clamp(15px, 4vw, 22px) !important;
  }
}

.wl-project-section {
  position: relative !important;
  z-index: 50 !important;
  background: #131516;
  color: #fff;
  padding: clamp(72px, 10vw, 140px) clamp(20px, 5vw, 60px);
}

.wl-project-inner {
  width: min(100%, 1140px);
  margin: 0 auto;
}

.wl-project-title {
  margin: 0 0 clamp(42px, 6vw, 78px);
  color: #fff;
  font-family: Satoshi, Inter, Arial, sans-serif;
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: 0;
}

.wl-section-title-normalized {
  display: block !important;
  width: 100% !important;
  height: 43px !important;
  margin: 0 auto clamp(10px, 1.5vw, 18px) !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  line-height: 43px !important;
}

.wl-awards-title-normalized {
  width: min(1140px, 100%) !important;
  height: 43px !important;
  margin-bottom: 20px !important;
  line-height: 43px !important;
}

.wl-awards-section {
  --wl-awards-section-compress: 20px;
}

.wl-awards-title-wrap-removed {
  display: contents !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wl-expertise-title-normalized {
  width: min(228px, 100%) !important;
  height: 43px !important;
  margin-bottom: 10px !important;
  line-height: 43px !important;
}

.wl-other-title-normalized {
  width: min(419px, 100%) !important;
  margin-bottom: 0 !important;
}

.wl-section-title-normalized,
.wl-section-title-normalized * {
  text-align: center !important;
}

.wl-section-title-wrap-normalized {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  text-align: center !important;
}

#expertise {
  content-visibility: visible;
}

#expertise .framer-dma85r {
  contain: paint style;
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

#expertise .framer-dDde7 img {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.wl-latest-title-wrap-removed {
  display: contents !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wl-latest-title-outer-removed {
  display: contents !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wl-latest-title-normalized {
  margin-bottom: 20px !important;
}

.wl-latest-title-section-normalized .wl-latest-title-normalized + * {
  margin-top: 0 !important;
}

.wl-original-project-section {
  position: relative !important;
  z-index: 50 !important;
  padding-bottom: 90px !important;
}

.wl-original-project-section .framer-sc7pa5,
.wl-original-project-section .framer-fwo6yt {
  width: min(calc(100vw - 64px), 1838px) !important;
  max-width: min(calc(100vw - 64px), 1838px) !important;
}

.wl-original-project-section .framer-h11zrn {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.wl-masonry {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: clamp(10px, 1.5vw, 18px) !important;
  column-count: 3;
  column-gap: 22px;
  transform: none !important;
  opacity: 1 !important;
}

.wl-block-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 350px));
  justify-content: center;
  gap: 22px;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: clamp(10px, 1.5vw, 18px) !important;
  transform: none !important;
  opacity: 1 !important;
}

.wl-animation-effect-section {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  height: 620px !important;
  min-height: 620px !important;
  max-height: 620px !important;
  padding: 0 32px 82px;
  background: #131516;
  color: #fff;
}

.wl-animation-effect-inner {
  width: min(calc(100vw - 64px), 1838px);
  max-width: 1838px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wl-animation-effect-inner.wl-section-title-wrap-normalized {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.wl-animation-effect-section h2 {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto 50px !important;
  color: #fff;
  font-family: Satoshi, Inter, Arial, sans-serif;
  font-size: clamp(40px, 3.4vw, 48px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: 0;
  text-align: center;
}

.wl-animation-effect-carousel {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  align-self: stretch;
}

.wl-animation-effect-row {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.wl-animation-effect-track {
  display: flex;
  width: max-content;
  gap: clamp(18px, 2vw, 28px);
  animation: wl-animation-marquee 16s linear infinite;
  will-change: transform;
}

.wl-animation-effect-item {
  flex: 0 0 330px;
  display: block;
  position: relative;
  width: 330px;
  aspect-ratio: 3 / 4;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #222;
  cursor: zoom-in;
}

.wl-animation-effect-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  transition: transform 750ms cubic-bezier(.19, 1, .22, 1), filter 450ms ease;
}

.wl-animation-effect-item:hover img {
  transform: none;
  filter: saturate(1.08);
}

@keyframes wl-animation-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - clamp(9px, 1vw, 14px)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .wl-animation-effect-track {
    animation: none !important;
  }
}

.wl-white-block {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 0;
  border-radius: 0;
  background: #fff;
  cursor: zoom-in;
}

.wl-white-block:hover {
  background: #f4f4f4;
}

.wl-project-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #222;
  cursor: zoom-in;
}

.wl-project-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 700ms cubic-bezier(.16,1,.3,1), filter 300ms ease;
}

.wl-project-thumb:hover img {
  transform: scale(1.035);
  filter: contrast(1.05) saturate(1.04);
}

.wl-masonry button {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto !important;
  margin: 0 0 22px;
  padding: 0;
  overflow: hidden;
  break-inside: avoid;
  border: 0;
  border-radius: 0;
  background: #222;
  cursor: zoom-in;
}

.wl-masonry img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0 !important;
  object-fit: contain !important;
  transition: transform 700ms cubic-bezier(.16,1,.3,1), filter 300ms ease;
}

.wl-masonry button:hover img {
  transform: scale(1.035);
  filter: contrast(1.05) saturate(1.04);
}

.wl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, .88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.wl-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.wl-lightbox img {
  max-width: min(96vw, 1280px);
  max-height: 92vh;
  object-fit: contain;
  transform: scale(.96);
  transition: transform 280ms cubic-bezier(.16,1,.3,1);
}

.wl-lightbox-detail {
  display: none;
  width: min(96vw, 1280px);
  max-height: 92vh;
  overflow: auto;
  gap: 18px;
  transform: scale(.96);
  transition: transform 280ms cubic-bezier(.16,1,.3,1);
}

.wl-lightbox-detail video,
.wl-lightbox-detail img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  background: #000;
  object-fit: contain;
}

.wl-lightbox-detail[data-wl-detail="project-2"],
.wl-lightbox-detail[data-wl-detail="project-9"],
.wl-lightbox-detail[data-wl-detail="project-13"],
.wl-lightbox-detail[data-wl-detail="project-15"] {
  width: 100%;
  max-width: none;
  justify-items: center;
  align-content: center;
  justify-content: center;
  overscroll-behavior: contain;
}

.wl-project-hover-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}

.wl-lightbox-detail[data-wl-detail="project-9"] .wl-project-hover-preview {
  grid-template-columns: auto;
  justify-content: center;
  align-items: center;
}

.wl-project-side-image {
  display: block;
  width: auto !important;
  max-width: min(360px, 24vw) !important;
  height: min(1080px, calc(100vh - 72px)) !important;
  max-height: calc(100vh - 72px) !important;
  object-fit: contain;
}

.wl-lightbox-detail[data-wl-detail="project-9"] .wl-project-preview-video {
  position: fixed;
  top: 50%;
  left: 16vw;
  z-index: 1;
  display: block;
  width: min(320px, 24vw);
  height: min(1080px, calc(100vh - 72px));
  max-height: calc(100vh - 72px);
  background: #000;
  object-fit: contain;
  transform: translateY(-50%);
}

.wl-lightbox-detail[data-wl-detail="project-2"] .wl-project-detail-image,
.wl-lightbox-detail[data-wl-detail="project-9"] .wl-project-detail-image,
.wl-lightbox-detail[data-wl-detail="project-13"] .wl-project-detail-image,
.wl-lightbox-detail[data-wl-detail="project-15"] .wl-project-detail-image {
  width: auto !important;
  max-width: none !important;
  height: min(1080px, calc(100vh - 72px)) !important;
  max-height: calc(100vh - 72px) !important;
  cursor: default;
  justify-self: center;
}

.wl-lightbox-detail[data-wl-detail="project-2"] .wl-project-zoom-image,
.wl-lightbox-detail[data-wl-detail="project-9"] .wl-project-zoom-image,
.wl-lightbox-detail[data-wl-detail="project-13"] .wl-project-zoom-image,
.wl-lightbox-detail[data-wl-detail="project-15"] .wl-project-zoom-image {
  position: fixed;
  top: var(--wl-project2-zoom-top, 50%);
  left: calc(50% + 190px);
  z-index: 2;
  width: 750px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  opacity: 0;
  pointer-events: none;
  transform: scale(.98);
  transform-origin: left center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.wl-project-hover-preview:hover .wl-project-zoom-image {
  opacity: 1;
  transform: scale(1);
}

.wl-lightbox-detail[data-wl-detail="project-3"],
.wl-lightbox-detail[data-wl-detail="project-6"],
.wl-lightbox-detail[data-wl-detail="project-4"],
.wl-lightbox-detail[data-wl-detail="project-16"] {
  width: 100%;
  max-width: none;
  justify-items: center;
}

.wl-lightbox-detail[data-wl-detail="6周年情书H5"] {
  width: 100%;
  max-width: none;
  justify-items: center;
}

.wl-lightbox-detail[data-wl-detail="project-3"] video,
.wl-lightbox-detail[data-wl-detail="project-6"] video,
.wl-lightbox-detail[data-wl-detail="project-4"] video,
.wl-lightbox-detail[data-wl-detail="project-16"] video {
  width: auto;
  height: min(1080px, calc(100vh - 72px));
  max-height: calc(100vh - 72px);
  justify-self: center;
}

.wl-lightbox-detail[data-wl-detail="6周年情书H5"] video {
  width: auto;
  height: min(1080px, calc(100vh - 72px));
  max-height: calc(100vh - 72px);
  justify-self: center;
}

.wl-lightbox-detail[data-wl-detail="project-3"] img,
.wl-lightbox-detail[data-wl-detail="project-6"] img,
.wl-lightbox-detail[data-wl-detail="project-4"] img,
.wl-lightbox-detail[data-wl-detail="project-16"] img {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  justify-self: center;
}

.wl-lightbox-detail[data-wl-detail="6周年情书H5"] img {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  justify-self: center;
}

.wl-lightbox-block {
  display: none;
  width: auto;
  height: min(88vh, 960px);
  aspect-ratio: 3 / 4;
  max-width: 92vw;
  background: #fff;
  transform: scale(.96);
  transition: transform 280ms cubic-bezier(.16,1,.3,1);
}

.wl-lightbox.is-open img {
  transform: scale(1);
}

.wl-lightbox.is-open .wl-lightbox-block {
  transform: scale(1);
}

.wl-lightbox.is-open .wl-lightbox-detail {
  transform: scale(1);
}

.wl-lightbox button {
  position: fixed;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 767.98px) {
  .wl-bio-module {
    width: calc(100vw - 40px) !important;
    height: auto !important;
    min-height: 760px !important;
  }

  .wl-bio-profile {
    display: grid !important;
    grid-template-columns: minmax(118px, 42%) minmax(0, 58%) !important;
    column-gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding-top: 36px !important;
    transform: none !important;
  }

  .wl-bio-profile-photo {
    justify-self: start !important;
    width: 45vw !important;
    margin-top: 10px !important;
    margin-left: 0 !important;
    margin-bottom: 18px !important;
  }

  .wl-bio-profile-info {
    position: static !important;
    justify-self: end !important;
    width: 100% !important;
    max-width: 280px !important;
    margin-top: 80px !important;
    margin-bottom: 24px !important;
    transform: translateX(50px) !important;
    text-align: left !important;
  }

  .wl-bio-profile-info h3 {
    font-size: 30px !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important;
  }

  .wl-bio-profile-en-name {
    margin-left: 6px !important;
    font-size: 14px !important;
  }

  .wl-bio-profile-role {
    margin-bottom: 18px !important;
    font-size: 18px !important;
  }

  .wl-bio-profile-info dl {
    gap: 6px !important;
  }

  .wl-bio-profile-info dl div {
    grid-template-columns: 40px 1fr !important;
    gap: 8px !important;
  }

  .wl-bio-profile-info dt,
  .wl-bio-profile-info dd {
    font-size: 14px !important;
  }

  .wl-bio-profile-about,
  .wl-bio-tool-grid,
  .wl-bio-profile-copy {
    grid-column: 1 / -1 !important;
  }

  .wl-bio-tool-grid {
    grid-template-columns: repeat(5, 48px) !important;
    gap: 12px !important;
  }

  .wl-bio-tool-grid img {
    width: 48px !important;
    height: 48px !important;
  }

  .wl-bio-profile-intro p {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .wl-bio-copy-label,
  .wl-bio-copy-text {
    display: block !important;
  }

  .wl-bio-copy-text {
    margin-bottom: 4px !important;
  }

  .wl-bio-side-video {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 24px !important;
    transform: translateX(-10px) !important;
  }

  .wl-lanyard-mount {
    left: 2% !important;
    top: 4% !important;
    width: min(44vw, 390px) !important;
  }

  .wl-project-section {
    padding: 70px 20px;
  }

  .wl-masonry {
    column-count: 2;
    column-gap: 12px;
  }

  .wl-block-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .wl-masonry button {
    margin-bottom: 12px;
  }

  .wl-lightbox-block {
    width: min(82vw, 420px);
    height: auto;
  }

  .wl-lightbox-detail {
    width: min(92vw, 720px);
    max-height: 88vh;
    gap: 12px;
  }
}
/* Bilingual section title refinements */
.wl-expertise-title-normalized,
.wl-other-title-normalized,
.wl-animation-title-normalized,
.wl-awards-title-normalized {
  width: min(360px, 100%) !important;
  height: auto !important;
  min-height: 68px !important;
  margin-bottom: 14px !important;
  line-height: 1.05 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

.wl-expertise-title-normalized .wl-key-title-cn,
.wl-other-title-normalized .wl-other-title-cn,
.wl-animation-title-normalized .wl-animation-title-cn,
.wl-awards-title-normalized .wl-work-title-cn {
  display: block !important;
  font-size: 48px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.wl-expertise-title-normalized .wl-key-title-cn,
.wl-animation-title-normalized .wl-animation-title-cn,
.wl-awards-title-normalized .wl-work-title-cn {
  font-weight: 800 !important;
}

.wl-other-title-normalized .wl-other-title-cn {
  font-weight: 800 !important;
}

.wl-expertise-title-normalized .wl-key-title-en,
.wl-other-title-normalized .wl-other-title-en,
.wl-animation-title-normalized .wl-animation-title-en,
.wl-awards-title-normalized .wl-work-title-en {
  display: block !important;
  opacity: 0.7 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.wl-expertise-title-normalized .wl-key-title-en,
.wl-animation-title-normalized .wl-animation-title-en,
.wl-awards-title-normalized .wl-work-title-en {
  font-weight: 300 !important;
}

.wl-other-title-normalized .wl-other-title-en {
  font-weight: inherit !important;
}

.wl-expertise-title-normalized,
.wl-other-title-normalized,
.wl-awards-title-normalized {
  transform: translateY(20px) !important;
}

#other-project {
  margin-top: 0px !important;
}

@media (max-width: 767.98px) {
  .wl-expertise-title-normalized,
  .wl-other-title-normalized,
  .wl-animation-title-normalized,
  .wl-awards-title-normalized {
    min-height: 60px !important;
  }

  .wl-expertise-title-normalized .wl-key-title-cn,
  .wl-other-title-normalized .wl-other-title-cn,
  .wl-animation-title-normalized .wl-animation-title-cn,
  .wl-awards-title-normalized .wl-work-title-cn {
    font-size: 40px !important;
  }

  .wl-expertise-title-normalized .wl-key-title-en,
  .wl-other-title-normalized .wl-other-title-en,
  .wl-animation-title-normalized .wl-animation-title-en,
  .wl-awards-title-normalized .wl-work-title-en {
    font-size: 18px !important;
  }
}
/* Spacing tune: expertise bottom and other-project title */
#expertise {
  padding-bottom: 20px !important;
}

.wl-other-title-normalized {
  transform: translateY(40px) !important;
}
/* Only trim the top of the black background for Other Projects. */
#other-project {
  margin-top: 0px !important;
  background: #131516 !important;
}
#other-project {
  padding-bottom: 110px !important;
}
.wl-animation-effect-section {
  height: auto !important;
  min-height: 620px !important;
  max-height: none !important;
  padding-bottom: 90px !important;
}