/* Local process stories, using the hero's building and Talomuisti mark. */
.service-loop { min-width: 0; width: 100%; color: #123353; }
.service-visual { padding: 20px 12px 0; background: radial-gradient(ellipse at center, #dfe9e380, transparent 72%); }
.service-diagram { display: block; width: 100%; height: auto; overflow: visible; }
.service-node-label { fill: #35566b; font: 600 14px Inter, sans-serif; }
.service-person { fill: #faf8f3; stroke: #35566b; stroke-width: 2; }
.service-person-new { fill: #e3eee5; stroke: #2e6647; }
.service-desk { fill: none; }
.service-route-guide { fill: none; stroke: #8fa7a7; stroke-width: 1; stroke-dasharray: 3 7; opacity: .45; }
.service-stream { fill: none; stroke: #c06422; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.service-question-stack, .service-reply-area, .service-phase, .service-route-caption { display: grid; }
.service-question-stack > *, .service-reply-area > *, .service-phase > *, .service-route-caption > * { grid-area: 1 / 1; }
.service-question { margin: 0; padding: 12px 16px; color: #193e53; background: #e8eeea; border-radius: 12px 12px 12px 3px; font-size: 15px; line-height: 1.5; }
.service-question > span, .service-answer > span { display: block; font-size: 11px; font-weight: 600; margin-bottom: 7px; color: #526c79; }
.service-question-stack { margin: 0 30px 0 0; }
.service-question-stack .service-question-1 { opacity: 0; }
.service-reply-area { min-height: 132px; margin-left: 22px; }
.service-answer { padding: 14px 17px; background: #fff; border: 1px solid #c5d2cd; border-radius: 12px 3px 12px 12px; align-self: start; }
.service-answer > span { color: #a34b12; }
.service-answer p { margin: 0; font-size: 15px; line-height: 1.6; }
.service-answer small { display: block; border-top: 1px solid #d7e1dc; padding-top: 9px; margin-top: 10px; font-size: 11px; line-height: 1.5; color: #426454; }
.service-wait { margin: 0; align-self: center; color: #526875; font-size: 16px; line-height: 1.65; text-align: center; }
.service-route-caption { min-height: 48px; text-align: center; margin: 2px 0 0; color: #4a635f; font-size: 13px; line-height: 1.6; }
.service-loop-board .service-memory, .service-loop-board .service-answer, .service-after-caption { opacity: 0; }
.service-controls { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 20px; }
.service-activate { font-size: 14px; gap: 16px; cursor: pointer; }
.service-reset, .service-pause { color: #405e6f; font: inherit; font-size: 12px; background: transparent; border: 0; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; padding: 8px; cursor: pointer; }
.service-controls [hidden] { display: none; }
.service-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.service-status:empty { margin: 0; }
.service-summary { font-size: 13px; line-height: 1.65; color: #405e6f; }
.service-loop[data-ready] .service-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.service-loop-board[data-static=true][data-enabled=true] .service-memory,
.service-loop-board[data-static=true][data-enabled=true] .service-answer-0,
.service-loop-board[data-static=true][data-enabled=true] .service-after-caption { opacity: 1; }
.service-loop-board[data-static=true][data-enabled=true] .service-wait,
.service-loop-board[data-static=true][data-enabled=true] .service-before-caption { opacity: 0; }
.service-handoff-questions { display: grid; gap: 8px; }
.service-handoff-questions .service-question { padding-block: 10px; }
.service-handoff-questions .service-question-1 { margin-left: 24px; }
.service-phase { min-height: 54px; font-size: 13px; line-height: 1.6; text-align: center; margin: 0 0 14px; }
.service-phase > span { align-self: center; }
.service-phase-permission { color: #285d3d; font-weight: 600; }
.service-handoff-answers { display: grid; gap: 10px; }
.service-handoff-answers .service-answer { padding: 12px 14px; }
.service-handoff-answers .service-answer p { font-size: 14px; }
.service-loop-handoff .service-person-old, .service-loop-handoff .service-old-name,
.service-phase-initial, .service-phase-changing, .service-phase-permission { opacity: 0; }
@media (max-width: 1000px) and (min-width: 761px) {
 .home-sharing .home-split, .home-continuity .home-split { gap: 38px; }
}
@media (max-width: 760px) {
 .service-loop { max-width: 560px; justify-self: center; }
 .service-visual { padding-inline: 0; }
 .service-node-label { font-size: 22px; }
 .service-question, .service-answer p { font-size: 14px; }
 .service-question-stack { margin-right: 12px; }
 .service-reply-area { margin-left: 12px; }
 .service-controls { gap: 4px 12px; }
 .service-activate { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .service-pause { display: none; } }

.service-example { margin: 0 0 8px; color: #526875; font-size: 11px; text-align: center; }

/* Board workday: the question becomes a task on the desk, or a reply from Talomuisti. */
.board-stage { padding-bottom: 0; }
.board-diagram { margin-top: -4px; }
.board-direct-guide, .board-return-guide { fill: none; stroke: #bba78f; stroke-width: 2; stroke-dasharray: 3 7; }
.board-return-guide { stroke: #658977; opacity: 0; }
.board-packet, .board-packet-paper, .board-reply-packet, .board-happy { opacity: 0; }
.board-switch { display: grid; justify-items: center; align-content: center; min-height: 100px; gap: 8px; }
.board-switch-hint { font-size: 12px; color: #526875; }
.board-switch [hidden] { display: none; }
.board-switch .service-activate { width: auto; max-width: 100%; padding-inline: 18px; }
.board-switch .service-reset { min-height: 48px; }
.service-loop-board[data-enabled=true] .board-switch-hint { visibility: hidden; }
.board-outcome { margin-top: 12px; }
.service-loop-board .service-controls { margin-top: 0; }
.service-loop-board[data-static=true][data-enabled=true] .board-worried,
.service-loop-board[data-static=true][data-enabled=true] .board-stress,
.service-loop-board[data-static=true][data-enabled=true] .board-direct-guide,
.service-loop-board[data-static=true][data-enabled=true] .board-backlog { opacity: 0; }
.service-loop-board[data-static=true][data-enabled=true] .board-happy,
.service-loop-board[data-static=true][data-enabled=true] .board-return-guide { opacity: 1; }
@media(max-width:760px) {
 .board-diagram .service-node-label { font-size: 20px; }
 .board-switch { min-height: 96px; }
}
.board-calm-arm { opacity: 0; }
.service-loop-board[data-static=true][data-enabled=true] .board-arm-left { opacity: 0; }
.service-loop-board[data-static=true][data-enabled=true] .board-calm-arm { opacity: 1; }

/* Small annotations belong to the moving objects, not separate content cards. */
.service-loop-board .board-speech rect { fill: #fffdf8; fill-opacity: .9; stroke: #c9d2cb; stroke-width: 1; }
.service-loop-board .board-speech text { fill: #4c6470; font: 400 15px Inter, sans-serif; }
.service-loop-board .board-speech-answer rect { stroke: #b8cbbb; }
.service-loop-board .board-speech-answer text { fill: #466453; }
.board-speech-link { fill: none; stroke: #9cafa8; stroke-width: 1.25; opacity: 0; }
.board-switch { min-height: 82px; }
.service-loop-board .board-outcome { margin-top: 0; }
.service-loop-board .service-route-caption { margin-top: 2px; }
.service-loop-board[data-static=true][data-enabled=true] .board-reply-packet { transform: translate(98px, 180px); opacity: 1; }
@media(max-width:760px) {
 .service-loop-board .board-speech text { font-size: 20px; }
 .board-switch { min-height: 82px; }
}

/* Handover: the people change, the company's memory stays in place. */
.handoff-diagram { overflow: hidden; }
.handoff-direct-guide, .handoff-memory-guide { fill: none; stroke: #9cafa8; stroke-width: 1.5; stroke-dasharray: 3 7; }
.handoff-memory-guide, .service-loop-handoff .service-memory,
.handoff-new, .handoff-new-name, .handoff-bubble, .handoff-task,
.handoff-query, .handoff-reply, .handoff-archive, .handoff-puzzled, .handoff-thought-link,
.handoff-answer-link, .handoff-phase > span { opacity: 0; }
.handoff-arm-left, .handoff-stress, .handoff-worried { opacity: 0; }
.handoff-phase .handoff-phase-old { opacity: 1; }
.handoff-bubble rect { fill: #fffdf8; stroke: #c9d2cb; stroke-width: 1; }
.handoff-bubble text { fill: #4c6470; font: 400 16px Inter, sans-serif; }
.handoff-answer-0 rect, .handoff-answer-1 rect { fill: #f4f8f2; stroke: #a9bcae; }
.handoff-answer-link { fill: none; stroke: #9cafa8; stroke-width: 1.25; }
.handoff-phase { min-height: 46px; margin: 0; }
.handoff-phase-access { color: #285d3d; }
.service-loop-handoff .service-controls { margin-top: 0; }
.service-loop-handoff[data-enabled=true] .board-switch-hint { visibility: hidden; }
.service-loop-handoff[data-static=true] .handoff-old,
.service-loop-handoff[data-static=true] .handoff-old-name,
.service-loop-handoff[data-static=true] .handoff-phase-old { opacity: 0; }
.service-loop-handoff[data-static=true] .handoff-new,
.service-loop-handoff[data-static=true] .handoff-new-name,
.service-loop-handoff[data-static=true] .handoff-puzzled,
.service-loop-handoff[data-static=true] .handoff-thought-link,
.service-loop-handoff[data-static=true] .handoff-question-0,
.service-loop-handoff[data-static=true] .handoff-phase-lost,
.service-loop-handoff[data-static=true] .handoff-new .handoff-worried { opacity: 1; }
.service-loop-handoff[data-static=true] .handoff-new .handoff-happy,
.service-loop-handoff[data-static=true] .handoff-new .handoff-calm-arm { opacity: 0; }
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-question-0,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-puzzled,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-thought-link,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-phase-lost,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-direct-guide,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-new .handoff-worried,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-scratch { opacity: 0; }
.service-loop-handoff[data-static=true][data-enabled=true] .service-memory,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-archive,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-memory-guide,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-answer-0,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-phase-ready,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-new .handoff-happy,
.service-loop-handoff[data-static=true][data-enabled=true] .handoff-new .handoff-calm-arm { opacity: 1; }
@media(max-width:760px) {
 .handoff-bubble text { font-size: 19px; }
 .handoff-diagram .service-node-label { font-size: 20px; }
}
/* A small hand demonstrates the action until the visitor chooses a state. */
.board-switch-hint { font-size: 13px; text-align: center; }
.service-activate .service-tap { width: 30px; height: 34px; flex: 0 0 30px; overflow: visible; }
.service-tap-hand { fill: #fff7e9; stroke: #123653; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 85%; }
.service-tap-ring { fill: none; stroke: #fff7e9; stroke-width: 1.5; opacity: 0; transform-origin: 13px 7px; }
[data-service-loop][data-ready=true] .service-tap-hand { animation: service-point-tap 2.8s cubic-bezier(.22,1,.36,1) infinite; }
[data-service-loop][data-ready=true] .service-tap-ring { animation: service-point-ring 2.8s ease-out infinite; }
[data-service-loop][data-paused=true] .service-tap-hand,
[data-service-loop][data-paused=true] .service-tap-ring { animation-play-state: paused; }
@keyframes service-point-tap {
  0%,60%,100% { transform: translateY(3px) rotate(-9deg); }
  18%,32% { transform: translateY(-3px) rotate(-3deg); }
  42% { transform: translateY(1px) rotate(-7deg); }
}
@keyframes service-point-ring {
  0%,16%,48%,100% { opacity: 0; transform: scale(.65); }
  24% { opacity: .85; transform: scale(1); }
  44% { opacity: 0; transform: scale(1.7); }
}
@media(prefers-reduced-motion:reduce) {
 [data-service-loop][data-ready=true] .service-tap-hand,
 [data-service-loop][data-ready=true] .service-tap-ring { animation: none; }
}

/* A persistent before/after selector makes the two story states discoverable. */
.service-state-switch { display:flex; gap:8px; justify-content:center; margin:0 auto 24px; width:100%; max-width:330px; }
.service-state-switch button[hidden] { display:none; }
.service-state-switch .service-state { position:relative; display:flex; align-items:center; justify-content:center; gap:7px; min-height:72px; padding:10px 14px; border:2px solid #c6cecd; border-radius:12px; font:600 16px/1.3 Inter,sans-serif; cursor:pointer; box-shadow:none; text-decoration:none; transition:background-color .18s,border-color .18s,box-shadow .18s,transform .16s; }
.service-state-enabled { flex:1; background:#e4e5e2; color:#465456; }
.service-state-enabled img { filter:grayscale(1); opacity:.75; transition:filter .25s,opacity .25s; }
.service-state-enabled img { width:144px; max-width:100%; height:auto; object-fit:contain; flex-shrink:0; }
.service-state-switch .service-state-enabled[aria-pressed=true] { border-color:transparent; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(125deg,#f2cd9d,#be5a19 48%,#edb375) border-box; box-shadow:0 3px 12px #b85c1514; }
.service-state-enabled[aria-pressed=true] img { filter:grayscale(0); opacity:1; }
.service-toggle-state { display:flex; align-items:center; gap:7px; margin-left:16px; font-size:12px; min-width:76px; }
.service-toggle-track { position:relative; width:30px; height:18px; border-radius:10px; background:#79837f; flex-shrink:0; }
.service-toggle-track::after { content:''; position:absolute; left:3px; top:3px; width:12px; height:12px; border-radius:50%; background:#fff; transition:transform .2s; }
[aria-pressed=true] .service-toggle-track { background:#b85414; }
[aria-pressed=true] .service-toggle-track::after { transform:translateX(12px); }
@media(prefers-reduced-motion:reduce) { .service-state-enabled img,.service-toggle-track::after { transition:none; } }
@media(hover:hover) and (pointer:fine) {
 .service-state-switch .service-state:hover { border-color:#123653; transform:translateY(-2px); }
 .service-state-switch .service-state-enabled[aria-pressed=true]:hover { border-color:transparent; }
}
.service-state-switch .service-state:active { transform:translateY(1px); }
@media(prefers-reduced-motion:reduce) {
 .service-state-switch .service-state { transition:none; }
 .service-state-switch .service-state:hover, .service-state-switch .service-state:active { transform:none; }
}
.service-state-switch .service-state:focus-visible { outline:3px solid #bd591c; outline-offset:4px; }
.service-state-switch .service-tap { position:absolute; right:12px; bottom:-20px; width:42px; height:47px; pointer-events:none; filter:drop-shadow(0 2px 2px #12365325); }
[data-service-loop][data-interacted=true] .service-tap { display:none; }
.service-state-switch .service-tap-ring { stroke:#b65416; }
@media(max-width:400px) {
 .service-state-switch { gap:6px; }
 .service-state-switch .service-state { padding:8px; font-size:15px; gap:3px; }
 .service-state-enabled img { width:136px; height:auto; }
}

.service-switch-help { min-height:24px; margin:8px 0 12px; text-align:center; color:#40576a; font-size:16px; line-height:1.5; }
.service-state-switch .service-tap-hand { stroke-width:1.9; }

/* One document journey: original name, Talomuisti, destination system. */
.existing-stage { padding:8px 0 0; background:radial-gradient(ellipse at center, #dfe9e380, transparent 72%); }
.flow-node-label { fill:#35566b; font:600 14px Inter,sans-serif; }
.flow-guide-before, .flow-guide-after { fill:none; stroke:#96aaa8; stroke-width:1; stroke-dasharray:3 5; }
.flow-guide-after, .flow-memory, .flow-name-new, .flow-old-1, .flow-old-2, .flow-received path { opacity:0; }
.flow-name-old text { fill:#526875; font:500 16px Inter,sans-serif; }
.flow-name-new text { fill:#123653; font:500 14px Inter,sans-serif; }
.flow-power { fill:none; stroke:#db7c29; stroke-width:3; stroke-linecap:round; opacity:0; filter:drop-shadow(0 0 3px #efad67); }
.service-loop-existing[data-static=true][data-enabled=true] .flow-memory,
.service-loop-existing[data-static=true][data-enabled=true] .flow-name-new,
.service-loop-existing[data-static=true][data-enabled=true] .flow-guide-after,
.service-loop-existing[data-static=true][data-enabled=true] .flow-received path,
.service-loop-existing[data-static=true][data-enabled=true] .service-after-caption { opacity:1; }
.service-loop-existing[data-static=true][data-enabled=true] .flow-name-old,
.service-loop-existing[data-static=true][data-enabled=true] .flow-guide-before,
.service-loop-existing[data-static=true][data-enabled=true] .service-before-caption,
.flow-new-1, .flow-new-2 { opacity:0; }
.service-loop-existing[data-static=true][data-enabled=true] .flow-file-accent,
.service-loop-existing[data-static=true][data-enabled=true] .flow-paper { stroke:#c06422; }

.handoff-phase > span { align-self:start; }
.flow-question, .flow-answer, .flow-answer-outline { opacity:0; }
.flow-question text { fill:#123653; font:500 16px Inter,sans-serif; }
.flow-answer text { fill:#123653; font:500 16px Inter,sans-serif; }
.flow-answer .flow-answer-source { fill:#526875; font-size:11px; }
.service-loop-existing[data-static=true] .flow-power,
.service-loop-existing[data-enabled=false] .flow-power { opacity:0 !important; }

.flow-question .flow-speaker, .flow-answer .flow-speaker { font-size:12px; font-weight:700; }
.flow-answer .flow-speaker { fill:#a64b12; }
.flow-answer-outline { fill:none; stroke:#d47729; stroke-width:2.5; stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 2px #e9ad64); }

[data-service-loop][data-interacted=true] .service-switch-help { visibility:hidden; }

.service-query-caption { opacity:0; }

@media(max-width:600px) {
 .flow-answer .flow-answer-source { font-size:13.5px; }
 .service-loop-existing[data-static=true] .flow-file { transform:translate(62px,16px) scale(1.15); transform-origin:118px 44px; }
}