:root {
  --motion-fast: 240ms;
  --motion-medium: 480ms;
  --motion-slow: 760ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-in: cubic-bezier(.76, 0, .24, 1);
}

html,
body { overflow-x: clip; }

html.transition-pending { background: #111827; }
html.transition-pending body { visibility: hidden; }

/* Keep content visible without JavaScript; motion.js opts into reveal states. */
[data-reveal] {
  opacity: 1;
  transform: none;
}

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero depth ------------------------------------------------------------- */
.motion-ready .hero[data-hero-motion] {
  --pointer-x: 0;
  --pointer-y: 0;
  --hero-progress: 0;
}

.motion-ready .hero[data-hero-motion] .geo-square {
  animation: none;
}

.motion-ready .hero[data-hero-motion] [data-hero-layer] {
  transform: translate3d(
      var(--layer-x, 0),
      calc(var(--layer-y, 0) + var(--layer-scroll, 0)),
      0
    )
    rotate(var(--layer-rotate, 0deg));
  transition: transform 620ms var(--motion-ease);
}

.motion-ready .hero[data-hero-motion].is-pointer-active [data-hero-layer] {
  transition-duration: 110ms;
  will-change: transform;
}

/* Selected geometric compositions -------------------------------------- */
.approach-photo {
  position: absolute;
  z-index: 1;
  inset: 8% 34% 19% 5%;
  overflow: hidden;
  border: 1px solid var(--lavender);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 76% 100%, 0 100%);
}

.approach-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72);
  transform: scale(1.03);
  transition: filter 520ms ease, transform 620ms var(--motion-ease);
}

.approach-art:is(:hover, :focus-within) .approach-photo img {
  filter: saturate(.92);
  transform: scale(1);
}

.approach-art .block-a { z-index: 0; }
.approach-art .block-b,
.approach-art .block-c { z-index: 2; }

.motion-ready [data-geometry-motion] [data-geometry-layer] {
  transform: translate3d(var(--geometry-x, 0), var(--geometry-y, 0), 0)
    rotate(var(--geometry-rotate, 0deg));
  transition: transform 560ms var(--motion-ease);
}

.motion-ready [data-geometry-motion].is-geometry-active [data-geometry-layer] {
  transition-duration: 100ms;
  will-change: transform;
}

[data-ambient-motion] .art-outline {
  overflow: hidden;
}

[data-ambient-motion] .art-outline::after {
  content: "";
  position: absolute;
  left: -38%;
  top: -2px;
  width: 36%;
  height: 4px;
  background: var(--indigo);
  animation: ambient-frame-track 14s linear infinite;
  animation-play-state: paused;
}

[data-ambient-motion].ambient-active .art-outline::after {
  animation-play-state: running;
}

.material-symbols-ready .hero-symbol {
  transition: transform 560ms var(--motion-ease), color 420ms ease, background 420ms ease,
    font-variation-settings 420ms ease;
}

.material-symbols-ready .page-hero-art.is-geometry-active .hero-symbol {
  background: var(--ink);
  color: var(--pale);
  font-variation-settings: "FILL" 1;
}

@keyframes ambient-frame-track {
  0% { transform: translateX(0); }
  50%, 100% { transform: translateX(390%); }
}

/* Animated service modules ---------------------------------------------- */
.motion-ready .bento-card[data-motion-card] {
  isolation: isolate;
  outline: 0 solid transparent;
  outline-offset: -5px;
  transition:
    background var(--motion-medium) ease,
    color var(--motion-medium) ease,
    outline-color var(--motion-fast) ease;
}

.motion-ready .bento-card[data-motion-card]:focus-visible {
  outline-width: 3px;
  outline-color: var(--lavender);
}

.motion-ready .bento-card[data-motion-card] > :not(.bento-visual) {
  position: relative;
  z-index: 2;
}

.bento-visual {
  position: absolute;
  z-index: 1;
  right: clamp(22px, 3vw, 44px);
  top: clamp(22px, 3vw, 42px);
  width: clamp(86px, 10vw, 144px);
  aspect-ratio: 1;
  color: var(--indigo);
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 540ms ease, transform 620ms var(--motion-ease);
}

