/* Delivery model (owner, 2026-11-04): one animated piece in the slot where the
   topic picker used to sit — five slides that tell the multi-agent delivery
   story. Same tokens as the rest of the page (ink, soft, accent, Spectral /
   Public Sans). Vanilla CSS; assets/delivery-model.js drives the rotation. */

.dm{background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(44px,6vw,76px) 24px clamp(36px,5vw,60px)}
.dm-in{max-width:1080px;margin:0 auto}
.dm-head{text-align:center;margin:0 0 26px}
.dm-head .sh-kicker{color:var(--accent);margin-bottom:10px}
.dm-head h2{font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.02em;
  margin:0 auto;max-width:26ch;text-wrap:balance}
.dm-head .dm-lede{margin:12px auto 0;max-width:62ch;font:16px/1.6 var(--ui);color:var(--body)}

/* The stage stacks every slide in one grid cell, so the band keeps one height
   while slides cross-fade. */
.dm-stage{display:grid}
.dm-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,4vw,48px);align-items:center;
  background:var(--soft);border:1px solid var(--rule);border-radius:18px;
  padding:clamp(22px,3.4vw,38px) clamp(20px,3.4vw,42px);
  opacity:1;visibility:visible;transition:opacity .45s ease,visibility .45s ease}
.dm-slide[aria-hidden="true"]{opacity:0;visibility:hidden;pointer-events:none}
.dm-art{min-width:0}
.dm-art svg{display:block;width:100%;height:auto;max-width:460px;margin:0 auto}
.dm-copy{min-width:0;text-align:left}
.dm-num{margin:0 0 8px;font:600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dmc,#0A66C2)}
.dm-copy h3{margin:0 0 10px;font:600 clamp(20px,2.4vw,26px)/1.22 var(--display);
  color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
.dm-copy p:last-child{margin:0;font:16px/1.65 var(--ui);color:#474747;max-width:52ch}
.dm-slide[data-slide="envision"]{--dmc:#0A66C2}
.dm-slide[data-slide="blueprint"]{--dmc:#E07A2E}
.dm-slide[data-slide="mobilize"]{--dmc:#7C5CFF}
.dm-slide[data-slide="execute"]{--dmc:#1F9D74}
.dm-slide[data-slide="release"]{--dmc:#0A66C2}

/* Controls: a pause toggle and one dot per slide. The dots are real buttons
   with full-size tap targets; the visible disc is smaller than the target. */
.dm-ctl{display:flex;align-items:center;justify-content:center;gap:4px;margin:14px 0 0;min-height:44px}
.dm-ctl[hidden]{display:none}
.dm-dot{flex:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0}
.dm-dot::before{content:"";width:10px;height:10px;border-radius:50%;
  background:transparent;border:2px solid #767676;transition:background .2s ease,border-color .2s ease}
.dm-dot:hover::before{border-color:var(--ink)}
.dm-dot:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
.dm-dot[aria-current="true"]::before{background:var(--accent);border-color:var(--accent)}
.dm-pause{flex:none;min-width:44px;min-height:44px;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  color:#595959;padding:0;margin-right:6px}
.dm-pause svg{width:18px;height:18px;fill:currentColor;display:block}
.dm-pause:hover,.dm-pause:focus-visible{color:var(--ink);background:var(--soft)}
.dm-pause:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}

/* Slide art motion. Each animation is keyed on the slide being current, so it
   replays when the slide comes round again. Decorative only. */
.dm-slide.is-on .dm-a-pulse{animation:dmPulse 2.6s ease-out infinite}
@keyframes dmPulse{0%{transform:scale(.62);opacity:.85}70%{transform:scale(1.18);opacity:0}100%{transform:scale(1.18);opacity:0}}
.dm-a-pulse{transform-origin:center;transform-box:fill-box}
.dm-slide.is-on .dm-a-car{animation:dmSlideIn .7s ease-out both}
.dm-slide.is-on .dm-a-car2{animation:dmSlideIn .7s .25s ease-out both}
.dm-slide.is-on .dm-a-car3{animation:dmSlideIn .7s .5s ease-out both}
@keyframes dmSlideIn{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}
.dm-a-dash{stroke-dasharray:4 5}
.dm-slide.is-on .dm-a-dash{animation:dmDash 1.6s linear infinite}
@keyframes dmDash{to{stroke-dashoffset:-18}}
.dm-slide.is-on .dm-a-glow{animation:dmGlow 1.1s ease-out both}
.dm-slide.is-on .dm-a-glow2{animation:dmGlow 1.1s .3s ease-out both}
.dm-slide.is-on .dm-a-glow3{animation:dmGlow 1.1s .6s ease-out both}
.dm-slide.is-on .dm-a-glow4{animation:dmGlow 1.1s .9s ease-out both}
@keyframes dmGlow{from{opacity:.25}to{opacity:1}}
.dm-a-fill{transform-origin:left center;transform-box:fill-box;transform:scaleX(1)}
.dm-slide.is-on .dm-a-fill{animation:dmFill 2.4s ease-out both}
.dm-slide.is-on .dm-a-fill2{animation:dmFill 3s .15s ease-out both}
.dm-slide.is-on .dm-a-fill3{animation:dmFill 2.7s .3s ease-out both}
.dm-slide.is-on .dm-a-fill4{animation:dmFill 3.2s .45s ease-out both}
@keyframes dmFill{from{transform:scaleX(.12)}to{transform:scaleX(1)}}
.dm-slide.is-on .dm-a-tick{animation:dmTick 2s ease-in-out infinite}
@keyframes dmTick{0%,100%{opacity:.35}50%{opacity:1}}
.dm-slide.is-on .dm-a-rise{animation:dmRise 1.4s ease-out both}
@keyframes dmRise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

@media (max-width:860px){
  .dm-slide{grid-template-columns:1fr;text-align:center}
  .dm-copy{text-align:center}
  .dm-copy p:last-child{margin:0 auto}
  .dm-copy h3{margin-left:auto;margin-right:auto}
  .dm-art svg{max-width:380px}
}
@media (max-width:420px){
  .dm{padding-left:16px;padding-right:16px}
  .dm-slide{padding:18px 16px 20px}
  .dm-art svg{max-width:300px}
}

/* Reduced motion: no cross-fade, no slide art motion. delivery-model.js also
   switches auto-advance off; the dots still work by hand. */
@media (prefers-reduced-motion:reduce){
  .dm-slide{transition:none}
  .dm-slide.is-on .dm-a-pulse,.dm-slide.is-on .dm-a-car,.dm-slide.is-on .dm-a-car2,
  .dm-slide.is-on .dm-a-car3,.dm-slide.is-on .dm-a-dash,.dm-slide.is-on .dm-a-glow,
  .dm-slide.is-on .dm-a-glow2,.dm-slide.is-on .dm-a-glow3,.dm-slide.is-on .dm-a-glow4,
  .dm-slide.is-on .dm-a-fill,.dm-slide.is-on .dm-a-fill2,.dm-slide.is-on .dm-a-fill3,
  .dm-slide.is-on .dm-a-fill4,.dm-slide.is-on .dm-a-tick,.dm-slide.is-on .dm-a-rise{animation:none}
}