body.lab-about-page-body,
body.lab-about-page-body .container-wrap {
  background: #fff;
}

body.lab-about-page-body #header-space,
body.lab-about-page-body #to-top,
body.lab-about-page-body #footer-outer {
  display: none !important;
}

body.lab-about-page-body .container-wrap {
  padding-bottom: 0;
  padding-top: 0;
}

body.lab-about-page-body .container-wrap,
body.lab-about-page-body .container-wrap > .main-content,
body.lab-about-page-body .lab-about-wrap {
  max-width: none;
  width: 100%;
}

body.lab-about-page-body #main-content {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
}

body.lab-about-page-body #header-outer,
body.lab-about-page-body #header-outer.transparent,
body.lab-about-page-body #header-outer.small-nav,
body.lab-about-page-body #header-outer.scrolled-down {
  background: transparent !important;
  box-shadow: none !important;
  position: fixed !important;
}

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

.lab-about-wrap {
  overflow: visible;
}

.lab-about {
  --lab-about-hero-y: 0px;
  --lab-about-hero-blur: 0px;
  --lab-about-hero-opacity: 1;
  --lab-about-gallery-y: 0px;
  --lab-about-gallery-blur: 0px;
  --lab-about-gallery-opacity: 1;
  --lab-about-pillars-y: 1080px;
  --lab-about-pillars-blur: 0px;
  --lab-about-pillars-opacity: 1;
  --lab-about-marks-opacity: 0;
  background: #fff;
  color: var(--lab-ink);
}

.lab-about__flow {
  height: 340vh;
  min-height: 3240px;
  position: relative;
}

.lab-about__stage {
  background: #fff;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.lab-about__hero {
  left: 50%;
  position: absolute;
  text-align: center;
  top: clamp(188px, 20vh, 216px);
  transform: translate3d(-50%, var(--lab-about-hero-y), 0);
  width: min(900px, calc(100% - 64px));
  z-index: 3;
  filter: blur(var(--lab-about-hero-blur));
  opacity: var(--lab-about-hero-opacity);
  will-change: transform, filter, opacity;
}

.lab-about__eyebrow {
  align-items: center;
  color: var(--lab-blue);
  display: flex;
  gap: 13px;
  justify-content: center;
  margin: 0 0 13px;
}

.lab-about__eyebrow > span {
  background: var(--lab-blue);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 12px;
  width: 12px;
}

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

.lab-about h1 {
  white-space: nowrap;
}

.lab-about h1 span,
.lab-about h2 span {
  color: var(--lab-blue);
}

.lab-about__subtitle,
.lab-about__pillar-subtitle {
  color: var(--lab-blue);
  margin: 24px 0 0;
}

.lab-about__intro {
  margin: 14px auto 0;
  max-width: 860px;
}

.lab-about__gallery {
  height: 1080px;
  inset: 0;
  opacity: var(--lab-about-gallery-opacity);
  position: absolute;
  transform: translate3d(0, var(--lab-about-gallery-y), 0);
  width: 100%;
  z-index: 2;
  filter: blur(var(--lab-about-gallery-blur));
  will-change: transform, filter, opacity;
}

.lab-about__tile {
  margin: 0;
  overflow: hidden;
  position: absolute;
  transition:
    left 600ms ease-out,
    top 600ms ease-out,
    width 600ms ease-out,
    height 600ms ease-out,
    opacity 600ms ease-out,
    filter 600ms ease-out;
}

.lab-about__tile img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.lab-about__tile--left {
  height: 615px;
  left: 4.6875%;
  top: 51.6667%;
  width: 21.875%;
}

.lab-about__tile--office {
  height: 427px;
  left: 27.9167%;
  top: 51.6667%;
  width: 44.4792%;
}

.lab-about__tile--center {
  height: 427px;
  left: 27.9167%;
  top: 93.0556%;
  width: 44.4792%;
}

.lab-about__tile--room {
  height: 237px;
  left: 4.6875%;
  top: 110.6481%;
  width: 21.9792%;
}

.lab-about__tile--right {
  height: 615px;
  left: 73.5417%;
  top: 51.6667%;
  width: 21.9792%;
}

.lab-about__tile--meeting {
  height: 237px;
  left: 73.5417%;
  top: 110.6481%;
  width: 21.9792%;
}

.lab-about:not(.is-intro-ready) .lab-about__tile--left {
  filter: blur(5px);
  height: 891px;
  left: -15.6771%;
  opacity: .3;
  top: 17.5%;
  width: 31.6667%;
}

