/* Snímek 5 · Metodika: tok výzkumného designu z jemných čar, uzly a tečky putující po cestách. */
.s-method .flow5 { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }
.s-method .flow5 g[data-step] { transform: none; }
.s-method .f5-path { fill: none; stroke: var(--les); stroke-width: 2px; stroke-linecap: round; opacity: .75;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.5, 0, .2, 1) var(--rd, .1s); }
.s-method .f5-path.out { stroke: var(--tmava-terakota); stroke-width: 2.6px; opacity: .9; }
.s-method .is-on .f5-path { stroke-dashoffset: 0; }
.s-method .f5-dot { fill: var(--les); opacity: 0; transition: opacity .5s var(--ease) 1.4s; }
.s-method .f5-dot.t { fill: var(--terakota); }
.s-method .is-on .f5-dot { opacity: 1; }
.s-method .f5-ring { fill: none; stroke: rgba(154, 68, 48, .38); stroke-width: 1.2px; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s cubic-bezier(.45, .05, .2, 1) var(--rd, 0s); }
.s-method .is-on .f5-ring { stroke-dashoffset: 0; }
.s-method .f5-tick { fill: var(--les); }

.s-method .n5 { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; border-radius: 10px; color: var(--grafit); }
.s-method .n5 .k { font: 600 22px/1.15 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sedohneda); }
.s-method .n5 .h { font: 700 34px/1.12 var(--f-nadpis); color: var(--les); }
.s-method .n5 .s { font: 400 24px/1.25 var(--f-text); color: var(--sedohneda); margin-top: 6px; }
.s-method .n5 .num { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 4px; }
.s-method .n5 .num b { font: 700 48px/1 var(--f-text); color: var(--les); letter-spacing: -.01em; font-variant-numeric: lining-nums; white-space: nowrap; }
.s-method .n5 .num span { font: 400 24px/1.2 var(--f-text); color: var(--grafit); }
.s-method .n5 .m { font: 400 22px/1.25 var(--f-text); color: var(--sedohneda); }
.s-method .n5 .m b { font-weight: 600; color: var(--les); }

.s-method .n-teo { left: 120px; top: 520px; width: 290px; height: 180px; padding: 0 30px; background: var(--piskovec); }
.s-method .n-teo .h { font-size: 40px; }
.s-method .n-teo .s { color: var(--grafit); }
.s-method .n-br { left: 530px; width: 470px; height: 214px; padding: 18px 30px; background: rgba(247, 243, 236, .94); border: 2px solid var(--les); }
.s-method .n-obv { top: 336px; }
.s-method .n-stk { top: 690px; }
.s-method .n-int { left: 1130px; top: 530px; width: 270px; height: 160px; padding: 0 30px; background: var(--les); }
.s-method .n-int .h { color: var(--mlecna); }
.s-method .n-out { left: 1510px; top: 510px; width: 300px; height: 200px; padding: 0 30px; background: var(--tmava-terakota); box-shadow: 0 18px 40px -22px rgba(154, 68, 48, .7); }
.s-method .n-out .h { color: var(--mlecna); font-size: 33px; }
.s-method .n-out .k, .s-method .n-int .k { color: rgba(247, 243, 236, .75); }

.s-method .sync5 { position: absolute; left: 530px; top: 573px; width: 470px; text-align: center; font: italic 400 24px/1.2 var(--f-text); color: var(--les); }
.s-method .sync5::before, .s-method .sync5::after { content: ""; display: inline-block; vertical-align: middle; width: 70px; height: 0; border-top: 1.5px dashed rgba(47, 74, 58, .6); margin: 0 14px; }
.s-method .ph5 { position: absolute; left: 108px; top: 926px; margin: 0; padding: 4px 12px; border-radius: 4px; background: rgba(247, 243, 236, .9); font: 400 22px/1.3 var(--f-text); color: var(--sedohneda); }
.s-method .n-stk .k { letter-spacing: .08em; }

.ov-mini .s-method .f5-path, .ov-mini .s-method .f5-ring { stroke-dashoffset: 0; transition: none; }
.ov-mini .s-method .f5-dot { opacity: 0; transition: none; }
.is-static .s-method .f5-path, .is-static .s-method .f5-ring { transition: none; }