.gradient .bento-visual,
.dark .bento-visual {
  color: var(--white);
}

.motion-ready .bento-card.motion-entered .bento-visual {
  opacity: .72;
  transform: translateY(0);
}

.bento-symbol {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid currentColor;
  background: color-mix(in srgb, var(--white) 88%, transparent);
  color: var(--indigo);
  font-size: 0;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: transform 480ms var(--motion-ease), background 420ms ease, color 420ms ease,
    font-variation-settings 420ms ease;
}

.material-symbols-ready .bento-symbol {
  font-family: "Material Symbols Outlined";
  font-size: clamp(34px, 3vw, 44px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0;
}

.gradient .bento-symbol,
.dark .bento-symbol {
  background: color-mix(in srgb, var(--ink) 68%, transparent);
  color: var(--pale);
}

.bento-card:is(:hover, :focus-visible) .bento-symbol {
  color: var(--white);
  background: var(--indigo);
  font-variation-settings: "FILL" 1;
  transform: translate(-50%, calc(-50% - 3px)) rotate(2deg);
}

.gradient:is(:hover, :focus-visible) .bento-symbol,
.dark:is(:hover, :focus-visible) .bento-symbol {
  color: var(--ink);
  background: var(--pale);
}

.visual-frames i {
  position: absolute;
  inset: 19%;
  border: 1px solid currentColor;
  transition: transform 520ms var(--motion-ease), opacity 400ms ease;
}
.visual-frames i:nth-child(1) { transform: translate(-20px, 18px); opacity: .45; }
.visual-frames i:nth-child(2) { transform: translate(0, 0); opacity: .7; }
.visual-frames i:nth-child(3) { transform: translate(20px, -18px); opacity: 1; background: currentColor; }
.bento-card:is(:hover, :focus-visible) .visual-frames i { transform: translate(0, 0); }
.bento-card:is(:hover, :focus-visible) .visual-frames i:nth-child(1) { transform: scale(1.38); }
.bento-card:is(:hover, :focus-visible) .visual-frames i:nth-child(3) { transform: scale(.62); }

.visual-bars {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px;
}
.visual-bars i {
  width: 18%;
  height: var(--bar-height);
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 20%, transparent);
  transform: scaleY(.18);
  transform-origin: bottom;
  transition: transform 520ms var(--motion-ease);
}
.visual-bars i:nth-child(1) { --bar-height: 34%; transition-delay: 0ms; }
.visual-bars i:nth-child(2) { --bar-height: 56%; transition-delay: 45ms; }
.visual-bars i:nth-child(3) { --bar-height: 78%; transition-delay: 90ms; }
.visual-bars i:nth-child(4) { --bar-height: 100%; transition-delay: 135ms; background: currentColor; }
.bento-card.motion-entered .visual-bars i,
.bento-card:is(:hover, :focus-visible) .visual-bars i { transform: scaleY(1); }
.bento-card:is(:hover, :focus-visible) .visual-bars i:nth-child(odd) { transform: scaleY(.72); }

.visual-dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  padding: 18px;
}
.visual-dots i {
  width: 9px;
  aspect-ratio: 1;
  background: currentColor;
  border-radius: 50%;
  transform: translate(var(--scatter-x), var(--scatter-y)) scale(.55);
  transition: transform 560ms var(--motion-ease);
}
.visual-dots i:nth-child(1), .visual-dots i:nth-child(9) { --scatter-x: 18px; --scatter-y: -14px; }
.visual-dots i:nth-child(2), .visual-dots i:nth-child(8) { --scatter-x: -12px; --scatter-y: 8px; }
.visual-dots i:nth-child(3), .visual-dots i:nth-child(7) { --scatter-x: 13px; --scatter-y: 16px; }
.visual-dots i:nth-child(4), .visual-dots i:nth-child(6) { --scatter-x: -16px; --scatter-y: -9px; }
.visual-dots i:nth-child(5) { --scatter-x: 0; --scatter-y: 0; transform: scale(1.5); }
.bento-card.motion-entered .visual-dots i,
.bento-card:is(:hover, :focus-visible) .visual-dots i { transform: translate(0, 0) scale(1); }
.bento-card:is(:hover, :focus-visible) .visual-dots i:nth-child(5) { transform: scale(2.2); }

