:root {
  --lab-division-ink: #202221;
}

body.lab-division-detail-body,
body.lab-division-detail-body .container-wrap {
  background: #fff;
}

body.lab-division-detail-body #header-space {
  height: 0 !important;
}

body.lab-division-detail-body #to-top,
body.lab-division-detail-body #footer-outer {
  display: none !important;
}

body.lab-division-detail-body .container-wrap {
  margin: 0;
  padding: 0 !important;
}

body.lab-division-detail-body .container-wrap,
body.lab-division-detail-body .container-wrap > .main-content,
body.lab-division-detail-body #main-content,
body.lab-division-detail-body .lab-division-detail-wrap {
  height: auto !important;
  max-height: none !important;
  min-height: 0;
  overflow: visible !important;
}

body.lab-division-detail-body #header-outer,
body.lab-division-detail-body #header-outer.transparent,
body.lab-division-detail-body #header-outer.small-nav,
body.lab-division-detail-body #header-outer.scrolled-down {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: fixed !important;
  z-index: 100;
}

body.lab-division-detail-body #header-outer #top,
body.lab-division-detail-body #header-outer .bg-color-stripe {
  background: transparent !important;
}

.lab-division-detail-wrap {
  color: var(--lab-division-ink);
  position: relative;
}

.lab-division-detail {
  --lab-division-node-half: 38px;
  --lab-division-step-left: 19.75vw;
  margin-left: calc(50% - 50vw);
  max-width: none;
  overflow: clip;
  position: relative;
  width: 100vw;
}

.lab-division-detail__hero {
  min-height: max(960px, 100svh);
  overflow: hidden;
  position: relative;
}

.lab-division-detail__hero-copy {
  left: 50%;
  position: absolute;
  text-align: center;
  top: clamp(170px, 18.4vh, 199px);
  transform: translateX(-50%);
  width: min(1000px, calc(100% - 48px));
  z-index: 2;
}

.lab-division-detail__eyebrow {
  align-items: center;
  color: var(--lab-division-ink);
  display: inline-flex;
  gap: 9px;
  margin: 0 0 3px;
}

.lab-division-detail__eyebrow span {
  background: var(--lab-division-marker);
  border-radius: 50%;
  display: block;
  height: 17px;
  width: 18px;
}

.lab-division-detail h1,
.lab-division-detail h2 {
  color: var(--lab-division-ink);
  margin: 0;
}

.lab-division-detail__claim {
  color: var(--lab-division-accent);
  margin: 18px auto 0;
  max-width: 900px;
}

.lab-division-detail__hero-visual {
  display: block;
  left: 50%;
  margin: 0;
  position: absolute;
  top: clamp(400px, 38.6vh, 417px);
  transform: translateX(-50%);
  width: min(62.5vw, 1200px);
}

.lab-division-detail__hero-visual img {
  display: block;
  height: auto;
  width: 100%;
}

.lab-division-detail__timeline {
  min-height: 2480px;
  position: relative;
}

.lab-division-detail__decorations {
  height: 100svh;
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 1;
}

.lab-division-detail__mark {
  display: block;
  height: auto;
  position: absolute;
  transition:
    filter 600ms cubic-bezier(.22, 1, .36, 1),
    opacity 600ms cubic-bezier(.22, 1, .36, 1),
    transform 600ms cubic-bezier(.22, 1, .36, 1);
  will-change: filter, opacity, transform;
}

.lab-division-detail__mark--left {
  left: min(1.72vw, 33px);
  opacity: 1;
  top: min(36.94vh, 399px);
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: left top;
  width: min(18.85vw, 362px);
}

.lab-division-detail__mark--right {
  backface-visibility: hidden;
  filter: blur(var(--lab-division-mark-blur, 0));
  image-rendering: auto;
  opacity: var(--lab-division-mark-opacity, 1);
  right: max(-45px, -2.35vw);
  top: -59px;
  transform: translate3d(0, var(--lab-division-mark-shift, 0px), 0);
  transition:
    filter 600ms cubic-bezier(.22, 1, .36, 1),
    opacity 600ms cubic-bezier(.22, 1, .36, 1);
  transform-style: preserve-3d;
  width: min(25.27vw, 485px);
}

