/* =====================================================================
   Motion diagrams and interactive explainers
   Used by every expertise page with assets/js/motion.js.
   Colours come from the tokens in brand.css.
   ===================================================================== */

/* Frame: diagram stage on the left, step panel on the right */
.motion{margin:0;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}
.motion.wide{grid-template-columns:1fr}
.motion.wide .motion-svg{max-width:960px;margin:0 auto}
.motion.wide .motion-stage{border-right:0;border-bottom:1px solid var(--line)}
.motion-stage{position:relative;min-width:0;background:linear-gradient(180deg,#FCFDFE,#F3F6FA);border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.motion-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:16px}
.motion-svg{display:block;width:100%;height:auto;min-width:600px}
.motion-hint{display:none;margin:0 16px 12px;font-size:.78rem;color:var(--subtle)}
.motion-panel{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;min-width:0}
.motion-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.motion-count{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.motion-ctrl{display:flex;gap:6px}
.motion-ctrl button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.motion-ctrl button:hover{border-color:var(--orange);color:var(--orange-strong)}
.motion-ctrl svg{width:16px;height:16px}
.m-play .i-pause{display:none}
.m-play.is-playing .i-play{display:none}
.m-play.is-playing .i-pause{display:block}
.m-play.is-playing{background:var(--orange-tint);border-color:var(--orange-border);color:var(--orange-strong)}

/* Step list: every step title is a button, the active one opens */
.motion-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:ms}
.motion-steps li{counter-increment:ms;position:relative;border:1px solid transparent;border-radius:12px;transition:background-color .2s ease,border-color .2s ease}
.motion-steps li.is-active{background:#FFF8F1;border-color:var(--orange-border)}
.m-step{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;background:none;font:inherit;font-size:.93rem;font-weight:600;color:var(--muted);text-align:left;cursor:pointer;border-radius:12px}
.m-step:hover{color:var(--ink)}
.m-step::before{content:counter(ms);flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;background:var(--surface-2);color:var(--subtle);border:1px solid var(--line)}
.motion-steps li.is-active .m-step{color:var(--ink)}
.motion-steps li.is-active .m-step::before{background:var(--orange);border-color:var(--orange);color:#fff}
.motion-steps p{margin:0;padding:0 14px 14px 46px;font-size:.9rem;line-height:1.6;color:var(--text)}
.motion-ready .motion-steps p{display:none}
.motion-ready .motion-steps li.is-active p{display:block}
.motion-timer{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.motion-timer::after{content:"";display:block;height:100%;width:0;background:var(--orange);opacity:.55}
.motion-timer.run::after{animation:m-timer linear forwards;animation-duration:inherit}
@keyframes m-timer{from{width:0}to{width:100%}}
.motion-note{font-size:.92rem;line-height:1.6;color:var(--text)}
.motion-note b{color:var(--ink)}
.motion-note + .motion-note{margin-top:0}

/* States: a segmented switch, same look as the tabs */
.motion-states{display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:fit-content;max-width:100%}
.motion-states button{font:inherit;font-size:.86rem;font-weight:600;padding:.5rem .9rem;border-radius:.65rem;border:0;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.motion-states button:hover{color:var(--ink)}
.motion-states button[aria-pressed="true"]{background:var(--orange-tint);color:var(--orange-strong);box-shadow:inset 0 0 0 1px var(--orange-border)}

/* Animated element states (only once the script is running) */
.motion-ready [data-show]{transition:opacity .45s ease}
.motion-ready .m-off{opacity:0!important;pointer-events:none}
.motion-ready .m-off,.motion-ready .m-off *{animation:none!important}
.motion-ready .motion-panel .m-off{display:none}
.motion-ready .m-dim{opacity:.22}
.pkt{opacity:0}
.motion:not(.motion-ready) .pkt,.is-still .pkt{display:none}

/* Without the script: show the first step as a still picture, and hide controls that would do nothing.
   The build marks every element that is not in the first step with m-off. */
.motion:not(.motion-ready) .m-off{display:none}
.motion:not(.motion-ready) .motion-states,.motion:not(.motion-ready) .motion-ctrl,.motion:not(.motion-ready) .motion-count,.motion:not(.motion-ready) .motion-timer{display:none}
.motion:not(.motion-ready) .m-step{cursor:default;pointer-events:none;color:var(--ink)}

/* Diagram vocabulary: use these classes inside every motion SVG */
.motion-svg text{font-family:var(--font-body);dominant-baseline:central}
.motion-svg .t{font-size:15px;font-weight:600;fill:var(--ink);text-anchor:middle}
.motion-svg .s{font-family:var(--font-mono);font-size:12px;fill:var(--subtle);text-anchor:middle}
.motion-svg .cap{font-size:13px;fill:var(--muted)}
.motion-svg .h{font-size:12px;font-weight:700;letter-spacing:.12em;fill:var(--subtle);text-transform:uppercase}
.motion-svg .lbl{font-family:var(--font-mono);font-size:12px;font-weight:500;fill:var(--muted);text-anchor:middle;paint-order:stroke;stroke:#F6F8FB;stroke-width:5px;stroke-linejoin:round}
.motion-svg .lbl.o{fill:var(--orange-strong)}
.motion-svg .lbl.c{fill:var(--cyan-strong)}
.motion-svg .lbl.p{fill:var(--purple-strong)}
.motion-svg .lbl.r{fill:#BE123C}
.motion-svg .lbl.g{fill:#15803D}
.motion-svg .start{text-anchor:start}
.motion-svg .end{text-anchor:end}
/* nodes */
.n rect,.n circle,.n path.shape{fill:#fff;stroke:var(--line-strong);stroke-width:1.5;transition:stroke .3s ease,fill .3s ease}
.n.dark rect,.n.dark circle{fill:var(--navy);stroke:var(--navy)}
.n.dark .t{fill:#fff}
.n.dark .s{fill:#A5B4C8}
.n.orange rect,.n.orange circle{fill:#FFF7ED;stroke:var(--orange)}
.n.cyan rect,.n.cyan circle{fill:var(--cyan-tint);stroke:var(--cyan)}
.n.purple rect,.n.purple circle{fill:#F5F3FF;stroke:var(--purple)}
.n.pink rect,.n.pink circle{fill:#FDF4FF;stroke:var(--pink)}
.n.teal rect,.n.teal circle{fill:#F0FDFA;stroke:var(--teal)}
.n.blue rect,.n.blue circle{fill:#EFF6FF;stroke:var(--blue)}
.n.slate rect,.n.slate circle{fill:var(--surface-2);stroke:var(--subtle)}
.n.red rect,.n.red circle{fill:#FFF1F2;stroke:#E11D48}
.n.m-hl rect,.n.m-hl circle,.n.m-hl path.shape{stroke:var(--orange);stroke-width:2.5;filter:drop-shadow(0 0 8px rgba(249,115,22,.35))}
.n.dark.m-hl rect{stroke:var(--orange)}
/* zones and regions */
.zone{fill:rgba(255,255,255,.6);stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:6 6}
.zone.cyan{fill:rgba(236,254,255,.7);stroke:var(--cyan-border)}
.zone.orange{fill:rgba(255,247,237,.75);stroke:#FDBA74}
.zone.purple{fill:rgba(245,243,255,.8);stroke:#C4B5FD}
.zone.pink{fill:rgba(253,244,255,.8);stroke:#F0ABFC}
.zone.teal{fill:rgba(240,253,250,.8);stroke:#99F6E4}
.zone.slate{fill:rgba(241,245,249,.8);stroke:var(--line-strong)}
.zone.red{fill:rgba(255,241,242,.8);stroke:#FDA4AF}
.zone.solid{stroke-dasharray:none}
.zone.m-hl{stroke:var(--orange);stroke-width:2.5;stroke-dasharray:none}
.zl{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;fill:var(--subtle)}
.zl.c{fill:var(--cyan-strong)}.zl.o{fill:var(--orange-strong)}.zl.p{fill:var(--purple-strong)}.zl.k{fill:#A21CAF}.zl.tl{fill:var(--teal-strong)}.zl.r{fill:#BE123C}
/* links */
.ln{fill:none;stroke:#CBD5E1;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.ln.thick{stroke-width:4}
.ln.thin{stroke-width:1.5}
.ln.dash{stroke-dasharray:7 6}
.ln.dot{stroke-dasharray:2 5}
.ln.orange{stroke:var(--orange)}
.ln.cyan{stroke:var(--cyan)}
.ln.cyan-d{stroke:var(--cyan-strong)}
.ln.purple{stroke:var(--purple)}
.ln.pink{stroke:var(--pink)}
.ln.teal{stroke:var(--teal)}
.ln.blue{stroke:var(--blue)}
.ln.slate{stroke:var(--subtle)}
.ln.red{stroke:#E11D48}
.ln.green{stroke:#16A34A}
.ln.navy{stroke:var(--navy)}
.ln.m-hl{stroke:var(--orange);stroke-width:3.5}
.route{fill:none;stroke:none}
/* tunnels drawn as moving dashes */
.flow{stroke-dasharray:10 8;animation:m-flow 1.2s linear infinite}
@keyframes m-flow{to{stroke-dashoffset:-18}}
.is-still .flow,.motion:not(.is-running) .flow{animation:none}
/* small pills and markers inside diagrams */
.tag rect{fill:#fff;stroke:var(--line-strong)}
.tag text{font-size:12px;font-weight:600;fill:var(--text);text-anchor:middle}
.tag.orange rect{fill:#FFEDD5;stroke:#FED7AA}.tag.orange text{fill:#9A3412}
.tag.cyan rect{fill:#CFFAFE;stroke:#A5F3FC}.tag.cyan text{fill:#155E75}
.tag.purple rect{fill:#F3E8FF;stroke:#E9D5FF}.tag.purple text{fill:#6B21A8}
.tag.pink rect{fill:#FAE8FF;stroke:#F5D0FE}.tag.pink text{fill:#86198F}
.tag.teal rect{fill:#CCFBF1;stroke:#99F6E4}.tag.teal text{fill:#115E59}
.tag.green rect{fill:#DCFCE7;stroke:#BBF7D0}.tag.green text{fill:#166534}
.tag.red rect{fill:#FFE4E6;stroke:#FECDD3}.tag.red text{fill:#9F1239}
.tag.dark rect{fill:var(--navy);stroke:var(--navy)}.tag.dark text{fill:#fff}
.xmark{stroke:#E11D48;stroke-width:4;stroke-linecap:round}
.tick{stroke:#16A34A;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.pulse{transform-box:fill-box;transform-origin:center;animation:m-pulse 1.8s ease-out infinite}
@keyframes m-pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.is-still .pulse,.motion:not(.is-running) .pulse{animation:none;opacity:0}
/* packets */
.pkt circle{stroke:#fff;stroke-width:2}
.p-orange{fill:var(--orange)}.p-cyan{fill:var(--cyan)}.p-purple{fill:var(--purple)}.p-pink{fill:var(--pink)}
.p-teal{fill:var(--teal)}.p-blue{fill:var(--blue)}.p-red{fill:#E11D48}.p-green{fill:#16A34A}.p-navy{fill:var(--navy)}.p-slate{fill:var(--subtle)}
.pkt text{font-size:10px;font-weight:700;fill:#fff;text-anchor:middle}

/* Explainer blocks around the diagrams */
.explain{display:grid;gap:22px}
.explain + .explain{margin-top:28px}
.key-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.key-points .card h3{font-size:var(--fs-h4)}
.legend-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0 0;padding:0;list-style:none;font-size:.85rem;color:var(--muted)}
.legend-row li{display:flex;align-items:center;gap:8px}
.legend-row i{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-strong)}
.legend-row i.line{width:26px;height:0;border:0;border-top:3px solid;border-radius:0;box-shadow:none}
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.proof .card{border-left:4px solid var(--orange)}
.proof .where{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-strong);margin-bottom:6px}
.compare{width:100%}
.compare td:first-child{font-weight:600;color:var(--ink)}
.principles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;counter-reset:pr}
.principles li{position:relative;padding:12px 14px 12px 50px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);counter-increment:pr;font-size:.95rem}
.principles li::before{content:counter(pr);position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;background:var(--orange-tint);color:var(--orange-strong);border:1px solid var(--orange-border)}
.principles b{color:var(--ink)}

/* Simulator controls */
.sim{display:grid;gap:14px}
.sim-row{display:grid;grid-template-columns:110px 1fr 64px;align-items:center;gap:10px;font-size:.88rem}
.sim-row label{font-weight:600;color:var(--ink)}
.sim-row output{font-family:var(--font-mono);font-size:.82rem;color:var(--teal-strong);text-align:right}
.sim input[type=range]{width:100%;accent-color:var(--orange)}
.sim-presets{display:flex;flex-wrap:wrap;gap:6px}
.sim-presets button{font:inherit;font-size:.8rem;font-weight:600;padding:6px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);cursor:pointer}
.sim-presets button:hover,.sim-presets button[aria-pressed="true"]{border-color:var(--orange-border);background:var(--orange-tint);color:var(--orange-strong)}
.sim-out{width:100%;border-collapse:collapse;font-size:.84rem}
.sim-out th,.sim-out td{padding:7px 8px;border-bottom:1px solid #EEF2F6;text-align:left}
.sim-out th{font-size:.7rem}
.sim-group{border:1px solid var(--line);border-radius:12px;padding:12px}
.sim-group .sim-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-body);font-size:.75rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);margin:0 0 8px}
.sim-switch{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer}
.sim-switch input{accent-color:var(--orange)}
.sim-lab{font-weight:600;color:var(--ink)}

@media (max-width:980px){
  .motion{grid-template-columns:1fr}
  .motion-stage{border-right:0;border-bottom:1px solid var(--line)}
  .key-points{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .motion-hint{display:block}
  .motion-scroll{padding:12px}
  .key-points,.proof,.principles{grid-template-columns:1fr}
  .sim-row{grid-template-columns:90px 1fr 56px}
}
@media (prefers-reduced-motion:reduce){
  .flow,.pulse{animation:none}
  .motion-ready [data-show]{transition:none}
}

/* Hero illustration on navy */
.hero-art{position:relative;margin:0;border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.12);background:radial-gradient(420px 260px at 70% 10%,rgba(249,115,22,.12),transparent 70%),rgba(255,255,255,.03);box-shadow:var(--shadow-lg);overflow:hidden}
.hero-art .motion-svg{min-width:0;padding:10px}
.hero-art .n rect,.hero-art .n circle{fill:rgba(30,41,59,.92);stroke:rgba(255,255,255,.22)}
.hero-art .n.orange rect{stroke:var(--orange)}.hero-art .n.cyan rect{stroke:var(--cyan)}.hero-art .n.purple rect{stroke:var(--purple)}.hero-art .n.teal rect{stroke:var(--teal)}.hero-art .n.pink rect{stroke:var(--pink)}
.hero-art .t{fill:#fff}
.hero-art .s{fill:#94A3B8}
.hero-art .ln{stroke:rgba(255,255,255,.16)}
.hero-art .ln.orange{stroke:var(--orange)}.hero-art .ln.cyan{stroke:var(--cyan)}.hero-art .ln.purple{stroke:var(--purple)}.hero-art .ln.teal{stroke:var(--teal)}.hero-art .ln.pink{stroke:var(--pink)}
.hero-art .lbl{fill:#CBD5E1;stroke:#121226}
.hero-art .zl{fill:#94A3B8}
.hero-art .zone{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.18)}
.hero-art .pkt circle{stroke:#0D0D1A}
.hero-art figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:.82rem;color:var(--on-dark-muted)}
.hero-art figcaption b{color:#fff;font-weight:600}
.hero-art .m-play{width:32px;height:32px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer}
.hero-art .m-play svg{width:14px;height:14px}
.hero-art .m-play.is-playing{background:rgba(249,115,22,.18);border-color:rgba(249,115,22,.45);color:var(--orange-light)}

/* Page furniture shared by the expertise pages */
.sub-title{font-size:var(--fs-h3);margin:48px 0 18px}
.cred-line{margin-top:22px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);font-size:.95rem;color:var(--muted)}
.cred-line a{font-weight:600;white-space:nowrap}
/* Engagement figure */
.eg-tick{stroke:#16A34A;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.eg-out{font-size:15px;fill:var(--ink);text-anchor:start}
#m-engage .n .t{font-size:13.5px}
#m-engage .n .s{font-size:11px}