.visual-scan {
  border: 1px solid currentColor;
  background-image:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 25% 25%;
  opacity: .65;
  overflow: hidden;
}
.visual-scan i {
  position: absolute;
  inset: 0;
  border-top: 3px solid currentColor;
  transform: translateY(-105%);
  transition: transform 640ms var(--motion-ease);
}
.bento-card:is(:hover, :focus-visible) .visual-scan i { transform: translateY(105%); }

.visual-connect i {
  position: absolute;
  top: 50%;
  width: 25%;
  aspect-ratio: 1;
  border: 2px solid currentColor;
  transform: translateY(-50%);
  transition: transform 540ms var(--motion-ease), background 300ms ease;
}
.visual-connect i:first-child { left: 3%; }
.visual-connect i:nth-child(2) { right: 3%; }
.visual-connect b {
  position: absolute;
  top: 50%;
  left: 28%;
  width: 44%;
  height: 2px;
  background: currentColor;
  transform: scaleX(.18);
  transform-origin: center;
  transition: transform 540ms var(--motion-ease);
}
.bento-card:is(:hover, :focus-visible) .visual-connect i:first-child { transform: translate(22px, -50%) rotate(45deg); }
.bento-card:is(:hover, :focus-visible) .visual-connect i:nth-child(2) { transform: translate(-22px, -50%) rotate(45deg); background: currentColor; }
.bento-card:is(:hover, :focus-visible) .visual-connect b { transform: scaleX(1); }

.visual-bridge i {
  position: absolute;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 560ms var(--motion-ease);
}
.visual-bridge i:first-child { left: 0; }
.visual-bridge i:nth-child(2) { right: 0; }
.visual-bridge b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13%;
  aspect-ratio: 1;
  background: currentColor;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 420ms var(--motion-ease) 90ms;
}
.bento-card:is(:hover, :focus-visible) .visual-bridge i:first-child { transform: translate(24px, -50%); }
.bento-card:is(:hover, :focus-visible) .visual-bridge i:nth-child(2) { transform: translate(-24px, -50%); }
.bento-card:is(:hover, :focus-visible) .visual-bridge b { transform: translate(-50%, -50%) scale(1) rotate(45deg); }

/* Editorial image masks ------------------------------------------------- */
.motion-ready [data-mask-reveal] {
  position: relative;
  isolation: isolate;
}

.motion-ready [data-mask-reveal].mask-armed::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background: linear-gradient(110deg, var(--indigo), var(--lavender));
  transform: translate3d(0, 0, 0);
  transition: transform 820ms var(--motion-ease-in) 90ms;
  pointer-events: none;
}

.motion-ready [data-mask-reveal].mask-armed:not(.mask-revealed) img {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.045);
  transition:
    clip-path 780ms var(--motion-ease) 120ms,
    transform 980ms var(--motion-ease) 150ms,
    filter 500ms ease;
}

.motion-ready [data-mask-reveal].mask-revealed::before {
  transform: translate3d(101%, 0, 0);
}

.motion-ready [data-mask-reveal].mask-revealed img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

.motion-ready [data-mask-reveal].mask-error::before { display: none; }
.motion-ready [data-mask-reveal].mask-error img {
  clip-path: none;
  opacity: 1;
  transform: none;
}

.motion-ready .case-card:hover [data-mask-reveal].mask-revealed img {
  transform: scale(1.035);
}

/* Interactive research lens -------------------------------------------- */
.research-lens.is-enhanced .lens-panel[hidden] { display: none; }

.motion-ready .lens-tab .lens-symbol {
  transition: transform 460ms var(--motion-ease), color 360ms ease,
    background 360ms ease, font-variation-settings 460ms var(--motion-ease);
}

.motion-ready .lens-tab:is(:hover, :focus-visible, .is-active) .lens-symbol {
  color: var(--ink);
  background: var(--lavender);
  transform: translate3d(2px, -2px, 0) rotate(3deg);
  font-variation-settings: "FILL" 1;
}

