/* Reference panels slide through a clipped sticky stage as complete compositions. */
body.nuweb-site #content .page-story.story--reference > .stage {
  overflow: clip;
}
body.nuweb-site #content .page-story.story--reference > .stage > .scene {
  transition: none;
  will-change: transform;
}
/* Long native screenshots are measured and driven by the reference timeline. */
body.nuweb-site #content [data-reference-viewport] {
  position: relative;
  height: clamp(280px, 43svh, 520px);
  max-height: none;
  padding: 0;
  overflow: auto;
  scrollbar-width: thin;
}
body.nuweb-site #content [data-reference-viewport] > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: initial;
  transform-origin: top center;
}
body.nuweb-site #content [data-reference-viewport][data-reference-driven] {
  overflow: hidden;
}
body.nuweb-site #content [data-reference-viewport][data-reference-driven] > img {
  transition: none;
  will-change: transform;
}
body.nuweb-site #content .scene:not(.scene--linear) :is(.project-visual, .project-browser):has([data-reference-viewport]) {
  transition: none;
  transform-origin: center;
}
/* Existing service actions retain native navigation. */
body.nuweb-site #content .service-capability-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin-top: 28px;
}
/* Linked solution cards follow the same top alignment and text spacing. */
body.nuweb-site .nuweb-home .solution-grid .solution-editorial-card-link {
  display: block;
  height: auto;
}
/* Automatic native logo loop belongs to the first Hero only. */
body.nuweb-site .nuweb-home .scene--hero {
  --intro-logo-height: 108px;
  padding-bottom: calc(var(--intro-logo-height) + 32px);
}
body.nuweb-site .nuweb-home .scene--hero .intro-logo-rail {
  position: absolute;
  inset: auto var(--frame-gutter) 24px;
  z-index: 5;
  height: var(--intro-logo-height);
  margin: 0;
  pointer-events: auto;
}
body.nuweb-site .nuweb-home .story:has(.scene--hero.scene--active) .scroll-cue {
  bottom: calc(108px + 36px);
}
body.nuweb-site .nuweb-home .client-stage-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 16px 0;
  border: 0;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
body.nuweb-site #content .nuweb-home .benefit-list,
body.nuweb-site #content .service-capability-list {
  border-inline: 1px solid var(--line);
}
body.nuweb-site #content .nuweb-home .benefit-list > li,
body.nuweb-site #content .service-capability-row {
  padding-inline: 20px;
}
body.nuweb-site .nuweb-home .intro-logo-rail .hero-logo-track {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  transition: none;
  will-change: transform;
}
body.nuweb-site .nuweb-home .intro-logo-rail[data-logo-running] .hero-logo-track {
  animation: nuweb-hero-logos 48s linear infinite;
}
body.nuweb-site .nuweb-home .intro-logo-rail .home-client-proof {
  --logo-gap: clamp(48px, 6vw, 84px);
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--logo-gap);
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0 var(--logo-gap) 0 0;
  border: 0;
  transform: none;
}
body.nuweb-site .nuweb-home .intro-logo-rail .home-client-proof .client-logo-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 180px;
  width: 180px;
  height: 76px;
  margin: 0;
  padding: 0;
  opacity: .62;
  transform: none;
}
body.nuweb-site .nuweb-home .intro-logo-rail .client-logo-mark img {
  width: 100% !important;
  height: 62px !important;
  max-width: 165px !important;
  max-height: 62px !important;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transform: none;
}
body.nuweb-site .nuweb-home .intro-logo-rail a.client-logo-mark:focus-visible {
  opacity: 1;
}
body.nuweb-site .nuweb-home .intro-logo-rail:has(:focus-visible) .client-stage-viewport,
body.nuweb-site .nuweb-home .intro-logo-rail:not([data-logo-running]) .client-stage-viewport {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--green) transparent;
}
body.nuweb-site .nuweb-home .intro-logo-rail:has(:focus-visible) .hero-logo-track {
  animation: none;
  transform: none;
}
body.nuweb-site .nuweb-home .intro-logo-rail:has(:focus-visible) [data-logo-copy] {
  display: none;
}
@keyframes nuweb-hero-logos {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--logo-loop-distance)), 0, 0); }
}
@media(max-width:700px) {
  body.nuweb-site .nuweb-home .scene--hero {
    --intro-logo-height: 84px;
  }
  body.nuweb-site .nuweb-home .scene--hero .intro-logo-rail {
    bottom: 16px;
  }
  body.nuweb-site .nuweb-home .intro-logo-rail .client-logo-mark {
    flex-basis: 140px;
    width: 140px;
    height: 52px;
  }
  body.nuweb-site .nuweb-home .intro-logo-rail .client-logo-mark img {
    max-width: 130px !important;
    height: 48px !important;
    max-height: 48px !important;
  }
}
@media(prefers-reduced-motion:reduce) {
  body.nuweb-site .nuweb-home .intro-logo-rail .hero-logo-track {
    animation: none;
    transform: none;
  }
  body.nuweb-site .nuweb-home .intro-logo-rail [data-logo-copy] {
    display: none;
  }
}