.lab-division-detail__mark-image {
  display: block;
  height: auto;
  width: 100%;
}

.lab-division-detail__mark-ball {
  background: var(--lab-division-marker);
  inset: 0;
  -webkit-mask: url('../images/lab-division-mark-ball-mask.svg') center / 100% 100% no-repeat;
  mask: url('../images/lab-division-mark-ball-mask.svg') center / 100% 100% no-repeat;
  pointer-events: none;
  position: absolute;
}

.lab-division-detail.is-js:not(.is-ready) .lab-division-detail__mark {
  filter: blur(14px);
  opacity: 0;
}

.lab-division-detail.is-js:not(.is-ready) .lab-division-detail__mark--left {
  transform: translate3d(-20px, 20px, 0) scale(1);
}

.lab-division-detail.is-timeline-active .lab-division-detail__mark--left {
  transform: translate3d(-179px, -207px, 0) scale(1.304);
}

.lab-division-detail.is-footer-active .lab-division-detail__mark {
  opacity: 0;
}

.lab-division-detail__rail {
  background: repeating-linear-gradient(
    to bottom,
    rgba(32, 34, 33, .4) 0,
    rgba(32, 34, 33, .4) 2px,
    transparent 2px,
    transparent 8px
  );
  bottom: 104px;
  /* Keep the 1px rail center on the fixed 76px node center. Both positions
     derive from the same step gutter, so they cannot drift on ultrawide viewports. */
  left: calc(var(--lab-division-step-left) + var(--lab-division-node-half) - .5px);
  position: absolute;
  top: 104px;
  width: 1px;
  z-index: 1;
}

.lab-division-detail__steps {
  position: relative;
  z-index: 2;
}

.lab-division-detail__step {
  align-items: center;
  display: grid;
  grid-template-columns: 10.4vw minmax(0, 760px);
  margin-left: var(--lab-division-step-left);
  min-height: 620px;
  position: relative;
}

.lab-division-detail__node {
  align-items: center;
  background: color-mix(in srgb, var(--lab-division-accent) 18%, white);
  border-radius: 50%;
  display: flex;
  height: 76px;
  justify-content: center;
  position: relative;
  transition:
    background-color 600ms cubic-bezier(.22, 1, .36, 1),
    filter 600ms cubic-bezier(.22, 1, .36, 1),
    opacity 600ms cubic-bezier(.22, 1, .36, 1),
    transform 600ms cubic-bezier(.22, 1, .36, 1);
  width: 76px;
}

.lab-division-detail__node::before {
  background: var(--lab-division-accent);
  border-radius: 50%;
  content: '';
  height: 48px;
  position: absolute;
  transition: background-color 600ms cubic-bezier(.22, 1, .36, 1);
  width: 48px;
}

.lab-division-detail__step.is-active .lab-division-detail__node {
  background: color-mix(in srgb, var(--lab-division-marker) 18%, white);
}

.lab-division-detail__step.is-active .lab-division-detail__node::before {
  background: var(--lab-division-marker);
}

.lab-division-detail.is-js .lab-division-detail__step:not(.is-active) .lab-division-detail__node {
  filter: blur(2px);
  opacity: .58;
  transform: scale(.94);
}

.lab-division-detail__node span {
  color: #fff;
  font: 500 18px/1 Barlow, sans-serif;
  position: relative;
  z-index: 1;
}

.lab-division-detail__step-copy {
  max-width: 740px;
  padding: 80px 0;
  transition:
    filter 600ms cubic-bezier(.22, 1, .36, 1),
    opacity 600ms cubic-bezier(.22, 1, .36, 1),
    transform 600ms cubic-bezier(.22, 1, .36, 1);
}

.lab-division-detail.is-js .lab-division-detail__step:not(.is-active) .lab-division-detail__step-copy {
  filter: blur(8px);
  opacity: .17;
  transform: translateY(18px);
}

.lab-division-detail__step-label,
.lab-division-detail__subtitle {
  color: var(--lab-division-accent);
  margin: 0;
}

