.service-scene {
  --scene-surface: var(--panel);
  --scene-ink: var(--ink);
  --scene-sage: #343e2e;
  --scene-line: #657158;
  --scene-solid: #11140f;
  --scene-on-accent: var(--bg);
  margin: 0 0 54px;
  background: var(--bg);
  color: var(--scene-ink);
  overflow: hidden;
  isolation: isolate;
}
.service-scene > svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; overflow: hidden; }
.service-scene .scene-card { fill: var(--scene-surface); stroke: var(--scene-line); stroke-width: 1; }
.service-scene .scene-outline { fill: none; stroke: var(--scene-line); stroke-width: 1; }
.service-scene .scene-sage { fill: var(--scene-sage); }
.service-scene .scene-muted-fill { fill: #46513c; }
.service-scene .scene-quiet { fill: #6d785e; }
.service-scene .scene-accent { fill: #d4f76a; }
.service-scene .scene-ink-fill { fill: var(--scene-ink); }
.service-scene .scene-solid-fill { fill: var(--scene-solid); }
.service-scene .scene-rule { fill: var(--scene-line); }
.service-scene .scene-line,.service-scene .scene-ink-line { fill: none; stroke: var(--scene-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.service-scene .scene-connector { fill: none; stroke: var(--scene-line); stroke-width: 1.4; }
.service-scene text { fill: var(--scene-ink); font: 400 24px/1.1 var(--label); }
.service-scene .scene-on-accent :is(text,.scene-ink-fill) { fill: var(--scene-on-accent); }
.service-scene .scene-on-accent :is(.scene-outline,.scene-ink-line) { stroke: var(--scene-on-accent); }
.service-scene .scene-small { font-size: 18px; }
.service-scene .scene-heading { font-size: 25px; letter-spacing: -.4px; }
.service-scene .scene-title { font: 500 34px var(--display); letter-spacing: -1.2px; }
.service-scene .scene-quote { font: 500 133px var(--display); fill: #7f9565; }
.service-scene figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 25px 19px; border-top: 1px solid var(--line); font: 400 15px/1.4 var(--label); }
.service-scene figcaption > :first-child { font-size: 11px; letter-spacing: .4px; flex-shrink: 0; color: var(--muted); }
.service-scene figcaption > :last-child { text-align: right; }
.service-scene .scene-flow-dot { fill: var(--scene-on-accent); stroke: var(--lime); stroke-width: 1.5; }
.service-scene.is-active .scene-arrive { animation: serviceSceneArrive 1.2s cubic-bezier(.2,.75,.25,1) both; }
.service-scene.is-active .scene-arrive--left { animation-delay: .06s; }
.service-scene.is-active .scene-arrive--core { animation-delay: .16s; }
.service-scene.is-active .scene-arrive--right { animation-delay: .28s; }
.service-scene.is-active .scene-step { animation: serviceSceneStep 1s cubic-bezier(.2,.75,.25,1) both; animation-delay: calc(.3s + var(--scene-delay,0ms)); }
.service-scene.is-active .scene-draw { stroke-dasharray: 1000; stroke-dashoffset: 0; animation: serviceSceneDraw 2.8s ease both; }
.service-scene.is-active .scene-flow-dot { animation: serviceSceneFlow 3s cubic-bezier(.4,0,.3,1) both; }
.service-scene.is-suspended :is(.scene-arrive,.scene-step,.scene-draw,.scene-flow-dot) { animation-play-state: paused; }
@keyframes serviceSceneArrive { from { opacity: .15; translate: 0 13px; } to { opacity: 1; translate: 0 0; } }
@keyframes serviceSceneStep { from { opacity: .3; translate: 14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes serviceSceneDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes serviceSceneFlow { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { translate: 309px 0; opacity: 0; } }
@media (max-width: 680px) {
  .service-scene { margin-bottom: 36px; }
  .service-scene figcaption { padding: 14px 17px 17px; gap: 16px; font-size: 14px; }
  .service-scene figcaption > :first-child { font-size: 9px; }
  .service-scene figcaption > :last-child { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-scene.is-active :is(.scene-arrive,.scene-step,.scene-draw,.scene-flow-dot) { animation: none; }
  .service-scene .scene-flow-dot { display: none; }
}