:root {
  --productization-wipe-left-clip: 20%;
  --productization-wipe-right-clip: 80%;
  --productization-intro-opacity: 0;
  --productization-intro-y: 54px;
  --productization-gallery-opacity: 0;
  --productization-gallery-meta-opacity: 0;
  --productization-gallery-y: 109.5vh;
  --productization-track-x: 0px;
  --productization-backdrop-opacity: 0;
  --productization-intro-x: 13vw;
  --productization-intro-top: 37vh;
  --productization-intro-width: 74vw;
  --productization-intro-size: 125px;
  --productization-intro-leading: 1.16;
  --productization-meta-x: 4.5vw;
  --productization-meta-y: 84.5vh;
  --productization-category-size: 94px;
  --productization-card-width: 18.5vw;
  --productization-card-aspect: 0.75;
  --productization-card-gap: 1.6vw;
  --productization-group-gap: 11.3vw;
}

.productization-scene {
  position: absolute;
  z-index: 36;
  inset: 0;
  overflow: hidden;
  color: #111315;
  pointer-events: none;
  visibility: hidden;
}

body.productization-active .productization-scene {
  visibility: visible;
}

.productization-plane {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--landing-light-surface, #f9fdfe);
  clip-path: inset(
    0
    var(--productization-wipe-right-clip)
    0
    var(--productization-wipe-left-clip)
  );
  will-change: clip-path;
}

.productization-backdrop {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background: #050607;
  opacity: var(--productization-backdrop-opacity);
  pointer-events: none;
  will-change: opacity;
}

.productization-backdrop__image {
  position: absolute;
  inset: -2%;
  display: block;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: var(--productization-backdrop-position, 50% 50%);
  filter: brightness(0.7) contrast(1.04) saturate(0.84);
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 520ms cubic-bezier(0.42, 0, 0.2, 1);
  will-change: opacity;
}

.productization-backdrop__image[data-active="true"] {
  opacity: 1;
}

.productization-backdrop__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(5 6 7 / 40%), rgb(5 6 7 / 64%)),
    linear-gradient(90deg, rgb(5 6 7 / 54%), transparent 42%, rgb(5 6 7 / 22%));
}

.productization-intro {
  position: absolute;
  z-index: 2;
  top: var(--productization-intro-top);
  left: var(--productization-intro-x);
  width: var(--productization-intro-width);
  opacity: var(--productization-intro-opacity);
  transform: translate3d(0, var(--productization-intro-y), 0);
  will-change: opacity, transform;
}

.productization-intro > span,
.productization-card figcaption {
  font-family: "Oswald Lab", sans-serif;
  text-transform: uppercase;
}

.productization-intro > span {
  display: block;
  margin-bottom: clamp(24px, 1.8vh, 40px);
  color: rgb(17 19 21 / 46%);
  font-size: clamp(13px, 0.46vw, 18px);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
}

.productization-intro h2 {
  margin: 0;
  font-size: var(--productization-intro-size);
  font-weight: 400;
  letter-spacing: -0.048em;
  line-height: var(--productization-intro-leading);
  word-break: keep-all;
}

.productization-intro h2 span,
.productization-intro h2 strong {
  display: block;
  white-space: nowrap;
}

.productization-intro h2 strong {
  font-weight: 700;
}

.productization-gallery {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: var(--productization-gallery-opacity);
  will-change: opacity;
}

.productization-chapters {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.productization-chapter {
  position: absolute;
  inset: 0;
  margin: 0;
  color: #111315;
  opacity: 0;
  transform: translate3d(0, var(--productization-chapter-y, 22px), 0);
  will-change: opacity, transform;
}

.productization-chapter__title {
  position: absolute;
  top: var(--productization-meta-y);
  left: var(--productization-meta-x);
  white-space: nowrap;
}

.productization-chapter__title small,
.productization-chapter__title strong {
  display: block;
}

.productization-chapter__title small {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 0.9vw, 34px);
  margin-bottom: clamp(8px, 0.55vh, 12px);
  color: rgb(17 19 21 / 46%);
  font-family: "Oswald Lab", sans-serif;
  font-size: clamp(12px, 0.4vw, 16px);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
}

