/* CABPLAS procedural motion component; isolated from the site's form rules. */
.cp-motion{--cp-navy:#0C2236;--cp-orange:#EC5F18;--cp-muted:#748297;position:relative;width:100%;background:#f7f9fc;overflow:hidden;border:1px solid #e0e6ed;border-radius:24px;box-shadow:0 24px 70px -30px rgba(12,34,54,.22);isolation:isolate}
.cp-stage{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#f7f9fc}
.cp-stage canvas,.cp-stage video{display:block;width:100%;height:100%;max-width:none;position:absolute;inset:0}
.cp-fallback{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cp-fallback img{width:84.375%;height:auto}.cp-ready .cp-fallback{display:none}
.cp-toolbar{position:relative;min-height:58px;display:flex;align-items:center;gap:16px;padding:10px 23px;border-top:1px solid #e0e6ed;background:rgba(255,255,255,.94);font:500 11px/1.3 system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--cp-muted);letter-spacing:.08em}
.cp-phase{margin-right:auto;min-width:0;color:#4c5c71;white-space:nowrap}
.cp-loop-label{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.13em}.cp-loop-label:before{content:'';width:5px;height:5px;background:var(--cp-orange);border-radius:50%}
.cp-motion button{width:34px;height:34px;border:1px solid #dbe2ea;display:grid;place-items:center;padding:0;border-radius:50%;background:white;color:var(--cp-navy);cursor:pointer;flex:0 0 34px;transition:background .2s,box-shadow .2s;line-height:1}
.cp-motion button:hover{background:#f0f4f8;box-shadow:0 0 0 3px rgba(12,34,54,.035)}
.cp-motion button:focus-visible,.cp-motion input:focus-visible{outline:2px solid var(--cp-orange);outline-offset:4px}
.cp-motion button svg{width:13px;height:13px;display:block}.cp-motion .cp-play-icon{display:none}.cp-motion [data-state='paused'] .cp-play-icon{display:block}.cp-motion [data-state='paused'] .cp-pause-icon{display:none}
.cp-motion .cp-time{letter-spacing:.04em;font-variant-numeric:tabular-nums;font-size:10px;color:#8190a2}
.cp-timeline{position:absolute;left:0;right:0;bottom:0;height:2px;background:#e4eaf1;overflow:hidden;pointer-events:none}
.cp-progress{height:100%;width:100%;background:var(--cp-orange);transform:scaleX(0);transform-origin:left center}
.cp-seek{appearance:none;-webkit-appearance:none;width:180px;max-width:22vw;height:3px;border:0;background:#e2e8ef;border-radius:5px;padding:0;margin:0;box-shadow:none;cursor:pointer}
.cp-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--cp-orange);border:2px solid white;box-shadow:0 0 0 1px #EC5F18}
.cp-seek::-moz-range-thumb{width:8px;height:8px;border:2px solid white;border-radius:50%;background:var(--cp-orange);box-shadow:0 0 0 1px #EC5F18}
.cp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cp-motion:fullscreen{max-width:none;width:100vw;height:100vh;border:0;border-radius:0;background:#f7f9fc;display:flex;flex-direction:column;justify-content:center}.cp-motion:fullscreen .cp-stage{max-height:calc(100vh - 58px)}
.cp-motion:fullscreen canvas,.cp-motion:fullscreen video{object-fit:contain}.cp-motion:fullscreen .cp-toolbar{flex-shrink:0}
@media(max-width:680px){.cp-motion{border-radius:16px}.cp-toolbar{padding:8px 12px;min-height:52px;gap:10px}.cp-loop-label{display:none}.cp-phase{font-size:9px;letter-spacing:.03em}.cp-seek{width:90px}.cp-time{display:none}}
@media(prefers-reduced-motion:reduce){.cp-motion button{transition:none}}

/* Video-based motion */
.cp-stage video{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0;background:#f7f9fc}
.cp-motion:fullscreen video{object-fit:contain}
/* Rebrand: dark brand film — stage and fallback match the new palette */
.cp-stage{background:#0C2236}
.cp-stage video{background:#0C2236}
.cp-fallback{background:#0C2236}

/* CABPLAS click-to-fullscreen — 2026-09-24 */
.cp-stage[role="button"]{cursor:zoom-in}
.cp-stage[role="button"]:focus-visible{outline:3px solid #EC5F18;outline-offset:-4px}
.cp-motion:fullscreen{width:100%;height:100%;max-height:none;display:flex;flex-direction:column;background:#0C2236;border-radius:0;box-shadow:none;padding:0}
.cp-motion:fullscreen .cp-stage{flex:1 1 0;min-height:0;max-height:none;aspect-ratio:auto;cursor:default}
.cp-motion:fullscreen .cp-stage video{width:100%;height:100%;object-fit:contain;background:#0C2236}
.cp-motion:fullscreen .cp-toolbar{flex:0 0 auto;padding-bottom:max(10px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.cp-motion:-webkit-full-screen{width:100%;height:100%;max-height:none;display:flex;flex-direction:column;background:#0C2236;border-radius:0;box-shadow:none;padding:0}
.cp-motion:-webkit-full-screen .cp-stage{flex:1 1 0;min-height:0;max-height:none;aspect-ratio:auto;cursor:default}
.cp-motion:-webkit-full-screen .cp-stage video{width:100%;height:100%;object-fit:contain;background:#0C2236}
.cp-motion:-webkit-full-screen .cp-toolbar{flex:0 0 auto;padding-bottom:max(10px,env(safe-area-inset-bottom))}
@media(max-width:400px){.cp-toolbar{gap:8px}.cp-phase{white-space:normal;overflow-wrap:anywhere}.cp-motion button{flex-shrink:0}}