/* STEP VISIO 011 - dedicated homepage control layer
   Loaded after legacy CSS from index.html only. Keep this file scoped to .visio-index-page. */

.visio-home-hero--signals .visio-hero-main-copy {
  font-size: clamp(0.92rem, 0.82vw + 0.68rem, 1.42rem) !important;
  line-height: 1.34 !important;
  max-width: min(720px, 90vw);
}

.visio-home-hero--signals .visio-hero-support-copy {
  margin-top: clamp(20px, 2.8vw, 38px) !important;
  font-size: clamp(0.68rem, 0.26vw + 0.62rem, 0.86rem) !important;
  line-height: 1.78 !important;
  max-width: min(680px, 88vw);
  color: rgba(255, 255, 255, 0.58) !important;
}

.visio-home-hero--signals::before {
  animation: visioAtmosphereDriftOrganic 48s ease-in-out infinite alternate !important;
}

.visio-home-hero--signals .visio-hero-word::before {
  animation: visioWordGlowOrganic 15s cubic-bezier(0.34, 0, 0.22, 1) infinite alternate !important;
}

.visio-signal-field.is-randomized .visio-signal {
  --signal-life: 13.4s;
  --signal-scale: 1;
  --safe-start: clamp(82px, 8.8vw, 158px);
  --line-distance: clamp(44px, 8.4vw, 142px);
  --label-gap: clamp(0.12rem, 0.25vw, 0.28rem);
  width: var(--line);
  transform: rotate(var(--angle)) scaleX(0.03);
}

.visio-signal > span,
.visio-signal-field.is-randomized .visio-signal > span {
  letter-spacing: -0.052em !important;
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  transform-origin: left center;
  --label-align-x: 0px;
  --label-align-y: 0px;
  --label-enter-drift-x: 0px;
  --label-exit-drift-x: 0px;
}

.visio-signal.label-right > span {
  left: calc(100% + var(--label-gap));
  right: auto;
  top: 50%;
  text-align: left;
  transform-origin: left center;
  --label-align-x: 0px;
}

.visio-signal.label-left > span {
  left: auto;
  right: calc(var(--label-gap) * -1);
  top: 50%;
  text-align: right;
  transform-origin: right center;
  --label-align-x: 0px;
}

.visio-signal.label-center > span {
  left: 100%;
  right: auto;
  text-align: center;
  transform-origin: center center;
  --label-align-x: -50%;
}

.visio-signal.label-top > span {
  top: calc(50% - clamp(1.05rem, 1.4vw, 1.8rem));
  --label-align-y: -50%;
}

.visio-signal.label-bottom > span {
  top: calc(50% + clamp(1.05rem, 1.4vw, 1.8rem));
  --label-align-y: -50%;
}

.visio-signal.label-upper.label-left > span,
.visio-signal.label-upper.label-right > span {
  top: calc(50% - clamp(0.26rem, 0.5vw, 0.58rem));
}

.visio-signal.label-lower.label-left > span,
.visio-signal.label-lower.label-right > span {
  top: calc(50% + clamp(0.26rem, 0.5vw, 0.58rem));
}

.visio-signal-field.is-randomized .visio-signal::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0) var(--safe-start),
    rgba(241, 236, 232, 0.2) calc(var(--safe-start) + 5px),
    rgba(241, 236, 232, 0.38) calc(var(--safe-start) + 20px),
    rgba(255, 0, 0, 0.52) 76%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  box-shadow: none !important;
}

.visio-signal-field.is-randomized .visio-signal.is-live {
  animation: visioSignalLineRandom var(--signal-life) cubic-bezier(0.28, 0, 0.15, 1) forwards !important;
}

.visio-signal-field.is-randomized .visio-signal.is-live > span {
  animation: visioSignalWordRandom var(--signal-life) cubic-bezier(0.28, 0, 0.15, 1) forwards !important;
}

.visio-signal-field.is-randomized .visio-signal.is-live::after {
  animation: visioSignalDotPulse var(--signal-life) cubic-bezier(0.36, 0, 0.18, 1) forwards !important;
}

@keyframes visioSignalLineRandom {
  0%, 7% {
    opacity: 0;
    transform: rotate(var(--angle)) scaleX(0.03);
  }
  28%, 74% {
    opacity: 0.56;
    transform: rotate(var(--angle)) scaleX(1);
  }
  97%, 100% {
    opacity: 0;
    transform: rotate(var(--angle)) scaleX(0.97);
  }
}

@keyframes visioSignalWordRandom {
  0%, 18% {
    opacity: 0;
    transform: translate3d(calc(var(--label-align-x, 0px) + var(--label-enter-drift-x, 0px)), calc(-50% + var(--label-align-y, 0px)), 0) rotate(var(--label-rotate)) scale(var(--signal-scale, 1));
  }
  32%, 70% {
    opacity: 0.86;
    transform: translate3d(var(--label-align-x, 0px), calc(-50% + var(--label-align-y, 0px)), 0) rotate(var(--label-rotate)) scale(var(--signal-scale, 1));
  }
  94%, 100% {
    opacity: 0;
    transform: translate3d(calc(var(--label-align-x, 0px) + var(--label-exit-drift-x, 0px)), calc(-50% + var(--label-align-y, 0px)), 0) rotate(var(--label-rotate)) scale(var(--signal-scale, 1));
  }
}

@keyframes visioSignalDotPulse {
  0%, 18% {
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(0.72);
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.12);
  }
  30%, 70% {
    opacity: 0.94;
    transform: translate3d(0, -50%, 0) scale(1);
    box-shadow: 0 0 16px rgba(255, 0, 0, 0.42);
  }
  48%, 58% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1.22);
    box-shadow: 0 0 24px rgba(255, 0, 0, 0.34);
  }
  93%, 100% {
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(0.86);
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.1);
  }
}

@keyframes visioLetterDriftV {
  0%, 100% { transform: translate3d(0, 0, 0); }
  34% { transform: translate3d(5px, -3px, 0); }
  68% { transform: translate3d(-4px, 5px, 0); }
}

@keyframes visioLetterDriftI1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  31% { transform: translate3d(-5px, 4px, 0); }
  72% { transform: translate3d(4px, -5px, 0); }
}

@keyframes visioLetterDriftS {
  0%, 100% { transform: translate3d(0, 0, 0); }
  38% { transform: translate3d(4px, 6px, 0); }
  74% { transform: translate3d(-5px, -4px, 0); }
}

@keyframes visioLetterDriftI2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  29% { transform: translate3d(4px, -6px, 0); }
  66% { transform: translate3d(-4px, 4px, 0); }
}

@keyframes visioLetterDriftO {
  0%, 100% { transform: translate3d(0, 0, 0); }
  36% { transform: translate3d(-5px, -4px, 0); }
  70% { transform: translate3d(5px, 5px, 0); }
}

@keyframes visioWordGlowOrganic {
  0% {
    opacity: 0.56;
    transform: translate3d(-0.5%, 0.3%, 0) scaleX(1.01) scaleY(0.94);
    filter: blur(26px);
  }
  44% {
    opacity: 0.84;
    transform: translate3d(0.6%, -0.2%, 0) scaleX(1.09) scaleY(1.03);
    filter: blur(32px);
  }
  100% {
    opacity: 0.68;
    transform: translate3d(-0.1%, 0.5%, 0) scaleX(1.04) scaleY(0.98);
    filter: blur(28px);
  }
}

@media (max-width: 980px) {
  .visio-signal-field.is-randomized .visio-signal {
    --safe-start: clamp(76px, 12.5vw, 132px);
    --line-distance: clamp(38px, 8vw, 112px);
    --label-gap: 0.14rem;
  }

  .visio-signal > span,
  .visio-signal-field.is-randomized .visio-signal > span {
    letter-spacing: -0.044em !important;
  }
}

@media (max-width: 680px) {
  .visio-signal-field.is-randomized .visio-signal {
    --safe-start: clamp(54px, 19vw, 86px);
    --line-distance: clamp(30px, 10vw, 76px);
    --label-gap: 0.08rem;
  }

  .visio-signal > span,
  .visio-signal-field.is-randomized .visio-signal > span {
    letter-spacing: -0.034em !important;
    max-width: 42vw;
    overflow: visible;
  }

  .visio-home-hero--signals .visio-hero-main-copy {
    font-size: clamp(0.86rem, 4vw, 1.16rem) !important;
  }

  .visio-home-hero--signals .visio-hero-support-copy {
    font-size: 0.72rem !important;
    line-height: 1.64 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-home-hero--signals::before,
  .visio-home-hero--signals .visio-hero-word::before,
  .visio-signal-field.is-randomized .visio-signal,
  .visio-signal-field.is-randomized .visio-signal > span,
  .visio-signal-field.is-randomized .visio-signal.is-live::after,
  .visio-letter {
    animation: none !important;
  }

  .visio-letter {
    transform: none !important;
  }
}

/* STEP VISIO 012 - endpoint labels and full-page atmosphere continuity */
html {
  background: #000000;
}

.visio-signal-field.is-randomized .visio-signal > span {
  display: none !important;
}

.visio-signal-label {
  --signal-scale: 1;
  --signal-life: 18s;
  --label-x: 50%;
  --label-y: 50%;
  --label-gap: clamp(0.72rem, 1.1vw, 1.05rem);
  position: absolute;
  left: var(--label-x);
  top: var(--label-y);
  z-index: 5;
  color: rgba(255, 255, 255, 0.84);
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif !important;
  font-size: clamp(1.04rem, 0.86vw + 0.82rem, 1.64rem);
  font-weight: 400 !important;
  line-height: 0.95;
  letter-spacing: -0.052em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  text-shadow:
    0 0 18px rgba(255, 0, 0, 0.26),
    0 0 42px rgba(255, 0, 0, 0.12);
  will-change: transform, opacity;
}

.visio-signal-label.label-top {
  text-align: center;
  transform: translate3d(-50%, calc(-100% - var(--label-gap)), 0) scale(var(--signal-scale));
}

.visio-signal-label.label-bottom {
  text-align: center;
  transform: translate3d(-50%, var(--label-gap), 0) scale(var(--signal-scale));
}

.visio-signal-label.label-left {
  text-align: right;
  transform: translate3d(calc(-100% - var(--label-gap)), -50%, 0) scale(var(--signal-scale));
}

.visio-signal-label.label-right {
  text-align: left;
  transform: translate3d(var(--label-gap), -50%, 0) scale(var(--signal-scale));
}

.visio-signal-label.is-live.label-top {
  animation: visioFloatingLabelTop var(--signal-life) cubic-bezier(0.25, 0, 0.14, 1) forwards;
}

.visio-signal-label.is-live.label-bottom {
  animation: visioFloatingLabelBottom var(--signal-life) cubic-bezier(0.25, 0, 0.14, 1) forwards;
}

.visio-signal-label.is-live.label-left {
  animation: visioFloatingLabelLeft var(--signal-life) cubic-bezier(0.25, 0, 0.14, 1) forwards;
}

.visio-signal-label.is-live.label-right {
  animation: visioFloatingLabelRight var(--signal-life) cubic-bezier(0.25, 0, 0.14, 1) forwards;
}

.visio-signal-field.is-randomized .visio-signal {
  --signal-life: 18s;
  --safe-start: clamp(86px, 8.4vw, 148px);
  --line-distance: clamp(36px, 7.8vw, 124px);
  transform: rotate(var(--angle)) scaleX(0.018);
}

.visio-signal-field.is-randomized .visio-signal::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0) var(--safe-start),
    rgba(241, 236, 232, 0.14) calc(var(--safe-start) + 6px),
    rgba(241, 236, 232, 0.34) calc(var(--safe-start) + 22px),
    rgba(255, 0, 0, 0.48) 78%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

.visio-signal-field.is-randomized .visio-signal::after {
  right: -2px;
  width: 5px;
  height: 5px;
}

.visio-signal-field.is-randomized .visio-signal.is-live {
  animation: visioSignalLineRandom var(--signal-life) cubic-bezier(0.24, 0, 0.12, 1) forwards !important;
}

.visio-signal-field.is-randomized .visio-signal.is-live::after {
  animation: visioSignalDotPulse var(--signal-life) cubic-bezier(0.24, 0, 0.12, 1) forwards !important;
}

@keyframes visioSignalLineRandom {
  0%, 8% {
    opacity: 0;
    transform: rotate(var(--angle)) scaleX(0.018);
  }
  31%, 78% {
    opacity: 0.54;
    transform: rotate(var(--angle)) scaleX(1);
  }
  98%, 100% {
    opacity: 0;
    transform: rotate(var(--angle)) scaleX(0.985);
  }
}

@keyframes visioSignalDotPulse {
  0%, 22% {
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(0.68);
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.1);
  }
  34%, 76% {
    opacity: 0.92;
    transform: translate3d(0, -50%, 0) scale(1);
    box-shadow: 0 0 16px rgba(255, 0, 0, 0.38);
  }
  50%, 62% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1.16);
    box-shadow: 0 0 24px rgba(255, 0, 0, 0.3);
  }
  96%, 100% {
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(0.86);
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.08);
  }
}

@keyframes visioFloatingLabelTop {
  0%, 23% {
    opacity: 0;
    transform: translate3d(-50%, calc(-100% - var(--label-gap) + 0.3rem), 0) scale(calc(var(--signal-scale) * 0.985));
  }
  38%, 76% {
    opacity: 0.88;
    transform: translate3d(-50%, calc(-100% - var(--label-gap)), 0) scale(var(--signal-scale));
  }
  97%, 100% {
    opacity: 0;
    transform: translate3d(-50%, calc(-100% - var(--label-gap) - 0.18rem), 0) scale(var(--signal-scale));
  }
}

@keyframes visioFloatingLabelBottom {
  0%, 23% {
    opacity: 0;
    transform: translate3d(-50%, calc(var(--label-gap) - 0.3rem), 0) scale(calc(var(--signal-scale) * 0.985));
  }
  38%, 76% {
    opacity: 0.88;
    transform: translate3d(-50%, var(--label-gap), 0) scale(var(--signal-scale));
  }
  97%, 100% {
    opacity: 0;
    transform: translate3d(-50%, calc(var(--label-gap) + 0.18rem), 0) scale(var(--signal-scale));
  }
}

@keyframes visioFloatingLabelLeft {
  0%, 23% {
    opacity: 0;
    transform: translate3d(calc(-100% - var(--label-gap) + 0.3rem), -50%, 0) scale(calc(var(--signal-scale) * 0.985));
  }
  38%, 76% {
    opacity: 0.88;
    transform: translate3d(calc(-100% - var(--label-gap)), -50%, 0) scale(var(--signal-scale));
  }
  97%, 100% {
    opacity: 0;
    transform: translate3d(calc(-100% - var(--label-gap) - 0.18rem), -50%, 0) scale(var(--signal-scale));
  }
}

@keyframes visioFloatingLabelRight {
  0%, 23% {
    opacity: 0;
    transform: translate3d(calc(var(--label-gap) - 0.3rem), -50%, 0) scale(calc(var(--signal-scale) * 0.985));
  }
  38%, 76% {
    opacity: 0.88;
    transform: translate3d(var(--label-gap), -50%, 0) scale(var(--signal-scale));
  }
  97%, 100% {
    opacity: 0;
    transform: translate3d(calc(var(--label-gap) + 0.18rem), -50%, 0) scale(var(--signal-scale));
  }
}

@keyframes visioLetterDriftV {
  0%, 100% { transform: translate3d(0, 0, 0); }
  34% { transform: translate3d(6px, -4px, 0); }
  68% { transform: translate3d(-5px, 5px, 0); }
}

@keyframes visioLetterDriftI1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  31% { transform: translate3d(-6px, 5px, 0); }
  72% { transform: translate3d(5px, -6px, 0); }
}

@keyframes visioLetterDriftS {
  0%, 100% { transform: translate3d(0, 0, 0); }
  38% { transform: translate3d(5px, 6px, 0); }
  74% { transform: translate3d(-6px, -5px, 0); }
}

@keyframes visioLetterDriftI2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  29% { transform: translate3d(5px, -7px, 0); }
  66% { transform: translate3d(-5px, 5px, 0); }
}

@keyframes visioLetterDriftO {
  0%, 100% { transform: translate3d(0, 0, 0); }
  36% { transform: translate3d(-6px, -5px, 0); }
  70% { transform: translate3d(6px, 6px, 0); }
}

@media (max-width: 980px) {
  .visio-signal-label {
    --label-gap: 0.72rem;
    font-size: clamp(0.9rem, 2.3vw, 1.34rem);
    letter-spacing: -0.044em;
  }

  .visio-signal-field.is-randomized .visio-signal {
    --safe-start: clamp(76px, 12vw, 126px);
    --line-distance: clamp(32px, 7vw, 94px);
  }
}

@media (max-width: 680px) {
  .visio-signal-label {
    --label-gap: 0.5rem;
    font-size: clamp(0.76rem, 4.1vw, 1.04rem);
    letter-spacing: -0.034em;
  }

  .visio-signal-field.is-randomized .visio-signal {
    --safe-start: clamp(56px, 18vw, 82px);
    --line-distance: clamp(28px, 9vw, 68px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-signal-label,
  .visio-signal-label.is-live {
    animation: none !important;
    opacity: 0.82 !important;
  }
}

/* STEP VISIO 013 - phase 2 homepage structure after hero */
.visio-letter--v {
  animation-duration: 14.8s !important;
}

.visio-letter--i1 {
  animation-duration: 16.2s !important;
}

.visio-letter--s {
  animation-duration: 15.4s !important;
}

.visio-letter--i2 {
  animation-duration: 16.8s !important;
}

.visio-letter--o {
  animation-duration: 15.9s !important;
}

@keyframes visioLetterDriftV {
  0%, 100% { transform: translate3d(0, 0, 0); }
  34% { transform: translate3d(8px, -5px, 0); }
  68% { transform: translate3d(-7px, 7px, 0); }
}

@keyframes visioLetterDriftI1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  31% { transform: translate3d(-8px, 6px, 0); }
  72% { transform: translate3d(6px, -8px, 0); }
}

@keyframes visioLetterDriftS {
  0%, 100% { transform: translate3d(0, 0, 0); }
  38% { transform: translate3d(7px, 8px, 0); }
  74% { transform: translate3d(-8px, -6px, 0); }
}

@keyframes visioLetterDriftI2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  29% { transform: translate3d(6px, -9px, 0); }
  66% { transform: translate3d(-7px, 6px, 0); }
}

@keyframes visioLetterDriftO {
  0%, 100% { transform: translate3d(0, 0, 0); }
  36% { transform: translate3d(-8px, -6px, 0); }
  70% { transform: translate3d(8px, 7px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .visio-letter--v,
  .visio-letter--i1,
  .visio-letter--s,
  .visio-letter--i2,
  .visio-letter--o {
    animation: none !important;
  }
}

/* STEP VISIO 014 - proportions and cinematic atmosphere */
body.visio-index-page {
  background:
    linear-gradient(114deg, #000000 0%, #050101 32%, #120000 50%, #030303 74%, #000000 100%) !important;
  background-attachment: fixed !important;
}

body.visio-index-page::before {
  opacity: 0.72 !important;
  filter: blur(34px) !important;
  background:
    linear-gradient(104deg, rgba(0, 0, 0, 0) 14%, rgba(255, 0, 0, 0.06) 32%, rgba(255, 0, 0, 0.16) 48%, rgba(241, 236, 232, 0.035) 56%, rgba(255, 0, 0, 0.07) 67%, rgba(0, 0, 0, 0) 86%),
    linear-gradient(18deg, rgba(241, 236, 232, 0) 20%, rgba(241, 236, 232, 0.04) 46%, rgba(241, 236, 232, 0) 70%) !important;
  transform: translate3d(-3%, -1%, 0) scale(1.1) rotate(-1deg);
  animation: visioCinematicLightDrift 74s cubic-bezier(0.34, 0, 0.18, 1) infinite alternate !important;
}

body.visio-index-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background:
    linear-gradient(132deg, transparent 48.7%, rgba(255, 255, 255, 0.05) 49.5%, rgba(255, 0, 0, 0.095) 50%, transparent 51.3%) 8% 19% / 320px 130px no-repeat,
    linear-gradient(132deg, transparent 49%, rgba(255, 0, 0, 0.08) 50%, transparent 51%) 76% 13% / 210px 86px no-repeat,
    linear-gradient(132deg, transparent 48.9%, rgba(241, 236, 232, 0.055) 50%, transparent 51.1%) 61% 39% / 460px 160px no-repeat,
    linear-gradient(132deg, transparent 49%, rgba(255, 0, 0, 0.055) 50%, transparent 51%) 16% 57% / 240px 82px no-repeat,
    linear-gradient(132deg, transparent 48.9%, rgba(255, 255, 255, 0.042) 50%, transparent 51.1%) 86% 67% / 360px 118px no-repeat,
    linear-gradient(132deg, transparent 49%, rgba(255, 0, 0, 0.07) 50%, transparent 51%) 34% 86% / 280px 98px no-repeat;
  transform: translate3d(0, 0, 0);
  animation: visioSignalFieldDrift 96s cubic-bezier(0.32, 0, 0.18, 1) infinite alternate;
}

@keyframes visioCinematicLightDrift {
  0% {
    opacity: 0.52;
    transform: translate3d(-4%, -1.4%, 0) scale(1.08) rotate(-1.4deg);
  }
  44% {
    opacity: 0.82;
    transform: translate3d(1.6%, 0.4%, 0) scale(1.16) rotate(0.6deg);
  }
  100% {
    opacity: 0.62;
    transform: translate3d(3.4%, 1.6%, 0) scale(1.12) rotate(1deg);
  }
}

@keyframes visioSignalFieldDrift {
  0% {
    opacity: 0.28;
    transform: translate3d(-0.8%, -0.4%, 0);
  }
  50% {
    opacity: 0.48;
    transform: translate3d(0.7%, 0.25%, 0);
  }
  100% {
    opacity: 0.34;
    transform: translate3d(1.1%, 0.7%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.visio-index-page::before,
  body.visio-index-page::after {
    animation: none !important;
  }
}

/* STEP VISIO 015 - Phase 2A cleaned homepage section flow */
.reveal-in {
  opacity: 0;
  transform: translate3d(0, 72px, 0);
  transition: opacity 2600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 2600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0ms;
  will-change: opacity, transform;
}

.reveal-in.reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: var(--reveal-enter-delay, 0ms);
}

.visio-work-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(58px, 7vw, 108px) 0 clamp(64px, 8vw, 124px);
  background:
    linear-gradient(118deg, rgba(255, 0, 0, 0.98), rgba(184, 0, 0, 0.95) 46%, rgba(42, 0, 0, 0.92) 100%);
}

.visio-work-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background:
    linear-gradient(128deg, transparent 18%, rgba(255, 255, 255, 0.075) 42%, transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.02));
}

.visio-work-section > * {
  position: relative;
  z-index: 1;
}

.visio-work-section .container {
  max-width: 1180px;
}

.visio-work-section .frontpage-banner-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.visio-work-section .frontpage-banner-single {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.visio-work-section .videocontainer,
.visio-work-section .carousel,
.visio-work-section .frontpage-banner-stack {
  box-shadow: 0 30px 78px rgba(0, 0, 0, 0.28);
}

body.visio-index-page .visio-work-section .frontpage-banner {
  margin-top: clamp(44px, 6vw, 86px);
  margin-bottom: clamp(46px, 6vw, 88px);
  padding: 0;
  background: transparent !important;
}

.visio-work-section .frontpage-banner-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 700;
  overflow: hidden;
  --banner-zoom: 1.08;
  background: rgba(0, 0, 0, 0.32) !important;
}

.visio-work-section .frontpage-banner-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(var(--banner-zoom));
  transform-origin: center;
  transition: opacity 2.5s ease;
  background: #000;
}

.visio-work-section .frontpage-banner-video.is-active,
.visio-work-section .frontpage-banner-video.is-visible,
.visio-work-section .frontpage-banner-single .frontpage-banner-video {
  opacity: 1;
  visibility: visible;
}

.visio-work-section .frontpage-banner-video.is-active {
  z-index: 1;
}

.visio-work-section .frontpage-banner-video.is-next {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}

.visio-work-section .frontpage-banner-single .frontpage-banner-video {
  transition: none !important;
}

.visio-work-section .mediadescription,
.visio-work-section .mediadescription_second {
  color: rgba(255, 255, 255, 0.94) !important;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

.visio-info-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(78px, 8vw, 128px) 0 clamp(70px, 7vw, 116px);
  color: #190d0d;
  background:
    radial-gradient(ellipse at 12% 4%, rgba(255, 0, 0, 0.16), rgba(255, 0, 0, 0) 34rem),
    radial-gradient(ellipse at 88% 92%, rgba(255, 0, 0, 0.09), rgba(255, 0, 0, 0) 38rem),
    linear-gradient(142deg, #fffaf4 0%, #f9ece5 48%, #ffffff 100%);
  background-color: #fff8f1;
}

.visio-info-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.44;
  background:
    repeating-linear-gradient(132deg, rgba(255, 0, 0, 0.035) 0 1px, transparent 1px 82px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0));
}

.visio-info-section > * {
  position: relative;
  z-index: 1;
}

