#s2-motion{font-family:"Instrument Sans",system-ui,sans-serif}
#s2-motion *{box-sizing:border-box}
#s2-motion .surface{background:#081220;color:#eef4ff;border-radius:16px;padding:28px;--panel:#101f36;--fg:#eef4ff;--muted:#a9bdd6;--cyan:#5fd6ff;--orange:#ff9b68;--amber:#ffb56b;--mono:ui-monospace,monospace}
#s2-motion .eyebrow{color:#70caff;font:11px/1.4 ui-monospace,monospace;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}
#s2-motion h2{font-size:28px;line-height:1.15;letter-spacing:-.6px;margin:0 0 10px;font-weight:700}
#s2-motion p{margin:0;color:#adbed4;font-size:14px;line-height:1.5}
#s2-motion button,#s2-motion summary{font:inherit;font-size:13px;color:#e6efff;background:#112237;border:1px solid #344b64;padding:10px 13px;border-radius:7px;min-height:44px;cursor:pointer}
#s2-motion button:focus-visible,#s2-motion summary:focus-visible{outline:3px solid #ff9b68;outline-offset:3px}
#s2-motion button:disabled{opacity:.45;cursor:default}
#s2-motion button[aria-pressed=true]{background:#dfeeff;border-color:#dfeeff;color:#081220}
#s2-motion .controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:20px 0 0}
#s2-motion .casebar{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 4px}
#s2-motion .board{position:relative;padding:20px 0 24px}
#s2-motion .stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
#s2-motion .nodebox{position:relative;z-index:1;background:#101f34;border:1px solid #30455e;border-radius:11px;padding:17px 14px;min-width:0;transition:border-color .25s,box-shadow .25s}
#s2-motion .role{font:11px/1.4 ui-monospace,monospace;color:#70caff;text-transform:uppercase;letter-spacing:1px}
#s2-motion .nodebox b{display:block;font-size:17px;line-height:1.2;margin:8px 0}
#s2-motion .nodebox p{font-size:13px}
#s2-motion .routes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:65px}
#s2-motion .human .role{color:#ff9b68}
#s2-motion .nodebox.active{border-color:#5fd6ff;box-shadow:0 0 22px #1d7bb42b}
#s2-motion .nodebox.human.active{border-color:#ff9b68;box-shadow:0 0 25px #ff8a3d30}
#s2-motion .nodebox.workflow-complete{border-color:#4ebda2}
#s2-motion .wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#s2-motion .wires path{fill:none;stroke:#34516e;stroke-width:1.6}
#s2-motion .parcel{fill:#80d8ff;stroke:#d6f4ff;stroke-width:1;filter:drop-shadow(0 0 5px #5fd6ff)}
#s2-motion .caption{padding:17px 0;border-block:1px solid #293c54;min-height:82px}
#s2-motion .caption strong{display:block;color:#eef4ff;font-size:15px;margin-bottom:5px}
#s2-motion .decisions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#s2-motion .decisions button:first-child{background:#ffab7b;border-color:#ffab7b;color:#22150e}
#s2-motion .note{font-size:12px;color:#95acc8;margin:14px 0 0}
#s2-motion details{margin-top:24px;border-top:1px solid #293c54;padding-top:20px}
#s2-motion summary{background:transparent;border:0;border-radius:0;padding:8px 0;font-size:15px;color:#82cbff}
#s2-motion .detail-head{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:16px 0}
#s2-motion .detail-head b{font-size:16px}
#s2-motion .detail-controls{display:flex;gap:8px;flex-wrap:wrap}
#s2-motion .legacy svg{width:100%;height:auto;display:block}
#s2-motion .legacy .node{fill:#101f36;stroke:#789fff59;stroke-width:1}
#s2-motion .legacy .node.h{stroke:#ff6a2f;stroke-width:1.5}
#s2-motion .legacy .ntxt{font-family:var(--mono);font-size:10.5px;fill:#eef4ff;letter-spacing:.04em}
#s2-motion .legacy .nsub{font-family:var(--mono);font-size:8.5px;fill:#adbed4}
#s2-motion .legacy .wire{fill:none;stroke:#78aaff4d;stroke-width:1.2}
#s2-motion .legacy .wire.h{stroke:#ff6a2f99}
#s2-motion .legacy .pulse{fill:#5fd6ff;filter:drop-shadow(0 0 6px #5fd6ff)}
#s2-motion .legacy .pulse.o{fill:#ffb56b;filter:drop-shadow(0 0 6px #ffb56b)}
#s2-motion .legacy .ring{fill:none;stroke:#ff6a2f;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:s2-ring 2.4s ease-out infinite;animation-play-state:paused}
#s2-motion .legacy.running .ring{animation-play-state:running}
#s2-motion .mobile-detail{display:none}
#s2-motion [hidden]{display:none!important}
@keyframes s2-ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
@media(max-width:540px){#s2-motion .surface{padding:20px 16px}#s2-motion h2{font-size:25px}#s2-motion .stages{grid-template-columns:1fr;gap:24px}#s2-motion .nodebox{padding:13px 14px}#s2-motion .routes{gap:16px;margin-top:48px}#s2-motion .nodebox b{font-size:16px}#s2-motion .casebar button{flex:1}#s2-motion .mobile-detail{display:block;font-size:13px;color:#adbed4;line-height:1.6;padding-left:20px}}
@media(prefers-reduced-motion:reduce){#s2-motion .nodebox{transition:none}#s2-motion .legacy .ring{animation:none!important}#s2-motion .parcel,#s2-motion .legacy .pulse{display:none}}

/* Integrated layout: detail spans the hero grid; its original drawing remains readable. */
#s2-motion{display:contents;--panel:#101f36;--fg:#eef4ff;--muted:#a9bdd6;--cyan:#5fd6ff;--orange:#ff9b68;--amber:#ffb56b;--mono:ui-monospace,monospace}
#s2-motion .surface{padding:18px 0;background:transparent;border-radius:0;min-width:0}
#s2-motion .surface h2{font-size:22px}
#s2-motion .stages{gap:20px}
#s2-motion .nodebox{padding:13px 10px}
#s2-motion .nodebox b{font-size:15px}
#s2-motion .nodebox p{font-size:12px}
#s2-motion .board{padding-top:14px;padding-bottom:18px}
#s2-motion .routes{margin-top:48px;gap:20px}
#s2-motion .casebar{margin-top:16px}
#s2-motion .controls{margin-top:12px}
#s2-motion .wires{max-height:none;filter:none}
#s2-motion #s2-details{grid-column:1/-1;min-width:0;width:100%;margin:0;padding:12px 0 0;background:transparent;border:0;border-top:1px solid #293c54;border-radius:0}
#s2-motion #s2-details[open]{padding-bottom:20px}
#s2-motion summary{display:list-item;list-style:disclosure-closed}
#s2-motion details[open]>summary{list-style:disclosure-open}
#s2-motion summary::after{content:none}
#s2-motion details p{padding:0;max-width:none}
#s2-motion .legacy{max-width:1000px;margin:auto;overflow-x:auto}
#s2-motion .legacy svg{min-width:740px;max-height:none;filter:none}
#s2-motion .mobile-detail{display:none}
#s2-motion .detail-scroll-hint{display:none}
@media(max-width:740px){#s2-motion .detail-scroll-hint{display:block}}
@media(max-width:540px){#s2-motion .stages{gap:24px}#s2-motion .nodebox{padding:12px 14px}#s2-motion .nodebox p{font-size:13px}}
.process-explainer{display:grid;gap:16px;list-style:none;padding:0;margin:0}
.process-explainer li{border-left:2px solid var(--cyan);padding:8px 0 8px 18px}
.process-explainer b{display:block;font-family:var(--display);font-size:1.1rem;margin-bottom:5px}
.process-explainer p{font-size:.95rem;color:var(--muted);margin:0}
.figure-caption{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted);margin:0 0 18px}
.team-specialists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.team-specialists span{padding-top:12px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.team-specialists b{display:block;color:var(--fg);margin-bottom:5px}
.support-detail{margin-top:22px}
.support-detail svg{display:block;max-width:560px;width:100%;height:auto;margin:18px auto}
.support-detail:not([open]) .scanline,.support-detail:not([open]) .orbit,.support-detail:not([open]) .sat,.support-detail:not([open]) .sat>g>g{animation-play-state:paused}
@media(max-width:540px){.team-specialists{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.scanline,.orbit,.sat,.sat>g>g{animation:none!important}}

/* Keep the hero content-led and use the available desktop width. */
.hero{min-height:0;overflow:clip;padding-block:clamp(32px,4vw,64px) 24px}
.hero .wrap{row-gap:24px}
#services{padding-top:40px}
@media(min-width:1200px){
  :is(.hero,#services,#audit,#process,#playbook,#about)>.wrap{max-width:clamp(1180px,82vw,1800px)}
  .hero h1{font-size:clamp(4rem,4.5vw,6rem)}
  .hero .lead{font-size:clamp(1.15rem,1.2vw,1.4rem)}
  #s2-motion .surface h2{font-size:clamp(24px,1.8vw,32px)}
  #s2-motion .nodebox b{font-size:clamp(15px,1.1vw,20px)}
  #s2-motion .nodebox p{font-size:clamp(13px,.85vw,16px)}
}
#s2-motion #s2-details{padding-top:0;border-top:0}
#s2-motion #s2-details>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;padding:18px 22px;border:1px solid #5b9bd0;border-radius:12px;background:#102a45;color:#e6f3ff;font-size:17px;font-weight:600}
#s2-motion #s2-details>summary::-webkit-details-marker{display:none}
#s2-motion #s2-details>summary::after{content:'+';display:block;font-size:26px;color:#70caff;transform:none}
#s2-motion #s2-details[open]>summary::after{content:'−'}
#s2-motion #s2-details>summary:hover{background:#173854;border-color:#86d6ff}
#s2-motion .detail-label-close{display:none}
#s2-motion #s2-details[open] .detail-label-open{display:none}
#s2-motion #s2-details[open] .detail-label-close{display:inline}

/* Desktop presentation scales with the wider canvas; mobile/tablet stay unchanged.
   Use the original type/spacing ratios rather than stretching text-only cards. */
@media(min-width:1200px){
  :is(#services,#audit,#process,#playbook,#about){--section-unit:clamp(16px,1vw,22px);font-size:calc(1.0625 * var(--section-unit))}
  :is(#services,#audit,#process,#playbook,#about) h2{font-size:calc(3 * var(--section-unit))}
  :is(#services,#audit,#process,#playbook,#about) h3{font-size:calc(1.25 * var(--section-unit))}
  :is(#services,#audit,#process,#playbook,#about) .lead{font-size:calc(1.15 * var(--section-unit))}
  :is(#services,#audit,#process,#playbook,#about) .eyebrow{font-size:calc(.74 * var(--section-unit))}
  .pstep p{font-size:calc(.93 * var(--section-unit))}
  .pstep .out{font-size:calc(.84 * var(--section-unit))}
  :is(#services,#audit,#process,#playbook,#about) .section-head{max-width:calc(48 * var(--section-unit));gap:calc(1.25 * var(--section-unit));margin-bottom:calc(3.5 * var(--section-unit))}
  #services .section-head{max-width:calc(55 * var(--section-unit))}
  .services{gap:calc(1.4 * var(--section-unit))}
  .svc{padding:calc(2 * var(--section-unit)) calc(1.8 * var(--section-unit));gap:calc(1.2 * var(--section-unit))}
  .svc h3{font-size:calc(1.4 * var(--section-unit))}
  .svc p{font-size:calc(1 * var(--section-unit))}
  .svc ul{font-size:calc(.97 * var(--section-unit));gap:calc(.75 * var(--section-unit))}
  .pstep{padding:calc(1.7 * var(--section-unit)) calc(1.5 * var(--section-unit));gap:calc(.9 * var(--section-unit))}
  .demo,.twin,.ebook,.about{gap:calc(3.5 * var(--section-unit))}
  .book{width:min(22vw,420px)}
  .process-explainer{gap:calc(1 * var(--section-unit))}
  .process-explainer li{padding:calc(.6 * var(--section-unit)) 0 calc(.6 * var(--section-unit)) calc(1.2 * var(--section-unit))}
  .process-explainer b{font-size:calc(1.2 * var(--section-unit))}
  .process-explainer p{font-size:calc(1 * var(--section-unit))}
  .team-specialists{gap:calc(1 * var(--section-unit));margin-top:calc(1.4 * var(--section-unit))}
  .team-specialists span{font-size:calc(.95 * var(--section-unit));padding-top:calc(.8 * var(--section-unit))}
  .figure-caption{margin-bottom:calc(1.2 * var(--section-unit))}
  .support-detail{margin-top:calc(1.5 * var(--section-unit))}
  .support-detail svg{max-width:calc(36 * var(--section-unit))}
}

/* Sprint 3: usability only; retain the approved layout and type scale. */
@media(max-width:1024px){.menu-btn{min-width:44px;min-height:44px}.navlinks.open a{min-height:44px;display:flex;align-items:center}}
@media(max-width:700px){.card .btn{max-width:100%;white-space:normal}.card .btn>span{min-width:0}input,select,textarea{font-size:16px}.ticker{min-height:44px}.ticker .x{width:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.book,.ticker .lbl::before{animation:none!important}.book,.btn{transition:none}}