/* Geometry from Scale's ScrollingQuote, Applications and FullWidthCardCarousel. */
.context-section {
  position:relative;
  height:200dvh;
  overflow-x:clip;
}
.context-sticky {
  isolation:isolate;
  position:relative;
  display:block;
  top:auto;
  height:auto;
  will-change:transform;
}
.context-motion {
  position:relative;
  max-width:2048px;
  margin-inline:auto;
  padding-bottom:12px;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
.context-motion::after {
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:calc(100% - 4px);
  left:50%;
  width:calc(100vw - 48px);
  height:20vh;
  transform:translateX(-50%);
  border-radius:16px 16px 0 0;
  background:#eaeaea;
}
.context-layout {
  position:relative;
  z-index:1;
  height:70vh;
  min-height:70vh;
  margin:0;
  align-items:flex-start;
}
.context-media {
  width:362px;
  height:60%;
}
.context-quote {
  height:100%;
  min-height:0;
  padding:48px 56px;
}
.context-quote p {
  max-width:1024px;
  font-size:64px;
  line-height:64px;
  font-weight:400;
}
.word-reveal span {
  display:inline-block;
  transition:none;
  transform-origin:-72px -72px;
}
.applications-surface {
  isolation:isolate;
  overflow:clip;
  background:transparent;
  border-radius:0;
}
.applications-surface::before,
.applications-surface::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.applications-surface::before {
  z-index:-1;
  background:#eaeaea;
  transform:scaleX(var(--applications-scale,1));
  transform-origin:50% 0;
  border-radius:var(--applications-radius,0px) var(--applications-radius,0px) 0 0;
}
.applications-surface::after {
  z-index:4;
  background:#000;
  opacity:var(--applications-dim,0);
}
.orbit-section {
  min-height:100vh;
  transform:scale(var(--applications-scale,1));
  transform-origin:50% 0;
  overflow:clip;
}
.orbit-heading {
  z-index:3;
  width:100%;
  max-width:1024px;
}
.orbit-heading h2 {
  font-size:64px;
  line-height:1.05;
}
.real-line {
  align-items:flex-start;
  min-height:72px;
}
.rotating-word {
  position:relative;
  height:72px;
  min-height:72px;
  overflow:clip;
  text-align:left;
  vertical-align:top;
  transition:width 500ms cubic-bezier(.16,1,.3,1);
}
.rotating-word .orbit-word {
  position:absolute;
  top:0;
  left:0;
  white-space:nowrap;
  line-height:1.05;
}
.orbit-images {
  inset:auto;
  left:50%;
  top:50%;
  width:min(75%,1020px);
  height:auto;
  aspect-ratio:1020 / 572;
  transform:translate(-52%,-56%);
}
.orbit-image {
  left:0;
  top:0;
  width:100px;
  height:100px;
  overflow:visible;
  background:none;
}
.orbit-visual {
  display:block;
  width:100%;
  height:100%;
  overflow:clip;
  border-radius:8px;
  transform:scale(var(--orbit-inner-scale,1));
  transition:transform 300ms ease-out;
}
.orbit-image img,
.orbit-image:hover img {
  transform:none;
  transition:none;
}
@media (hover:hover) and (min-width:770px) {
  .orbit-image.is-highlighted .orbit-visual {
    transform:scale(1.5);
  }
}
.workflow-track {
  --workflow-card-width:404px;
  padding-inline:calc((100% - var(--workflow-card-width)) / 2);
  scroll-behavior:auto;
}
.workflow-track.is-moving,
.workflow-track.dragging {
  scroll-snap-type:none;
}
.workflow-card {
  flex-basis:var(--workflow-card-width);
  min-width:var(--workflow-card-width);
  min-height:373.42px;
  padding:32px;
  overflow:hidden;
  transition:none;
}
.workflow-card:hover {
  background:#fff;
}
.workflow-icon {
  flex-shrink:0;
  transform-origin:0 0;
}
.workflow-icon svg {
  width:40px;
  height:40px;
}
.workflow-card h3 {
  font-size:24px;
  line-height:36px;
  letter-spacing:-.01em;
  margin:64px 0 16px;
}
.workflow-card>p {
  flex-shrink:0;
  font-size:16px;
  line-height:20.8px;
}
.workflow-word {
  display:inline-block;
}
.carousel-bottom {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  max-width:1600px;
  margin:32px auto 0;
  padding:0 24px;
}
.carousel-bottom h2 {
  min-width:0;
  max-width:none;
  margin-top:16px;
  font-size:36px;
  line-height:1.1;
  text-wrap:balance;
}
.carousel-controls {
  gap:8px;
}
.carousel-controls button {
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
}
.carousel-controls button:hover {
  background:transparent;
  opacity:.8;
}
.carousel-controls svg {
  width:20px;
  height:20px;
}
@media (max-width:767px) {
  .context-section {
    height:200dvh;
  }
  .context-layout {
    height:calc(92svh + 4px);
    max-height:calc(92svh + 4px);
    min-height:0;
    padding-top:16px;
    overflow:hidden;
  }
  .context-motion::after {
    width:calc(100vw - 24px);
    border-radius:8px 8px 0 0;
  }
  .context-motion::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(transparent 0%,#000 15% 100%);
  }
  .context-media {
    width:100%;
    flex:1 1 0;
    height:auto;
    min-height:0;
  }
  .context-quote {
    flex:2 1 0;
    height:auto;
    min-height:0;
    overflow-y:auto;
    padding:32px;
  }
  .context-quote p {
    font-size:32px;
    line-height:40px;
  }
  .orbit-section {
    min-height:90vh;
  }
  .orbit-heading h2 {
    font-size:28px;
    line-height:30px;
  }
  .real-line,
  .rotating-word {
    min-height:30px;
    height:30px;
  }
  .rotating-word .orbit-word {
    line-height:30px;
  }
  .orbit-images {
    transform:translate(-52%,calc(-56% + 40px));
    aspect-ratio:3 / 5;
  }
  .orbit-visual {
    --orbit-inner-scale:.6;
  }
  .workflow-card {
    min-height:347.992px;
    padding:32px;
  }
  .workflow-card h3 {
    font-size:20px;
    line-height:30px;
    margin:64px 0 16px;
  }
  .carousel-bottom {
    margin-top:24px;
    padding-inline:16px;
  }
  .carousel-bottom h2 {
    font-size:24px;
    line-height:1.1;
  }
}
@media (orientation:landscape) and (max-height:500px) {
  .applications-surface {
    padding-bottom:8px;
  }
  .workflow-card h3 {
    margin-top:20px;
  }
}
@media (min-width:640px) and (max-width:767px) {
  .orbit-images {
    aspect-ratio:1020 / 572;
  }
}
@media (max-width:639px) {
  .workflow-track {
    --workflow-card-width:calc(100vw - 56px);
  }
}
@media (prefers-reduced-motion:reduce) {
  .context-section {
    height:auto;
    padding-block:48px;
  }
  .context-sticky,
  .context-motion,
  .context-media {
    transform:none!important;
    opacity:1!important;
    will-change:auto;
  }
  .context-motion::after {
    display:none;
  }
  .applications-surface {
    transform:none!important;
  }
}