.visio-info-inner {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

.visio-info-section .frameheader,
.visio-info-section .bodybox,
.visio-info-section .frontpage-intro {
  color: #190d0d !important;
  text-shadow: none !important;
}

.visio-info-section .frameheader {
  margin-bottom: clamp(28px, 4vw, 54px);
}

.visio-info-section .frontpage-intro {
  max-width: min(1160px, 92vw) !important;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.54 !important;
}

.visio-client-section {
  width: min(1180px, 92vw);
  margin: clamp(58px, 6vw, 96px) auto 0;
}

.visio-client-section .client-logos-rotator,
.visio-client-section .logo-strip {
  background: transparent !important;
  background-color: transparent !important;
}

.visio-client-section .client-logos-title {
  color: #ff0000 !important;
  font-size: clamp(1.8rem, 2.6vw, 2.7rem) !important;
  letter-spacing: 0.035em !important;
  line-height: 1.08;
  text-shadow: none !important;
}

.visio-client-section .client-logos-rotator {
  max-width: 1380px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: clamp(18px, 3vw, 42px);
  padding-bottom: clamp(18px, 3vw, 42px);
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

.visio-client-section .logo-strip {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  grid-auto-rows: 1fr !important;
  column-gap: clamp(28px, 4vw, 56px) !important;
  row-gap: 0 !important;
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
  overflow: visible !important;
  align-items: center !important;
  justify-items: center !important;
  align-content: start !important;
}

.visio-client-section .logo-strip img[src] {
  display: block !important;
  width: 100% !important;
  max-width: 210px !important;
  height: 110px !important;
  max-height: none !important;
  object-fit: contain !important;
}

.visio-contact-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(42px, 4.8vw, 76px) 0 clamp(40px, 4.6vw, 74px) !important;
  color: #170d0d !important;
  background:
    radial-gradient(ellipse at 16% 18%, rgba(255, 0, 0, 0.13), rgba(255, 0, 0, 0) 30rem),
    radial-gradient(ellipse at 84% 86%, rgba(255, 0, 0, 0.055), rgba(255, 0, 0, 0) 34rem),
    linear-gradient(145deg, #fffaf4 0%, #fff3ec 54%, #ffffff 100%) !important;
  background-color: #fff8f1;
}

.visio-contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background:
    repeating-linear-gradient(132deg, rgba(255, 0, 0, 0.03) 0 1px, transparent 1px 86px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0));
}

.visio-contact-section > * {
  position: relative;
  z-index: 1;
}

.visio-contact-section .contact-split {
  background: transparent !important;
  padding-top: 0;
  padding-bottom: 0;
}

.visio-contact-section .contact-title-line {
  display: none;
  width: 340px;
  max-width: 82%;
  height: 2px;
  margin: 42px auto 34px;
  background: #ff0000;
  animation: contactLineColor 28s ease-in-out infinite;
}

.visio-contact-section .contact-name {
  font-size: 1.54em;
  letter-spacing: 0.00046875em;
}

.visio-contact-section h4 {
  font-size: 1em;
  letter-spacing: 0.0095em;
}

.visio-contact-section .email-link {
  font-size: 1em;
  letter-spacing: 0.000625em;
}

.visio-contact-section .whatsapp-link img {
  width: 112px;
  height: auto;
}

.visio-contact-section .contact-name,
.visio-contact-section .contact-title,
.visio-contact-section h4,
.visio-contact-section .email-link {
  color: #170d0d !important;
}

.visio-contact-section .email-link:hover,
.visio-contact-section .email-link:focus {
  color: #ff0000 !important;
}

.visio-footer {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(255, 0, 0, 0.08), rgba(255, 0, 0, 0) 26rem),
    linear-gradient(180deg, #ffffff 0%, #fff8f1 100%) !important;
  background-color: #fff8f1;
  color: #ff0000 !important;
  padding-top: clamp(22px, 2.7vw, 42px) !important;
  padding-bottom: clamp(24px, 2.8vw, 44px) !important;
}

.visio-footer .legal,
.visio-footer .legal a,
.visio-footer .legal a:any-link {
  color: #ff0000 !important;
  text-decoration: none;
}

.visio-footer .legal a:hover,
.visio-footer .legal a:focus,
.visio-footer .legal a:active {
  color: #ff0000 !important;
  text-decoration: none;
}

.visio-footer .socialicons {
  margin-bottom: 12px !important;
}

.visio-footer .socialicons a {
  margin-left: 6px;
  margin-right: 6px;
}

.visio-footer .socialicons a img {
  width: 34px !important;
  height: 34px !important;
  opacity: 0.92;
  filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(7458%) hue-rotate(0deg) brightness(103%) contrast(118%) !important;
  transition: opacity 220ms ease, transform 220ms ease;
}

.visio-footer .socialicons a:hover img,
.visio-footer .socialicons a:focus-visible img {
  opacity: 1;
  transform: translate3d(0, -2px, 0);
}

.visio-footer .legal {
  line-height: 1.35 !important;
}

@media (max-width: 767px) {
  .visio-work-section {
    padding-top: 52px;
    padding-bottom: 76px;
  }

  body.visio-index-page .visio-work-section .frontpage-banner {
    margin-left: -10%;
    margin-right: -10%;
    width: 120%;
  }

  .visio-info-section {
    padding-top: 66px;
    padding-bottom: 72px;
  }

  .visio-info-section .frontpage-intro {
    max-width: 92vw !important;
    line-height: 1.58 !important;
  }

  .visio-client-section .client-logos-title {
    font-size: 1.45rem !important;
    letter-spacing: 0.02em !important;
  }

  .visio-client-section .logo-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: 100px !important;
    gap: 10px 14px !important;
    height: 320px !important;
    min-height: 320px !important;
  }

  .visio-client-section .logo-strip img[src] {
    max-width: 128px !important;
    height: 74px !important;
  }

  .visio-client-section .logo-strip img:nth-child(n+10) {
    display: none !important;
  }

  .visio-contact-section {
    padding-top: 40px !important;
    padding-bottom: 44px !important;
  }

  .visio-contact-section .contact-title-line {
    display: block !important;
  }

  .visio-footer {
    padding-top: 22px !important;
    padding-bottom: 26px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .visio-contact-section .contact-title-line {
    animation: none !important;
  }
}

/* STEP VISIO 019 - unified homepage atmosphere system */
:root {
  --visio-red: #ff0000;
  --visio-black: #000000;
  --visio-sand: #f1ece8;
  --visio-warm-white: #fffaf4;
}

.visio-work-section,
.visio-info-section,
.visio-contact-section,
.visio-footer {
  position: relative !important;
  position: relative !important;
  isolation: isolate;
}

.visio-work-section::before,
.visio-work-section::after,
.visio-info-section::before,
.visio-info-section::after,
.visio-contact-section::before,
.visio-contact-section::after,
.visio-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.visio-work-section {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 78%, rgba(255, 250, 244, 0.2) 100%),
    radial-gradient(ellipse at 14% 4%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 24rem),
    radial-gradient(ellipse at 22% 30%, rgba(255, 0, 0, 0.9), rgba(255, 0, 0, 0) 42rem),
    radial-gradient(ellipse at 88% 58%, rgba(18, 0, 0, 0.72), rgba(18, 0, 0, 0) 38rem),
    linear-gradient(138deg, #100000 0%, #460000 28%, #ff0000 55%, #6e0000 78%, #080000 100%) !important;
}

.visio-work-section::before {
  z-index: 0;
  opacity: 0.32;
  background:
    linear-gradient(132deg, transparent 49%, rgba(0, 0, 0, 0.28) 49.7%, rgba(255, 255, 255, 0.08) 50%, transparent 51%) 8% 14% / 340px 106px no-repeat,
    linear-gradient(132deg, transparent 49%, rgba(0, 0, 0, 0.34) 50%, transparent 51%) 78% 31% / 260px 84px no-repeat,
    linear-gradient(132deg, transparent 48.8%, rgba(255, 255, 255, 0.08) 50%, transparent 51.2%) 34% 74% / 460px 130px no-repeat,
    linear-gradient(132deg, transparent 49%, rgba(0, 0, 0, 0.24) 50%, transparent 51%) 84% 88% / 300px 94px no-repeat;
  mix-blend-mode: soft-light;
  animation: visioSectionSignalDrift 82s cubic-bezier(0.32, 0, 0.18, 1) infinite alternate;
}

.visio-work-section::after {
  z-index: 0;
  opacity: 0.72;
  background:
    radial-gradient(ellipse at 6% 44%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 28rem),
    radial-gradient(ellipse at 78% 86%, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0) 34rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(255, 0, 0, 0.04));
  filter: blur(0.2px);
  animation: visioSectionOrbBreathe 68s cubic-bezier(0.34, 0, 0.18, 1) infinite alternate;
}

.visio-info-section {
  background:
    linear-gradient(180deg, rgba(72, 0, 0, 0.18) 0%, rgba(255, 250, 244, 0.94) 16%, rgba(255, 250, 244, 0) 38%),
    radial-gradient(ellipse at 8% 18%, rgba(255, 0, 0, 0.14), rgba(255, 0, 0, 0) 34rem),
    radial-gradient(ellipse at 92% 36%, rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0) 28rem),
    radial-gradient(ellipse at 76% 88%, rgba(255, 0, 0, 0.075), rgba(255, 0, 0, 0) 32rem),
    linear-gradient(142deg, #fffaf4 0%, #f9eee7 48%, #ffffff 100%) !important;
}

.visio-info-section::before {
  z-index: 0;
  opacity: 0.34;
  background:
    linear-gradient(132deg, transparent 49%, rgba(255, 0, 0, 0.045) 49.8%, rgba(255, 255, 255, 0.32) 50%, transparent 51.2%) 11% 18% / 420px 120px no-repeat,
    linear-gradient(132deg, transparent 49%, rgba(255, 0, 0, 0.038) 50%, transparent 51%) 76% 23% / 260px 80px no-repeat,
    linear-gradient(132deg, transparent 49%, rgba(0, 0, 0, 0.032) 50%, transparent 51%) 20% 76% / 320px 92px no-repeat,
    linear-gradient(132deg, transparent 49%, rgba(255, 0, 0, 0.032) 50%, transparent 51%) 87% 84% / 380px 110px no-repeat;
  animation: visioSectionSignalDrift 98s cubic-bezier(0.32, 0, 0.18, 1) infinite alternate-reverse;
}

.visio-info-section::after {
  z-index: 0;
  opacity: 0.82;
  background:
    radial-gradient(ellipse at 16% 8%, rgba(255, 0, 0, 0.08), rgba(255, 0, 0, 0) 28rem),
    radial-gradient(ellipse at 74% 60%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 30rem),
    radial-gradient(ellipse at 96% 96%, rgba(241, 236, 232, 0.8), rgba(241, 236, 232, 0) 26rem);
  animation: visioSectionOrbBreathe 84s cubic-bezier(0.34, 0, 0.18, 1) infinite alternate;
}

.visio-contact-section {
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(255, 248, 241, 0.95) 24%, rgba(255, 238, 230, 0.98) 100%),
    radial-gradient(ellipse at 18% 20%, rgba(255, 0, 0, 0.13), rgba(255, 0, 0, 0) 30rem),
    radial-gradient(ellipse at 84% 72%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 32rem) !important;
}

.visio-contact-section::before {
  z-index: 0;
  opacity: 0.32;
  background:
    linear-gradient(132deg, transparent 49%, rgba(255, 0, 0, 0.042) 50%, transparent 51%) 14% 14% / 360px 100px no-repeat,
    linear-gradient(132deg, transparent 49%, rgba(0, 0, 0, 0.028) 50%, transparent 51%) 82% 42% / 300px 86px no-repeat,
    linear-gradient(132deg, transparent 49%, rgba(255, 0, 0, 0.036) 50%, transparent 51%) 42% 88% / 440px 118px no-repeat;
  animation: visioSectionSignalDrift 90s cubic-bezier(0.32, 0, 0.18, 1) infinite alternate;
}

.visio-contact-section::after {
  z-index: 0;
  opacity: 0.78;
  background:
    radial-gradient(ellipse at 8% 70%, rgba(255, 0, 0, 0.07), rgba(255, 0, 0, 0) 28rem),
    radial-gradient(ellipse at 86% 12%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 30rem);
  animation: visioSectionOrbBreathe 76s cubic-bezier(0.34, 0, 0.18, 1) infinite alternate-reverse;
}

.visio-footer {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 0, 0, 0.09), rgba(255, 0, 0, 0) 28rem),
    radial-gradient(ellipse at 88% 100%, rgba(241, 236, 232, 0.84), rgba(241, 236, 232, 0) 24rem),
    linear-gradient(180deg, #fff0e8 0%, #fffaf4 100%) !important;
}

.visio-footer::before {
  z-index: 0;
  opacity: 0.28;
  background:
    linear-gradient(132deg, transparent 49%, rgba(255, 0, 0, 0.045) 50%, transparent 51%) 9% 12% / 300px 84px no-repeat,
    linear-gradient(132deg, transparent 49%, rgba(0, 0, 0, 0.026) 50%, transparent 51%) 78% 58% / 260px 72px no-repeat;
}

.visio-footer > * {
  position: relative;
  z-index: 1;
}

@keyframes visioSectionSignalDrift {
  0% {
    opacity: 0.22;
    transform: translate3d(-0.6%, -0.2%, 0);
  }
  48% {
    opacity: 0.42;
    transform: translate3d(0.5%, 0.25%, 0);
  }
  100% {
    opacity: 0.3;
    transform: translate3d(0.9%, 0.6%, 0);
  }
}

@keyframes visioSectionOrbBreathe {
  0% {
    opacity: 0.58;
    transform: translate3d(-0.7%, -0.25%, 0) scale(1);
  }
  46% {
    opacity: 0.86;
    transform: translate3d(0.45%, 0.18%, 0) scale(1.035);
  }
  100% {
    opacity: 0.68;
    transform: translate3d(0.8%, 0.45%, 0) scale(1.018);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-section::before,
  .visio-work-section::after,
  .visio-info-section::before,
  .visio-info-section::after,
  .visio-contact-section::before,
  .visio-contact-section::after {
    animation: none !important;
  }
}

/* STEP VISIO 021 - simplified clear section backgrounds */
body.visio-index-page {
  background: #000000 !important;
  background-attachment: initial !important;
}

body.visio-index-page::before,
body.visio-index-page::after {
  display: none !important;
  animation: none !important;
}

.visio-work-section,
.visio-info-section,
.visio-contact-section,
.visio-footer {
  isolation: isolate;
  overflow: hidden;
}

.visio-work-section::before,
.visio-info-section::before,
.visio-contact-section::before,
.visio-footer::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  animation: visioSimpleSignalDrift 54s cubic-bezier(0.32, 0, 0.18, 1) infinite alternate;
  will-change: transform, opacity;
}

.visio-work-section::after,
.visio-info-section::after,
.visio-contact-section::after {
  display: none !important;
}

.visio-work-section {
  background: #e60000 !important;
  background-image: none !important;
}

.visio-work-section::before {
  opacity: 0.34;
  mix-blend-mode: multiply;
  background:
    linear-gradient(132deg, transparent 49.4%, rgba(0, 0, 0, 0.32) 50%, transparent 50.6%) 7% 12% / 420px 118px no-repeat,
    linear-gradient(132deg, transparent 49.5%, rgba(0, 0, 0, 0.24) 50%, transparent 50.5%) 72% 22% / 260px 78px no-repeat,
    linear-gradient(132deg, transparent 49.45%, rgba(0, 0, 0, 0.28) 50%, transparent 50.55%) 28% 76% / 520px 132px no-repeat,
    linear-gradient(132deg, transparent 49.5%, rgba(0, 0, 0, 0.2) 50%, transparent 50.5%) 88% 88% / 330px 88px no-repeat !important;
}

.visio-info-section {
  background: #f1ece8 !important;
  background-image: none !important;
  color: #190d0d !important;
}

.visio-info-section::before {
  opacity: 0.32;
  background:
    linear-gradient(132deg, transparent 49.45%, rgba(255, 0, 0, 0.22) 50%, transparent 50.55%) 9% 16% / 440px 118px no-repeat,
    linear-gradient(132deg, transparent 49.5%, rgba(255, 0, 0, 0.16) 50%, transparent 50.5%) 76% 26% / 280px 78px no-repeat,
    linear-gradient(132deg, transparent 49.45%, rgba(255, 0, 0, 0.13) 50%, transparent 50.55%) 24% 78% / 500px 128px no-repeat,
    linear-gradient(132deg, transparent 49.5%, rgba(255, 0, 0, 0.12) 50%, transparent 50.5%) 88% 86% / 340px 88px no-repeat !important;
}

.visio-contact-section {
  background: #e60000 !important;
  background-image: none !important;
  color: #ffffff !important;
}

.visio-contact-section::before {
  opacity: 0.32;
  mix-blend-mode: multiply;
  background:
    linear-gradient(132deg, transparent 49.45%, rgba(0, 0, 0, 0.3) 50%, transparent 50.55%) 12% 16% / 430px 112px no-repeat,
    linear-gradient(132deg, transparent 49.5%, rgba(0, 0, 0, 0.22) 50%, transparent 50.5%) 78% 42% / 290px 82px no-repeat,
    linear-gradient(132deg, transparent 49.45%, rgba(0, 0, 0, 0.24) 50%, transparent 50.55%) 42% 88% / 470px 120px no-repeat !important;
}