.motion-ready .lens-point {
  transition: transform 560ms var(--motion-ease), opacity 420ms ease;
}

.motion-ready .lens-point-mark,
.motion-ready .lens-point-highlight,
.motion-ready .lens-point-hit {
  transition: transform 460ms var(--motion-ease), fill 360ms ease,
    stroke 360ms ease, opacity 360ms ease;
}

.motion-ready .lens-chart-zone,
.motion-ready .lens-chart-threshold {
  transition: opacity 420ms ease, stroke 420ms ease, fill 420ms ease;
}

.motion-ready .lens-chart-vector {
  transition: opacity 420ms ease, stroke 420ms ease;
}

.motion-ready .lens-point:is(:hover, :focus-visible) .lens-point-mark,
.motion-ready .lens-point:is(:hover, :focus-visible) .lens-point-highlight {
  transform: scale(calc(var(--point-scale) * 1.12));
}

.motion-ready .lens-point:is(:hover, :focus-visible) .lens-point-hit {
  stroke: var(--lavender);
  stroke-dasharray: 2 2;
}

.motion-ready .lens-stage.is-updating .lens-chart-vector {
  animation: lens-vector-draw 560ms var(--motion-ease) both;
}

.motion-ready .lens-stage.is-updating .lens-chart-zone,
.motion-ready .lens-stage.is-updating .lens-chart-threshold {
  animation: lens-measure-change 520ms var(--motion-ease) both;
}

.motion-ready .lens-stage.is-updating .lens-point {
  animation: lens-point-state 520ms var(--motion-ease) both;
}

.motion-ready .lens-stage.is-updating .lens-functional-notes span,
.motion-ready .lens-panel.is-active,
.motion-ready .lens-inspector {
  animation: lens-content-in 480ms var(--motion-ease) both;
}