.lab-about:not(.is-intro-ready) .lab-about__tile--right {
  filter: blur(5px);
  height: 891px;
  left: 84.0625%;
  opacity: .3;
  top: 17.5%;
  width: 31.8229%;
}

.lab-about:not(.is-intro-ready) .lab-about__tile--office {
  filter: blur(5px);
  opacity: .3;
  top: 76.1111%;
}

.lab-about:not(.is-intro-ready) .lab-about__tile--center {
  filter: blur(5px);
  opacity: .3;
  top: 117.5%;
}

@media (min-width: 1921px) {
  /* The about flow is authored at 1920x1080 and the controller already scales
     its gallery travel with the viewport height. Scale the tile geometry by
     the same reference unit so tall desktop stages do not expose a blank
     band below the gallery before the pillars enter. */
  .lab-about__gallery {
    height: 100vh;
  }

  .lab-about__tile--left,
  .lab-about__tile--right {
    height: 56.9444vh;
  }

  .lab-about__tile--office,
  .lab-about__tile--center {
    height: 39.537vh;
  }

  .lab-about__tile--room,
  .lab-about__tile--meeting {
    height: 21.9444vh;
  }

  .lab-about:not(.is-intro-ready) .lab-about__tile--left,
  .lab-about:not(.is-intro-ready) .lab-about__tile--right {
    height: 82.5vh;
  }
}

.lab-about__tile--left img,
.lab-about__tile--right img {
  object-position: center;
}

.lab-about__tile--room img {
  object-position: center 19%;
}

.lab-about__tile--meeting img {
  object-position: 69% 37%;
}

.lab-about__pillars {
  display: grid;
  gap: min(17vw, 320px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  left: 12.34375%;
  opacity: var(--lab-about-pillars-opacity);
  position: absolute;
  top: 34%;
  transform: translate3d(0, var(--lab-about-pillars-y), 0);
  width: 75.3125%;
  z-index: 3;
  filter: blur(var(--lab-about-pillars-blur));
  will-change: transform, filter, opacity;
}

.lab-about__pillar {
  --lab-about-pillar-dot-size: 12px;
  --lab-about-pillar-dot-top: calc((var(--lab-type-eyebrow-line) - var(--lab-about-pillar-dot-size)) / 2);
  max-width: 588px;
  position: relative;
}

.lab-about__pillar::before {
  border-left: 1px dashed rgba(87, 116, 126, .45);
  bottom: calc(100% - var(--lab-about-pillar-dot-top));
  content: '';
  height: 325px;
  left: calc((var(--lab-about-pillar-dot-size) - 1px) / 2);
  position: absolute;
}

.lab-about__pillar .lab-about__eyebrow {
  justify-content: flex-start;
  margin-bottom: 13px;
}

.lab-about__pillar .lab-about__eyebrow > span {
  height: var(--lab-about-pillar-dot-size);
  width: var(--lab-about-pillar-dot-size);
}

.lab-about__pillar h2 {
  max-width: 550px;
}

.lab-about__pillar-subtitle {
  margin-top: 20px;
  max-width: 565px;
}

.lab-about__pillar-text {
  margin-top: 15px;
  max-width: 588px;
}

.lab-about__pillar .lab-button {
  margin-top: 18px;
}

.lab-about__marks {
  inset: 0;
  opacity: var(--lab-about-marks-opacity);
  pointer-events: none;
  position: absolute;
  transition: opacity 300ms ease-out;
  z-index: 1;
}

.lab-about__mark {
  position: absolute;
}

.lab-about__mark--left {
  bottom: -62%;
  left: -19.7%;
  width: 28.5%;
}

.lab-about__mark--right {
  right: -14.6%;
  top: 10.7%;
  width: 26.8%;
}

.lab-about__footer-stage {
  background: transparent;
  position: relative;
  width: 100vw;
  z-index: 5;
}

.lab-about__footer-stage .lab-footer {
  margin: 0;
  max-width: none;
  position: relative;
  width: 100%;
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  body.lab-about-footer-motion-ready .lab-about__footer-stage {
    height: calc(min(38.802vw, 745px) + min(15.156vw, 291px));
  }

  body.lab-about-footer-motion-ready .lab-about__footer-stage .lab-footer {
    position: sticky;
    top: max(0px, calc(100vh - min(38.802vw, 745px)));
  }

  body.lab-about-footer-motion-ready .lab-about__footer-stage .lab-footer__wordmark,
  body.lab-about-footer-motion-ready .lab-about__footer-stage .lab-footer__legal {
    backface-visibility: hidden;
    will-change: transform;
  }
}

@media (max-width: 1199px) {
  .lab-about__hero {
    top: 180px;
  }

  .lab-about__pillars {
    gap: 9vw;
    left: 8%;
    width: 84%;
  }

}

@media (max-width: 767px) {
  body.lab-about-page-body #header-space {
    display: block !important;
    height: 80px !important;
  }

  .lab-about__flow {
    height: auto;
    min-height: 0;
  }

  .lab-about__stage {
    height: auto;
    min-height: 0;
    overflow: visible;
    position: relative;
  }

  .lab-about__hero,
  .lab-about__gallery,
  .lab-about__pillars {
    filter: none;
    opacity: 1;
    position: relative;
    transform: none;
  }

  .lab-about__hero {
    left: auto;
    padding: 54px 20px 48px;
    top: auto;
    width: auto;
  }

  .lab-about__eyebrow > span {
    height: 9px;
    width: 9px;
  }

  .lab-about h1 {
    white-space: normal;
  }

  .lab-about__subtitle {
    margin-top: 24px;
  }

  .lab-about__intro {
    margin-top: 18px;
  }

  .lab-about__gallery {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    inset: auto;
    padding: 0 20px 40px;
    width: auto;
  }

  .lab-about__tile,
  .lab-about:not(.is-intro-ready) .lab-about__tile {
    filter: none;
    height: auto;
    left: auto;
    opacity: 1;
    position: relative;
    top: auto;
    transition: none;
    width: auto;
  }

  .lab-about__tile img {
    aspect-ratio: 1 / 1.15;
  }

  .lab-about__tile--office img,
  .lab-about__tile--center img {
    aspect-ratio: 1.55 / 1;
  }

  .lab-about__tile--office {
    grid-column: 1 / -1;
  }

  .lab-about__tile--center {
    grid-column: 1 / -1;
  }

  .lab-about__pillars {
    display: grid;
    gap: 96px;
    grid-template-columns: 1fr;
    left: auto;
    padding: 32px 20px 110px;
    top: auto;
    width: auto;
  }

  .lab-about__pillar {
    --lab-about-pillar-dot-size: 9px;
  }

  .lab-about__pillar::before {
    height: 56px;
  }

  .lab-about__marks {
    display: none;
  }
}