.visio-contact-section .contact-name,
.visio-contact-section .contact-title,
.visio-contact-section h4,
.visio-contact-section .email-link {
  color: #ffffff !important;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.visio-contact-section .email-link:hover,
.visio-contact-section .email-link:focus {
  color: #000000 !important;
}

.visio-contact-section .contact-title-line {
  background: #000000 !important;
}

.visio-footer {
  background: #e60000 !important;
  background-image: none !important;
  color: #ffffff !important;
  padding-top: clamp(18px, 2.1vw, 30px) !important;
  padding-bottom: clamp(18px, 2.1vw, 30px) !important;
}

.visio-footer::before {
  opacity: 0.28;
  mix-blend-mode: multiply;
  background:
    linear-gradient(132deg, transparent 49.5%, rgba(0, 0, 0, 0.24) 50%, transparent 50.5%) 8% 18% / 310px 82px no-repeat,
    linear-gradient(132deg, transparent 49.5%, rgba(0, 0, 0, 0.18) 50%, transparent 50.5%) 76% 62% / 260px 70px no-repeat !important;
}

.visio-footer .legal,
.visio-footer .legal a,
.visio-footer .legal a:any-link,
.visio-footer .legal a:hover,
.visio-footer .legal a:focus,
.visio-footer .legal a:active {
  color: #ffffff !important;
  text-shadow: none !important;
}

.visio-footer .socialicons {
  margin-bottom: 10px !important;
}

.visio-footer .socialicons a img {
  filter: brightness(0) saturate(100%) !important;
  opacity: 0.94;
}

@keyframes visioSimpleSignalDrift {
  0% {
    opacity: 0.18;
    transform: translate3d(-0.9%, -0.35%, 0);
  }
  46% {
    opacity: 0.36;
    transform: translate3d(0.55%, 0.18%, 0);
  }
  100% {
    opacity: 0.24;
    transform: translate3d(1.1%, 0.6%, 0);
  }
}

@media (max-width: 767px) {
  .visio-work-section::before,
  .visio-info-section::before,
  .visio-contact-section::before,
  .visio-footer::before {
    inset: -18%;
    opacity: 0.22;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-section::before,
  .visio-info-section::before,
  .visio-contact-section::before,
  .visio-footer::before {
    animation: none !important;
  }
}

/* STEP VISIO 022 - footer visibility lock */
.visio-footer {
  position: relative !important;
  min-height: auto !important;
  overflow: hidden !important;
}

.visio-footer::before {
  z-index: 0 !important;
}

.visio-footer > *,
.visio-footer .socialicons,
.visio-footer .legal {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.visio-footer .socialicons {
  line-height: 1 !important;
  padding-top: 0 !important;
}

.visio-footer .socialicons a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
}

.visio-footer .socialicons a img {
  display: block !important;
  visibility: visible !important;
  filter: brightness(0) saturate(100%) !important;
}

.visio-footer .legal,
.visio-footer .legal a,
.visio-footer .legal a:any-link,
.visio-footer .legal a:link,
.visio-footer .legal a:visited,
.visio-footer .legal a:hover,
.visio-footer .legal a:focus,
.visio-footer .legal a:active {
  display: block;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* STEP VISIO 023 - refined lower signal language and footer typography */
.visio-work-section::before,
.visio-contact-section::before,
.visio-footer::before {
  opacity: 0.26 !important;
  mix-blend-mode: multiply;
  background:
    linear-gradient(132deg, transparent 49.62%, rgba(0, 0, 0, 0.34) 50%, transparent 50.38%) 4% 10% / 560px 126px no-repeat,
    linear-gradient(132deg, transparent 49.66%, rgba(0, 0, 0, 0.22) 50%, transparent 50.34%) 71% 18% / 210px 58px no-repeat,
    linear-gradient(132deg, transparent 49.6%, rgba(0, 0, 0, 0.3) 50%, transparent 50.4%) 18% 55% / 360px 86px no-repeat,
    linear-gradient(132deg, transparent 49.64%, rgba(0, 0, 0, 0.2) 50%, transparent 50.36%) 89% 68% / 620px 138px no-repeat,
    linear-gradient(132deg, transparent 49.68%, rgba(0, 0, 0, 0.18) 50%, transparent 50.32%) 42% 91% / 270px 68px no-repeat !important;
  animation: visioSignalLineTravelDark 72s cubic-bezier(0.32, 0, 0.18, 1) infinite alternate !important;
}

.visio-info-section::before {
  opacity: 0.28 !important;
  background:
    linear-gradient(132deg, transparent 49.62%, rgba(255, 0, 0, 0.24) 50%, transparent 50.38%) 5% 12% / 560px 126px no-repeat,
    linear-gradient(132deg, transparent 49.66%, rgba(255, 0, 0, 0.14) 50%, transparent 50.34%) 72% 21% / 220px 60px no-repeat,
    linear-gradient(132deg, transparent 49.6%, rgba(255, 0, 0, 0.2) 50%, transparent 50.4%) 16% 57% / 390px 90px no-repeat,
    linear-gradient(132deg, transparent 49.64%, rgba(255, 0, 0, 0.12) 50%, transparent 50.36%) 88% 68% / 620px 138px no-repeat,
    linear-gradient(132deg, transparent 49.68%, rgba(255, 0, 0, 0.12) 50%, transparent 50.32%) 42% 92% / 280px 70px no-repeat !important;
  animation: visioSignalLineTravelRed 78s cubic-bezier(0.32, 0, 0.18, 1) infinite alternate !important;
}

.visio-info-section .visio-info-inner {
  position: relative;
  z-index: 1;
}

.visio-info-section .visio-info-inner::before {
  content: "";
  position: absolute;
  inset: clamp(-26px, -2.6vw, -12px) -4vw auto -4vw;
  height: clamp(130px, 18vw, 230px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background:
    linear-gradient(132deg, transparent 49.6%, rgba(255, 0, 0, 0.3) 50%, transparent 50.4%) 12% 28% / 420px 94px no-repeat,
    linear-gradient(132deg, transparent 49.65%, rgba(255, 0, 0, 0.18) 50%, transparent 50.35%) 76% 48% / 260px 62px no-repeat,
    linear-gradient(132deg, transparent 49.65%, rgba(255, 0, 0, 0.14) 50%, transparent 50.35%) 38% 78% / 560px 120px no-repeat;
  animation: visioSignalLineTravelRed 68s cubic-bezier(0.32, 0, 0.18, 1) infinite alternate-reverse;
}

.visio-contact-section .contact-title {
  color: #000000 !important;
  text-shadow: none !important;
}

.visio-contact-section .email-link,
.visio-contact-section .email-link:any-link {
  color: #efff13 !important;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.visio-contact-section .email-link:hover,
.visio-contact-section .email-link:focus {
  color: #ffffff !important;
}

.visio-footer .legal {
  font-size: clamp(0.58rem, 0.22vw + 0.52rem, 0.76rem) !important;
  line-height: 1.28 !important;
  letter-spacing: 0.02em !important;
}

.visio-footer .legal a,
.visio-footer .legal a:any-link,
.visio-footer .legal a:link,
.visio-footer .legal a:visited,
.visio-footer .legal a:hover,
.visio-footer .legal a:focus,
.visio-footer .legal a:active {
  font-size: inherit !important;
  line-height: inherit !important;
}

@keyframes visioSignalLineTravelDark {
  0% {
    opacity: 0.14;
    transform: translate3d(-1.4%, -0.4%, 0);
  }
  38% {
    opacity: 0.3;
    transform: translate3d(0.45%, 0.15%, 0);
  }
  72% {
    opacity: 0.22;
    transform: translate3d(1.15%, 0.45%, 0);
  }
  100% {
    opacity: 0.16;
    transform: translate3d(1.8%, 0.72%, 0);
  }
}

@keyframes visioSignalLineTravelRed {
  0% {
    opacity: 0.12;
    transform: translate3d(-1.2%, -0.3%, 0);
  }
  44% {
    opacity: 0.28;
    transform: translate3d(0.35%, 0.12%, 0);
  }
  100% {
    opacity: 0.16;
    transform: translate3d(1.4%, 0.58%, 0);
  }
}

@media (max-width: 767px) {
  .visio-info-section .visio-info-inner::before {
    inset-left: -8vw;
    inset-right: -8vw;
    opacity: 0.18;
  }

  .visio-footer .legal {
    font-size: 0.62rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-section::before,
  .visio-info-section::before,
  .visio-info-section .visio-info-inner::before,
  .visio-contact-section::before,
  .visio-footer::before {
    animation: none !important;
  }
}

/* STEP VISIO 024 - hero-like lower signal system */
.visio-work-section::before,
.visio-contact-section::before,
.visio-footer::before {
  opacity: 0.36 !important;
  mix-blend-mode: multiply;
  background:
    linear-gradient(18deg, transparent 49.72%, rgba(0, 0, 0, 0.34) 50%, transparent 50.28%) 2% 16% / 880px 118px no-repeat,
    linear-gradient(37deg, transparent 49.7%, rgba(0, 0, 0, 0.26) 50%, transparent 50.3%) 68% 11% / 360px 84px no-repeat,
    linear-gradient(64deg, transparent 49.72%, rgba(0, 0, 0, 0.28) 50%, transparent 50.28%) 18% 48% / 640px 138px no-repeat,
    linear-gradient(103deg, transparent 49.74%, rgba(0, 0, 0, 0.22) 50%, transparent 50.26%) 83% 56% / 260px 92px no-repeat,
    linear-gradient(128deg, transparent 49.72%, rgba(0, 0, 0, 0.32) 50%, transparent 50.28%) 36% 84% / 1020px 170px no-repeat,
    linear-gradient(151deg, transparent 49.76%, rgba(0, 0, 0, 0.2) 50%, transparent 50.24%) 90% 90% / 430px 104px no-repeat !important;
  animation: visioLowerSignalFieldDark 86s cubic-bezier(0.3, 0, 0.16, 1) infinite alternate !important;
}

.visio-info-section::before {
  opacity: 0.38 !important;
  background:
    linear-gradient(18deg, transparent 49.72%, rgba(255, 0, 0, 0.3) 50%, transparent 50.28%) 1% 15% / 880px 118px no-repeat,
    linear-gradient(37deg, transparent 49.7%, rgba(255, 0, 0, 0.2) 50%, transparent 50.3%) 69% 12% / 360px 84px no-repeat,
    linear-gradient(64deg, transparent 49.72%, rgba(255, 0, 0, 0.24) 50%, transparent 50.28%) 18% 48% / 640px 138px no-repeat,
    linear-gradient(103deg, transparent 49.74%, rgba(255, 0, 0, 0.18) 50%, transparent 50.26%) 83% 56% / 260px 92px no-repeat,
    linear-gradient(128deg, transparent 49.72%, rgba(255, 0, 0, 0.28) 50%, transparent 50.28%) 36% 84% / 1020px 170px no-repeat,
    linear-gradient(151deg, transparent 49.76%, rgba(255, 0, 0, 0.16) 50%, transparent 50.24%) 90% 90% / 430px 104px no-repeat !important;
  animation: visioLowerSignalFieldRed 92s cubic-bezier(0.3, 0, 0.16, 1) infinite alternate !important;
}

.visio-work-section::after,
.visio-contact-section::after,
.visio-footer::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: soft-light;
  background:
    linear-gradient(18deg, transparent 46%, rgba(241, 236, 232, 0.22) 50%, transparent 54%) 7% 16% / 190px 118px no-repeat,
    linear-gradient(64deg, transparent 46%, rgba(241, 236, 232, 0.16) 50%, transparent 54%) 31% 48% / 150px 138px no-repeat,
    linear-gradient(128deg, transparent 46%, rgba(241, 236, 232, 0.2) 50%, transparent 54%) 64% 84% / 210px 170px no-repeat,
    radial-gradient(circle, rgba(0, 0, 0, 0.42) 0 2px, transparent 3px) 18% 22% / 180px 100px no-repeat,
    radial-gradient(circle, rgba(0, 0, 0, 0.34) 0 2px, transparent 3px) 76% 58% / 160px 100px no-repeat,
    radial-gradient(circle, rgba(0, 0, 0, 0.28) 0 2px, transparent 3px) 44% 88% / 160px 100px no-repeat !important;
  animation: visioLowerSignalEnergy 34s cubic-bezier(0.36, 0, 0.18, 1) infinite alternate;
}

.visio-info-section::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.26;
  background:
    linear-gradient(18deg, transparent 46%, rgba(255, 0, 0, 0.22) 50%, transparent 54%) 7% 16% / 190px 118px no-repeat,
    linear-gradient(64deg, transparent 46%, rgba(255, 0, 0, 0.16) 50%, transparent 54%) 31% 48% / 150px 138px no-repeat,
    linear-gradient(128deg, transparent 46%, rgba(255, 0, 0, 0.2) 50%, transparent 54%) 64% 84% / 210px 170px no-repeat,
    radial-gradient(circle, rgba(255, 0, 0, 0.36) 0 2px, transparent 3px) 18% 22% / 180px 100px no-repeat,
    radial-gradient(circle, rgba(255, 0, 0, 0.28) 0 2px, transparent 3px) 76% 58% / 160px 100px no-repeat,
    radial-gradient(circle, rgba(255, 0, 0, 0.22) 0 2px, transparent 3px) 44% 88% / 160px 100px no-repeat !important;
  animation: visioLowerSignalEnergy 38s cubic-bezier(0.36, 0, 0.18, 1) infinite alternate-reverse;
}

.visio-info-section .visio-info-inner::before {
  opacity: 0.32 !important;
  background:
    linear-gradient(18deg, transparent 49.68%, rgba(255, 0, 0, 0.32) 50%, transparent 50.32%) 2% 18% / 760px 110px no-repeat,
    linear-gradient(64deg, transparent 49.7%, rgba(255, 0, 0, 0.2) 50%, transparent 50.3%) 72% 44% / 280px 82px no-repeat,
    linear-gradient(128deg, transparent 49.68%, rgba(255, 0, 0, 0.22) 50%, transparent 50.32%) 31% 78% / 920px 144px no-repeat !important;
  animation: visioLowerSignalFieldRed 84s cubic-bezier(0.3, 0, 0.16, 1) infinite alternate-reverse !important;
}

.visio-info-section .visio-info-inner::after {
  content: "";
  position: absolute;
  inset: clamp(-26px, -2.6vw, -12px) -4vw auto -4vw;
  height: clamp(130px, 18vw, 230px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.24;
  background:
    linear-gradient(18deg, transparent 46%, rgba(255, 0, 0, 0.18) 50%, transparent 54%) 22% 18% / 170px 110px no-repeat,
    linear-gradient(128deg, transparent 46%, rgba(255, 0, 0, 0.18) 50%, transparent 54%) 68% 78% / 210px 144px no-repeat,
    radial-gradient(circle, rgba(255, 0, 0, 0.34) 0 2px, transparent 3px) 78% 52% / 160px 90px no-repeat;
  animation: visioLowerSignalEnergy 36s cubic-bezier(0.36, 0, 0.18, 1) infinite alternate;
}

.visio-footer .socialicons a img {
  opacity: 1;
  animation: socialPulse 38s linear infinite !important;
}

.visio-footer .socialicons a:nth-child(1) img {
  animation-delay: 7s !important;
  animation-duration: 36s !important;
}

.visio-footer .socialicons a:nth-child(2) img {
  animation-delay: 19s !important;
  animation-duration: 38s !important;
}

.visio-footer .socialicons a:nth-child(3) img {
  animation-delay: 3s !important;
  animation-duration: 35s !important;
}

.visio-footer .socialicons a:nth-child(4) img {
  animation-delay: 27s !important;
  animation-duration: 40s !important;
}

@keyframes visioLowerSignalFieldDark {
  0% {
    opacity: 0.22;
    transform: translate3d(-1.6%, -0.6%, 0) scale(1);
  }
  36% {
    opacity: 0.4;
    transform: translate3d(0.25%, 0.12%, 0) scale(1.01);
  }
  68% {
    opacity: 0.28;
    transform: translate3d(1.1%, 0.4%, 0) scale(1.006);
  }
  100% {
    opacity: 0.34;
    transform: translate3d(1.8%, 0.72%, 0) scale(1.014);
  }
}

@keyframes visioLowerSignalFieldRed {
  0% {
    opacity: 0.2;
    transform: translate3d(-1.4%, -0.5%, 0) scale(1);
  }
  42% {
    opacity: 0.42;
    transform: translate3d(0.2%, 0.1%, 0) scale(1.01);
  }
  100% {
    opacity: 0.28;
    transform: translate3d(1.55%, 0.6%, 0) scale(1.012);
  }
}

@keyframes visioLowerSignalEnergy {
  0% {
    opacity: 0;
    background-position:
      1% 16%,
      24% 48%,
      52% 84%,
      18% 22%,
      76% 58%,
      44% 88%;
  }
  18% {
    opacity: 0.12;
  }
  48% {
    opacity: 0.34;
    background-position:
      20% 16%,
      38% 48%,
      70% 84%,
      18% 22%,
      76% 58%,
      44% 88%;
  }
  76% {
    opacity: 0.18;
  }
  100% {
    opacity: 0;
    background-position:
      38% 16%,
      52% 48%,
      88% 84%,
      18% 22%,
      76% 58%,
      44% 88%;
  }
}

@media (max-width: 767px) {
  .visio-work-section::before,
  .visio-info-section::before,
  .visio-contact-section::before,
  .visio-footer::before {
    opacity: 0.24 !important;
  }

  .visio-work-section::after,
  .visio-info-section::after,
  .visio-contact-section::after,
  .visio-footer::after,
  .visio-info-section .visio-info-inner::after {
    opacity: 0.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-section::before,
  .visio-work-section::after,
  .visio-info-section::before,
  .visio-info-section::after,
  .visio-info-section .visio-info-inner::before,
  .visio-info-section .visio-info-inner::after,
  .visio-contact-section::before,
  .visio-contact-section::after,
  .visio-footer::before,
  .visio-footer::after,
  .visio-footer .socialicons a img {
    animation: none !important;
  }
}

/* STEP VISIO 025 - meteor-like travelling lower signals */
.visio-work-section::before,
.visio-work-section::after,
.visio-info-section::before,
.visio-info-section::after,
.visio-contact-section::before,
.visio-contact-section::after,
.visio-footer::before,
.visio-footer::after,
.visio-info-section .visio-info-inner::before,
.visio-info-section .visio-info-inner::after {
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border-radius: 999px;
  transform-origin: left center;
  will-change: transform, opacity, width;
}

.visio-work-section::before,
.visio-contact-section::before,
.visio-footer::before {
  width: clamp(260px, 42vw, 880px);
  height: 1px;
  inset: auto auto auto auto;
  left: -34vw;
  top: 20%;
  opacity: 0;
  mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.04) 18%, rgba(0, 0, 0, 0.3) 76%, rgba(0, 0, 0, 0.58) 94%, transparent 100%) !important;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  animation: visioMeteorDarkA 18s cubic-bezier(0.32, 0, 0.16, 1) infinite !important;
}

.visio-work-section::after,
.visio-contact-section::after,
.visio-footer::after {
  width: clamp(180px, 28vw, 520px);
  height: 1px;
  inset: auto auto auto auto;
  left: 112%;
  top: 66%;
  opacity: 0;
  mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.03) 20%, rgba(0, 0, 0, 0.22) 74%, rgba(0, 0, 0, 0.48) 94%, transparent 100%) !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  animation: visioMeteorDarkB 23s cubic-bezier(0.34, 0, 0.18, 1) infinite !important;
}

.visio-info-section::before {
  width: clamp(260px, 42vw, 880px);
  height: 1px;
  inset: auto auto auto auto;
  left: -32vw;
  top: 18%;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.035) 18%, rgba(255, 0, 0, 0.24) 76%, rgba(255, 0, 0, 0.52) 94%, transparent 100%) !important;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.1);
  animation: visioMeteorRedA 20s cubic-bezier(0.32, 0, 0.16, 1) infinite !important;
}

.visio-info-section::after {
  width: clamp(180px, 28vw, 520px);
  height: 1px;
  inset: auto auto auto auto;
  left: 112%;
  top: 70%;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.03) 20%, rgba(255, 0, 0, 0.18) 74%, rgba(255, 0, 0, 0.42) 94%, transparent 100%) !important;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.09);
  animation: visioMeteorRedB 26s cubic-bezier(0.34, 0, 0.18, 1) infinite !important;
}

.visio-info-section .visio-info-inner::before {
  width: clamp(220px, 34vw, 680px);
  height: 1px;
  inset: auto auto auto auto;
  left: -18vw;
  top: 18%;
  z-index: -1;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.035) 18%, rgba(255, 0, 0, 0.28) 76%, rgba(255, 0, 0, 0.56) 94%, transparent 100%) !important;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.1);
  animation: visioMeteorRedIntro 19s cubic-bezier(0.32, 0, 0.16, 1) infinite !important;
}

.visio-info-section .visio-info-inner::after {
  width: clamp(120px, 16vw, 260px);
  height: 1px;
  inset: auto auto auto auto;
  left: 74%;
  top: 36%;
  z-index: -1;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.04) 20%, rgba(255, 0, 0, 0.2) 74%, rgba(255, 0, 0, 0.42) 94%, transparent 100%) !important;
  box-shadow: 0 0 9px rgba(255, 0, 0, 0.08);
  animation: visioMeteorRedIntroShort 29s cubic-bezier(0.34, 0, 0.18, 1) infinite !important;
}

.visio-contact-section::before {
  top: 25%;
  animation-delay: -6s !important;
  animation-duration: 21s !important;
}

.visio-contact-section::after {
  top: 76%;
  animation-delay: -13s !important;
  animation-duration: 27s !important;
}

.visio-footer::before {
  top: 34%;
  animation-delay: -11s !important;
  animation-duration: 24s !important;
}

.visio-footer::after {
  top: 74%;
  animation-delay: -18s !important;
  animation-duration: 31s !important;
}

.visio-info-section .frameheader {
  color: #ff0000 !important;
  background: linear-gradient(90deg, #ff0000 0%, #ff0000 32%, #8a0000 48%, #ff0000 62%, #ff0000 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: visioTosiHyvaHeadingWave 18s linear infinite;
  will-change: background-position;
}

@keyframes visioMeteorDarkA {
  0%, 8% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(18deg) scaleX(0.08);
  }
  24% {
    opacity: 0.3;
    transform: translate3d(34vw, 12vh, 0) rotate(18deg) scaleX(0.72);
  }
  56% {
    opacity: 0.42;
    transform: translate3d(88vw, 30vh, 0) rotate(18deg) scaleX(1);
  }
  82% {
    opacity: 0.18;
    transform: translate3d(128vw, 44vh, 0) rotate(18deg) scaleX(0.54);
  }
  100% {
    opacity: 0;
    transform: translate3d(150vw, 52vh, 0) rotate(18deg) scaleX(0.04);
  }
}

@keyframes visioMeteorDarkB {
  0%, 18% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(128deg) scaleX(0.06);
  }
  36% {
    opacity: 0.28;
    transform: translate3d(-28vw, 10vh, 0) rotate(128deg) scaleX(0.68);
  }
  62% {
    opacity: 0.38;
    transform: translate3d(-78vw, 32vh, 0) rotate(128deg) scaleX(1);
  }
  88% {
    opacity: 0.12;
    transform: translate3d(-122vw, 46vh, 0) rotate(128deg) scaleX(0.46);
  }
  100% {
    opacity: 0;
    transform: translate3d(-144vw, 52vh, 0) rotate(128deg) scaleX(0.04);
  }
}

@keyframes visioMeteorRedA {
  0%, 10% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(37deg) scaleX(0.08);
  }
  28% {
    opacity: 0.26;
    transform: translate3d(30vw, 16vh, 0) rotate(37deg) scaleX(0.72);
  }
  58% {
    opacity: 0.4;
    transform: translate3d(86vw, 38vh, 0) rotate(37deg) scaleX(1);
  }
  84% {
    opacity: 0.14;
    transform: translate3d(124vw, 54vh, 0) rotate(37deg) scaleX(0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(148vw, 62vh, 0) rotate(37deg) scaleX(0.04);
  }
}

@keyframes visioMeteorRedB {
  0%, 22% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(151deg) scaleX(0.06);
  }
  38% {
    opacity: 0.22;
    transform: translate3d(-28vw, 8vh, 0) rotate(151deg) scaleX(0.62);
  }
  64% {
    opacity: 0.34;
    transform: translate3d(-78vw, 26vh, 0) rotate(151deg) scaleX(1);
  }
  90% {
    opacity: 0.12;
    transform: translate3d(-120vw, 42vh, 0) rotate(151deg) scaleX(0.42);
  }
  100% {
    opacity: 0;
    transform: translate3d(-144vw, 50vh, 0) rotate(151deg) scaleX(0.04);
  }
}

@keyframes visioMeteorRedIntro {
  0%, 16% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(64deg) scaleX(0.08);
  }
  34% {
    opacity: 0.24;
    transform: translate3d(24vw, 8vh, 0) rotate(64deg) scaleX(0.72);
  }
  62% {
    opacity: 0.34;
    transform: translate3d(68vw, 18vh, 0) rotate(64deg) scaleX(1);
  }
  86% {
    opacity: 0.12;
    transform: translate3d(98vw, 26vh, 0) rotate(64deg) scaleX(0.48);
  }
  100% {
    opacity: 0;
    transform: translate3d(116vw, 32vh, 0) rotate(64deg) scaleX(0.04);
  }
}

@keyframes visioMeteorRedIntroShort {
  0%, 34% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(103deg) scaleX(0.06);
  }
  48% {
    opacity: 0.18;
    transform: translate3d(-12vw, 5vh, 0) rotate(103deg) scaleX(0.62);
  }
  68% {
    opacity: 0.26;
    transform: translate3d(-36vw, 16vh, 0) rotate(103deg) scaleX(1);
  }
  88% {
    opacity: 0.1;
    transform: translate3d(-58vw, 24vh, 0) rotate(103deg) scaleX(0.44);
  }
  100% {
    opacity: 0;
    transform: translate3d(-70vw, 30vh, 0) rotate(103deg) scaleX(0.04);
  }
}

@keyframes visioTosiHyvaHeadingWave {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@media (max-width: 767px) {
  .visio-work-section::before,
  .visio-contact-section::before,
  .visio-footer::before,
  .visio-info-section::before {
    width: clamp(190px, 58vw, 520px);
  }

  .visio-work-section::after,
  .visio-contact-section::after,
  .visio-footer::after,
  .visio-info-section::after {
    width: clamp(140px, 42vw, 360px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-section::before,
  .visio-work-section::after,
  .visio-info-section::before,
  .visio-info-section::after,
  .visio-info-section .visio-info-inner::before,
  .visio-info-section .visio-info-inner::after,
  .visio-contact-section::before,
  .visio-contact-section::after,
  .visio-footer::before,
  .visio-footer::after,
  .visio-info-section .frameheader {
    animation: none !important;
  }
}

/* STEP VISIO 025 - visible signal count guard */
.visio-info-section .visio-info-inner::before,
.visio-info-section .visio-info-inner::after {
  display: none !important;
  animation: none !important;
}

/* STEP VISIO 026 - clearer meteor streaks and corrected Tosi Hyva heading */
.visio-work-section::before,
.visio-work-section::after,
.visio-info-section::before,
.visio-info-section::after,
.visio-contact-section::before,
.visio-contact-section::after,
.visio-footer::before,
.visio-footer::after {
  width: clamp(110px, 18vw, 310px) !important;
  height: 2px !important;
  inset: auto auto auto auto;
  border-radius: 999px;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  transform-origin: 100% 50%;
  will-change: transform, opacity;
}

.visio-work-section::before,
.visio-contact-section::before,
.visio-footer::before,
.visio-work-section::after,
.visio-contact-section::after,
.visio-footer::after {
  mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 16%, rgba(0, 0, 0, 0.52) 66%, rgba(0, 0, 0, 0.88) 90%, transparent 100%) !important;
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(0, 0, 0, 0.08);
}

.visio-info-section::before,
.visio-info-section::after {
  mix-blend-mode: normal;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.08) 16%, rgba(255, 0, 0, 0.5) 66%, rgba(255, 0, 0, 0.84) 90%, transparent 100%) !important;
  box-shadow:
    0 0 8px rgba(255, 0, 0, 0.14),
    0 0 18px rgba(255, 0, 0, 0.06);
}

.visio-work-section::before {
  left: -24vw;
  top: 14%;
  animation: visioMeteorULDR 14s cubic-bezier(0.3, 0, 0.16, 1) infinite !important;
}

.visio-work-section::after {
  left: -22vw;
  top: 82%;
  width: clamp(95px, 14vw, 230px) !important;
  animation: visioMeteorLLUR 19s cubic-bezier(0.34, 0, 0.18, 1) infinite !important;
  animation-delay: -9s !important;
}

.visio-info-section::before {
  left: 110vw;
  top: 18%;
  animation: visioMeteorURLL 17s cubic-bezier(0.3, 0, 0.16, 1) infinite !important;
  animation-delay: -4s !important;
}

.visio-info-section::after {
  left: -22vw;
  top: 78%;
  width: clamp(100px, 15vw, 240px) !important;
  animation: visioMeteorLLURRed 23s cubic-bezier(0.34, 0, 0.18, 1) infinite !important;
  animation-delay: -13s !important;
}

.visio-contact-section::before {
  left: 112vw;
  top: 20%;
  animation: visioMeteorURLL 18s cubic-bezier(0.3, 0, 0.16, 1) infinite !important;
  animation-delay: -7s !important;
}

.visio-contact-section::after {
  left: 110vw;
  top: 84%;
  width: clamp(95px, 14vw, 230px) !important;
  animation: visioMeteorLRUL 26s cubic-bezier(0.34, 0, 0.18, 1) infinite !important;
  animation-delay: -17s !important;
}

.visio-footer::before {
  left: -24vw;
  top: 30%;
  width: clamp(90px, 13vw, 220px) !important;
  animation: visioMeteorULDR 24s cubic-bezier(0.34, 0, 0.18, 1) infinite !important;
  animation-delay: -12s !important;
}

.visio-footer::after {
  left: 110vw;
  top: 72%;
  width: clamp(86px, 12vw, 190px) !important;
  animation: visioMeteorLRUL 31s cubic-bezier(0.34, 0, 0.18, 1) infinite !important;
  animation-delay: -21s !important;
}

.visio-info-section .frameheader {
  color: #111111 !important;
  background: linear-gradient(90deg, #111111 0%, #111111 36%, #ff0000 49%, #ff3b3b 56%, #111111 70%, #111111 100%) !important;
  background-size: 320% 100% !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: visioTosiHyvaHeadingWave 18s linear infinite !important;
  text-shadow: none !important;
}

@keyframes visioMeteorULDR {
  0%, 12% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(29deg) scaleX(0.08);
  }
  26% {
    opacity: 0.26;
    transform: translate3d(28vw, 10vh, 0) rotate(29deg) scaleX(0.52);
  }
  48% {
    opacity: 0.52;
    transform: translate3d(72vw, 28vh, 0) rotate(29deg) scaleX(1);
  }
  72% {
    opacity: 0.24;
    transform: translate3d(112vw, 44vh, 0) rotate(29deg) scaleX(0.58);
  }
  100% {
    opacity: 0;
    transform: translate3d(138vw, 54vh, 0) rotate(29deg) scaleX(0.06);
  }
}

@keyframes visioMeteorLLUR {
  0%, 18% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-32deg) scaleX(0.08);
  }
  34% {
    opacity: 0.22;
    transform: translate3d(30vw, -12vh, 0) rotate(-32deg) scaleX(0.48);
  }
  56% {
    opacity: 0.48;
    transform: translate3d(76vw, -32vh, 0) rotate(-32deg) scaleX(1);
  }
  80% {
    opacity: 0.18;
    transform: translate3d(116vw, -48vh, 0) rotate(-32deg) scaleX(0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(140vw, -58vh, 0) rotate(-32deg) scaleX(0.06);
  }
}

@keyframes visioMeteorURLL {
  0%, 14% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(151deg) scaleX(0.08);
  }
  30% {
    opacity: 0.24;
    transform: translate3d(-28vw, 10vh, 0) rotate(151deg) scaleX(0.5);
  }
  54% {
    opacity: 0.5;
    transform: translate3d(-76vw, 30vh, 0) rotate(151deg) scaleX(1);
  }
  78% {
    opacity: 0.2;
    transform: translate3d(-116vw, 46vh, 0) rotate(151deg) scaleX(0.52);
  }
  100% {
    opacity: 0;
    transform: translate3d(-142vw, 56vh, 0) rotate(151deg) scaleX(0.06);
  }
}

@keyframes visioMeteorLRUL {
  0%, 22% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(211deg) scaleX(0.08);
  }
  38% {
    opacity: 0.22;
    transform: translate3d(-28vw, -10vh, 0) rotate(211deg) scaleX(0.48);
  }
  60% {
    opacity: 0.46;
    transform: translate3d(-76vw, -28vh, 0) rotate(211deg) scaleX(1);
  }
  84% {
    opacity: 0.16;
    transform: translate3d(-116vw, -44vh, 0) rotate(211deg) scaleX(0.48);
  }
  100% {
    opacity: 0;
    transform: translate3d(-140vw, -54vh, 0) rotate(211deg) scaleX(0.06);
  }
}

@keyframes visioMeteorLLURRed {
  0%, 20% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-24deg) scaleX(0.08);
  }
  36% {
    opacity: 0.24;
    transform: translate3d(30vw, -10vh, 0) rotate(-24deg) scaleX(0.5);
  }
  58% {
    opacity: 0.48;
    transform: translate3d(74vw, -28vh, 0) rotate(-24deg) scaleX(1);
  }
  82% {
    opacity: 0.18;
    transform: translate3d(114vw, -42vh, 0) rotate(-24deg) scaleX(0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(138vw, -52vh, 0) rotate(-24deg) scaleX(0.06);
  }
}

@media (max-width: 767px) {
  .visio-work-section::before,
  .visio-info-section::before,
  .visio-contact-section::before,
  .visio-footer::before,
  .visio-work-section::after,
  .visio-info-section::after,
  .visio-contact-section::after,
  .visio-footer::after {
    width: clamp(82px, 32vw, 190px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-section::before,
  .visio-work-section::after,
  .visio-info-section::before,
  .visio-info-section::after,
  .visio-contact-section::before,
  .visio-contact-section::after,
  .visio-footer::before,
  .visio-footer::after,
  .visio-info-section .frameheader {
    animation: none !important;
  }
}

/* STEP VISIO 027 - angle-matched meteor vectors and heading repair */
.visio-work-section::before,
.visio-info-section::before,
.visio-contact-section::before,
.visio-footer::before {
  width: clamp(220px, 36vw, 720px) !important;
  height: 2px !important;
  transform-origin: 100% 50%;
}

.visio-work-section::after,
.visio-info-section::after,
.visio-contact-section::after,
.visio-footer::after {
  width: clamp(170px, 26vw, 500px) !important;
  height: 2px !important;
  transform-origin: 100% 50%;
}

.visio-work-section::before,
.visio-contact-section::before,
.visio-footer::before,
.visio-work-section::after,
.visio-contact-section::after,
.visio-footer::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 10%, rgba(0, 0, 0, 0.48) 58%, rgba(0, 0, 0, 0.92) 88%, transparent 100%) !important;
  box-shadow:
    0 0 9px rgba(0, 0, 0, 0.2),
    0 0 22px rgba(0, 0, 0, 0.1);
}

.visio-info-section::before,
.visio-info-section::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.08) 10%, rgba(255, 0, 0, 0.5) 58%, rgba(255, 0, 0, 0.9) 88%, transparent 100%) !important;
  box-shadow:
    0 0 9px rgba(255, 0, 0, 0.16),
    0 0 22px rgba(255, 0, 0, 0.08);
}

.visio-work-section::before {
  left: -34vw;
  top: 10%;
  animation: visioMeteorVectorULDR 18s linear infinite !important;
}