.productization-chapter__title small b {
  color: #111315;
  font-size: clamp(17px, 0.64vw, 25px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.productization-chapter__title small span {
  font: inherit;
}

.productization-chapter__title strong {
  font-size: var(--productization-category-size);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.9;
  white-space: nowrap;
}

.productization-chapter__copy {
  position: absolute;
  top: calc(var(--productization-meta-y) + 0.2vh);
  right: 4vw;
  width: min(27vw, 68rem);
}

.productization-chapter__copy small {
  display: block;
  margin-bottom: clamp(14px, 1.15vh, 26px);
  color: rgb(17 19 21 / 44%);
  font-family: "Oswald Lab", sans-serif;
  font-size: clamp(12px, 0.4vw, 16px);
  font-weight: 500;
  letter-spacing: 0.17em;
  line-height: 1;
}

.productization-chapter__copy p {
  margin: 0;
  color: rgb(17 19 21 / 72%);
  font-size: clamp(15px, 0.66vw, 25px);
  font-weight: 470;
  letter-spacing: -0.025em;
  line-height: 1.58;
  word-break: keep-all;
}

.productization-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--productization-card-gap);
  width: max-content;
  padding: 0 4vw 5vh;
  transform: translate3d(
    var(--productization-track-x),
    var(--productization-gallery-y),
    0
  );
  will-change: transform;
}

.productization-card {
  --productization-card-brightness: 0.9;
  --productization-card-contrast: 0.84;
  --productization-card-saturation: 0.28;
  --productization-card-opacity: 0.56;
  flex: 0 0 var(--productization-card-width);
  width: var(--productization-card-width);
  margin: 0;
}

.productization-card--group-start {
  margin-left: var(--productization-group-gap);
}

.productization-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--productization-card-aspect);
  object-fit: cover;
  object-position: var(--productization-image-position, 50% 50%);
  background: var(--landing-light-surface, #f9fdfe);
  clip-path: inset(0);
  filter:
    brightness(var(--productization-card-brightness))
    contrast(var(--productization-card-contrast))
    saturate(var(--productization-card-saturation));
  opacity: var(--productization-card-opacity);
  will-change: filter, opacity;
}

.productization-card figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(13px, 0.75vh, 18px);
  color: #111315;
  font-size: clamp(12px, 0.4vw, 16px);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  opacity: var(--productization-card-opacity);
}

.productization-card figcaption small {
  color: rgb(17 19 21 / 48%);
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

body.productization-backdrop-active .productization-chapter,
body.productization-backdrop-active .productization-card figcaption {
  color: #f9fdfe;
}

body.productization-backdrop-active .productization-chapter__title small,
body.productization-backdrop-active .productization-chapter__copy small,
body.productization-backdrop-active .productization-card figcaption small {
  color: rgb(249 253 254 / 58%);
}

body.productization-backdrop-active .productization-chapter__title small b {
  color: #f9fdfe;
}

body.productization-backdrop-active .productization-chapter__copy p {
  color: rgb(249 253 254 / 82%);
}

.productization-card[data-hero="true"] img,
.productization-card[data-hero="true"] figcaption {
  opacity: 1;
}

body.productization-active.surface-grid-scroll-active .lab-brand > .lab-brand__symbol,
body.productization-active.surface-grid-scroll-active .lab-brand > .lab-brand__name {
  filter: brightness(0) invert(1) !important;
}

.productization-brand-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  clip-path: inset(
    0
    var(--productization-wipe-right-clip)
    0
    var(--productization-wipe-left-clip)
  );
  visibility: hidden;
  pointer-events: none;
  will-change: clip-path;
}

body.productization-active .productization-brand-overlay {
  visibility: visible;
}

body.productization-active.surface-grid-scroll-active
  .productization-brand-overlay
  .lab-brand__symbol,
body.productization-active.surface-grid-scroll-active
  .productization-brand-overlay
  .lab-brand__name {
  filter: brightness(0) !important;
  pointer-events: none;
}

body.productization-backdrop-active.surface-grid-scroll-active
  .productization-brand-overlay
  .lab-brand__symbol,
body.productization-backdrop-active.surface-grid-scroll-active
  .productization-brand-overlay
  .lab-brand__name {
  filter: brightness(0) invert(1) !important;
}

@media (max-width: 900px) {
  .productization-intro {
    left: 6vw;
    width: 88vw;
  }

  .productization-intro h2 {
    font-size: clamp(46px, 9.2vw, 82px);
  }

  .productization-chapter__title {
    top: 58vh;
    left: 6vw;
  }

  .productization-chapter__copy {
    top: 71vh;
    right: 6vw;
    width: 88vw;
  }

  .productization-chapter__copy p {
    max-width: 38em;
  }
}