/* Tablet uses the same readable document flow as the phone layout. The
   scroll-driven canvas remains reserved for desktop widths (>= 1024px). */
@media (min-width: 768px) and (max-width: 1023px) {
  .lab-about__flow {
    height: auto;
    min-height: 0;
  }

  .lab-about__stage {
    height: auto;
    min-height: 0;
    overflow: visible;
    position: relative;
    top: auto;
  }

  .lab-about__hero,
  .lab-about__gallery,
  .lab-about__pillars {
    filter: none;
    opacity: 1;
    position: relative;
    transform: none;
  }

  .lab-about__hero {
    left: auto;
    padding: clamp(110px, 14vw, 150px) 48px 72px;
    top: auto;
    width: auto;
  }

  .lab-about h1 {
    white-space: normal;
  }

  .lab-about__gallery {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    inset: auto;
    padding: 0 48px 56px;
    width: auto;
  }

  .lab-about__tile,
  .lab-about:not(.is-intro-ready) .lab-about__tile {
    filter: none;
    height: auto;
    left: auto;
    opacity: 1;
    position: relative;
    top: auto;
    transition: none;
    width: auto;
  }

  .lab-about__tile img {
    aspect-ratio: 1 / 1.05;
    height: auto;
  }

  .lab-about__tile--office,
  .lab-about__tile--center {
    grid-column: 1 / -1;
  }

  .lab-about__tile--office img,
  .lab-about__tile--center img {
    aspect-ratio: 1.8 / 1;
  }

  .lab-about__pillars {
    gap: clamp(36px, 6vw, 72px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    left: auto;
    padding: 48px 48px 120px;
    top: auto;
    width: auto;
  }

  .lab-about__pillar::before {
    height: 72px;
  }

  .lab-about__marks {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-about__tile {
    transition: none;
  }

  .lab-about__footer-stage .lab-footer__wordmark,
  .lab-about__footer-stage .lab-footer__legal {
    transform: none !important;
  }
}