.visio-work-section::after {
  left: -30vw;
  top: 86%;
  animation: visioMeteorVectorLLUR 25s linear infinite !important;
  animation-delay: -12s !important;
}

.visio-info-section::before {
  left: 118vw;
  top: 8%;
  animation: visioMeteorVectorURLL 21s linear infinite !important;
  animation-delay: -5s !important;
}

.visio-info-section::after {
  left: -30vw;
  top: 88%;
  animation: visioMeteorVectorLLURRed 29s linear infinite !important;
  animation-delay: -16s !important;
}

.visio-contact-section::before {
  left: 118vw;
  top: 12%;
  animation: visioMeteorVectorURLL 22s linear infinite !important;
  animation-delay: -8s !important;
}

.visio-contact-section::after {
  left: 116vw;
  top: 88%;
  animation: visioMeteorVectorLRUL 31s linear infinite !important;
  animation-delay: -19s !important;
}

.visio-footer::before {
  left: -30vw;
  top: 26%;
  animation: visioMeteorVectorULDR 30s linear infinite !important;
  animation-delay: -14s !important;
}

.visio-footer::after {
  left: 116vw;
  top: 80%;
  animation: visioMeteorVectorLRUL 36s linear infinite !important;
  animation-delay: -24s !important;
}

.visio-info-section .frameheader {
  color: #1a1a1a !important;
  font-family: VisioFontHeavy !important;
  text-transform: uppercase;
  letter-spacing: 0.09em !important;
  background: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 35%, #ff0000 55%, #ff4a4a 65%, #1a1a1a 85%, #1a1a1a 100%) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: logoWave 18s linear infinite !important;
  animation-delay: var(--logo-wave-delay, 0s);
  display: inline-block !important;
  transform: scaleY(1.1);
  transform-origin: bottom;
  will-change: background-position;
  text-shadow: none !important;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .visio-info-section .frameheader {
    background: none !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
  }
}

@keyframes visioMeteorVectorULDR {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(32deg) scaleX(0.08);
  }
  16% {
    opacity: 0.28;
    transform: translate3d(24vw, 15vw, 0) rotate(32deg) scaleX(0.48);
  }
  50% {
    opacity: 0.62;
    transform: translate3d(75vw, 47vw, 0) rotate(32deg) scaleX(1);
  }
  84% {
    opacity: 0.22;
    transform: translate3d(126vw, 79vw, 0) rotate(32deg) scaleX(0.52);
  }
  100% {
    opacity: 0;
    transform: translate3d(150vw, 94vw, 0) rotate(32deg) scaleX(0.06);
  }
}

@keyframes visioMeteorVectorLLUR {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-34deg) scaleX(0.08);
  }
  16% {
    opacity: 0.24;
    transform: translate3d(24vw, -16vw, 0) rotate(-34deg) scaleX(0.46);
  }
  50% {
    opacity: 0.56;
    transform: translate3d(75vw, -51vw, 0) rotate(-34deg) scaleX(1);
  }
  84% {
    opacity: 0.18;
    transform: translate3d(126vw, -86vw, 0) rotate(-34deg) scaleX(0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(150vw, -102vw, 0) rotate(-34deg) scaleX(0.06);
  }
}

@keyframes visioMeteorVectorURLL {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(148deg) scaleX(0.08);
  }
  16% {
    opacity: 0.26;
    transform: translate3d(-24vw, 15vw, 0) rotate(148deg) scaleX(0.48);
  }
  50% {
    opacity: 0.6;
    transform: translate3d(-75vw, 47vw, 0) rotate(148deg) scaleX(1);
  }
  84% {
    opacity: 0.2;
    transform: translate3d(-126vw, 79vw, 0) rotate(148deg) scaleX(0.52);
  }
  100% {
    opacity: 0;
    transform: translate3d(-150vw, 94vw, 0) rotate(148deg) scaleX(0.06);
  }
}

@keyframes visioMeteorVectorLRUL {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(214deg) scaleX(0.08);
  }
  16% {
    opacity: 0.22;
    transform: translate3d(-24vw, -16vw, 0) rotate(214deg) scaleX(0.46);
  }
  50% {
    opacity: 0.54;
    transform: translate3d(-75vw, -51vw, 0) rotate(214deg) scaleX(1);
  }
  84% {
    opacity: 0.18;
    transform: translate3d(-126vw, -86vw, 0) rotate(214deg) scaleX(0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(-150vw, -102vw, 0) rotate(214deg) scaleX(0.06);
  }
}

@keyframes visioMeteorVectorLLURRed {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-27deg) scaleX(0.08);
  }
  16% {
    opacity: 0.24;
    transform: translate3d(24vw, -12vw, 0) rotate(-27deg) scaleX(0.46);
  }
  50% {
    opacity: 0.58;
    transform: translate3d(75vw, -38vw, 0) rotate(-27deg) scaleX(1);
  }
  84% {
    opacity: 0.18;
    transform: translate3d(126vw, -64vw, 0) rotate(-27deg) scaleX(0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(150vw, -76vw, 0) rotate(-27deg) scaleX(0.06);
  }
}

@media (max-width: 767px) {
  .visio-work-section::before,
  .visio-info-section::before,
  .visio-contact-section::before,
  .visio-footer::before {
    width: clamp(150px, 48vw, 340px) !important;
  }

  .visio-work-section::after,
  .visio-info-section::after,
  .visio-contact-section::after,
  .visio-footer::after {
    width: clamp(130px, 40vw, 280px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-section::before,
  .visio-work-section::after,
  .visio-info-section::before,
  .visio-info-section::after,
  .visio-contact-section::before,
  .visio-contact-section::after,
  .visio-footer::before,
  .visio-footer::after,
  .visio-info-section .frameheader {
    animation: none !important;
  }
}

/* STEP VISIO 028 - meteor density and heading effect debug fix */
.visio-work-section .container,
.visio-info-section .visio-client-section,
.visio-contact-section .contact-split-inner,
.visio-footer .socialicons {
  position: relative;
  z-index: 1;
}

.visio-work-section .container::before,
.visio-work-section .container::after,
.visio-info-section .visio-client-section::before,
.visio-info-section .visio-client-section::after,
.visio-contact-section .contact-split-inner::before,
.visio-contact-section .contact-split-inner::after,
.visio-footer .socialicons::before,
.visio-footer .socialicons::after {
  content: "";
  position: absolute;
  width: clamp(160px, 24vw, 520px);
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform-origin: 100% 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}

.visio-work-section .container::before,
.visio-work-section .container::after,
.visio-contact-section .contact-split-inner::before,
.visio-contact-section .contact-split-inner::after,
.visio-footer .socialicons::before,
.visio-footer .socialicons::after {
  mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 8%, rgba(0, 0, 0, 0.58) 58%, rgba(0, 0, 0, 0.98) 88%, transparent 100%);
  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(0, 0, 0, 0.12);
}

.visio-info-section .visio-client-section::before,
.visio-info-section .visio-client-section::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.1) 8%, rgba(255, 0, 0, 0.56) 58%, rgba(255, 0, 0, 0.92) 88%, transparent 100%);
  box-shadow:
    0 0 10px rgba(255, 0, 0, 0.18),
    0 0 24px rgba(255, 0, 0, 0.08);
}

.visio-work-section::before,
.visio-contact-section::before,
.visio-footer::before,
.visio-work-section::after,
.visio-contact-section::after,
.visio-footer::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 8%, rgba(0, 0, 0, 0.62) 58%, rgba(0, 0, 0, 1) 88%, transparent 100%) !important;
  box-shadow:
    0 0 11px rgba(0, 0, 0, 0.28),
    0 0 26px rgba(0, 0, 0, 0.14) !important;
}

.visio-info-section::before,
.visio-info-section::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.1) 8%, rgba(255, 0, 0, 0.58) 58%, rgba(255, 0, 0, 0.94) 88%, transparent 100%) !important;
  box-shadow:
    0 0 11px rgba(255, 0, 0, 0.2),
    0 0 26px rgba(255, 0, 0, 0.09) !important;
}

.visio-work-section .container::before {
  left: 54%;
  top: 38%;
  animation: visioMeteorVectorURLL 28s linear infinite;
  animation-delay: -19s;
}

.visio-work-section .container::after {
  left: -18%;
  top: 64%;
  width: clamp(130px, 19vw, 380px);
  animation: visioMeteorVectorLLUR 32s linear infinite;
  animation-delay: -7s;
}

.visio-info-section .visio-client-section::before {
  left: 88%;
  top: 22%;
  animation: visioMeteorVectorURLL 27s linear infinite;
  animation-delay: -18s;
}

.visio-info-section .visio-client-section::after {
  left: -18%;
  top: 76%;
  width: clamp(130px, 19vw, 380px);
  animation: visioMeteorVectorLLURRed 34s linear infinite;
  animation-delay: -9s;
}

.visio-contact-section .contact-split-inner::before {
  left: -16%;
  top: 24%;
  animation: visioMeteorVectorULDR 26s linear infinite;
  animation-delay: -21s;
}

.visio-contact-section .contact-split-inner::after {
  left: 86%;
  top: 66%;
  width: clamp(130px, 19vw, 380px);
  animation: visioMeteorVectorLRUL 30s linear infinite;
  animation-delay: -11s;
}

.visio-footer .socialicons::before {
  left: -22%;
  top: 12%;
  width: clamp(120px, 18vw, 340px);
  animation: visioMeteorVectorULDR 30s linear infinite;
  animation-delay: -23s;
}

.visio-footer .socialicons::after {
  left: 82%;
  top: 72%;
  width: clamp(100px, 15vw, 260px);
  animation: visioMeteorVectorLRUL 35s linear infinite;
  animation-delay: -14s;
}

.visio-info-section .frameheader {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #1a1a1a !important;
  animation: none !important;
  display: block !important;
}

.visio-info-section .frameheader .visio-heading-wave {
  color: #1a1a1a !important;
  font-family: VisioFontHeavy !important;
  text-transform: uppercase;
  letter-spacing: 0.09em !important;
  display: inline-block !important;
  transform: scaleY(1.1);
  transform-origin: bottom;
  text-shadow: none !important;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .visio-info-section .frameheader .visio-heading-wave {
    background: none !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
  }
}

@media (max-width: 767px) {
  .visio-work-section .container::before,
  .visio-work-section .container::after,
  .visio-info-section .visio-client-section::before,
  .visio-info-section .visio-client-section::after,
  .visio-contact-section .contact-split-inner::before,
  .visio-contact-section .contact-split-inner::after,
  .visio-footer .socialicons::before,
  .visio-footer .socialicons::after {
    width: clamp(90px, 34vw, 240px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-section .container::before,
  .visio-work-section .container::after,
  .visio-info-section .visio-client-section::before,
  .visio-info-section .visio-client-section::after,
  .visio-contact-section .contact-split-inner::before,
  .visio-contact-section .contact-split-inner::after,
  .visio-footer .socialicons::before,
  .visio-footer .socialicons::after,
  .visio-info-section .frameheader .visio-heading-wave {
    animation: none !important;
  }
}

/* STEP VISIO 029 - bottom red meteor source of truth */
.visio-contact-section .contact-split-inner::before,
.visio-contact-section .contact-split-inner::after,
.visio-footer .socialicons::before,
.visio-footer .socialicons::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.visio-contact-section,
.visio-footer {
  position: relative !important;
  overflow: hidden !important;
}

.visio-contact-section .contact-split {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.visio-contact-section .contact-split > * {
  position: relative;
  z-index: 2;
}

.visio-contact-section::before,
.visio-contact-section::after,
.visio-contact-section .contact-split::before,
.visio-contact-section .contact-split::after,
.visio-footer::before,
.visio-footer::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  height: 2px !important;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform-origin: 100% 50%;
  mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.14) 7%, rgba(0, 0, 0, 0.7) 54%, rgba(0, 0, 0, 1) 86%, transparent 100%) !important;
  box-shadow:
    0 0 12px rgba(0, 0, 0, 0.32),
    0 0 30px rgba(0, 0, 0, 0.16) !important;
  will-change: transform, opacity;
}

.visio-contact-section::before,
.visio-contact-section::after,
.visio-contact-section .contact-split::before,
.visio-contact-section .contact-split::after {
  z-index: 1;
  width: clamp(340px, 58vw, 1180px) !important;
}

.visio-footer::before,
.visio-footer::after {
  z-index: 0 !important;
  width: clamp(260px, 48vw, 920px) !important;
}

.visio-contact-section::before {
  left: -48vw;
  top: 8%;
  animation: visioBottomMeteorULDR 24s linear infinite !important;
  animation-delay: -3s !important;
}

.visio-contact-section::after {
  left: 128vw;
  top: 28%;
  animation: visioBottomMeteorURLL 29s linear infinite !important;
  animation-delay: -16s !important;
}

.visio-contact-section .contact-split::before {
  left: -46vw;
  top: 74%;
  animation: visioBottomMeteorLLUR 27s linear infinite !important;
  animation-delay: -10s !important;
}

.visio-contact-section .contact-split::after {
  left: 128vw;
  top: 92%;
  width: clamp(300px, 50vw, 980px) !important;
  animation: visioBottomMeteorLRUL 34s linear infinite !important;
  animation-delay: -23s !important;
}

.visio-footer::before {
  left: -44vw;
  top: 18%;
  animation: visioBottomMeteorULDRFooter 27s linear infinite !important;
  animation-delay: -12s !important;
}

.visio-footer::after {
  left: 126vw;
  top: 76%;
  width: clamp(240px, 42vw, 780px) !important;
  animation: visioBottomMeteorLRULFooter 32s linear infinite !important;
  animation-delay: -21s !important;
}

@keyframes visioBottomMeteorULDR {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(31deg) scaleX(0.06);
  }
  18% {
    opacity: 0.32;
    transform: translate3d(31vw, 18vw, 0) rotate(31deg) scaleX(0.44);
  }
  54% {
    opacity: 0.72;
    transform: translate3d(92vw, 54vw, 0) rotate(31deg) scaleX(1);
  }
  84% {
    opacity: 0.26;
    transform: translate3d(143vw, 84vw, 0) rotate(31deg) scaleX(0.52);
  }
  100% {
    opacity: 0;
    transform: translate3d(170vw, 100vw, 0) rotate(31deg) scaleX(0.04);
  }
}

@keyframes visioBottomMeteorURLL {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(149deg) scaleX(0.06);
  }
  18% {
    opacity: 0.3;
    transform: translate3d(-31vw, 19vw, 0) rotate(149deg) scaleX(0.44);
  }
  54% {
    opacity: 0.68;
    transform: translate3d(-92vw, 57vw, 0) rotate(149deg) scaleX(1);
  }
  84% {
    opacity: 0.24;
    transform: translate3d(-143vw, 88vw, 0) rotate(149deg) scaleX(0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(-170vw, 105vw, 0) rotate(149deg) scaleX(0.04);
  }
}

@keyframes visioBottomMeteorLLUR {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-30deg) scaleX(0.06);
  }
  18% {
    opacity: 0.3;
    transform: translate3d(31vw, -18vw, 0) rotate(-30deg) scaleX(0.44);
  }
  54% {
    opacity: 0.68;
    transform: translate3d(92vw, -53vw, 0) rotate(-30deg) scaleX(1);
  }
  84% {
    opacity: 0.22;
    transform: translate3d(143vw, -83vw, 0) rotate(-30deg) scaleX(0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(170vw, -98vw, 0) rotate(-30deg) scaleX(0.04);
  }
}

@keyframes visioBottomMeteorLRUL {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(211deg) scaleX(0.06);
  }
  18% {
    opacity: 0.28;
    transform: translate3d(-31vw, -19vw, 0) rotate(211deg) scaleX(0.42);
  }
  54% {
    opacity: 0.64;
    transform: translate3d(-92vw, -57vw, 0) rotate(211deg) scaleX(1);
  }
  84% {
    opacity: 0.2;
    transform: translate3d(-143vw, -88vw, 0) rotate(211deg) scaleX(0.48);
  }
  100% {
    opacity: 0;
    transform: translate3d(-170vw, -105vw, 0) rotate(211deg) scaleX(0.04);
  }
}

@keyframes visioBottomMeteorULDRFooter {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(24deg) scaleX(0.06);
  }
  20% {
    opacity: 0.32;
    transform: translate3d(30vw, 13vw, 0) rotate(24deg) scaleX(0.44);
  }
  58% {
    opacity: 0.7;
    transform: translate3d(90vw, 40vw, 0) rotate(24deg) scaleX(1);
  }
  86% {
    opacity: 0.22;
    transform: translate3d(134vw, 60vw, 0) rotate(24deg) scaleX(0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(158vw, 70vw, 0) rotate(24deg) scaleX(0.04);
  }
}

@keyframes visioBottomMeteorLRULFooter {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(206deg) scaleX(0.06);
  }
  20% {
    opacity: 0.3;
    transform: translate3d(-30vw, -14vw, 0) rotate(206deg) scaleX(0.42);
  }
  58% {
    opacity: 0.66;
    transform: translate3d(-90vw, -42vw, 0) rotate(206deg) scaleX(1);
  }
  86% {
    opacity: 0.2;
    transform: translate3d(-134vw, -62vw, 0) rotate(206deg) scaleX(0.48);
  }
  100% {
    opacity: 0;
    transform: translate3d(-158vw, -74vw, 0) rotate(206deg) scaleX(0.04);
  }
}

@media (max-width: 767px) {
  .visio-contact-section::before,
  .visio-contact-section::after,
  .visio-contact-section .contact-split::before,
  .visio-contact-section .contact-split::after {
    width: clamp(190px, 72vw, 520px) !important;
  }

  .visio-footer::before,
  .visio-footer::after {
    width: clamp(160px, 58vw, 420px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-contact-section::before,
  .visio-contact-section::after,
  .visio-contact-section .contact-split::before,
  .visio-contact-section .contact-split::after,
  .visio-footer::before,
  .visio-footer::after {
    animation: none !important;
  }
}

/* STEP VISIO 030 - slower longer homepage meteor layers */
.visio-work-section,
.visio-info-section,
.visio-bottom-red-world {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
}

.visio-bottom-red-world {
  background: #e60000;
}

.visio-section-meteor-layer,
.visio-bottom-meteor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.visio-section-meteor-layer {
  z-index: 1;
}

.visio-bottom-meteor-layer {
  z-index: 8;
}

.visio-work-section > :not(.visio-section-meteor-layer),
.visio-info-section > :not(.visio-section-meteor-layer) {
  position: relative;
  z-index: 2;
}

.visio-bottom-red-world > :not(.visio-bottom-meteor-layer) {
  position: relative;
  z-index: 3;
}

.visio-bottom-red-world .visio-contact-section::before,
.visio-bottom-red-world .visio-contact-section::after,
.visio-bottom-red-world .visio-contact-section .contact-split::before,
.visio-bottom-red-world .visio-contact-section .contact-split::after,
.visio-bottom-red-world .visio-contact-section .contact-split-inner::before,
.visio-bottom-red-world .visio-contact-section .contact-split-inner::after,
.visio-bottom-red-world .visio-footer::before,
.visio-bottom-red-world .visio-footer::after,
.visio-bottom-red-world .visio-footer .socialicons::before,
.visio-bottom-red-world .visio-footer .socialicons::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.visio-section-meteor,
.visio-bottom-meteor {
  position: absolute;
  display: block;
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 100% 50%;
  will-change: transform, opacity;
  mix-blend-mode: multiply;
  background: var(--meteor-bg, linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.16) 8%, rgba(0, 0, 0, 0.68) 55%, rgba(0, 0, 0, 0.98) 86%, transparent 100%));
  box-shadow: var(--meteor-shadow, 0 0 12px rgba(0, 0, 0, 0.26), 0 0 34px rgba(0, 0, 0, 0.13));
  animation: visioMeteorLongTravel var(--dur, 42s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.visio-section-meteor-layer--work .visio-section-meteor,
.visio-bottom-meteor {
  --meteor-bg: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.14) 7%, rgba(0, 0, 0, 0.72) 54%, rgba(0, 0, 0, 1) 86%, transparent 100%);
  --meteor-shadow: 0 0 14px rgba(0, 0, 0, 0.34), 0 0 40px rgba(0, 0, 0, 0.16);
}

.visio-section-meteor-layer--info .visio-section-meteor {
  --meteor-bg: linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.08) 8%, rgba(255, 0, 0, 0.42) 54%, rgba(255, 0, 0, 0.82) 86%, transparent 100%);
  --meteor-shadow: 0 0 12px rgba(255, 0, 0, 0.16), 0 0 34px rgba(255, 0, 0, 0.08);
}

.visio-section-meteor--work-one {
  width: clamp(520px, 62vw, 1380px);
  left: -58vw;
  top: 17%;
  --r: 22deg;
  --x1: 34vw;
  --y1: 14vw;
  --x2: 104vw;
  --y2: 43vw;
  --x3: 154vw;
  --y3: 64vw;
  --x4: 186vw;
  --y4: 77vw;
  --dur: 36s;
  --delay: -9s;
}

.visio-section-meteor--work-two {
  width: clamp(430px, 54vw, 1160px);
  left: 128vw;
  top: 48%;
  --r: 151deg;
  --x1: -33vw;
  --y1: 18vw;
  --x2: -100vw;
  --y2: 56vw;
  --x3: -150vw;
  --y3: 84vw;
  --x4: -184vw;
  --y4: 103vw;
  --dur: 44s;
  --delay: -27s;
}

.visio-section-meteor--work-three {
  width: clamp(460px, 58vw, 1240px);
  left: -56vw;
  top: 83%;
  --r: -26deg;
  --x1: 34vw;
  --y1: -17vw;
  --x2: 104vw;
  --y2: -51vw;
  --x3: 156vw;
  --y3: -77vw;
  --x4: 190vw;
  --y4: -94vw;
  --dur: 48s;
  --delay: -18s;
}

.visio-section-meteor--info-one {
  width: clamp(460px, 56vw, 1240px);
  left: 128vw;
  top: 12%;
  --r: 142deg;
  --x1: -32vw;
  --y1: 24vw;
  --x2: -96vw;
  --y2: 72vw;
  --x3: -144vw;
  --y3: 108vw;
  --x4: -176vw;
  --y4: 132vw;
  --dur: 42s;
  --delay: -14s;
}

.visio-section-meteor--info-two {
  width: clamp(380px, 48vw, 1040px);
  left: -48vw;
  top: 47%;
  --r: 34deg;
  --x1: 28vw;
  --y1: 19vw;
  --x2: 86vw;
  --y2: 59vw;
  --x3: 130vw;
  --y3: 89vw;
  --x4: 158vw;
  --y4: 108vw;
  --dur: 39s;
  --delay: -31s;
}

.visio-section-meteor--info-three {
  width: clamp(500px, 64vw, 1320px);
  left: 132vw;
  top: 84%;
  --r: 207deg;
  --x1: -34vw;
  --y1: -18vw;
  --x2: -104vw;
  --y2: -56vw;
  --x3: -156vw;
  --y3: -84vw;
  --x4: -190vw;
  --y4: -102vw;
  --dur: 51s;
  --delay: -23s;
}

.visio-bottom-meteor--one {
  width: clamp(620px, 74vw, 1640px);
  left: -66vw;
  top: 5%;
  --r: 24deg;
  --x1: 36vw;
  --y1: 16vw;
  --x2: 112vw;
  --y2: 50vw;
  --x3: 168vw;
  --y3: 75vw;
  --x4: 204vw;
  --y4: 91vw;
  --dur: 42s;
  --delay: -7s;
}

.visio-bottom-meteor--two {
  width: clamp(560px, 68vw, 1500px);
  left: 134vw;
  top: 18%;
  --r: 149deg;
  --x1: -35vw;
  --y1: 21vw;
  --x2: -108vw;
  --y2: 65vw;
  --x3: -162vw;
  --y3: 97vw;
  --x4: -198vw;
  --y4: 119vw;
  --dur: 47s;
  --delay: -29s;
}

.visio-bottom-meteor--three {
  width: clamp(600px, 72vw, 1580px);
  left: -64vw;
  top: 43%;
  --r: -29deg;
  --x1: 36vw;
  --y1: -20vw;
  --x2: 112vw;
  --y2: -62vw;
  --x3: 168vw;
  --y3: -93vw;
  --x4: 204vw;
  --y4: -113vw;
  --dur: 45s;
  --delay: -18s;
}

.visio-bottom-meteor--four {
  width: clamp(520px, 64vw, 1420px);
  left: 132vw;
  top: 63%;
  --r: 211deg;
  --x1: -34vw;
  --y1: -21vw;
  --x2: -104vw;
  --y2: -65vw;
  --x3: -156vw;
  --y3: -98vw;
  --x4: -190vw;
  --y4: -119vw;
  --dur: 54s;
  --delay: -39s;
}

.visio-bottom-meteor--five {
  width: clamp(700px, 82vw, 1740px);
  left: -72vw;
  top: 79%;
  --r: 14deg;
  --x1: 39vw;
  --y1: 10vw;
  --x2: 120vw;
  --y2: 29vw;
  --x3: 180vw;
  --y3: 44vw;
  --x4: 218vw;
  --y4: 53vw;
  --dur: 50s;
  --delay: -25s;
}

.visio-bottom-meteor--six {
  width: clamp(560px, 66vw, 1440px);
  left: 132vw;
  top: 93%;
  --r: 196deg;
  --x1: -35vw;
  --y1: -10vw;
  --x2: -108vw;
  --y2: -31vw;
  --x3: -162vw;
  --y3: -46vw;
  --x4: -198vw;
  --y4: -57vw;
  --dur: 56s;
  --delay: -44s;
}

.visio-work-section::before,
.visio-info-section::before {
  width: clamp(420px, 58vw, 1260px) !important;
}

.visio-work-section::after,
.visio-info-section::after {
  width: clamp(360px, 52vw, 1080px) !important;
}

@keyframes visioMeteorLongTravel {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--r)) scaleX(0.06);
  }
  18% {
    opacity: 0.3;
    transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r)) scaleX(0.42);
  }
  54% {
    opacity: 0.62;
    transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r)) scaleX(1);
  }
  84% {
    opacity: 0.26;
    transform: translate3d(var(--x3), var(--y3), 0) rotate(var(--r)) scaleX(0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--x4), var(--y4), 0) rotate(var(--r)) scaleX(0.04);
  }
}