@keyframes lens-vector-draw {
  from { opacity: .2; stroke-dashoffset: 24; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes lens-measure-change {
  from { opacity: .25; stroke-dashoffset: 12; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes lens-point-state {
  from { opacity: .42; }
  to { opacity: 1; }
}

@keyframes lens-content-in {
  from { opacity: 0; transform: translate3d(0,12px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

/* Optional case-study video -------------------------------------------- */
.case-media[data-video-preview] {
  position: relative;
}

.case-media[data-video-preview] video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 360ms ease;
}

.case-media[data-video-preview].is-previewing video { opacity: 1; }

.case-media[data-video-preview].is-previewing .case-poster { opacity: 0; }

.preview-control,
.preview-label {
  position: absolute;
  z-index: 3;
  border: 1px solid var(--white);
  background: rgba(17, 24, 39, .82);
  color: var(--white);
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.preview-label { right: 14px; top: 14px; padding: 7px 9px; pointer-events: none; }
.preview-control { right: 14px; bottom: 14px; display: none; padding: 10px 12px; cursor: pointer; }

/* Scroll-led process ---------------------------------------------------- */
.process-layout { position: relative; }
.process-art { display: none; }

@media (min-width: 821px) {
  .motion-ready .process-layout {
    display: grid;
    grid-template-columns: minmax(300px, .78fr) minmax(470px, 1.22fr);
    gap: clamp(64px, 9vw, 150px);
    align-items: start;
  }

  .motion-ready .process-sticky {
    position: sticky;
    top: 130px;
    min-height: calc(100vh - 170px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .motion-ready .process-sticky .section-heading-row {
    display: block;
    margin-bottom: 48px;
  }

  .motion-ready .process-sticky .section-heading-row .lede {
    margin-top: 30px;
  }

  .motion-ready .process-art {
    --process-progress: 0%;
    display: block;
    position: relative;
    min-height: 245px;
    border: 1px solid #4b5368;
    overflow: hidden;
  }

  .process-art-photo {
    position: absolute;
    z-index: 0;
    inset: 10% 30% 11% 8%;
    overflow: hidden;
    border-radius: 0 88px 0 0;
    clip-path: polygon(0 0, 84% 0, 100% 20%, 100% 100%, 0 100%);
    opacity: .72;
    transition: clip-path 680ms var(--motion-ease), opacity 480ms ease, transform 680ms var(--motion-ease);
  }

  .process-art-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.55) contrast(1.05);
    transform: scale(1.03);
    transition: transform 680ms var(--motion-ease), filter 480ms ease;
  }

  [data-process][data-active-step="1"] .process-art-photo { transform: translateX(8%); opacity: .82; }
  [data-process][data-active-step="2"] .process-art-photo { clip-path: circle(46% at 54% 50%); transform: translateX(20%) scale(.86); }
  [data-process][data-active-step="3"] .process-art-photo { clip-path: inset(14% 0 14% 30%); transform: translateX(-5%); opacity: .9; }
  [data-process][data-active-step="3"] .process-art-photo img { filter: saturate(.75) contrast(1.02); transform: scale(1); }

  .process-art-shape {
    z-index: 1;
    position: absolute;
    transition: transform 680ms var(--motion-ease), border-radius 680ms var(--motion-ease), background 500ms ease;
  }
  .process-art-shape:nth-of-type(1) { width: 42%; aspect-ratio: 1; left: 11%; top: 18%; background: color-mix(in srgb, var(--indigo) 78%, transparent); }
  .process-art-shape:nth-of-type(2) { width: 34%; aspect-ratio: 1; right: 11%; bottom: 14%; border: 1px solid var(--lavender); }
  .process-art-shape:nth-of-type(3) { width: 24%; height: 2px; right: 21%; top: 33%; background: var(--white); }

  [data-process][data-active-step="1"] .process-art-shape:nth-of-type(1) { transform: translateX(36%) rotate(45deg); }
  [data-process][data-active-step="1"] .process-art-shape:nth-of-type(2) { transform: translateX(-38%); border-radius: 50%; }
  [data-process][data-active-step="2"] .process-art-shape:nth-of-type(1) { transform: translate(70%, 26%) scale(.72); border-radius: 50%; }
  [data-process][data-active-step="2"] .process-art-shape:nth-of-type(2) { transform: translate(-75%, -25%) rotate(90deg); background: var(--lavender); }
  [data-process][data-active-step="3"] .process-art-shape:nth-of-type(1) { transform: translate(92%, 48%) scale(.48) rotate(135deg); }
  [data-process][data-active-step="3"] .process-art-shape:nth-of-type(2) { transform: translate(-112%, -42%) scale(.72); background: transparent; }
  [data-process][data-active-step="3"] .process-art-shape:nth-of-type(3) { transform: translateX(-155%) scaleX(2.4); }

  .process-rail {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 5px;
    height: 100%;
    background: #2b3447;
  }
  .process-rail::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--lavender), var(--indigo));
    transform: scaleY(var(--rail-scale, 0));
    transform-origin: top;
    transition: transform 520ms var(--motion-ease);
  }

  .motion-ready .process-steps.steps {
    display: block;
    border-left: 1px solid #4b5368;
    border-top: 1px solid #4b5368;
  }

  .motion-ready .process-steps .step {
    min-height: 54vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: .34;
    transform: translateX(18px);
    border-color: #4b5368;
    transition: opacity 480ms ease, transform 580ms var(--motion-ease), background 480ms ease;
  }

  .motion-ready .process-steps .step.is-active {
    opacity: 1;
    transform: translateX(0);
    background: #151f34;
  }

  .motion-ready .process-steps .step-num { margin-bottom: 54px; }
}

/* Magnetic primary actions --------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .motion-ready [data-magnetic] {
    --magnetic-x: 0px;
    --magnetic-y: 0px;
    transform: translate3d(var(--magnetic-x), var(--magnetic-y), 0);
    transition: transform 170ms ease-out, box-shadow 250ms var(--motion-ease), background 250ms ease;
  }

  .motion-ready [data-magnetic]:hover {
    transform: translate3d(var(--magnetic-x), var(--magnetic-y), 0);
    box-shadow: 5px 5px 0 var(--ink);
  }

  .motion-ready [data-magnetic] .button-arrow {
    transform: translate3d(var(--arrow-x, 0), var(--arrow-y, 0), 0);
  }
}

/* Branded page transition ---------------------------------------------- */
.page-transition {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  visibility: hidden;
  pointer-events: none;
}

.page-transition-panel {
  background: var(--indigo);
  transform: translate3d(0, 105%, 0);
  transition: transform 220ms var(--motion-ease-in);
}
.page-transition-panel:nth-child(2) { background: var(--lavender); transform: translate3d(0, -105%, 0); transition-delay: 25ms; }
.page-transition-panel:nth-child(3) { background: var(--ink); transition-delay: 50ms; }

.page-transition.is-covering,
.page-transition.is-revealing { visibility: visible; }
.page-transition.is-covering { pointer-events: auto; }
.page-transition.is-covering .page-transition-panel { transform: translate3d(0, 0, 0); }
.page-transition.no-transition .page-transition-panel { transition: none; }

/* One restrained ambient line per CTA; paused outside the viewport. */
.motion-ready .cta-frame::after {
  content: "";
  position: absolute;
  left: -48%;
  top: -2px;
  width: 46%;
  height: 4px;
  background: rgba(79,70,229,.18);
  animation: cta-frame-track 14s linear infinite;
  animation-play-state: paused;
}
.motion-ready .cta-band.orbit-active .cta-frame::after { animation-play-state: running; }
@keyframes cta-frame-track {
  0% { transform: translateX(0); }
  54%, 100% { transform: translateX(330%); }
}

.motion-ready .next-flow-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 38px;
  height: 4px;
  background: var(--indigo);
  transform: translate3d(-100%, -50%, 0);
  animation: next-flow-track 12s linear infinite;
  animation-play-state: paused;
}
.motion-ready .contact-next-art.ambient-active .next-flow-line::after { animation-play-state: running; }
@keyframes next-flow-track {
  0% { transform: translate3d(-100%, -50%, 0); }
  55%, 100% { transform: translate3d(690%, -50%, 0); }
}

@media (hover: none), (pointer: coarse) {
  .preview-control { display: block; }
}

@media (max-width: 820px) {
  .bento-visual { width: 96px; opacity: .62; }
  .motion-ready .process-sticky { position: static; }
  .motion-ready .process-art { display: none; }
  .motion-ready .process-steps .step { opacity: .5; transition: opacity 380ms ease, background 380ms ease; }
  .motion-ready .process-steps .step.is-active { opacity: 1; background: #151f34; }
}

@media (max-width: 540px) {
  .bento-visual { right: 22px; top: 22px; width: 76px; }
  .preview-label { right: 10px; top: 10px; }
  .preview-control { right: 10px; bottom: 10px; }
  .page-transition { grid-template-columns: repeat(2, 1fr); }
  .page-transition-panel:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.transition-pending body { visibility: visible; }
  .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  .motion-ready [data-mask-reveal].mask-armed::before { display: none; }
  .motion-ready [data-mask-reveal] img { clip-path: none; transform: none !important; opacity: 1; }
  .motion-ready .hero[data-hero-motion] [data-hero-layer],
  .motion-ready [data-geometry-motion] [data-geometry-layer],
  .motion-ready .bento-visual,
  .motion-ready .bento-visual *,
  .motion-ready .process-steps .step,
  .motion-ready .cta-orbit,
  .motion-ready [data-magnetic],
  .motion-ready [data-magnetic] .button-arrow { transform: none !important; opacity: 1; transition: none !important; }
  .motion-ready .process-sticky { position: static; min-height: 0; }
  .motion-ready .process-layout { display: block; }
  .motion-ready .process-art { display: none; }
  .motion-ready .process-steps.steps { display: grid; grid-template-columns: repeat(4, 1fr); }
  .motion-ready .process-steps .step { min-height: 320px; }
  .page-transition { display: none; }
  [data-ambient-motion] .art-outline::after,
  .motion-ready .cta-frame::after,
  .motion-ready .next-flow-line::after { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 820px) {
  .motion-ready .process-steps.steps { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 540px) {
  .motion-ready .process-steps.steps { grid-template-columns: 1fr; }
}