.lab-division-detail__step-label {
  align-items: center;
  display: flex;
  gap: 13.5px;
  margin-bottom: 17px;
}

.lab-division-detail__step-label span {
  background: var(--lab-division-accent);
  border-radius: 50%;
  display: block;
  flex: 0 0 auto;
  height: 17px;
  width: 18px;
}

.lab-division-detail h2 {
  max-width: 760px;
}

.lab-division-detail h2 span {
  color: var(--lab-division-accent);
}

.lab-division-detail__subtitle {
  margin: 28px 0 14px;
  max-width: 720px;
}

.lab-division-detail__text {
  color: var(--lab-division-ink);
  margin: 0;
  max-width: 740px;
}

.lab-division-detail__step .lab-button {
  margin-top: 28px;
}

.lab-division-detail .lab-footer {
  position: relative;
  z-index: 4;
}

@media (max-width: 1199px) {
  .lab-division-detail {
    --lab-division-step-left: 12vw;
  }

  .lab-division-detail__hero {
    min-height: max(820px, 100svh);
  }

  .lab-division-detail__hero-visual {
    width: min(76vw, 1050px);
  }

  .lab-division-detail__step {
    grid-template-columns: 120px minmax(0, 1fr);
    margin-left: var(--lab-division-step-left);
    padding-right: 12vw;
  }

  .lab-division-detail__rail {
    left: calc(var(--lab-division-step-left) + var(--lab-division-node-half) - .5px);
  }
}

@media (max-width: 767px) {
  .lab-division-detail {
    overflow: hidden;
  }

  .lab-division-detail__hero {
    min-height: 760px;
  }

  .lab-division-detail__hero-copy {
    top: 142px;
    width: calc(100% - 32px);
  }

  .lab-division-detail__eyebrow span {
    height: 12px;
    width: 12px;
  }

  .lab-division-detail__claim {
    margin-top: 16px;
    max-width: 350px;
  }

  .lab-division-detail__hero-visual {
    top: 390px;
    width: 110vw;
  }

  .lab-division-detail__timeline {
    min-height: 0;
  }

  .lab-division-detail__decorations {
    display: none;
  }

  .lab-division-detail__steps {
    padding: 20px 0 80px;
  }

  .lab-division-detail__rail {
    bottom: 135px;
    left: 43px;
    top: 78px;
  }

  .lab-division-detail__step {
    align-items: start;
    grid-template-columns: 70px minmax(0, 1fr);
    margin: 0;
    min-height: 0;
    padding: 58px 24px 58px 16px;
  }

  .lab-division-detail__node {
    height: 56px;
    width: 56px;
  }

  .lab-division-detail__node::before {
    height: 40px;
    width: 40px;
  }

  .lab-division-detail__node span {
    font-size: 15px;
  }

  .lab-division-detail__step-copy {
    padding: 3px 0 0;
  }

  .lab-division-detail__step-label {
    gap: 9px;
  }

  .lab-division-detail__step-label span {
    height: 12px;
    width: 12px;
  }

  .lab-division-detail.is-js .lab-division-detail__step:not(.is-active) .lab-division-detail__step-copy {
    filter: none;
    opacity: .48;
    transform: none;
  }

  .lab-division-detail__subtitle {
    margin-top: 22px;
  }

  .lab-division-detail__step .lab-button {
    margin-top: 24px;
  }

  .lab-division-detail__step-copy .lab-button {
    max-width: 100%;
    min-width: min(220px, calc(100vw - 48px));
    width: 100%;
  }
}

/* Keep the fixed right ornament visually separate from long division titles
   while retaining its viewport-edge placement on tablet widths. */
@media (min-width: 768px) and (max-width: 1023px) {
  .lab-division-detail__mark--right {
    right: max(-45px, -4vw);
    width: clamp(118px, 15.5vw, 160px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-division-detail__mark,
  .lab-division-detail__node,
  .lab-division-detail__node::before,
  .lab-division-detail__step-copy {
    filter: none !important;
    transition: none !important;
  }

  .lab-division-detail__node,
  .lab-division-detail__step-copy {
    opacity: 1 !important;
    transform: none !important;
  }
}