@media (max-width: 767px) {
  .visio-section-meteor,
  .visio-bottom-meteor {
    width: clamp(260px, 92vw, 720px) !important;
    height: 1.5px;
  }

  .visio-section-meteor--work-three,
  .visio-section-meteor--info-two,
  .visio-bottom-meteor--four {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-section-meteor-layer,
  .visio-bottom-meteor-layer {
    display: none !important;
  }

  .visio-section-meteor,
  .visio-bottom-meteor {
    animation: none !important;
  }
}

/* STEP VISIO 031 - meteor color variation and inner energy */
.visio-section-meteor-layer--work .visio-section-meteor,
.visio-bottom-meteor {
  --meteor-bg: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.13) 7%,
    rgba(0, 0, 0, 0.72) 46%,
    rgba(255, 0, 0, 0.34) 58%,
    rgba(0, 0, 0, 0.98) 82%,
    transparent 100%);
  --meteor-shadow:
    0 0 14px rgba(0, 0, 0, 0.34),
    0 0 38px rgba(0, 0, 0, 0.16),
    0 0 18px rgba(255, 0, 0, 0.11);
}

.visio-section-meteor-layer--work .visio-section-meteor--work-two,
.visio-bottom-meteor--two,
.visio-bottom-meteor--five {
  mix-blend-mode: screen;
  --meteor-bg: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 250, 244, 0.08) 8%,
    rgba(255, 250, 244, 0.42) 44%,
    rgba(255, 0, 0, 0.24) 58%,
    rgba(255, 255, 255, 0.76) 82%,
    transparent 100%);
  --meteor-shadow:
    0 0 10px rgba(255, 255, 255, 0.14),
    0 0 24px rgba(255, 0, 0, 0.12);
}

.visio-bottom-meteor--four {
  --meteor-bg: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 8%,
    rgba(0, 0, 0, 0.58) 38%,
    rgba(255, 0, 0, 0.42) 53%,
    rgba(0, 0, 0, 0.94) 78%,
    transparent 100%);
}

.visio-bottom-meteor--six,
.visio-section-meteor--work-three {
  --meteor-bg: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 8%,
    rgba(0, 0, 0, 0.64) 50%,
    rgba(255, 0, 0, 0.26) 64%,
    rgba(0, 0, 0, 0.9) 84%,
    transparent 100%);
  --meteor-shadow:
    0 0 11px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(0, 0, 0, 0.13),
    0 0 14px rgba(255, 0, 0, 0.09);
}

@media (max-width: 767px) {
  .visio-section-meteor-layer--work .visio-section-meteor--work-two,
  .visio-bottom-meteor--two,
  .visio-bottom-meteor--five {
    opacity: 0.86;
  }
}

/* STEP VISIO 032 - living editorial statement chapter */
.visio-statement-section {
  --statement-red: #ff0000;
  --statement-ink: #080808;
  --statement-sand: #f1ece8;
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(58px, 7vw, 112px) clamp(18px, 4vw, 64px);
  background: var(--statement-sand);
  color: var(--statement-ink);
  isolation: isolate;
}

.visio-statement-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 43%, rgba(255, 0, 0, 0.045) 49%, transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 28%, rgba(255, 0, 0, 0.025));
}

.visio-statement-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 1320px);
  min-height: clamp(570px, 61vw, 790px);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 76px) clamp(24px, 6vw, 94px) clamp(30px, 4vw, 58px);
  border-top: 1px solid rgba(255, 0, 0, 0.32);
  border-bottom: 1px solid rgba(8, 8, 8, 0.15);
  isolation: isolate;
}

.visio-statement-shell::before,
.visio-statement-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.visio-statement-shell::before {
  left: 0;
  top: -1px;
  width: clamp(44px, 8vw, 118px);
  height: 2px;
  background: var(--statement-red);
  transform-origin: left center;
}

.visio-statement-shell::after {
  right: 0;
  bottom: -1px;
  width: clamp(70px, 14vw, 210px);
  height: 1px;
  background: var(--statement-red);
  opacity: 0.58;
}

.visio-statement-eyebrow,
.visio-statement-copy,
.visio-statement-process {
  position: relative;
  z-index: 3;
}

.visio-statement-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  color: rgba(8, 8, 8, 0.6);
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(0.68rem, 0.24vw + 0.64rem, 0.86rem);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.visio-statement-eyebrow::before {
  content: "";
  width: 0.42rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--statement-red);
  box-shadow: 0 0 18px rgba(255, 0, 0, 0.26);
}

.visio-statement-copy {
  display: grid;
  align-items: center;
  min-height: clamp(390px, 42vw, 545px);
}

.visio-statement-panel {
  grid-area: 1 / 1;
  width: min(100%, 1080px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 1100ms;
}

.visio-statement-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 420ms, 420ms, 0s;
}

.visio-statement-panel h2 {
  margin: 0;
  color: var(--statement-ink);
  font-family: VisioFontHeavy, "Visio Roc Grotesk", Impact, sans-serif;
  font-size: clamp(3rem, 6.6vw, 7.35rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.047em;
  text-transform: uppercase;
}

.visio-statement-panel h2 > span {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}

.visio-statement-panel h2 > span:nth-child(2) {
  margin-left: clamp(18px, 8vw, 128px);
}

.visio-statement-panel h2 em {
  position: relative;
  display: inline-block;
  color: var(--statement-red);
  font-style: normal;
}

.visio-statement-panel h2 em::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: -0.02em;
  bottom: -0.08em;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.48) 18%, #ff0000 68%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
}

.visio-statement-panel.is-active h2 > span {
  animation: visioStatementLineReveal 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.visio-statement-panel.is-active h2 > span:nth-child(2) {
  animation-delay: 160ms;
}

.visio-statement-panel.is-active h2 em::after {
  animation: visioStatementAccentPass 1550ms 920ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.visio-statement-panel > p {
  max-width: 780px;
  margin: clamp(28px, 3.5vw, 48px) 0 0 clamp(18px, 8vw, 128px);
  color: rgba(8, 8, 8, 0.72);
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 0.55vw + 0.9rem, 1.38rem);
  line-height: 1.48;
  letter-spacing: -0.012em;
}

.visio-statement-process {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 1.4vw, 20px);
  margin: 0;
  color: rgba(8, 8, 8, 0.52);
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(0.7rem, 0.22vw + 0.66rem, 0.86rem);
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.visio-statement-process i {
  width: clamp(22px, 4vw, 58px);
  height: 1px;
  background: linear-gradient(90deg, rgba(8, 8, 8, 0.12), rgba(255, 0, 0, 0.76));
  transform-origin: left center;
}

.visio-statement-signals {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.visio-statement-line {
  position: absolute;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.54), rgba(8, 8, 8, 0.18), transparent);
  transform-origin: left center;
  transition: transform 1800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1300ms ease;
}

.visio-statement-line--top {
  top: 17%;
  right: -3%;
  width: 42%;
  opacity: 0.44;
  transform: rotate(-7deg) scaleX(0.62);
}

.visio-statement-line--side {
  left: 2%;
  bottom: 19%;
  width: 30%;
  opacity: 0.32;
  transform: rotate(72deg) scaleX(0.54);
}

.visio-statement-line--diagonal {
  left: 8%;
  top: 56%;
  width: 76%;
  opacity: 0.22;
  transform: rotate(-14deg) scaleX(0.7);
}

.visio-statement-line--trace {
  left: 14%;
  bottom: 14%;
  width: 48%;
  opacity: 0.34;
  transform: rotate(3deg) scaleX(0.46);
}

.visio-statement-section[data-statement-state="1"] .visio-statement-line--top {
  transform: rotate(12deg) scaleX(0.9);
}

.visio-statement-section[data-statement-state="1"] .visio-statement-line--side {
  transform: rotate(116deg) scaleX(0.72);
}

.visio-statement-section[data-statement-state="1"] .visio-statement-line--diagonal {
  opacity: 0.34;
  transform: rotate(19deg) scaleX(1);
}

.visio-statement-section[data-statement-state="1"] .visio-statement-line--trace {
  transform: rotate(-8deg) scaleX(0.82);
}

.visio-statement-point {
  position: absolute;
  display: block;
  width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--statement-red);
  box-shadow: 0 0 16px rgba(255, 0, 0, 0.34);
}

.visio-statement-point--origin {
  left: 8%;
  top: 55%;
  opacity: 0.72;
  animation: visioStatementOriginBreathe 4.8s ease-in-out infinite;
}

.visio-statement-point--traveller {
  left: 8%;
  top: 55%;
  z-index: 2;
  opacity: 0;
}

.visio-statement-section.is-shifting .visio-statement-point--traveller {
  animation: visioStatementTraveller 1500ms cubic-bezier(0.3, 0, 0.2, 1) both;
}

.visio-statement-section.is-shifting .visio-statement-line--diagonal {
  animation: visioStatementSignalTransfer 1500ms cubic-bezier(0.3, 0, 0.2, 1) both;
}

