/* An open, eight-second motion story: no tabs or outer card. */
.ms-about {
  --about-ink: #10264d;
  --about-blue: #0f63ff;
  margin-top: clamp(5rem, 9vw, 8rem);
  color: var(--about-ink);
}
.ms-about *, .ms-about *::before, .ms-about *::after { box-sizing: border-box; }
.ms-about-header { margin-bottom: 1.4rem; }
.ms-about-eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; color: #1757b8; font-size: .71rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ms-about-eyebrow::before { content: ''; width: 1.5rem; height: 2px; background: #ef2f63; }
.ms-showcase { position: relative; }
.ms-about button:focus-visible { outline: 3px solid #0f63ff; outline-offset: 4px; }
.ms-panel { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; min-height: 26rem; }
.ms-panel[hidden] { display: none; }
.ms-panel-copy { padding: 2rem 2rem 2rem 0; }
.ms-service-kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.3rem; color: #526581; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ms-service-kicker::before { content: ''; width: .4rem; height: .4rem; flex: none; border-radius: 50%; background: #ef2f63; }
.ms-panel h3 { max-width: 29rem; margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 800; line-height: 1.22; letter-spacing: -.045em; }
.ms-visual { position: relative; min-width: 0; margin: 0; overflow: hidden; background: radial-gradient(ellipse at 55% 50%, #e0edffb3, transparent 70%); }
.ms-visual::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#6491cc33 .8px, transparent .8px); background-size: 22px 22px; pointer-events: none; mask-image: radial-gradient(ellipse, #000 20%, transparent 70%); }
.ms-motion-art { position: relative; display: block; width: 100%; max-height: 26rem; height: auto; overflow: visible; }
.ms-motion-art text { font-family: 'Inter', sans-serif; fill: #20385e; }
.ms-motion-art .ms-svg-label { fill: #526b8c; font-size: 10px; font-weight: 500; }
.ms-motion-art .ms-svg-small { font-size: 11px; font-weight: 600; }
.ms-motion-art .ms-svg-title { font-size: 14px; font-weight: 700; }
.ms-motion-art .ms-svg-white { fill: #fff; }
.ms-motion-art .ms-svg-blue { fill: #0f63ff; }
.ms-motion-art .ms-svg-green { fill: #138469; }
.ms-motion-art .ms-svg-pink { fill: #cf275c; }
.ms-playback { display: none; align-items: center; gap: .55rem; min-height: 2.75rem; margin-top: .75rem; }
.ms-about.is-enhanced .ms-playback { display: flex; }
.ms-scene-nav { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; min-height: 2.75rem; padding: .5rem; border: 0; border-radius: .6rem; color: #425d7c; background: transparent; cursor: pointer; }
.ms-scene-nav:hover { color: #0f63ff; background: #e5eeff80; }
.ms-scene-nav svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Purposeful loops: route tracing, stock scanning, order flow, and report growth. */
.ms-about .ms-float { animation: ms-about-float 8s ease-in-out infinite; }
.ms-about .ms-float-late { animation: ms-about-float 8s -4s ease-in-out infinite; }
.ms-about .ms-route-flow { stroke-dasharray: 7 10; animation: ms-about-flow 3s linear infinite; }
.ms-about .ms-route-draw { stroke-dasharray: 1; animation: ms-about-route 8s ease-in-out infinite; }
.ms-about .ms-pulse { transform-box: fill-box; transform-origin: center; animation: ms-about-pulse 3.5s ease-out infinite; }
.ms-about .ms-scan { animation: ms-about-scan 8s ease-in-out infinite; }
.ms-about .ms-bar { transform-box: fill-box; transform-origin: center bottom; animation: ms-about-bar 8s ease-in-out infinite; animation-delay: var(--ms-delay, 0s); }
.ms-about .ms-check { stroke-dasharray: 1; animation: ms-about-check 8s ease-in-out infinite; animation-delay: var(--ms-delay, 0s); }
.ms-about .ms-dot { animation: ms-about-dot 1.8s ease-in-out infinite; animation-delay: var(--ms-delay, 0s); }
.ms-about .ms-packet { animation: ms-about-packet 8s ease-in-out infinite; }
.ms-about .ms-panel.is-active { animation: ms-about-scene var(--ms-scene-duration, 8000ms) ease-in-out both; }
.ms-about *, .ms-about *::before, .ms-about *::after { animation-play-state: paused !important; }
.ms-about[data-motion='running'] .ms-panel.is-active,
.ms-about[data-motion='running'] .ms-panel.is-active *,
.ms-about[data-motion='running'] .ms-panel.is-active *::before,
.ms-about[data-motion='running'] .ms-panel.is-active *::after { animation-play-state: running !important; }
@keyframes ms-about-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ms-about-flow { to { stroke-dashoffset: -68; } }
@keyframes ms-about-route { 0%, 10% { stroke-dashoffset: 1; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes ms-about-pulse { 0% { transform: scale(.85); opacity: .65; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes ms-about-scan { 0%, 100% { transform: translateY(0); opacity: 0; } 12% { opacity: .65; } 75% { transform: translateY(120px); opacity: .65; } 85% { transform: translateY(120px); opacity: 0; } }
@keyframes ms-about-bar { 0%, 100% { transform: scaleY(.65); } 45%, 75% { transform: scaleY(1); } }
@keyframes ms-about-check { 0%, 12% { stroke-dashoffset: 1; } 35%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes ms-about-dot { 0%, 70%, 100% { opacity: .3; } 35% { opacity: 1; } }
@keyframes ms-about-packet { 0%, 10% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 75% { transform: translateX(120px); opacity: 1; } 90%, 100% { transform: translateX(120px); opacity: 0; } }
/* Each eight-second scene includes a 600ms entrance and a 600ms exit. */
@keyframes ms-about-scene { 0%, 100% { opacity: 0; } 7.5%, 92.5% { opacity: 1; } }
@media (min-width: 1600px) { .ms-about { max-width: 1440px; margin-left: auto; margin-right: auto; } }
@media (max-width: 1000px) {
  .ms-panel { grid-template-columns: .9fr 1.1fr; min-height: 23rem; }
  .ms-panel-copy { padding-right: 1.25rem; }
}
@media (max-width: 760px) {
  .ms-about-header { margin-bottom: 2rem; }
  .ms-panel { grid-template-columns: 1fr; }
  .ms-panel-copy { display: flex; flex-direction: column; justify-content: center; min-height: 10.5rem; padding: 0; }
  .ms-panel h3 { max-width: 100%; font-size: clamp(1.65rem, 5.5vw, 2.3rem); }
  .ms-service-kicker { margin-bottom: .9rem; font-size: .62rem; }
  .ms-visual { display: flex; align-items: center; justify-content: center; min-height: 16rem; }
  .ms-motion-art { max-height: 21rem; }
  .ms-playback { margin-top: 0; gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-about *, .ms-about *::before, .ms-about *::after { animation: none !important; transition: none !important; }
  /* Freeze the fade clock while keeping the current scene fully readable. */
  .ms-about .ms-panel.is-active { animation: ms-about-scene var(--ms-scene-duration, 8000ms) ease-in-out both !important; animation-play-state: paused !important; opacity: 1 !important; }
  .ms-about .ms-pulse, .ms-about .ms-scan, .ms-about .ms-packet { display: none; }
}