.visio-statement-section.has-statement-motion .visio-statement-shell {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1), transform 1500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visio-statement-section.has-statement-motion.is-in-view .visio-statement-shell {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@keyframes visioStatementLineReveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate3d(0, 0.22em, 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes visioStatementAccentPass {
  0% { opacity: 0; transform: scaleX(0); }
  32% { opacity: 0.82; transform: scaleX(1); }
  100% { opacity: 0.42; transform: scaleX(0.72); }
}

@keyframes visioStatementOriginBreathe {
  0%, 100% { opacity: 0.46; transform: scale(0.86); }
  50% { opacity: 0.88; transform: scale(1.12); }
}

@keyframes visioStatementTraveller {
  0% { left: 8%; top: 55%; opacity: 0; transform: scale(0.68); }
  16% { opacity: 0.96; }
  72% { opacity: 0.88; }
  100% { left: 84%; top: 36%; opacity: 0; transform: scale(1.08); }
}

@keyframes visioStatementSignalTransfer {
  0% { opacity: 0.18; transform: rotate(-14deg) scaleX(0.12); }
  42% { opacity: 0.64; transform: rotate(-14deg) scaleX(1); }
  100% { opacity: 0.22; transform: rotate(-14deg) scaleX(0.7); }
}

@media (max-width: 767px) {
  .visio-statement-section {
    padding: 42px 14px 54px;
  }

  .visio-statement-shell {
    min-height: 600px;
    padding: 30px 18px 28px;
  }

  .visio-statement-copy {
    min-height: 440px;
  }

  .visio-statement-panel h2 {
    font-size: clamp(2.65rem, 14.4vw, 4.6rem);
    line-height: 0.86;
  }

  .visio-statement-panel h2 > span:nth-child(2),
  .visio-statement-panel > p {
    margin-left: 0;
  }

  .visio-statement-panel > p {
    margin-top: 28px;
    font-size: clamp(0.94rem, 4.25vw, 1.12rem);
    line-height: 1.5;
  }

  .visio-statement-line--top {
    width: 58%;
  }

  .visio-statement-line--side {
    display: none;
  }

  .visio-statement-line--diagonal {
    left: -14%;
    width: 128%;
    opacity: 0.18;
  }

  .visio-statement-line--trace {
    left: 8%;
    width: 72%;
  }

  .visio-statement-process {
    gap: 7px;
    font-size: 0.62rem;
    letter-spacing: 0.09em;
  }

  .visio-statement-process i {
    width: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-statement-section.has-statement-motion .visio-statement-shell,
  .visio-statement-section.has-statement-motion.is-in-view .visio-statement-shell,
  .visio-statement-panel,
  .visio-statement-panel.is-active,
  .visio-statement-panel.is-active h2 > span,
  .visio-statement-panel.is-active h2 em::after,
  .visio-statement-point,
  .visio-statement-line {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .visio-statement-section.has-statement-motion .visio-statement-shell {
    opacity: 1;
  }

  .visio-statement-copy {
    gap: 64px;
    padding: 64px 0;
  }

  .visio-statement-panel,
  .visio-statement-panel.is-active {
    grid-area: auto;
    position: relative;
    opacity: 1;
    visibility: visible;
  }

  .visio-statement-panel h2 em::after {
    opacity: 0.42;
    transform: scaleX(0.72) !important;
  }

  .visio-statement-point--traveller {
    display: none;
  }
}

/* STEP VISIO 033 - statement pulse, process sequence and faster handoff */
.visio-statement-heartbeat {
  position: absolute;
  z-index: 2;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.visio-statement-heartbeat path {
  fill: none;
  stroke: rgba(255, 0, 0, 0.72);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.16));
}

.visio-statement-heartbeat--top {
  top: -14px;
  left: clamp(16%, 21vw, 31%);
  width: clamp(118px, 15vw, 228px);
  height: 28px;
  animation: visioStatementPulsePresence 31s linear infinite;
  animation-delay: -8s;
}

.visio-statement-heartbeat--top path {
  animation: visioStatementHeartbeatDraw 31s linear infinite;
  animation-delay: -8s;
}

.visio-statement-heartbeat--bottom {
  right: clamp(16%, 24vw, 34%);
  bottom: -14px;
  width: clamp(88px, 11vw, 172px);
  height: 28px;
  opacity: 0;
  transform: scaleX(-1);
  animation: visioStatementPulsePresence 43s linear infinite;
  animation-delay: -24s;
}

.visio-statement-heartbeat--bottom path {
  stroke: rgba(8, 8, 8, 0.58);
  animation: visioStatementHeartbeatDraw 43s linear infinite;
  animation-delay: -24s;
}

.visio-statement-heartbeat--trace {
  left: clamp(30%, 44vw, 56%);
  bottom: 11.5%;
  width: clamp(76px, 9vw, 144px);
  height: 22px;
  opacity: 0;
  transform: rotate(3deg);
  animation: visioStatementPulsePresence 37s linear infinite;
  animation-delay: -19s;
}

.visio-statement-heartbeat--trace path {
  stroke: rgba(255, 0, 0, 0.54);
  animation: visioStatementHeartbeatDraw 37s linear infinite;
  animation-delay: -19s;
}

.visio-statement-panel {
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 460ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 720ms;
}

.visio-statement-panel.is-active {
  transition-delay: 220ms, 220ms, 0s;
}

.visio-statement-panel.is-active h2 > span {
  animation-duration: 760ms;
}

.visio-statement-panel.is-active h2 > span:nth-child(2) {
  animation-delay: 100ms;
}

.visio-statement-panel.is-active h2 em::after {
  animation: visioStatementAccentPass 1080ms 610ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.visio-statement-motion-word {
  position: relative;
  display: inline-block;
  font-weight: inherit;
}

.visio-statement-motion-word::after {
  content: "";
  position: absolute;
  left: 0.03em;
  right: 0.02em;
  bottom: -0.08em;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(8, 8, 8, 0.24) 12%, rgba(255, 0, 0, 0.8) 64%, transparent);
  opacity: 0;
  transform: translate3d(-0.25em, 0, 0) scaleX(0.2);
  transform-origin: left center;
}

.visio-statement-panel[data-visio-statement-panel="0"].is-active .visio-statement-motion-word {
  animation: visioStatementWordAction 1680ms 1050ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.visio-statement-panel[data-visio-statement-panel="0"].is-active .visio-statement-motion-word::after {
  animation: visioStatementWordTrace 1160ms 1130ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.visio-statement-process {
  justify-content: space-between;
  width: min(100%, 1080px);
  gap: clamp(14px, 2.2vw, 34px);
}

.visio-statement-process-step {
  position: relative;
  opacity: 0.56;
  transition: opacity 360ms ease, color 360ms ease;
}

.visio-statement-process-step::before {
  content: "";
  position: absolute;
  left: -0.68rem;
  top: 50%;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--statement-red);
  opacity: 0;
  transform: translateY(-50%) scale(0.5);
}

.visio-statement-process-link {
  flex: 1 1 72px;
  max-width: 152px;
  height: 1px;
  background: linear-gradient(90deg, rgba(8, 8, 8, 0.16), rgba(255, 0, 0, 0.8), rgba(8, 8, 8, 0.12));
  opacity: 0.42;
  transform: scaleX(0.44);
  transform-origin: left center;
}

.visio-statement-process.is-running .visio-statement-process-step,
.visio-statement-process.is-running .visio-statement-process-link {
  animation-fill-mode: both;
}

.visio-statement-process.is-running .visio-statement-process-step--idea {
  animation: visioStatementProcessStep 560ms 0ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visio-statement-process.is-running .visio-statement-process-link--one {
  animation: visioStatementProcessLink 640ms 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visio-statement-process.is-running .visio-statement-process-step--image {
  animation: visioStatementProcessStep 560ms 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visio-statement-process.is-running .visio-statement-process-link--two {
  animation: visioStatementProcessLink 640ms 1140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visio-statement-process.is-running .visio-statement-process-step--motion {
  animation: visioStatementProcessStep 560ms 1520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visio-statement-process.is-running .visio-statement-process-link--three {
  animation: visioStatementProcessLink 640ms 1900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visio-statement-process.is-running .visio-statement-process-step--trace {
  animation: visioStatementProcessStep 560ms 2280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visio-statement-section.is-shifting .visio-statement-point--traveller,
.visio-statement-section.is-shifting .visio-statement-line--diagonal {
  animation-duration: 1040ms;
}

@keyframes visioStatementPulsePresence {
  0%, 8% { opacity: 0; }
  10%, 15% { opacity: 0.86; }
  18%, 100% { opacity: 0; }
}

@keyframes visioStatementHeartbeatDraw {
  0%, 8% { stroke-dashoffset: 1; }
  10%, 15% { stroke-dashoffset: 0; }
  18%, 100% { stroke-dashoffset: -1; }
}

@keyframes visioStatementWordAction {
  0%, 50%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  70% { transform: translate3d(0.045em, -0.025em, 0) scale(1.018); }
  84% { transform: translate3d(-0.018em, 0, 0) scale(1.004); }
}

@keyframes visioStatementWordTrace {
  0% { opacity: 0; transform: translate3d(-0.25em, 0, 0) scaleX(0.2); }
  38% { opacity: 0.78; transform: translate3d(0, 0, 0) scaleX(1); }
  100% { opacity: 0; transform: translate3d(0.42em, 0, 0) scaleX(0.48); }
}

@keyframes visioStatementProcessStep {
  0% { color: rgba(8, 8, 8, 0.36); opacity: 0.36; transform: translate3d(0, 0.25rem, 0); }
  58% { color: var(--statement-ink); opacity: 1; transform: translate3d(0, 0, 0); }
  100% { color: rgba(8, 8, 8, 0.72); opacity: 0.72; transform: translate3d(0, 0, 0); }
}

@keyframes visioStatementProcessLink {
  0% { opacity: 0.18; transform: scaleX(0.05); }
  60% { opacity: 0.92; transform: scaleX(1); }
  100% { opacity: 0.5; transform: scaleX(1); }
}

@media (max-width: 767px) {
  .visio-statement-heartbeat--top {
    left: 42%;
    width: 104px;
  }

  .visio-statement-heartbeat--bottom {
    right: 18%;
    width: 76px;
  }

  .visio-statement-heartbeat--trace {
    display: none;
  }

  .visio-statement-process {
    gap: 7px;
    width: 100%;
  }

  .visio-statement-process-link {
    flex-basis: 12px;
    max-width: 22px;
  }

  .visio-statement-process-step::before {
    left: -0.38rem;
    width: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-statement-heartbeat,
  .visio-statement-heartbeat path,
  .visio-statement-motion-word,
  .visio-statement-motion-word::after,
  .visio-statement-process-step,
  .visio-statement-process-link {
    animation: none !important;
    transition: none !important;
  }

  .visio-statement-heartbeat {
    display: none;
  }
}

/* STEP VISIO 034 - border pulse and sequential statement story */
.visio-statement-section {
  padding-top: clamp(38px, 4vw, 64px);
  padding-bottom: clamp(42px, 4.6vw, 72px);
}

.visio-statement-shell {
  box-sizing: border-box;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: clamp(470px, 40vw, 580px);
  padding: clamp(30px, 3.6vw, 54px) clamp(24px, 6vw, 94px) clamp(26px, 3vw, 42px);
}

.visio-statement-copy {
  align-items: start;
  min-height: 0;
  padding-top: clamp(18px, 2.1vw, 32px);
}

.visio-statement-shell::before {
  top: -1px;
  left: 0;
  width: 18px;
  height: 1px;
  opacity: 0.56;
  animation: visioStatementTopMarker 31s linear infinite;
}

.visio-statement-shell::after {
  right: 0;
  bottom: -1px;
  width: 18px;
  height: 1px;
  opacity: 0.48;
  animation: visioStatementBottomMarker 43s linear infinite;
}

.visio-statement-border-pulse {
  position: absolute;
  z-index: 4;
  display: block;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
}

.visio-statement-border-pulse path {
  fill: none;
  stroke: rgba(255, 0, 0, 0.82);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.18));
}

.visio-statement-border-pulse--top {
  top: -12px;
  left: clamp(18%, 27vw, 42%);
  width: clamp(120px, 17vw, 250px);
  height: 24px;
  animation: visioStatementBorderPulseTop 37s linear infinite;
  animation-delay: -11s;
}

.visio-statement-border-pulse--top path {
  animation: visioStatementBorderPulseDraw 37s linear infinite;
  animation-delay: -11s;
}

.visio-statement-border-pulse--bottom {
  right: clamp(16%, 24vw, 35%);
  bottom: -12px;
  width: clamp(94px, 12vw, 178px);
  height: 24px;
  transform: scaleX(-1);
  animation: visioStatementBorderPulseBottom 49s linear infinite;
  animation-delay: -31s;
}

.visio-statement-border-pulse--bottom path {
  stroke: rgba(8, 8, 8, 0.58);
  animation: visioStatementBorderPulseDraw 49s linear infinite;
  animation-delay: -31s;
}

.visio-statement-panel.is-active h2 {
  animation: visioStatementHeadlineDrift 8.8s 1.15s cubic-bezier(0.34, 0, 0.2, 1) infinite;
}

.visio-statement-panel[data-visio-statement-panel="0"].is-active .visio-statement-motion-word {
  animation-duration: 2080ms;
  animation-delay: 820ms;
}

.visio-statement-panel[data-visio-statement-panel="0"].is-active .visio-statement-motion-word::after {
  animation-duration: 1360ms;
  animation-delay: 900ms;
}

.visio-statement-process {
  width: min(100%, 1060px);
  margin-inline: auto;
  gap: clamp(16px, 2.4vw, 38px);
}

.visio-statement-process-step {
  flex: 0 0 auto;
  color: rgba(8, 8, 8, 0.56);
  font-size: clamp(0.8rem, 0.28vw + 0.74rem, 1rem);
  letter-spacing: 0.14em;
  white-space: nowrap;
  opacity: 0.56;
}

.visio-statement-process-step--idea {
  color: var(--statement-ink);
  font-family: VisioFontHeavy, "Visio Roc Grotesk", Impact, sans-serif;
  font-size: clamp(1.25rem, 0.9vw + 1.05rem, 1.82rem);
  letter-spacing: -0.025em;
}

.visio-statement-process-step::before {
  left: -0.68rem;
  width: 4px;
}

.visio-statement-process-step--idea::after {
  content: "";
  position: absolute;
  top: 52%;
  left: -10%;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--statement-red) 24%, rgba(255, 0, 0, 0.86) 72%, transparent);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
}

.visio-statement-process-link {
  flex: 1 1 84px;
  max-width: 172px;
  height: 1px;
  background: linear-gradient(90deg, rgba(8, 8, 8, 0.1), rgba(255, 0, 0, 0.7), rgba(8, 8, 8, 0.1));
  opacity: 0.25;
  transform: scaleX(1);
}

.visio-statement-section.has-statement-motion .visio-statement-process:not(.is-running) .visio-statement-process-step,
.visio-statement-section.has-statement-motion .visio-statement-process:not(.is-running) .visio-statement-process-link {
  opacity: 0;
}

.visio-statement-process.is-running .visio-statement-process-step,
.visio-statement-process.is-running .visio-statement-process-link {
  animation-duration: 20s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
}

.visio-statement-process.is-running .visio-statement-process-step--idea {
  animation-name: visioStatementIdeaCycle !important;
  animation-delay: 0s !important;
}

.visio-statement-process.is-running .visio-statement-process-link--one {
  animation-name: visioStatementLinkOneCycle !important;
  animation-delay: 0s !important;
}

.visio-statement-process.is-running .visio-statement-process-step--image {
  animation-name: visioStatementImageCycle !important;
  animation-delay: 0s !important;
}

.visio-statement-process.is-running .visio-statement-process-link--two {
  animation-name: visioStatementLinkTwoCycle !important;
  animation-delay: 0s !important;
}

.visio-statement-process.is-running .visio-statement-process-step--motion {
  animation-name: visioStatementMotionCycle !important;
  animation-delay: 0s !important;
}

.visio-statement-process.is-running .visio-statement-process-link--three {
  animation-name: visioStatementLinkThreeCycle !important;
  animation-delay: 0s !important;
}

.visio-statement-process.is-running .visio-statement-process-step--trace {
  animation-name: visioStatementTraceCycle !important;
  animation-delay: 0s !important;
}

.visio-statement-process.is-running .visio-statement-process-step--idea::after {
  animation: visioStatementIdeaSignal 20s linear infinite;
}

@keyframes visioStatementTopMarker {
  0%, 8% { left: 0; width: 18px; height: 1px; opacity: 0.42; }
  14% { left: 8%; width: clamp(60px, 8vw, 118px); height: 2px; opacity: 0.95; }
  55% { left: 64%; width: clamp(60px, 8vw, 118px); height: 2px; opacity: 0.9; }
  70% { left: 78%; width: 18px; height: 1px; opacity: 0.44; }
  78%, 100% { left: 82%; width: 0; height: 1px; opacity: 0; }
}

@keyframes visioStatementBottomMarker {
  0%, 11% { right: 0; width: 16px; height: 1px; opacity: 0.42; }
  17% { right: 8%; width: clamp(54px, 7vw, 106px); height: 2px; opacity: 0.84; }
  57% { right: 65%; width: clamp(54px, 7vw, 106px); height: 2px; opacity: 0.8; }
  72% { right: 77%; width: 16px; height: 1px; opacity: 0.38; }
  80%, 100% { right: 82%; width: 0; height: 1px; opacity: 0; }
}

@keyframes visioStatementBorderPulseTop {
  0%, 9% { opacity: 0; left: 26%; }
  11%, 16% { opacity: 0.84; left: 34%; }
  19%, 100% { opacity: 0; left: 39%; }
}

@keyframes visioStatementBorderPulseBottom {
  0%, 8% { opacity: 0; right: 28%; }
  10%, 14% { opacity: 0.7; right: 35%; }
  17%, 100% { opacity: 0; right: 40%; }
}

@keyframes visioStatementBorderPulseDraw {
  0%, 9% { stroke-dashoffset: 1; }
  11%, 16% { stroke-dashoffset: 0; }
  19%, 100% { stroke-dashoffset: -1; }
}

@keyframes visioStatementHeadlineDrift {
  0%, 100% { transform: translate3d(0, 0, 0); letter-spacing: -0.047em; }
  44% { transform: translate3d(0.026em, 0, 0); letter-spacing: -0.038em; }
  72% { transform: translate3d(-0.018em, 0, 0); letter-spacing: -0.052em; }
}

@keyframes visioStatementIdeaCycle {
  0%, 6% { color: rgba(8, 8, 8, 0.34); opacity: 0; transform: translate3d(-0.2em, 0, 0); }
  10%, 21% { color: var(--statement-ink); opacity: 1; transform: translate3d(0, 0, 0); }
  27%, 86% { color: rgba(8, 8, 8, 0.52); opacity: 0.5; transform: translate3d(0, 0, 0); }
  92%, 100% { opacity: 0; transform: translate3d(-0.1em, 0, 0); }
}

@keyframes visioStatementImageCycle {
  0%, 19% { color: rgba(8, 8, 8, 0.34); opacity: 0; transform: translate3d(-0.2em, 0, 0); }
  24%, 39% { color: var(--statement-ink); opacity: 1; transform: translate3d(0, 0, 0); }
  45%, 86% { color: rgba(8, 8, 8, 0.52); opacity: 0.5; transform: translate3d(0, 0, 0); }
  92%, 100% { opacity: 0; }
}

@keyframes visioStatementMotionCycle {
  0%, 38% { color: rgba(8, 8, 8, 0.34); opacity: 0; transform: translate3d(-0.2em, 0, 0); }
  43%, 57% { color: var(--statement-ink); opacity: 1; transform: translate3d(0, 0, 0); }
  63%, 86% { color: rgba(8, 8, 8, 0.52); opacity: 0.5; transform: translate3d(0, 0, 0); }
  92%, 100% { opacity: 0; }
}

@keyframes visioStatementTraceCycle {
  0%, 56% { color: rgba(8, 8, 8, 0.34); opacity: 0; transform: translate3d(-0.2em, 0, 0); }
  61%, 86% { color: var(--statement-ink); opacity: 1; transform: translate3d(0, 0, 0); }
  92%, 100% { opacity: 0; transform: translate3d(0.1em, 0, 0); }
}

@keyframes visioStatementLinkOneCycle {
  0%, 10% { opacity: 0; transform: scaleX(0.04); }
  16% { opacity: 0.92; transform: scaleX(1); }
  21%, 86% { opacity: 0.25; transform: scaleX(1); }
  92%, 100% { opacity: 0; transform: scaleX(0.86); }
}

@keyframes visioStatementLinkTwoCycle {
  0%, 29% { opacity: 0; transform: scaleX(0.04); }
  35% { opacity: 0.92; transform: scaleX(1); }
  40%, 86% { opacity: 0.25; transform: scaleX(1); }
  92%, 100% { opacity: 0; transform: scaleX(0.86); }
}

@keyframes visioStatementLinkThreeCycle {
  0%, 47% { opacity: 0; transform: scaleX(0.04); }
  53% { opacity: 0.92; transform: scaleX(1); }
  58%, 86% { opacity: 0.25; transform: scaleX(1); }
  92%, 100% { opacity: 0; transform: scaleX(0.86); }
}

@keyframes visioStatementIdeaSignal {
  0%, 7% { opacity: 0; width: 0; }
  12% { opacity: 0.95; width: 114%; }
  17% { opacity: 0; width: 124%; }
  100% { opacity: 0; width: 0; }
}

@media (max-width: 767px) {
  .visio-statement-section {
    padding: 30px 14px 38px;
  }

  .visio-statement-shell {
    min-height: 560px;
    padding: 28px 18px 24px;
  }

  .visio-statement-copy {
    padding-top: 40px;
  }

  .visio-statement-border-pulse--top {
    left: 38%;
    width: 104px;
  }

  .visio-statement-border-pulse--bottom {
    right: 24%;
    width: 82px;
  }

  .visio-statement-process {
    gap: 7px;
  }

  .visio-statement-process-step {
    font-size: 0.58rem;
    letter-spacing: 0.07em;
  }

  .visio-statement-process-step--idea {
    font-size: 1.05rem;
  }

  .visio-statement-process-step::before {
    display: none;
  }

  .visio-statement-process-link {
    flex-basis: 10px;
    max-width: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-statement-border-pulse,
  .visio-statement-border-pulse path,
  .visio-statement-shell::before,
  .visio-statement-shell::after,
  .visio-statement-panel.is-active h2,
  .visio-statement-process.is-running .visio-statement-process-step,
  .visio-statement-process.is-running .visio-statement-process-link,
  .visio-statement-process.is-running .visio-statement-process-step--idea::after {
    animation: none !important;
    transition: none !important;
  }

  .visio-statement-border-pulse {
    display: none;
  }
}

/* STEP VISIO 035 - clean statement field and exact process sequence */
.visio-statement-shell {
  border-bottom: 0;
}

.visio-statement-shell::after,
.visio-statement-border-pulse--bottom {
  display: none;
}

.visio-statement-border-pulse--top {
  top: -18px;
  left: 61%;
  width: clamp(118px, 16vw, 236px);
  height: 36px;
  animation: visioStatementBorderPulseTop035 41s linear infinite;
  animation-delay: -17s;
}

.visio-statement-border-pulse--top path {
  stroke: rgba(255, 0, 0, 0.8);
  stroke-width: 1;
  filter: none;
  animation: visioStatementBorderPulseDraw035 41s linear infinite;
  animation-delay: -17s;
}

.visio-statement-shell::before {
  animation: visioStatementTopMarker035 33s linear infinite;
}

.visio-statement-process {
  width: min(100%, 1080px);
  gap: clamp(18px, 2.6vw, 42px);
}

.visio-statement-process-step,
.visio-statement-process-step--idea {
  color: var(--statement-ink);
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(1.2rem, 0.7vw + 1.04rem, 1.72rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  opacity: 0;
}

.visio-statement-process-step::before {
  display: none;
}

.visio-statement-process-link {
  position: relative;
  flex: 1 1 94px;
  max-width: 184px;
  overflow: visible;
  background: linear-gradient(90deg, rgba(8, 8, 8, 0.09), rgba(255, 0, 0, 0.72) 72%, rgba(8, 8, 8, 0.09));
  opacity: 0;
  transform: scaleX(0.04);
}

.visio-statement-process-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--statement-red);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.7);
}

.visio-statement-process.is-running .visio-statement-process-step,
.visio-statement-process.is-running .visio-statement-process-link {
  animation-duration: 25s !important;
  animation-delay: 0s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

.visio-statement-process.is-running .visio-statement-process-step--idea {
  animation-name: visioStatementIdeaCycle035 !important;
}

.visio-statement-process.is-running .visio-statement-process-step--image {
  animation-name: visioStatementImageCycle035 !important;
}

.visio-statement-process.is-running .visio-statement-process-step--motion {
  animation-name: visioStatementMotionCycle035 !important;
}

.visio-statement-process.is-running .visio-statement-process-step--trace {
  animation-name: visioStatementTraceCycle035 !important;
}

.visio-statement-process.is-running .visio-statement-process-link--one {
  animation-name: visioStatementLinkOneCycle035 !important;
}

.visio-statement-process.is-running .visio-statement-process-link--two {
  animation-name: visioStatementLinkTwoCycle035 !important;
}

.visio-statement-process.is-running .visio-statement-process-link--three {
  animation-name: visioStatementLinkThreeCycle035 !important;
}

.visio-statement-process.is-running .visio-statement-process-link--one::after {
  animation: visioStatementLinkHeadOne035 25s linear infinite;
}

.visio-statement-process.is-running .visio-statement-process-link--two::after {
  animation: visioStatementLinkHeadTwo035 25s linear infinite;
}

.visio-statement-process.is-running .visio-statement-process-link--three::after {
  animation: visioStatementLinkHeadThree035 25s linear infinite;
}

.visio-statement-process.is-running .visio-statement-process-step--idea::after {
  animation: visioStatementIdeaSignal035 25s linear infinite;
}

@keyframes visioStatementTopMarker035 {
  0%, 10% { left: 0; width: 14px; height: 1px; opacity: 0.48; }
  16% { left: 8%; width: clamp(54px, 7vw, 106px); height: 2px; opacity: 0.92; }
  58% { left: 68%; width: clamp(54px, 7vw, 106px); height: 2px; opacity: 0.88; }
  72% { left: 79%; width: 14px; height: 1px; opacity: 0.42; }
  80%, 100% { left: 82%; width: 0; height: 1px; opacity: 0; }
}

@keyframes visioStatementBorderPulseTop035 {
  0%, 47% { left: 61%; opacity: 0; }
  49%, 55% { left: 66%; opacity: 0.9; }
  58%, 100% { left: 70%; opacity: 0; }
}

@keyframes visioStatementBorderPulseDraw035 {
  0%, 47% { stroke-dashoffset: 1; }
  49%, 55% { stroke-dashoffset: 0; }
  58%, 100% { stroke-dashoffset: -1; }
}

@keyframes visioStatementIdeaCycle035 {
  0%, 4% { opacity: 0; transform: translate3d(-0.16em, 0, 0); }
  9%, 19% { opacity: 1; transform: translate3d(0, 0, 0); }
  20%, 24% { opacity: 0.75; }
  25%, 34% { opacity: 0.5; }
  35%, 59% { opacity: 0.25; }
  64%, 84% { opacity: 1; }
  87%, 100% { opacity: 0; transform: translate3d(-0.1em, 0, 0); }
}

@keyframes visioStatementImageCycle035 {
  0%, 19% { opacity: 0; transform: translate3d(-0.16em, 0, 0); }
  20%, 24% { opacity: 1; transform: translate3d(0, 0, 0); }
  25%, 34% { opacity: 0.75; }
  35%, 59% { opacity: 0.5; }
  64%, 87% { opacity: 1; }
  90%, 100% { opacity: 0; transform: translate3d(-0.1em, 0, 0); }
}

@keyframes visioStatementMotionCycle035 {
  0%, 29% { opacity: 0; transform: translate3d(-0.16em, 0, 0); }
  30%, 34% { opacity: 1; transform: translate3d(0, 0, 0); }
  35%, 59% { opacity: 0.75; }
  64%, 90% { opacity: 1; }
  93%, 100% { opacity: 0; transform: translate3d(-0.1em, 0, 0); }
}

@keyframes visioStatementTraceCycle035 {
  0%, 39% { opacity: 0; transform: translate3d(-0.16em, 0, 0); }
  40%, 90% { opacity: 1; transform: translate3d(0, 0, 0); }
  93%, 100% { opacity: 0; transform: translate3d(0.1em, 0, 0); }
}

@keyframes visioStatementLinkOneCycle035 {
  0%, 14% { opacity: 0; transform: scaleX(0.04); }
  19% { opacity: 1; transform: scaleX(1); }
  20%, 84% { opacity: 0.25; transform: scaleX(1); }
  88%, 100% { opacity: 0; transform: scaleX(0.82); }
}

@keyframes visioStatementLinkTwoCycle035 {
  0%, 24% { opacity: 0; transform: scaleX(0.04); }
  29% { opacity: 1; transform: scaleX(1); }
  30%, 87% { opacity: 0.25; transform: scaleX(1); }
  91%, 100% { opacity: 0; transform: scaleX(0.82); }
}

@keyframes visioStatementLinkThreeCycle035 {
  0%, 34% { opacity: 0; transform: scaleX(0.04); }
  39% { opacity: 1; transform: scaleX(1); }
  40%, 90% { opacity: 0.25; transform: scaleX(1); }
  94%, 100% { opacity: 0; transform: scaleX(0.82); }
}

@keyframes visioStatementLinkHeadOne035 {
  0%, 14% { left: 0; opacity: 0; }
  15% { left: 0; opacity: 1; }
  19% { left: 100%; opacity: 1; }
  20%, 100% { left: 100%; opacity: 0; }
}

@keyframes visioStatementLinkHeadTwo035 {
  0%, 24% { left: 0; opacity: 0; }
  25% { left: 0; opacity: 1; }
  29% { left: 100%; opacity: 1; }
  30%, 100% { left: 100%; opacity: 0; }
}

@keyframes visioStatementLinkHeadThree035 {
  0%, 34% { left: 0; opacity: 0; }
  35% { left: 0; opacity: 1; }
  39% { left: 100%; opacity: 1; }
  40%, 100% { left: 100%; opacity: 0; }
}

@keyframes visioStatementIdeaSignal035 {
  0%, 8% { width: 0; opacity: 0; }
  12% { width: 116%; opacity: 0.94; }
  15%, 100% { width: 124%; opacity: 0; }
}

@media (max-width: 767px) {
  .visio-statement-border-pulse--top {
    left: 48%;
    width: 98px;
  }

  .visio-statement-process {
    gap: 6px;
  }

  .visio-statement-process-step,
  .visio-statement-process-step--idea {
    font-size: clamp(0.92rem, 4.2vw, 1.08rem);
    letter-spacing: -0.035em;
  }

  .visio-statement-process-link {
    flex-basis: 8px;
    max-width: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-statement-shell::before,
  .visio-statement-border-pulse--top,
  .visio-statement-border-pulse--top path,
  .visio-statement-process.is-running .visio-statement-process-step,
  .visio-statement-process.is-running .visio-statement-process-link,
  .visio-statement-process.is-running .visio-statement-process-link::after,
  .visio-statement-process.is-running .visio-statement-process-step--idea::after {
    animation: none !important;
  }
}

/* STEP VISIO 036 - red process language without border pulse */
.visio-statement-process-step,
.visio-statement-process-step--idea {
  color: var(--statement-red);
}

.visio-statement-process-link {
  background: linear-gradient(90deg, rgba(8, 8, 8, 0.1), rgba(8, 8, 8, 0.72) 72%, rgba(8, 8, 8, 0.1)) !important;
}

.visio-statement-process-link::after {
  background: var(--statement-ink) !important;
  box-shadow: 0 0 8px rgba(8, 8, 8, 0.2) !important;
}

/* STEP VISIO 038 - alternating work signal chapters */
.visio-work-section {
  padding: clamp(82px, 9vw, 148px) 0 clamp(92px, 10vw, 164px);
}

.visio-work-cases {
  position: relative;
  z-index: 2;
  width: min(100% - clamp(32px, 7vw, 112px), 1440px);
  margin: 0 auto;
}

.visio-work-case {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(72px, 0.22fr) minmax(280px, 0.86fr);
  grid-template-areas: "media signal copy";
  align-items: center;
  min-height: clamp(500px, 50vw, 720px);
  margin: 0;
  isolation: isolate;
}

.visio-work-case + .visio-work-case {
  margin-top: clamp(36px, 5vw, 82px);
}

.visio-work-case--right {
  grid-template-columns: minmax(280px, 0.86fr) minmax(72px, 0.22fr) minmax(0, 1.34fr);
  grid-template-areas: "copy signal media";
}

.visio-work-case-media {
  grid-area: media;
  min-width: 0;
  opacity: 0;
  will-change: opacity, transform;
}

.visio-work-case--left .visio-work-case-media {
  transform: translate3d(-15vw, 34px, 0) rotate(-1.4deg);
}

.visio-work-case--right .visio-work-case-media {
  transform: translate3d(15vw, 34px, 0) rotate(1.4deg);
}

.visio-work-case.is-visible .visio-work-case-media {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transition:
    opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visio-work-case-visual {
  position: relative;
  width: 100%;
  transform: translate3d(0, 0, 0);
}

.visio-work-case.is-visible .visio-work-case-visual {
  animation: visioWorkCaseFloat038 14s 1.35s ease-in-out infinite alternate;
}

.visio-work-case:nth-of-type(2n).is-visible .visio-work-case-visual {
  animation-duration: 17s;
  animation-delay: 1.05s;
}

.visio-work-case:nth-of-type(3n).is-visible .visio-work-case-visual {
  animation-duration: 19s;
  animation-delay: 1.65s;
}

.visio-work-case .videocontainer,
.visio-work-case .carousel {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #080808;
  box-shadow: 0 34px 84px rgba(0, 0, 0, 0.27);
}

.visio-work-case .videocontainer {
  aspect-ratio: 16 / 9;
}

.visio-work-case .cover,
.visio-work-case .overlay,
.visio-work-case .cover img,
.visio-work-case .overlay img {
  width: 100%;
  height: 100%;
}

.visio-work-case .cover img,
.visio-work-case .overlay img {
  display: block;
  object-fit: cover;
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 800ms ease;
}

.visio-work-case .videocontainer:hover .cover img,
.visio-work-case .videocontainer:hover .overlay img {
  transform: scale(1.025);
}

.visio-work-case .overlay {
  cursor: pointer;
}

.visio-work-case .embedvideo,
.visio-work-case .embedvideo > div {
  width: 100%;
  height: 100%;
}

.visio-work-case .embedvideo > div {
  padding-bottom: 56.25%;
}

.visio-work-case .carousel .item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  padding: 0;
  object-fit: cover;
}

.visio-work-case-signal {
  grid-area: signal;
  position: relative;
  z-index: 3;
  display: block;
  width: calc(100% + 2px);
  height: 1px;
  background: rgba(8, 8, 8, 0.78);
  opacity: 0;
  transform: scaleX(0.02);
  transform-origin: left center;
  will-change: transform, opacity;
}

.visio-work-case--right .visio-work-case-signal {
  transform-origin: right center;
}

.visio-work-case-signal::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #080808;
  box-shadow: 0 0 12px rgba(8, 8, 8, 0.35);
  opacity: 0;
  transform: translate3d(0, -50%, 0);
}

.visio-work-case--right .visio-work-case-signal::after {
  right: auto;
  left: -2px;
}

.visio-work-case.is-visible .visio-work-case-signal {
  opacity: 1;
  transform: scaleX(1);
  transition:
    transform 620ms cubic-bezier(0.62, 0, 0.18, 1) 900ms,
    opacity 180ms ease 900ms;
}

.visio-work-case.is-visible .visio-work-case-signal::after {
  opacity: 0.88;
  transition: opacity 260ms ease 1370ms;
}

.visio-work-case-copy {
  grid-area: copy;
  position: relative;
  z-index: 2;
  display: flex;
  min-height: clamp(230px, 22vw, 330px);
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4.2vw, 62px);
  color: #080808;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  clip-path: inset(0 100% 0 0);
  background: rgba(241, 236, 232, 0.055);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.visio-work-case--right .visio-work-case-copy {
  clip-path: inset(0 0 0 100%);
}

.visio-work-case-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(8, 8, 8, 0.74);
}

.visio-work-case.is-visible .visio-work-case-copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 820ms cubic-bezier(0.16, 1, 0.3, 1) 1370ms,
    opacity 520ms ease 1430ms,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1) 1370ms;
}

.visio-work-case-copy > * {
  position: relative;
  z-index: 1;
}

.visio-work-case-kicker {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(0.68rem, 0.32vw + 0.6rem, 0.84rem);
  font-weight: 400;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(8, 8, 8, 0.62);
}

.visio-work-case-copy h2 {
  margin: 0;
  font-family: VisioFontHeavy, "Visio Roc Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 3.5vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-transform: uppercase;
  color: #080808;
}

.visio-work-case-copy > p:last-child {
  max-width: 34rem;
  margin: clamp(22px, 2.7vw, 36px) 0 0;
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(0.96rem, 0.42vw + 0.84rem, 1.2rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.48;
  color: rgba(8, 8, 8, 0.82);
}

.visio-work-cases > .frontpage-banner {
  width: min(100%, 1260px);
  margin: clamp(82px, 10vw, 152px) auto clamp(96px, 11vw, 172px) !important;
}

.visio-work-cases > .frontpage-banner .frontpage-banner-stack {
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
}

#portfolio-carousels {
  display: grid;
  gap: clamp(76px, 9vw, 140px);
}

#portfolio-carousels .visio-work-case {
  width: 100%;
  max-width: none;
  padding: 0;
}

@keyframes visioWorkCaseFloat038 {
  0% {
    transform: translate3d(0, 0, 0) rotate(-0.08deg);
  }
  46% {
    transform: translate3d(3px, -8px, 0) rotate(0.12deg);
  }
  100% {
    transform: translate3d(-4px, 5px, 0) rotate(-0.06deg);
  }
}

@media (max-width: 900px) {
  .visio-work-cases {
    width: min(100% - 30px, 720px);
  }

  .visio-work-case,
  .visio-work-case--right {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "signal"
      "copy";
    min-height: 0;
  }

  .visio-work-case + .visio-work-case,
  #portfolio-carousels {
    margin-top: 0;
  }

  .visio-work-case + .visio-work-case,
  #portfolio-carousels .visio-work-case + .visio-work-case {
    margin-top: clamp(88px, 18vw, 132px);
  }

  .visio-work-case-signal,
  .visio-work-case--right .visio-work-case-signal {
    justify-self: center;
    width: 1px;
    height: clamp(52px, 13vw, 76px);
    transform: scaleY(0.02);
    transform-origin: center top;
  }

  .visio-work-case--right .visio-work-case-signal {
    transform-origin: center top;
  }

  .visio-work-case-signal::after,
  .visio-work-case--right .visio-work-case-signal::after {
    top: auto;
    right: auto;
    bottom: -2px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }

  .visio-work-case.is-visible .visio-work-case-signal {
    transform: scaleY(1);
  }

  .visio-work-case-copy,
  .visio-work-case--right .visio-work-case-copy {
    min-height: 0;
    padding: clamp(30px, 8vw, 52px);
    clip-path: inset(100% 0 0 0);
  }

  .visio-work-case.is-visible .visio-work-case-copy {
    clip-path: inset(0 0 0 0);
  }

  .visio-work-case-copy h2 {
    font-size: clamp(2.25rem, 11vw, 4.5rem);
  }

  .visio-work-cases > .frontpage-banner {
    margin: clamp(92px, 19vw, 140px) auto !important;
  }
}

/* STEP VISIO 060 - remove the redundant statement top rule */
.visio-statement-shell {
  border-top: 0 !important;
}

.visio-statement-shell::before,
.visio-statement-border-pulse--top {
  content: none !important;
  display: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-case-media,
  .visio-work-case.is-visible .visio-work-case-media,
  .visio-work-case-copy,
  .visio-work-case.is-visible .visio-work-case-copy,
  .visio-work-case-signal,
  .visio-work-case.is-visible .visio-work-case-signal {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .visio-work-case.is-visible .visio-work-case-visual {
    animation: none;
  }
}

/* STEP VISIO 039 - breathing work pairs with tracked signal anchors */
.visio-work-section {
  padding-bottom: clamp(54px, 5.5vw, 86px);
}

.visio-work-case {
  position: relative;
  min-height: clamp(430px, 41vw, 590px);
}

.visio-work-case + .visio-work-case {
  margin-top: clamp(4px, 1.4vw, 22px);
}

.visio-work-case.is-visible .visio-work-case-visual {
  animation: visioWorkMediaBreathe039 17s 1.5s ease-in-out infinite alternate;
}

.visio-work-case--right.is-visible .visio-work-case-visual {
  animation-name: visioWorkMediaBreatheRight039;
  animation-duration: 19s;
  animation-delay: 1.2s;
}

.visio-work-case-copy {
  background: #f1ece8;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  will-change: transform;
}

.visio-work-case.is-visible .visio-work-case-copy {
  animation: visioWorkCopyBreathe039 20s 2.35s ease-in-out infinite alternate;
}

.visio-work-case--right.is-visible .visio-work-case-copy {
  animation-name: visioWorkCopyBreatheRight039;
  animation-duration: 18s;
  animation-delay: 2.6s;
}

.visio-work-case-signal,
.visio-work-case--right .visio-work-case-signal {
  --signal-x: 0px;
  --signal-y: 0px;
  --signal-length: 80px;
  --signal-angle: 0deg;
  grid-area: unset;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: var(--signal-length);
  height: 1px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translate3d(var(--signal-x), var(--signal-y), 0) rotate(var(--signal-angle));
  transform-origin: left center;
  background: rgba(8, 8, 8, 0.86);
  will-change: width, transform, clip-path, opacity;
}

.visio-work-case-signal::before,
.visio-work-case-signal::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #080808;
  box-shadow: 0 0 10px rgba(8, 8, 8, 0.26);
  opacity: 0;
  transform: translate3d(0, -50%, 0);
}

.visio-work-case-signal::before {
  left: -2px;
}

.visio-work-case-signal::after,
.visio-work-case--right .visio-work-case-signal::after {
  right: -2px;
  left: auto;
}

.visio-work-case.is-visible .visio-work-case-signal {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translate3d(var(--signal-x), var(--signal-y), 0) rotate(var(--signal-angle));
  transition: clip-path 660ms cubic-bezier(0.62, 0, 0.18, 1) 900ms,
              opacity 180ms ease 900ms;
}

.visio-work-case.is-visible .visio-work-case-signal::before,
.visio-work-case.is-visible .visio-work-case-signal::after {
  opacity: 0.9;
  transition: opacity 260ms ease 1380ms;
}

.visio-work-cases > .frontpage-banner {
  margin-top: clamp(58px, 6.5vw, 96px) !important;
  margin-bottom: clamp(66px, 7vw, 108px) !important;
}

#portfolio-carousels {
  gap: clamp(20px, 2.8vw, 42px);
}

@keyframes visioWorkMediaBreathe039 {
  0% {
    transform: translate3d(-3px, 2px, 0) rotate(-0.1deg);
  }
  34% {
    transform: translate3d(5px, -8px, 0) rotate(0.08deg);
  }
  69% {
    transform: translate3d(-5px, -2px, 0) rotate(-0.05deg);
  }
  100% {
    transform: translate3d(6px, 6px, 0) rotate(0.09deg);
  }
}

@keyframes visioWorkMediaBreatheRight039 {
  0% {
    transform: translate3d(4px, -2px, 0) rotate(0.08deg);
  }
  38% {
    transform: translate3d(-6px, 7px, 0) rotate(-0.09deg);
  }
  73% {
    transform: translate3d(5px, 3px, 0) rotate(0.04deg);
  }
  100% {
    transform: translate3d(-4px, -7px, 0) rotate(-0.08deg);
  }
}

@keyframes visioWorkCopyBreathe039 {
  0% {
    transform: translate3d(3px, -3px, 0);
  }
  31% {
    transform: translate3d(-5px, 6px, 0);
  }
  68% {
    transform: translate3d(6px, 2px, 0);
  }
  100% {
    transform: translate3d(-3px, -7px, 0);
  }
}

@keyframes visioWorkCopyBreatheRight039 {
  0% {
    transform: translate3d(-4px, 3px, 0);
  }
  36% {
    transform: translate3d(5px, -6px, 0);
  }
  71% {
    transform: translate3d(-6px, -1px, 0);
  }
  100% {
    transform: translate3d(4px, 7px, 0);
  }
}

@media (max-width: 900px) {
  .visio-work-case,
  .visio-work-case--right {
    grid-template-areas:
      "media"
      "copy";
    row-gap: clamp(46px, 13vw, 68px);
  }

  .visio-work-case + .visio-work-case,
  #portfolio-carousels .visio-work-case + .visio-work-case {
    margin-top: clamp(48px, 12vw, 72px);
  }

  .visio-work-case-signal,
  .visio-work-case--right .visio-work-case-signal,
  .visio-work-case.is-visible .visio-work-case-signal {
    justify-self: auto;
    width: var(--signal-length);
    height: 1px;
    transform: translate3d(var(--signal-x), var(--signal-y), 0) rotate(var(--signal-angle));
    transform-origin: left center;
  }

  .visio-work-case-signal::before,
  .visio-work-case-signal::after,
  .visio-work-case--right .visio-work-case-signal::after {
    top: 50%;
    bottom: auto;
    transform: translate3d(0, -50%, 0);
  }

  .visio-work-cases > .frontpage-banner {
    margin-top: clamp(66px, 15vw, 96px) !important;
    margin-bottom: clamp(72px, 16vw, 104px) !important;
  }

  #portfolio-carousels {
    gap: 0;
  }
}

/* STEP VISIO 061 - translucent work-case copy surfaces */
.visio-work-case-copy,
.visio-work-case--right .visio-work-case-copy,
.visio-work-case.is-visible .visio-work-case-copy {
  background: rgba(255, 255, 255, 0.75) !important;
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-case.is-visible .visio-work-case-visual,
  .visio-work-case.is-visible .visio-work-case-copy {
    animation: none !important;
  }

  .visio-work-case-signal,
  .visio-work-case.is-visible .visio-work-case-signal {
    clip-path: none;
    transform: translate3d(var(--signal-x), var(--signal-y), 0) rotate(var(--signal-angle)) !important;
    transition: none;
  }
}

/* STEP VISIO 040 - remove ambient travelling signal lines */
.visio-section-meteor-layer,
.visio-bottom-meteor-layer,
.visio-section-meteor,
.visio-bottom-meteor {
  display: none !important;
  animation: none !important;
}

.visio-work-section::before,
.visio-work-section::after,
.visio-work-section .container::before,
.visio-work-section .container::after,
.visio-info-section::before,
.visio-info-section::after,
.visio-info-section .visio-info-inner::before,
.visio-info-section .visio-info-inner::after,
.visio-info-section .visio-client-section::before,
.visio-info-section .visio-client-section::after,
.visio-contact-section::before,
.visio-contact-section::after,
.visio-contact-section .contact-split::before,
.visio-contact-section .contact-split::after,
.visio-contact-section .contact-split-inner::before,
.visio-contact-section .contact-split-inner::after,
.visio-footer::before,
.visio-footer::after,
.visio-footer .socialicons::before,
.visio-footer .socialicons::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* STEP VISIO 041 - cinematic atmosphere, staged work reveals and compact header */
body.visio-index-page .visio-work-section,
body.visio-index-page .visio-info-section,
body.visio-index-page .visio-bottom-red-world {
  --visio-exposure: rgba(255, 247, 238, 0.13);
  position: relative;
  isolation: isolate;
}

body.visio-index-page .visio-info-section {
  --visio-exposure: rgba(255, 0, 0, 0.075);
}

body.visio-index-page .visio-work-section::before,
body.visio-index-page .visio-info-section::before,
body.visio-index-page .visio-bottom-red-world::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.14;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.42) 0 0.5px, transparent 0.75px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}

body.visio-index-page .visio-work-section::after,
body.visio-index-page .visio-info-section::after,
body.visio-index-page .visio-bottom-red-world::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.58;
  background: linear-gradient(
    112deg,
    transparent 18%,
    transparent 33%,
    var(--visio-exposure) 46%,
    rgba(255, 255, 255, 0.025) 52%,
    transparent 66%,
    transparent 100%
  );
  background-position: 130% 50%;
  background-size: 250% 100%;
  mix-blend-mode: soft-light;
  animation: visioCinematicExposure041 28s cubic-bezier(0.45, 0, 0.22, 1) infinite alternate;
}

body.visio-index-page .visio-work-section > *,
body.visio-index-page .visio-info-section > *,
body.visio-index-page .visio-bottom-red-world > * {
  position: relative;
  z-index: 2;
}

@keyframes visioCinematicExposure041 {
  0%, 14% {
    background-position: 135% 50%;
    opacity: 0.32;
  }
  48% {
    opacity: 0.62;
  }
  86%, 100% {
    background-position: -42% 50%;
    opacity: 0.4;
  }
}

.visio-work-case,
.visio-work-case--right {
  grid-template-columns: minmax(0, 1.5fr) minmax(90px, 0.22fr) minmax(230px, 0.68fr);
}

.visio-work-case--right {
  grid-template-columns: minmax(230px, 0.68fr) minmax(90px, 0.22fr) minmax(0, 1.5fr);
}

.visio-work-case-media {
  position: relative;
  z-index: 3;
  filter: blur(8px);
}

.visio-work-case--left .visio-work-case-media {
  transform: translate3d(-27vw, 58px, 0) scale(0.92) rotate(-1.2deg);
}

.visio-work-case--right .visio-work-case-media {
  transform: translate3d(27vw, 58px, 0) scale(0.92) rotate(1.2deg);
}

.visio-work-case.is-visible .visio-work-case-media {
  animation: visioWorkMediaArrivalLeft041 5.4s cubic-bezier(0.37, 0, 0.2, 1) both;
  transition: none;
}

.visio-work-case--right.is-visible .visio-work-case-media {
  animation-name: visioWorkMediaArrivalRight041;
}

.visio-work-case-copy-stage {
  grid-area: copy;
  position: relative;
  z-index: 2;
  min-width: 0;
  opacity: 0;
  will-change: opacity, transform, filter;
}

.visio-work-case--left .visio-work-case-copy-stage {
  transform: translate3d(calc(-100% - clamp(90px, 9vw, 158px)), 22px, 0) scale(0.84);
}

.visio-work-case--right .visio-work-case-copy-stage {
  transform: translate3d(calc(100% + clamp(90px, 9vw, 158px)), 22px, 0) scale(0.84);
}

.visio-work-case--left.is-visible .visio-work-case-copy-stage {
  animation: visioWorkCopyArrivalLeft041 7.4s cubic-bezier(0.4, 0, 0.16, 1) both;
  animation-delay: 1.15s;
}

.visio-work-case--right.is-visible .visio-work-case-copy-stage {
  animation: visioWorkCopyArrivalRight041 7.4s cubic-bezier(0.4, 0, 0.16, 1) both;
  animation-delay: 1.15s;
}

.visio-work-case-copy,
.visio-work-case.is-visible .visio-work-case-copy,
.visio-work-case--right .visio-work-case-copy {
  grid-area: unset;
  min-height: clamp(188px, 18vw, 268px);
  padding: clamp(24px, 3vw, 42px);
  opacity: 1;
  clip-path: none;
  transform: translate3d(0, 0, 0);
  transition: none;
}

.visio-work-case.is-visible .visio-work-case-copy {
  animation: visioWorkCopyBreathe039 22s 8.7s ease-in-out infinite alternate;
}

.visio-work-case--right.is-visible .visio-work-case-copy {
  animation-name: visioWorkCopyBreatheRight039;
  animation-duration: 20s;
  animation-delay: 8.7s;
}

.visio-work-case.is-visible .visio-work-case-visual {
  animation: visioWorkMediaBreathe039 20s 5.55s ease-in-out infinite alternate;
}

.visio-work-case--right.is-visible .visio-work-case-visual {
  animation-name: visioWorkMediaBreatheRight039;
  animation-duration: 22s;
  animation-delay: 5.55s;
}

.visio-work-case.is-visible .visio-work-case-signal {
  transition: clip-path 1100ms cubic-bezier(0.62, 0, 0.18, 1) 5.35s,
              opacity 320ms ease 5.35s;
}

.visio-work-case.is-visible .visio-work-case-signal::before,
.visio-work-case.is-visible .visio-work-case-signal::after {
  transition: opacity 420ms ease 6.08s;
}

.visio-work-case-kicker {
  margin-bottom: clamp(11px, 1.2vw, 17px);
  font-size: clamp(0.6rem, 0.22vw + 0.56rem, 0.72rem);
  letter-spacing: 0.11em;
}

.visio-work-case-copy h2 {
  font-size: clamp(1.72rem, 2.75vw, 3.35rem);
  letter-spacing: -0.038em;
  line-height: 0.92;
}

.visio-work-case-copy > p:last-child {
  max-width: 28rem;
  margin-top: clamp(16px, 1.9vw, 26px);
  font-size: clamp(0.82rem, 0.28vw + 0.76rem, 1rem);
  line-height: 1.44;
}

@keyframes visioWorkMediaArrivalLeft041 {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(-27vw, 58px, 0) scale(0.92) rotate(-1.2deg);
  }
  24% {
    opacity: 0.2;
    filter: blur(7px);
    transform: translate3d(-18vw, 42px, 0) scale(0.945) rotate(-0.78deg);
  }
  64% {
    opacity: 1;
    filter: blur(1px);
    transform: translate3d(18px, -6px, 0) scale(1.008) rotate(0.08deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
  }
}

@keyframes visioWorkMediaArrivalRight041 {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(27vw, 58px, 0) scale(0.92) rotate(1.2deg);
  }
  24% {
    opacity: 0.2;
    filter: blur(7px);
    transform: translate3d(18vw, 42px, 0) scale(0.945) rotate(0.78deg);
  }
  64% {
    opacity: 1;
    filter: blur(1px);
    transform: translate3d(-18px, -6px, 0) scale(1.008) rotate(-0.08deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
  }
}

@keyframes visioWorkCopyArrivalLeft041 {
  0%, 8% {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(calc(-100% - clamp(90px, 9vw, 158px)), 22px, 0) scale(0.84);
  }
  31% {
    opacity: 0.88;
    filter: blur(1.5px);
    transform: translate3d(calc(-72% - clamp(58px, 6vw, 104px)), -8px, 0) scale(0.93);
  }
  58% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(clamp(92px, 9vw, 154px), -12px, 0) scaleX(1.1) scaleY(0.98);
  }
  78% {
    transform: translate3d(clamp(38px, 4vw, 68px), 4px, 0) scaleX(1.035);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-12px, 0, 0) scale(1);
  }
}

@keyframes visioWorkCopyArrivalRight041 {
  0%, 8% {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(calc(100% + clamp(90px, 9vw, 158px)), 22px, 0) scale(0.84);
  }
  31% {
    opacity: 0.88;
    filter: blur(1.5px);
    transform: translate3d(calc(72% + clamp(58px, 6vw, 104px)), -8px, 0) scale(0.93);
  }
  58% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(clamp(-154px, -9vw, -92px), -12px, 0) scaleX(1.1) scaleY(0.98);
  }
  78% {
    transform: translate3d(clamp(-68px, -4vw, -38px), 4px, 0) scaleX(1.035);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(12px, 0, 0) scale(1);
  }
}

.visio-index-page > .visio-site-nav {
  --visio-white: #ffffff;
  --visio-red: #ff0000;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: clamp(68px, 6vw, 86px);
  margin: 0;
  padding: 0 clamp(18px, 4.8vw, 72px);
  color: #ffffff;
  background: transparent;
  transition: height 520ms cubic-bezier(0.16, 1, 0.3, 1),
              padding 520ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 420ms ease,
              box-shadow 420ms ease;
}

.visio-index-page > .visio-site-nav .visio-hero-brand,
.visio-index-page > .visio-site-nav .visio-hero-links,
.visio-index-page > .visio-site-nav .visio-hero-links a {
  color: #ffffff;
  transition: font-size 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease;
}

.visio-index-page.has-compact-header > .visio-site-nav {
  position: fixed;
  height: 48px;
  padding: 0 clamp(16px, 3vw, 42px);
  background: rgba(5, 5, 5, 0.94);
  border-bottom: 1px solid rgba(255, 0, 0, 0.42);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: visioCompactHeaderSettle041 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.visio-index-page.has-compact-header > .visio-site-nav .visio-hero-brand {
  font-size: clamp(1rem, 0.38vw + 0.92rem, 1.22rem);
  line-height: 1;
}

.visio-index-page.has-compact-header > .visio-site-nav .visio-hero-links {
  gap: clamp(12px, 1.8vw, 26px);
  font-size: clamp(0.68rem, 0.16vw + 0.65rem, 0.8rem);
}

@keyframes visioCompactHeaderSettle041 {
  from { transform: translate3d(0, -12px, 0); opacity: 0.72; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@media (max-width: 900px) {
  .visio-work-case,
  .visio-work-case--right {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "copy";
  }

  .visio-work-case-copy-stage {
    transform: translate3d(0, calc(-100% - 48px), 0) scale(0.86);
  }

  .visio-work-case--left.is-visible .visio-work-case-copy-stage,
  .visio-work-case--right.is-visible .visio-work-case-copy-stage {
    animation-name: visioWorkCopyArrivalMobile041;
    animation-duration: 6.8s;
  }

  .visio-work-case-copy,
  .visio-work-case.is-visible .visio-work-case-copy,
  .visio-work-case--right .visio-work-case-copy {
    min-height: 0;
    padding: clamp(24px, 7vw, 38px);
  }

  .visio-work-case-copy h2 {
    font-size: clamp(1.9rem, 9.2vw, 3.25rem);
  }

  .visio-index-page > .visio-site-nav {
    height: 62px;
    padding: 0 16px;
  }

  .visio-index-page.has-compact-header > .visio-site-nav {
    height: 46px;
    padding: 0 13px;
  }

  .visio-index-page.has-compact-header > .visio-site-nav .visio-hero-links {
    gap: 10px;
    font-size: 0.64rem;
  }

  .visio-index-page.has-compact-header > .visio-site-nav .visio-hero-brand {
    font-size: 0.98rem;
  }
}

@keyframes visioWorkCopyArrivalMobile041 {
  0%, 8% {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(0, calc(-100% - 48px), 0) scale(0.86);
  }
  34% {
    opacity: 0.88;
    filter: blur(1.5px);
    transform: translate3d(0, calc(-62% - 28px), 0) scale(0.94);
  }
  60% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 54px, 0) scaleY(1.06);
  }
  80% {
    transform: translate3d(0, 24px, 0) scaleY(1.02);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -7px, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.visio-index-page .visio-work-section::after,
  body.visio-index-page .visio-info-section::after,
  body.visio-index-page .visio-bottom-red-world::after,
  .visio-work-case.is-visible .visio-work-case-media,
  .visio-work-case.is-visible .visio-work-case-copy-stage,
  .visio-work-case.is-visible .visio-work-case-copy,
  .visio-work-case.is-visible .visio-work-case-visual,
  .visio-index-page.has-compact-header > .visio-site-nav {
    animation: none !important;
  }

  .visio-work-case-copy-stage,
  .visio-work-case-media {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* STEP VISIO 042 - fixed reveal trigger, spring connection and unified media scale */
.visio-work-cases {
  width: min(100% - clamp(32px, 7vw, 96px), 1200px);
}

.visio-work-case,
.visio-work-case--right {
  grid-template-columns: minmax(0, 1.42fr) minmax(82px, 0.2fr) minmax(220px, 0.66fr);
  min-height: clamp(390px, 36vw, 520px);
}

.visio-work-case--right {
  grid-template-columns: minmax(220px, 0.66fr) minmax(82px, 0.2fr) minmax(0, 1.42fr);
}

.visio-work-case-media {
  width: min(100%, 640px);
  justify-self: start;
}

.visio-work-case--right .visio-work-case-media {
  justify-self: end;
}

.visio-work-case .videocontainer,
.visio-work-case .carousel {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.visio-work-case .carousel .slick-list,
.visio-work-case .carousel .slick-track,
.visio-work-case .carousel .slick-slide,
.visio-work-case .carousel .slick-slide > div,
.visio-work-case .carousel .item {
  height: 100%;
}

.visio-work-case .carousel .item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.visio-work-case-copy-stage {
  width: min(100%, 300px);
  justify-self: start;
}

.visio-work-case--right .visio-work-case-copy-stage {
  justify-self: end;
}

.visio-work-case.is-visible .visio-work-case-media {
  animation: visioWorkMediaArrivalLeft042 5.6s cubic-bezier(0.38, 0, 0.18, 1) both;
}

.visio-work-case--right.is-visible .visio-work-case-media {
  animation-name: visioWorkMediaArrivalRight042;
}

.visio-work-case--left.is-visible .visio-work-case-copy-stage {
  animation: visioWorkCopySpringLeft042 8.4s 0.75s linear both;
}

.visio-work-case--right.is-visible .visio-work-case-copy-stage {
  animation: visioWorkCopySpringRight042 8.4s 0.75s linear both;
}

.visio-work-case.is-visible .visio-work-case-signal {
  transition: clip-path 900ms cubic-bezier(0.56, 0, 0.18, 1) 1.05s,
              opacity 320ms ease 1.05s;
}

.visio-work-case.is-visible .visio-work-case-signal::before,
.visio-work-case.is-visible .visio-work-case-signal::after {
  transition: opacity 360ms ease 1.55s;
}

.visio-work-case.is-visible .visio-work-case-visual {
  animation: visioWorkMediaBreathe042 18s 5.8s ease-in-out infinite alternate;
}

.visio-work-case--right.is-visible .visio-work-case-visual {
  animation-name: visioWorkMediaBreatheRight042;
  animation-duration: 21s;
  animation-delay: 5.8s;
}

.visio-work-case.is-visible .visio-work-case-copy {
  animation: visioWorkCopyBreathe042 19s 9.25s ease-in-out infinite alternate;
}

.visio-work-case--right.is-visible .visio-work-case-copy {
  animation-name: visioWorkCopyBreatheRight042;
  animation-duration: 22s;
  animation-delay: 9.25s;
}

@keyframes visioWorkMediaArrivalLeft042 {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(-30vw, 52px, 0) scale(0.92) rotate(-1deg);
  }
  28% {
    opacity: 0.24;
    filter: blur(6px);
    transform: translate3d(-19vw, 34px, 0) scale(0.95) rotate(-0.65deg);
  }
  72% {
    opacity: 1;
    filter: blur(0.5px);
    transform: translate3d(14px, -5px, 0) scale(1.006) rotate(0.06deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
  }
}

@keyframes visioWorkMediaArrivalRight042 {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(30vw, 52px, 0) scale(0.92) rotate(1deg);
  }
  28% {
    opacity: 0.24;
    filter: blur(6px);
    transform: translate3d(19vw, 34px, 0) scale(0.95) rotate(0.65deg);
  }
  72% {
    opacity: 1;
    filter: blur(0.5px);
    transform: translate3d(-14px, -5px, 0) scale(1.006) rotate(-0.06deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
  }
}

@keyframes visioWorkCopySpringLeft042 {
  0%, 9% {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(calc(-100% - clamp(82px, 8vw, 138px)), 18px, 0) scale(0.84);
  }
  28% {
    opacity: 0.9;
    filter: blur(1px);
    transform: translate3d(calc(-62% - clamp(44px, 4.5vw, 78px)), -5px, 0) scale(0.94);
    animation-timing-function: cubic-bezier(0.32, 0, 0.16, 1);
  }
  55% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(clamp(92px, 9vw, 148px), -11px, 0) scaleX(1.08) scaleY(0.985);
    animation-timing-function: cubic-bezier(0.22, 0.78, 0.18, 1);
  }
  73% {
    transform: translate3d(-28px, 4px, 0) scale(1);
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  84% {
    transform: translate3d(18px, -2px, 0) scale(1.012);
    animation-timing-function: ease-in-out;
  }
  93% {
    transform: translate3d(-8px, 1px, 0) scale(0.998);
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-18px, 0, 0) scale(1);
  }
}

@keyframes visioWorkCopySpringRight042 {
  0%, 9% {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(calc(100% + clamp(82px, 8vw, 138px)), 18px, 0) scale(0.84);
  }
  28% {
    opacity: 0.9;
    filter: blur(1px);
    transform: translate3d(calc(62% + clamp(44px, 4.5vw, 78px)), -5px, 0) scale(0.94);
    animation-timing-function: cubic-bezier(0.32, 0, 0.16, 1);
  }
  55% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(clamp(-148px, -9vw, -92px), -11px, 0) scaleX(1.08) scaleY(0.985);
    animation-timing-function: cubic-bezier(0.22, 0.78, 0.18, 1);
  }
  73% {
    transform: translate3d(28px, 4px, 0) scale(1);
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  84% {
    transform: translate3d(-18px, -2px, 0) scale(1.012);
    animation-timing-function: ease-in-out;
  }
  93% {
    transform: translate3d(8px, 1px, 0) scale(0.998);
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(18px, 0, 0) scale(1);
  }
}

@keyframes visioWorkMediaBreathe042 {
  0% { transform: translate3d(-10px, 8px, 0) rotate(-0.12deg); }
  33% { transform: translate3d(14px, -16px, 0) rotate(0.16deg); }
  68% { transform: translate3d(-16px, -5px, 0) rotate(-0.18deg); }
  100% { transform: translate3d(12px, 14px, 0) rotate(0.12deg); }
}

@keyframes visioWorkMediaBreatheRight042 {
  0% { transform: translate3d(11px, -8px, 0) rotate(0.12deg); }
  34% { transform: translate3d(-15px, 15px, 0) rotate(-0.16deg); }
  69% { transform: translate3d(16px, 4px, 0) rotate(0.18deg); }
  100% { transform: translate3d(-12px, -14px, 0) rotate(-0.12deg); }
}

@keyframes visioWorkCopyBreathe042 {
  0% { transform: translate3d(10px, -8px, 0) rotate(0.05deg); }
  35% { transform: translate3d(-14px, 15px, 0) rotate(-0.08deg); }
  70% { transform: translate3d(15px, 5px, 0) rotate(0.09deg); }
  100% { transform: translate3d(-11px, -15px, 0) rotate(-0.06deg); }
}

@keyframes visioWorkCopyBreatheRight042 {
  0% { transform: translate3d(-10px, 8px, 0) rotate(-0.05deg); }
  36% { transform: translate3d(14px, -15px, 0) rotate(0.08deg); }
  71% { transform: translate3d(-15px, -5px, 0) rotate(-0.09deg); }
  100% { transform: translate3d(11px, 15px, 0) rotate(0.06deg); }
}

@media (max-width: 900px) {
  .visio-work-case,
  .visio-work-case--right {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .visio-work-case-media,
  .visio-work-case--right .visio-work-case-media {
    width: 100%;
    justify-self: stretch;
  }

  .visio-work-case-copy-stage,
  .visio-work-case--right .visio-work-case-copy-stage {
    width: min(88%, 300px);
    justify-self: center;
  }

  .visio-work-case--left.is-visible .visio-work-case-copy-stage,
  .visio-work-case--right.is-visible .visio-work-case-copy-stage {
    animation: visioWorkCopySpringMobile042 7.6s 0.75s linear both;
  }
}

@keyframes visioWorkCopySpringMobile042 {
  0%, 9% {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(0, calc(-100% - 42px), 0) scale(0.84);
  }
  30% {
    opacity: 0.9;
    filter: blur(1px);
    transform: translate3d(0, calc(-58% - 20px), 0) scale(0.94);
  }
  56% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 58px, 0) scaleY(1.07);
  }
  75% { transform: translate3d(0, -18px, 0) scale(1); }
  86% { transform: translate3d(0, 12px, 0) scaleY(1.012); }
  94% { transform: translate3d(0, -5px, 0) scale(0.998); }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -10px, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-case.is-visible .visio-work-case-media,
  .visio-work-case.is-visible .visio-work-case-copy-stage,
  .visio-work-case.is-visible .visio-work-case-visual,
  .visio-work-case.is-visible .visio-work-case-copy {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* STEP VISIO 043 - continuous velocity motion model */
.visio-work-case.is-visible .visio-work-case-media,
.visio-work-case--left.is-visible .visio-work-case-copy-stage,
.visio-work-case--right.is-visible .visio-work-case-copy-stage {
  animation: none !important;
  transition: none !important;
}

.visio-work-case.is-visible:not(.is-settled) .visio-work-case-visual,
.visio-work-case.is-visible:not(.is-settled) .visio-work-case-copy {
  animation: none !important;
}

.visio-work-case.is-visible .visio-work-case-signal {
  opacity: 0 !important;
  clip-path: inset(0 100% 0 0);
  transition: none !important;
}

.visio-work-case.is-visible .visio-work-case-signal::before,
.visio-work-case.is-visible .visio-work-case-signal::after {
  opacity: 0 !important;
  transition: none !important;
}

.visio-work-case.is-visible.has-signal .visio-work-case-signal {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1100ms cubic-bezier(0.22, 0.72, 0.22, 1),
              opacity 520ms ease !important;
}

.visio-work-case.is-visible.has-signal .visio-work-case-signal::before,
.visio-work-case.is-visible.has-signal .visio-work-case-signal::after {
  opacity: 0.9 !important;
  transition: opacity 520ms ease 280ms !important;
}

.visio-work-case.is-settled .visio-work-case-visual {
  animation: visioWorkMediaBreathe042 18s ease-in-out infinite alternate !important;
}

.visio-work-case--right.is-settled .visio-work-case-visual {
  animation-name: visioWorkMediaBreatheRight042 !important;
  animation-duration: 21s !important;
}

.visio-work-case.is-settled .visio-work-case-copy {
  animation: visioWorkCopyBreathe042 19s ease-in-out infinite alternate !important;
}

.visio-work-case--right.is-settled .visio-work-case-copy {
  animation-name: visioWorkCopyBreatheRight042 !important;
  animation-duration: 22s !important;
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-case.is-visible .visio-work-case-media,
  .visio-work-case.is-visible .visio-work-case-copy-stage,
  .visio-work-case.is-visible .visio-work-case-visual,
  .visio-work-case.is-visible .visio-work-case-copy {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* STEP VISIO 045 - seamless spring-to-breath handoff */
.visio-work-cases {
  width: min(100% - clamp(32px, 6vw, 88px), 1260px);
}

.visio-work-case-media {
  width: min(100%, 680px);
}

.visio-work-case.is-settled .visio-work-case-visual {
  animation-name: visioWorkMediaBreathe045 !important;
}

.visio-work-case--right.is-settled .visio-work-case-visual {
  animation-name: visioWorkMediaBreatheRight045 !important;
}

.visio-work-case.is-settled .visio-work-case-copy {
  animation-name: visioWorkCopyBreathe045 !important;
}

.visio-work-case--right.is-settled .visio-work-case-copy {
  animation-name: visioWorkCopyBreatheRight045 !important;
}

@keyframes visioWorkMediaBreathe045 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33% { transform: translate3d(14px, -16px, 0) rotate(0.16deg); }
  68% { transform: translate3d(-16px, -5px, 0) rotate(-0.18deg); }
  100% { transform: translate3d(12px, 14px, 0) rotate(0.12deg); }
}

@keyframes visioWorkMediaBreatheRight045 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  34% { transform: translate3d(-15px, 15px, 0) rotate(-0.16deg); }
  69% { transform: translate3d(16px, 4px, 0) rotate(0.18deg); }
  100% { transform: translate3d(-12px, -14px, 0) rotate(-0.12deg); }
}

@keyframes visioWorkCopyBreathe045 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  35% { transform: translate3d(-14px, 15px, 0) rotate(-0.08deg); }
  70% { transform: translate3d(15px, 5px, 0) rotate(0.09deg); }
  100% { transform: translate3d(-11px, -15px, 0) rotate(-0.06deg); }
}

@keyframes visioWorkCopyBreatheRight045 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  36% { transform: translate3d(14px, -15px, 0) rotate(0.08deg); }
  71% { transform: translate3d(-15px, -5px, 0) rotate(-0.09deg); }
  100% { transform: translate3d(11px, 15px, 0) rotate(0.06deg); }
}

@media (max-width: 900px) {
  .visio-work-case-media {
    width: 100%;
  }
}

/* STEP VISIO 054 - softly entering, independent heading waves */
.visio-info-section .frameheader,
.visio-client-section .client-logos-title {
  background: none !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}

.visio-info-section .frameheader .visio-heading-wave,
.visio-client-section .client-logos-title .visio-heading-wave {
  --visio-heading-wave-color: #ff0000;
  --visio-heading-wave-duration: 19s;
  --visio-heading-wave-delay: -2.8s;
  color: #1a1a1a !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    90deg,
    #1a1a1a 0%,
    #1a1a1a 34%,
    color-mix(in srgb, var(--visio-heading-wave-color) 8%, #1a1a1a) 38%,
    color-mix(in srgb, var(--visio-heading-wave-color) 25%, #1a1a1a) 42%,
    color-mix(in srgb, var(--visio-heading-wave-color) 58%, #1a1a1a) 47%,
    var(--visio-heading-wave-color) 52%,
    color-mix(in srgb, var(--visio-heading-wave-color) 78%, white) 56%,
    color-mix(in srgb, var(--visio-heading-wave-color) 30%, #1a1a1a) 60%,
    #1a1a1a 65%,
    #1a1a1a 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 300% 100% !important;
  background-position: 100% 50%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: visioSharedHeadingWave047 var(--visio-heading-wave-duration) linear infinite !important;
  animation-delay: var(--visio-heading-wave-delay) !important;
  display: inline-block !important;
  will-change: background-position;
}

.visio-client-section .client-logos-title .visio-heading-wave--attention {
  --visio-heading-wave-color: #efff13;
  --visio-heading-wave-duration: 23s;
  --visio-heading-wave-delay: -11.6s;
}

@keyframes visioSharedHeadingWave047 {
  0%, 14% { background-position: 100% 50%; }
  76%, 100% { background-position: 0% 50%; }
}

@supports not (color: color-mix(in srgb, red, white)) {
  .visio-info-section .frameheader .visio-heading-wave,
  .visio-client-section .client-logos-title .visio-heading-wave {
    background-image: linear-gradient(
      90deg,
      #1a1a1a 0%,
      #1a1a1a 34%,
      var(--visio-heading-wave-color) 47%,
      var(--visio-heading-wave-color) 54%,
      #1a1a1a 65%,
      #1a1a1a 100%
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-info-section .frameheader .visio-heading-wave,
  .visio-client-section .client-logos-title .visio-heading-wave {
    color: #1a1a1a !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
  }
}

/* STEP VISIO 048 - living info signal and painted copy perimeter */
.visio-info-section {
  padding-top: clamp(52px, 5.2vw, 78px) !important;
}

.visio-info-section .visio-info-inner {
  position: relative;
  isolation: isolate;
  width: min(1260px, 96vw);
  animation: visioInfoSystemDrift052 24s ease-in-out -7s infinite alternate;
  will-change: transform;
}

.visio-info-section .frameheader,
.visio-info-section .frontpage-intro {
  position: relative;
  z-index: 2;
  will-change: transform;
}

.visio-info-section .frameheader {
  animation: visioInfoHeadingFloat053 21s ease-in-out infinite alternate !important;
}

.visio-info-section .frontpage-intro {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1000px !important;
  padding-left: clamp(22px, 5vw, 64px) !important;
  padding-right: clamp(22px, 5vw, 64px) !important;
  animation: visioInfoCopyFloat053 25s ease-in-out -8.2s infinite alternate;
}

.visio-info-signal {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.visio-info-signal path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke: #ff0000;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visio-info-signal-connector,
.visio-info-signal-frame {
  stroke-width: 1.2px;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0.26;
}

.visio-info-signal-point {
  fill: #ff0000;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.2));
}

.visio-info-signal.is-complete .visio-info-signal-point {
  animation: visioInfoPointRest050 5.8s ease-in-out infinite;
}

@keyframes visioInfoSystemDrift052 {
  0% { transform: translate3d(-7px, 0, 0); }
  42% { transform: translate3d(6px, -3px, 0); }
  100% { transform: translate3d(-3px, 3px, 0); }
}

@keyframes visioInfoHeadingFloat053 {
  0% { transform: translate3d(-10px, -25px, 0) scale(1) rotate(-0.035deg); }
  28% { transform: translate3d(15px, -41px, 0) scale(1.006) rotate(0.065deg); }
  57% { transform: translate3d(-17px, -31px, 0) scale(0.998) rotate(-0.055deg); }
  82% { transform: translate3d(18px, -45px, 0) scale(1.005) rotate(0.05deg); }
  100% { transform: translate3d(-6px, -27px, 0) scale(1.002) rotate(-0.03deg); }
}

@keyframes visioInfoCopyFloat053 {
  0% { transform: translate3d(12px, 5px, 0) scale(1) rotate(0.025deg); }
  31% { transform: translate3d(-16px, -11px, 0) scale(1.004) rotate(-0.05deg); }
  64% { transform: translate3d(19px, 12px, 0) scale(0.998) rotate(0.045deg); }
  100% { transform: translate3d(-12px, -7px, 0) scale(1.003) rotate(-0.035deg); }
}

@keyframes visioInfoPointRest050 {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.14); opacity: 0.9; }
}

@media (max-width: 767px) {
  .visio-info-section {
    padding-top: 48px !important;
  }

  .visio-info-section .visio-info-inner {
    width: 94vw;
  }

  .visio-info-section .frontpage-intro {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .visio-info-signal-point {
    r: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-info-section .visio-info-inner,
  .visio-info-section .frameheader,
  .visio-info-section .frontpage-intro {
    animation: none !important;
    transform: none !important;
  }

  .visio-info-signal {
    display: none;
  }
}

/* STEP VISIO 055 - airier work-case titles */
.visio-work-case-copy h2 {
  letter-spacing: 0.01em;
}

/* STEP VISIO 056 - independent client-logo drift */
.visio-client-section .logo-strip img[src] {
  animation: visioClientLogoDrift056 var(--visio-logo-drift-duration, 16s) ease-in-out var(--visio-logo-drift-delay, 0s) infinite alternate;
  will-change: translate;
}

@keyframes visioClientLogoDrift056 {
  0% {
    translate: var(--visio-logo-drift-x1, -1px) var(--visio-logo-drift-y1, 1px);
  }
  31% {
    translate: var(--visio-logo-drift-x2, 2px) var(--visio-logo-drift-y2, -1px);
  }
  67% {
    translate: var(--visio-logo-drift-x3, -2px) var(--visio-logo-drift-y3, -2px);
  }
  100% {
    translate: var(--visio-logo-drift-x4, 1px) var(--visio-logo-drift-y4, 2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-client-section .logo-strip img[src] {
    animation: none !important;
    translate: none !important;
  }
}

/* STEP VISIO 057 - restrained per-logo optical sizing */
.visio-client-section .logo-strip img[src*="km1.png"],
.visio-client-section .logo-strip img[data-logo*="km1.png"],
.visio-client-section .logo-strip img[src*="peab1.png"],
.visio-client-section .logo-strip img[data-logo*="peab1.png"],
.visio-client-section .logo-strip img[src*="seamk2.png"],
.visio-client-section .logo-strip img[data-logo*="seamk2.png"],
.visio-client-section .logo-strip img[src*="valio1.png"],
.visio-client-section .logo-strip img[data-logo*="valio1.png"] {
  scale: 1.06;
}

.visio-client-section .logo-strip img[src*="ideapark1.png"],
.visio-client-section .logo-strip img[data-logo*="ideapark1.png"] {
  scale: 1.08;
}

.visio-client-section .logo-strip img[src*="kaiko1.png"],
.visio-client-section .logo-strip img[data-logo*="kaiko1.png"] {
  scale: 0.95;
}

/* STEP VISIO 058 - stronger scroll header and VISIO brand state */
.visio-index-page > .visio-site-nav .visio-hero-brand {
  display: inline-grid;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

.visio-index-page > .visio-site-nav .visio-hero-brand-full,
.visio-index-page > .visio-site-nav .visio-hero-brand-compact {
  grid-area: 1 / 1;
  transition: opacity 360ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visio-index-page > .visio-site-nav .visio-hero-brand-compact {
  font-size: clamp(1.5rem, 1.05vw + 1.1rem, 1.9rem);
  letter-spacing: 0.035em;
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.94);
}

.visio-index-page.has-compact-header > .visio-site-nav {
  height: 64px;
  padding: 0 clamp(20px, 4vw, 58px);
  background: rgba(5, 5, 5, 0.97);
}

.visio-index-page.has-compact-header > .visio-site-nav .visio-hero-brand {
  font-size: inherit;
}

.visio-index-page.has-compact-header > .visio-site-nav .visio-hero-brand-full {
  opacity: 0;
  transform: translate3d(0, -8px, 0) scale(0.94);
}

.visio-index-page.has-compact-header > .visio-site-nav .visio-hero-brand-compact {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.visio-index-page.has-compact-header > .visio-site-nav .visio-hero-links {
  gap: clamp(18px, 2.2vw, 34px);
  font-size: clamp(0.84rem, 0.22vw + 0.8rem, 1rem);
}

@media (max-width: 900px) {
  .visio-index-page.has-compact-header > .visio-site-nav {
    height: 56px;
    padding: 0 14px;
  }

  .visio-index-page > .visio-site-nav .visio-hero-brand-compact {
    font-size: 1.28rem;
  }

  .visio-index-page.has-compact-header > .visio-site-nav .visio-hero-links {
    gap: 10px;
    font-size: 0.7rem;
  }
}

/* STEP VISIO 062 - calmer statement crossfades */
.visio-statement-panel {
  transform: translate3d(
    var(--statement-shift-x, 0),
    var(--statement-shift-y, 10px),
    0
  );
  transition:
    opacity 2200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 2400ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 2400ms;
}

.visio-statement-panel.is-active {
  transform: translate3d(0, 0, 0);
  transition-delay: 360ms, 360ms, 0s;
}

.visio-statement-panel.is-active h2 > span {
  animation-duration: 1800ms;
}

.visio-statement-panel.is-active h2 > span:nth-child(2) {
  animation-delay: 220ms;
}

.visio-statement-panel[data-visio-statement-panel="0"].is-active .visio-statement-motion-word {
  animation: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .visio-statement-panel,
  .visio-statement-panel.is-active,
  .visio-statement-panel.is-active h2 > span,
  .visio-statement-panel[data-visio-statement-panel="0"].is-active .visio-statement-motion-word {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* STEP VISIO 063 - directional statement exchange */
.visio-statement-panel h2 {
  letter-spacing: -0.025em;
}

@keyframes visioStatementHeadlineDrift {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    letter-spacing: -0.025em;
  }
  44% {
    transform: translate3d(0.026em, 0, 0);
    letter-spacing: -0.016em;
  }
  72% {
    transform: translate3d(-0.018em, 0, 0);
    letter-spacing: -0.03em;
  }
}

/* STEP VISIO 064 - work copy enters behind its media */
.visio-work-case {
  position: relative;
  isolation: isolate;
}

.visio-work-case-copy-stage {
  z-index: 1 !important;
}

.visio-work-case-signal,
.visio-work-case--right .visio-work-case-signal {
  z-index: 2 !important;
}

.visio-work-case-media,
.visio-work-case--right .visio-work-case-media {
  position: relative;
  z-index: 3 !important;
}

.visio-work-case-visual,
.visio-work-case .videocontainer,
.visio-work-case .carousel {
  position: relative;
  z-index: 1;
}

/* STEP VISIO 066 - mobile homepage stability */
.visio-mobile-menu-toggle {
  display: none;
}

.visio-index-page > .visio-site-nav {
  align-items: center !important;
}

@media (max-width: 680px) {
  .visio-home-hero--signals {
    min-height: clamp(560px, 68svh, 640px) !important;
  }

  .visio-signal-hero-inner {
    min-height: calc(clamp(560px, 68svh, 640px) - 54px) !important;
  }

  .visio-home-hero--signals .visio-hero-word {
    font-size: clamp(5.6rem, 29vw, 8rem) !important;
    letter-spacing: -0.038em !important;
  }

  .visio-home-hero--signals .visio-letter:not(:last-child) {
    margin-right: -0.014em;
  }

  .visio-home-hero--signals .visio-letter {
    animation-name: visioLetterDriftMobile066 !important;
  }

  .visio-index-page > .visio-site-nav .visio-mobile-menu-toggle {
    position: relative;
    z-index: 3;
    display: inline-grid;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 10px 8px;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    align-content: center;
    gap: 5px;
  }

  .visio-mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
  }

  .visio-index-page > .visio-site-nav .visio-hero-links {
    position: absolute;
    top: calc(100% + 1px);
    right: 10px;
    display: flex;
    width: min(230px, calc(100vw - 20px));
    padding: 12px 18px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(5, 5, 5, 0.98);
    border-bottom: 1px solid rgba(255, 0, 0, 0.5);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -10px, 0);
    transition: opacity 280ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 360ms;
  }

  .visio-index-page > .visio-site-nav .visio-hero-links a {
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 1rem;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-align: left;
  }

  .visio-index-page > .visio-site-nav .visio-hero-links a:last-child {
    border-bottom: 0;
  }

  .visio-index-page > .visio-site-nav.is-mobile-menu-open .visio-hero-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .visio-site-nav.is-mobile-menu-open .visio-mobile-menu-toggle span:nth-child(1) {
    transform: translate3d(0, 6px, 0) rotate(45deg);
  }

  .visio-site-nav.is-mobile-menu-open .visio-mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  .visio-site-nav.is-mobile-menu-open .visio-mobile-menu-toggle span:nth-child(3) {
    transform: translate3d(0, -6px, 0) rotate(-45deg);
  }

  .visio-statement-panel > p {
    font-size: clamp(0.8rem, 3.55vw, 0.94rem);
    letter-spacing: -0.035em;
    line-height: 1.46;
  }

  .visio-statement-shell {
    min-height: 400px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .visio-statement-section {
    padding-top: 20px;
    padding-bottom: 30px;
  }

  .visio-statement-copy {
    padding-top: 28px;
  }

  .visio-work-cases {
    width: min(calc(100% - 30px), 360px);
  }

  .visio-work-case-media,
  .visio-work-case--right .visio-work-case-media {
    width: 100%;
    justify-self: center;
  }

  .visio-work-case-copy-stage,
  .visio-work-case--right .visio-work-case-copy-stage {
    width: min(72%, 220px);
  }

  .visio-work-case-copy,
  .visio-work-case.is-visible .visio-work-case-copy,
  .visio-work-case--right .visio-work-case-copy {
    padding: clamp(15px, 4.3vw, 21px);
  }

  .visio-work-case-kicker {
    margin-bottom: 8px;
    font-size: clamp(0.5rem, 2vw, 0.58rem);
  }

  .visio-work-case-copy h2 {
    font-size: clamp(1.34rem, 6.8vw, 1.78rem);
    line-height: 0.96;
  }

  .visio-work-case-copy > p:last-child {
    margin-top: 11px;
    font-size: clamp(0.7rem, 2.8vw, 0.78rem);
    line-height: 1.4;
  }

  body.visio-index-page .visio-work-section .frontpage-banner,
  .visio-work-cases > .frontpage-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .visio-work-case.is-settled .visio-work-case-visual,
  .visio-work-case--right.is-settled .visio-work-case-visual {
    animation-name: visioWorkMediaBreatheMobile066 !important;
  }

  .visio-work-case.is-settled .visio-work-case-copy,
  .visio-work-case--right.is-settled .visio-work-case-copy {
    animation-name: visioWorkCopyBreatheMobile066 !important;
  }

  .visio-info-section .visio-info-inner {
    animation-name: visioInfoSystemDriftMobile066;
  }

  .visio-info-section .frameheader {
    animation-name: visioInfoHeadingFloatMobile066 !important;
  }

  .visio-info-section .frontpage-intro {
    animation-name: visioInfoCopyFloatMobile066;
  }
}

@keyframes visioLetterDriftMobile066 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  34% { transform: translate3d(4px, -3px, 0); }
  68% { transform: translate3d(-4px, 4px, 0); }
}

@keyframes visioWorkMediaBreatheMobile066 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  34% { transform: translate3d(5px, -7px, 0) rotate(0.08deg); }
  68% { transform: translate3d(-5px, -2px, 0) rotate(-0.08deg); }
  100% { transform: translate3d(4px, 6px, 0) rotate(0.06deg); }
}

@keyframes visioWorkCopyBreatheMobile066 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  35% { transform: translate3d(-4px, 6px, 0) rotate(-0.04deg); }
  70% { transform: translate3d(4px, 2px, 0) rotate(0.05deg); }
  100% { transform: translate3d(-3px, -6px, 0) rotate(-0.03deg); }
}

@keyframes visioInfoSystemDriftMobile066 {
  0% { transform: translate3d(-2px, 0, 0); }
  50% { transform: translate3d(2px, -2px, 0); }
  100% { transform: translate3d(-1px, 2px, 0); }
}

@keyframes visioInfoHeadingFloatMobile066 {
  0% { transform: translate3d(-3px, -25px, 0); }
  50% { transform: translate3d(3px, -32px, 0); }
  100% { transform: translate3d(-2px, -27px, 0); }
}

@keyframes visioInfoCopyFloatMobile066 {
  0% { transform: translate3d(2px, 2px, 0); }
  50% { transform: translate3d(-2px, -4px, 0); }
  100% { transform: translate3d(1px, 3px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-case.is-settled .visio-work-case-visual,
  .visio-work-case.is-settled .visio-work-case-copy,
  .visio-info-section .visio-info-inner,
  .visio-info-section .frameheader,
  .visio-info-section .frontpage-intro {
    animation: none !important;
    transform: none !important;
  }
}

/* STEP VISIO 075 - open three-sided work copy frames */
.visio-work-case-copy,
.visio-work-case.is-visible .visio-work-case-copy,
.visio-work-case--right .visio-work-case-copy {
  box-sizing: border-box;
  color: #ffffff;
  background: transparent !important;
  border: 0;
  border-right: 4px solid #080808;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.visio-work-case--right .visio-work-case-copy,
.visio-work-case--right.is-visible .visio-work-case-copy {
  border-right: 0;
  border-left: 4px solid #080808;
}

.visio-work-case-copy::before,
.visio-work-case-copy::after {
  content: "";
  position: absolute;
  right: 0;
  left: -24px;
  z-index: 0;
  display: block;
  height: 4px;
  border: 0;
  background: #080808;
  pointer-events: none;
}

.visio-work-case-copy::before {
  top: 0;
  bottom: auto;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.visio-work-case-copy::after {
  top: auto;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.visio-work-case--right .visio-work-case-copy::before {
  right: -24px;
  left: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.visio-work-case--right .visio-work-case-copy::after {
  right: -24px;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.visio-work-case-copy .visio-work-case-kicker,
.visio-work-case-copy h2,
.visio-work-case-copy > p:last-child {
  color: #ffffff;
}

/* STEP VISIO 078 - decelerating work-media hover motion */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .visio-work-case.is-settled .visio-work-case-visual {
    animation: none !important;
  }
}

/* STEP VISIO 079 - larger, tighter information headings */
.visio-info-section .frameheader,
.visio-client-section .client-logos-title {
  font-size: clamp(2.65rem, 3.75vw, 3.75rem) !important;
  line-height: 0.98 !important;
}

.visio-info-section .frameheader .visio-heading-wave,
.visio-client-section .client-logos-title .visio-heading-wave {
  letter-spacing: 0.012em !important;
}

.visio-client-section .client-logos-title {
  font-size: clamp(3rem, 4.3vw, 4.35rem) !important;
}

/* STEP VISIO 083 - living video thumbnail images */
.visio-work-case .videocontainer .cover {
  overflow: hidden;
}

.visio-work-case .videocontainer .cover img {
  transform-origin: center;
  will-change: transform;
  animation: visioWorkThumbnailDrift083 19s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.visio-work-case--right .videocontainer .cover img {
  animation-name: visioWorkThumbnailDriftAlt083;
  animation-duration: 22.5s;
  animation-delay: -7.2s;
}

.visio-work-case .videocontainer:hover .overlay img,
.visio-work-case .videocontainer:focus-within .overlay img {
  transform: none;
}

@keyframes visioWorkThumbnailDrift083 {
  0%, 100% {
    transform: translate3d(-0.45%, 0.25%, 0) scale(1.025);
  }

  31% {
    transform: translate3d(0.55%, -0.4%, 0) scale(1.045);
  }

  66% {
    transform: translate3d(0.2%, 0.55%, 0) scale(1.034);
  }

  84% {
    transform: translate3d(-0.58%, -0.18%, 0) scale(1.04);
  }
}

@keyframes visioWorkThumbnailDriftAlt083 {
  0%, 100% {
    transform: translate3d(0.42%, -0.32%, 0) scale(1.027);
  }

  27% {
    transform: translate3d(-0.58%, 0.42%, 0) scale(1.043);
  }

  61% {
    transform: translate3d(0.5%, 0.3%, 0) scale(1.034);
  }

  83% {
    transform: translate3d(-0.18%, -0.52%, 0) scale(1.046);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-work-case .videocontainer .cover img {
    transform: none;
    animation: none !important;
  }
}

/* STEP VISIO 084 - Roc Grotesk homepage typography test */
@font-face {
  font-family: "Visio Roc Grotesk";
  src: url("../fonts/RocGrotesk-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Visio Roc Grotesk";
  src: url("../fonts/RocGrotesk-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Visio Roc Grotesk";
  src: url("../fonts/RocGrotesk-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Visio Roc Grotesk Wide";
  src: url("../fonts/RocGrotesk-WideMedium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

.visio-index-page {
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif !important;
}

.visio-index-page .visio-hero-brand-full,
.visio-index-page .visio-hero-brand-compact {
  font-family: VisioFontHeavy, "Visio Roc Grotesk", Impact, sans-serif !important;
}

.visio-index-page .visio-hero-main-copy,
.visio-index-page .visio-statement-panel > p,
.visio-index-page .visio-work-case-copy > p:last-child,
.visio-index-page .frontpage-intro,
.visio-index-page .contact-title,
.visio-index-page .visio-footer .legal {
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif !important;
  font-weight: 400;
}

.visio-index-page .frontpage-intro {
  letter-spacing: -0.015em !important;
}

.visio-index-page .visio-site-nav .visio-hero-links a,
.visio-index-page .visio-site-nav.is-mobile-menu-open .visio-hero-links a,
.visio-index-page .visio-footer a {
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif !important;
  font-weight: 500;
}

.visio-index-page .contact-name {
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif !important;
  font-weight: 700;
}

.visio-index-page .visio-work-case-kicker,
.visio-index-page .visio-statement-process-step,
.visio-index-page .footeremail .email-link {
  font-family: "Visio Roc Grotesk Wide", "Visio Roc Grotesk", Helvetica, Arial, sans-serif !important;
  font-weight: 500;
}

.visio-index-page .visio-signal-label {
  font-family: "Visio Roc Grotesk", Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em;
}

.visio-index-page .visio-signal-label.is-roc-wide {
  font-family: "Visio Roc Grotesk Wide", "Visio Roc Grotesk", Helvetica, Arial, sans-serif !important;
  letter-spacing: -0.05em;
}